{"_id":"@material/tab-scroller","_rev":"1663-bb13629a34021cd5f4c6b0f1e72fd224","name":"@material/tab-scroller","description":"The Material Components for the web tab scroller component","dist-tags":{"next":"4.0.0-alpha.0","nightly":"12.0.0-nightly.778a0e8a.0","latest":"14.0.0","canary":"15.0.0-canary.423edc3dc.0"},"versions":{"0.38.0":{"name":"@material/tab-scroller","version":"0.38.0","keywords":["material components","material design","tab","scroller"],"license":"Apache-2.0","_id":"@material/tab-scroller@0.38.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"daab111b7c0b7e26dcb4602e4e56e8fd2f33c6f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.38.0.tgz","fileCount":16,"integrity":"sha512-KL4iA6xOmJs3MKw3ApAmbZvY4WtcvHyIm6AMnEYPulq4CXVkg/hEiavnHcLSJnRYQNSAGKqv75Hk1OfsrV/wqg==","signatures":[{"sig":"MEQCIHl9A6WqW+34mUna+nQ7w9CDbMsUdtaGUSIdSRBWr1UaAiAmLhDfMaHO6S6ZkhmJf18wEAsPhuJjwgjTyGSU9x+MYg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbX0XpCRA9TVsSAnZWagAAFIwP/2Sv3QGCuS+ZhEVrDote\nzOZw6Jklz6c20MjWXzyDRGraHgdhUdunsu9JyJkFgyK8KpE0S/j7OkM/RHlq\ndomWH08m1PfU1+saWV1bNgt1htc9QSeSOy38UXDlibhqrNUdXFdeQJqPlZo+\nYtzWBwyBZqu4ayeZE52Ps14xoFjYFGyZEobstVPk3IJiUiNgaE+1bKbT9B6D\n2FPUV+sVItI7y8hBXvvCqWFYgKNHi0s9SR8qcfWOe4avhv7puaqM6plhpRXp\n0c5UmFeTHOjQfqQpqvXl7PqQPTtx05Nu4CRKjx6ACE4UhqU6Ted4fp+dQguD\n7Hp7cDPotEGrFBkm8F0kYxbaQSiOuSS1JRGPJcL46fNP1eLAY8oXFEGYtM62\n8PDRqH7o0sbKzZub0LkZ20lu0DdJ0wIeQbJ6gg7RQaaQvfhF7Ycv4uvz07HQ\nil9OGCV7vorUmW7cDjSgOQE+Bz1ELaVvMWttWqNf9RoQIHP1Z44cMe9pcVRI\nhDU2HUZr+hqd+NYwwXZw6OsaLsFEO+8dkl19YyKcL5wfkfCNSxQeDRjeKpD/\njLu50rjUthieem1K12kk8hUl3B6/1AOHxTmEiuF+m/LrxI96odS3sVwSZnc/\nx+Cvpi9rwevBFKRm+Oim3dbmSGQ5wEDfv6HmM63mp8x64gXnpjmYTPWTG7AU\nS5cN\r\n=bE3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/tab":"^0.38.0","@material/base":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.38.0_1532970473625_0.1570412875021019","host":"s3://npm-registry-packages"}},"0.38.1":{"name":"@material/tab-scroller","version":"0.38.1","keywords":["material components","material design","tab","scroller"],"license":"Apache-2.0","_id":"@material/tab-scroller@0.38.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"79a4d8aa58981a61bba25e5a2e0b494ca2920473","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.38.1.tgz","fileCount":16,"integrity":"sha512-tEIyn34yn50d63yuYUC8dU6zZaAL/hsdFiavJx2FOkWT0irgrRZEXea8BepR7EzbbvgzRjnKHOddxyj2R90WcA==","signatures":[{"sig":"MEQCIGQgL2WrKtZk4E87HbMjJAEG+Mr+57Lp7stqcjv7FyOPAiAyIAd/0fwqdEweeVkfp75Yb1TsmFThbjFuYE1zMHLq7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140441,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbceyICRA9TVsSAnZWagAAFPIP/i9RvqHHc7vuE0zTIBfc\nuTuOWt7O59wzD9nUppBYfWGmXefO+qZ5Ipm6Dm7CxwriLkvZhgdSuB55isQE\n2aU1RThPYMsSEWChj7rx9lkixz4clOB/RuC8yG20i8ci9XKrVe5rR0lPTq0G\nDIu5ycp6IWeZlOeWLoF5dNIfNMMD88/UiRg6znkfR7duwswKYbfQYrOukqlx\n40wcKleHbk4Fl1FVaA02NcV3By+uqhVCv6O0Pg0EMdBWgGxNwFzutc2KTMYJ\nlEpqwTVEYHSFMiCjz9kkyMoqCtXZ3EAX/0OfOwX5Arcv7iEVIk0p+Zfg4bPL\nBbvfHUHqkaA8/ybwLOLS1rufL/P+HWLPg1IidHj/8kdgWlreuv122YW10fzn\ndAx0QCE/cHIMkSuPhDYFlznsv+24XEiSTLnmWzt/g40LdrEE15nxDMAuKbKg\nQG7xjNBGOZtFttaWyjUVPwxAKd0Ewd9uojGiohyBd7V6FDg2XqZl8Fvy2WLT\nWnnN7PjlZ6KQzrgRtp4kIpW35bSF7JVx+DgnM7WGyY/R7H6q84nipfe6Poh+\nQsWFsVuR1nSLDL6h1B0/sUT9ODQxP7TP89vWNzVsQ+kPNpRvN8TdHfB8vify\nuU3PU6YpEQ5Y0VHeYtmEyMyncIHmSnmUDBZYjdFsJGy/xogRpJNqubrs82NK\nMrHy\r\n=4Wk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.2.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.38.1","@material/base":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.38.1_1534192775670_0.1936954804027704","host":"s3://npm-registry-packages"}},"0.39.0-0":{"name":"@material/tab-scroller","version":"0.39.0-0","keywords":["material components","material design","tab","scroller"],"license":"Apache-2.0","_id":"@material/tab-scroller@0.39.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"127396750e88efa0d9a092e46f95e82730c3d7a6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.39.0-0.tgz","fileCount":16,"integrity":"sha512-QDHGZeFhi9pMt933Uausw0vLJlg61zlFMeSP2VZQM9dmGV2Dwu1tg7HxKsa0TqghE6o8vnpY/5+yhZRyr+jlPQ==","signatures":[{"sig":"MEYCIQC9T72CC8ijjCB1Wq4FbhQY4MzFIgIJRjsa9N1HLdx2+gIhANtZQTt+i7KweUgtyur8yv69Q1RK72RwcLcSzG91wwDS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":140445,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbdZVdCRA9TVsSAnZWagAA1eIP/irNUtSivA1THk5wVW0/\n1sVKEJhx6pTPgskTDuHvc+VI8i6ov3I28m4nLwaKKOa5jFcy7SatacEsaOPU\nC6UqP73EJ0uWJNFXlRjbVd9nEsKRbNUGMpmK8ln9u8fAPj0Itn4yno5lLuc2\nWW08jSdIKaYLuWUBIsVaMCEezVIFqM1nMFprvJQSIP41pASODya2LarNOfqd\nB6bsML//o6BTSITmpL14n4sYsGmZqFCWw4SAiMSl2DFXDIzBk7ZE7H9fSvVf\nxvOFAQVz1WMEsGpidypGtMeXex2iDsWQlVhmtwKHABOuQdrge5tCeDXqHz9l\nwBjO6xYTVJFscAqT4o0TMni0pIGJIY+VuKUwUGhjTIc/PvJeMaqoVpXTaA0c\nvCf/uf7eSh9uGBjCB70pkQsgZXLmGEZgmQliY8O5Zfu8TCeVpyq0cxSRNNO8\niXb4vkdMa/D36RceHoYMlPeK9ZPdOZTPsEKTWOan5VNAIyPxPY1bP3moeyEN\niQr6bljYp9Y90IcOCrBWVEbEUDaqjKyqXXFT3WlaILRKGypIjBVS/veaA6uu\nQAr7nUWUQl0znTIHaHkHd6aeBSxhuICQgoOTYPkGQe45Uf4SH/oWO6hMX3jt\nzB3I/qbkRjQUbwAhBC4xMRuI6NeuxfuJAHGCpmuGkEMHh1bYOp53mFLuNdWa\nfTUM\r\n=pOIr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n`getMatchesProperty(HTMLElementPrototype: Object) => string` | Returns the appropriate property name for the `matches` API in the current browser environment.\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.39.0-0","@material/base":"^0.35.0","@material/animation":"^0.34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.39.0-0_1534432604943_0.767940849797391","host":"s3://npm-registry-packages"}},"0.39.0":{"name":"@material/tab-scroller","version":"0.39.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.39.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8226e68d318c902a11db5d0aa30c4f41371bfb15","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.39.0.tgz","fileCount":16,"integrity":"sha512-JZ4ZFJ1NVKI7ZAjYntxDt/eAPqs36bEopSVu416iD/AYNQBhFJdi1qXzLAppUPDHs6GAfa5fKdOlW+xODlMPjA==","signatures":[{"sig":"MEUCIQCiW8GgPYWsSKrwbFM+vMcP+Va4dberrJgwJtRjonRSEgIgdGwc48ZJ6N6CBogthpPMNKNZW9LUTIB34oVICXE8Bc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbhDe5CRA9TVsSAnZWagAAPvEP/0NlWZiix5WdfkhDrb7V\n2aAxoXEElm/KjRd5dX+/X9w5Fw/w9bJxIsukmOJBts2okgESGfGK/2V4f2au\n3yMH2qowSL85v/zZmwRxTyA7JOSDjSaw8BUf8nVu1kOeVcBvtpDDAgLCQQWC\nh1MKQ+uS8TR2gSZegx6lYHKIXBuKD+KHveSH8wftMmfF7nQDmfr84PTF5e2z\ns8S3GSNYHb6A3n2ekxmdwRuYQrkm4Q+T6V2T9GaQQKsFQytI1wj2uEXv1M0j\nhpNCGDC12XrUVKZc6Qx6XdkJnT2yCSuoLZWJwq+LHYAaDEPc+U0kv9CSe/QI\nHr4YeVyv9EgSyqPlKUZ6pGYdtPQ60v+ft6LWsG/FxnL1YiKbHNxGAhKer7J9\n0MnKYdp1zQf6lwLGdcmyRRj8y17RFIReBm07SKOukHVRrsv5/BHPR7cG37TJ\nZ3/Q3VSEjEmNPmFtPhLZHJy4kAoOP69c02oCzuvUXTB4aYFo7UAu1XnK8H8P\nKgN4c/Q64Lz/LiTGcWByB0vJSHaTu0N7LmkMMFErz7/mIQGl3JfFbJG2QgfY\nnSf97eRqxEmiCqZzfKydI2osRR9zbhvwyBgwg857iLoftTOLdJJpYJjUHGuD\nN0IcwoSFA9cYGhoRmA2JtLdEVORCOmN1fQrQFOPPt+Lx43DaU+xRGXiU4B5X\n+SyQ\r\n=54T3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.0","@material/base":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.39.0_1535391673356_0.5779939743450611","host":"s3://npm-registry-packages"}},"0.39.1":{"name":"@material/tab-scroller","version":"0.39.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.39.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"cff8d8e6dbe3ac6f64a87e9b616059c9e66b2ee8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.39.1.tgz","fileCount":16,"integrity":"sha512-m8wAZNgd7mBhmDLSJR3JI5oIJ8JxKKZHWk/WLSFkCT5aNrrlqGC36GXItVxuVPk2bV8tMcNEDhj2qWSW9n0d+w==","signatures":[{"sig":"MEQCIFz31FFcA7o2cqPvga8KrO5H+DzRYou3YaisqQ53Ia+zAiB9o7W/Csaqdj918Chy3tydRt7xbmI46sj3iPxE7lCaBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbibUACRA9TVsSAnZWagAA06AP/0V+FlW3Zje8OnaJSlVz\nPM1e9H98KZcMM6hWQ1l40MRWA+SUgshAJgpYpZN0UbmeYEpKJGHdCbGB5XnP\ny1hrPcmjP1nWoBZdBgmPpoMc5rbPr+ToLx+rWuEvVRTVrpM0fPzyizXschmF\n+mNDG3HBua4o9dwpa9TigVOLnbte7iZ/UpMmXp60+E1J7KhXJrRZpGOpN/6A\nzHsXhYIz+oY0YKwZX62j8ASwN4642QknfnpOEmfqdbNaYZD/RRu2Lt+ExHH3\n+nrw9JpGl+5JS4YdB1lgWV85eR/H0XU9vECbVRkHzpV1cerevAcN8FA5PBj6\n01ycDypciPsdUXsEGto+5oKDjxzH71y/gW9hwcSfT6lwSNRXOF++xDmjRTIJ\n8VjWPjkeqbn6p09a+pFMxg2HSWotAX1sPOB7vsFYhZfmoCLtOzrRQRKDLjPh\nxmZWfHNfaNgvs/eYP7YnE70t7d2Mb6bH2aixkz4i8cPWojOWeyBeQYdHYE5a\nfmY62NHjqm4vdvSGjHxz0EZ07FpyJ98qFvQgfFV4xfOVMwFBMzKfw3qrUBlh\nVp/F3X31lvO6wARUG43u2D8qxX1Y6s7odKfTu2JHyPs5WJYtJnWOjkPmzrxv\nEp4ZYCPtHgf1FcZJLQUbNyszj6aYt9zyqlj5VptYCpxehV8oYrRz9CocuC4B\nmydk\r\n=b2pQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.1","@material/base":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.39.1_1535751423520_0.9890764371621266","host":"s3://npm-registry-packages"}},"0.39.2":{"name":"@material/tab-scroller","version":"0.39.2","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.39.2","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"71dc3872abf7001f7cfcade5f63f95be599c6e4b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.39.2.tgz","fileCount":16,"integrity":"sha512-3lA48sViwMSC6fu2totC9INfVUL1J685uVq+AZ624gn0OL4rmunsg97C77WITVUzeplabShRj4vk+6lPPU/R3A==","signatures":[{"sig":"MEQCIGu6Pr/fGwMXpR2sv4F+AtHC4ONUUfu0T7AHABSCY/M8AiA+RDokwn/Dh7BEtAVj6XJ/VhpT+uLLen3hCF2elrGBUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/OLCRA9TVsSAnZWagAAKt4P/R9sEO1zWvMf9Ryg7Ra3\nrepQ8ox2YqENZQoU+fdUzqKzcdz2S8o5HWJsW8J9XTndAFyAhNLlHWaJjp3M\n/xOzorRw5M1LvyqLS+r7nong60m87WgJjoKY9/wrRhdzZ5NAXHce5IfD06ew\nSEiufPYBBAvd+jO1pXzrbpBi3oqZgY1lHT2qwoiHvjx1oFpHI2Sc9r0OEKEJ\n114I8Qm4CUO29FLwHmSJ07lLb0s/VHMEGeW8En1MHTeFxlITt/M1T89jtgz+\nf1/s1jfncUKTQu/+7gHlKPSYKGM237T46cQumhdMUTFU/f7mfMv4IBTI8Y8L\ntI5M2SPxBgtaex5AlPMYYUN/iwSuTGBzsMiQJNvpeMzzhqINhpqdXyS23MV1\nTfaxn1h8YgF2sc+GEX5Y6UwPc3n2eqFikgyYId9y31fCpj94zavTOzR8XX8C\ntibP9DlVuv8nYq/C+uXHzf5JOiimVyN0wyWM0JHyHCdkCbc3Y2/Ib0TeHY+1\n+E20ua7jEe/KFjj/QS9nF4TM0Ejpr4Rm2a1YpKo5uO3r2YLO3rdzuBp8rMfO\nPSfZ4zSyTFWADf9lBvrDcloKsDxwBfT2AMre4neh05nrkHH/5zmAY8l4MJSw\nQBJHW69Ql+Cy+rAA2PncxGZ9ny+DLI3hh7dBOhpU4SkxcgI9foui2k2qRXTK\nOtxa\r\n=p3QO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.2","@material/base":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.39.2_1536684938243_0.17367681730052564","host":"s3://npm-registry-packages"}},"0.39.3":{"name":"@material/tab-scroller","version":"0.39.3","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.39.3","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"7991a15d8948c9777589bc5f934d3652b7cca3ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.39.3.tgz","fileCount":16,"integrity":"sha512-CHWKuzhvR75P6pliLbwBkSIWDbC6YH+DLQEETTmeZXtLXDdvPpNpycfxBRdWK8KuDfhmWOjji+jCx4QYAmILNQ==","signatures":[{"sig":"MEUCICR9sYiP9ijTzgMbVv7rqZuwrE9N2wdeWXTQGgMgDCkdAiEAvNL8CIg5p85Dg+dMQRQdX7gppMPSotsFnpSB7vqAM7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbl/kmCRA9TVsSAnZWagAA9IgP/jJmKdVWPaujL4pJODdQ\nbasREosY9yk4cFPiUQj+K3WfSxQ2Fbb2w+TXhAXBTLfjA44ZlfhYtnOSqdYw\nXLAXxFu7fyET8kMRxiX2MbOHLoqPRJl73NcpxqRdQuym7AznJQdtYIX0X5ZP\nRh24sd5ZKCwhvjSyfNrz9jnq9+YvldgAlqPJ5osfVrQqcktEvaX/l+GYRBId\nGvC6sKDxDSDpaoj2f8S6K4/uA8G6LtojhfV+ZEz9x7niEpUeg5HRp50+HWa9\nYf2IXaxevEftBBhZNB3QnpqbPsJQoQhsEDaNUVgfafCeh9DHezKjnnQePvJ9\nvV+HV+/tvQfnHDW9am6h9U30tPzhCgbX8pDRHCoP7tk/ys5ygSSh7h9CnQ8i\nRac4UYasKvGUEL/C48Ward2YSX93/fyzxJZ/hzZsvrDGtFr/zZ+C1TtJrMiS\nheDdGeMq1DL6x+3OGvhm2vdPYjhVTZUbDebJjjdYQFl6efzXiJpWYwXPg6rx\n02lw0eSYfqvhh7RaCHSYblZ1ckxSfKTm4znZGZsY3LqkgYeZAjsIWqPcQH8Y\n/ktkgeipqpKb4x2epqelExqPNte+/OO2GF20iO5V0i2LuKeRQqqsfZeMVBcW\nDqjFqynpPaow35/joTmbLt5U2CXWUvlcQNHgZh70azK+5Kjnxe9utokpzyLh\nNqI5\r\n=AiuX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.3.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.4.0","dependencies":{"@material/tab":"^0.39.3","@material/base":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.39.3_1536686373866_0.4064436579979531","host":"s3://npm-registry-packages"}},"0.40.0":{"name":"@material/tab-scroller","version":"0.40.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.40.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6dc7774b6ba5f2080354e0c3f9accbc092fcf02b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.40.0.tgz","fileCount":16,"integrity":"sha512-rZvr5LreQIItZSPxkANY3+MQKJ85te4VUS5lnsBbTQRtNk7+u3dDYxosROjQQZZ6D9f1xKdW8iRGsJq/bDai2A==","signatures":[{"sig":"MEUCIHrriqI5INo5/lsKX8ZOKGf8vN+/nKemWKjUP/sbPdx9AiEAwIXjW7zyKQBvUri8kC5QepnoLxkNngzZrsrFs0cBdzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbqULTCRA9TVsSAnZWagAAsVgP/2YW9YUaHlYhDyqASEFQ\nH+GJ4ju8EIiz7LQXa9UGGBpM40qpxFNEsm/60ukShW1zxkxtgbN4NgDKj6/T\nHfcUptM1b/u5vkxjuotbbU7ApdyKiEUPqXmrx6W6PnXXn+/0Jzl1iQsMygay\nbfQISJydew8Xa9BEr5jUJJCx8lQGrR2emoVl0qsAbevYN89GvoiSwJYdY45Q\nHc1SdmVdsA0qQoJwdnVLkH3CvUc1sdH2C/R+xJHNaYGAiPn7af+RuLK63Aks\n3Yk0gC6ZfGFnItzXwWtCWp/tSfZA2lTO9MGLoUbBrsrGiERX1WogzXC2SWEf\nnP7zt9UZ1th/yldBGGECRlDs47SCFLPnOM0VfXf44/5/5ehxKqE5eKxXfQEs\n0FUWIK2WY82xIIFo243Lsuwxp4EWRJUi5+nfV2RJp8QpG4Ujoi8LqucNJMlj\nlIq4L7ZcrzK4x9G1n3VUjXotD2O/bJkDrpDSFltkj5mVF6j+IXTJQWFbiKwQ\nce8TFz75gcrrSXEhxI0Gb8TYAQMNWOU5Q+nxfilws0XO/RGJVgkMNZ0zBNAn\n+5uoiqzE3dAEFRcUlRjdiW+L6C2oaJqMO+6v14fRVMbnXN5KQ1UerapxmqGg\n+vmidvi/zQ4o46ttuduUmmulvWQlSUbiaEuP4v3MGhsrRQ2nTwuoIuoESjcK\nAY3e\r\n=jhRE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.9.0","dependencies":{"@material/tab":"^0.40.0","@material/base":"^0.39.0","@material/animation":"^0.39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.40.0_1537819346411_0.6607110930686224","host":"s3://npm-registry-packages"}},"0.40.1":{"name":"@material/tab-scroller","version":"0.40.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.40.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"41dd9086ce0f6a3294464e6e6c51e6794b7059ee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.40.1.tgz","fileCount":16,"integrity":"sha512-nDkBcZTQOwQpqBkTTffF+74Yw12zwA4ieJM5X+eDOVBhO3GqBDYIkRcX99QAy7WbO1jhr5B7t880OaHiFv2H4A==","signatures":[{"sig":"MEUCIF5EN6hCDaOME2Px/j313ulDjDqAu3wqqRqy1FGgSTMoAiEAwI/6hXyhXHR+DLAFgMSaiYOL92Jlu/39He0jCWi6Jv4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151847,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJbu8j/CRA9TVsSAnZWagAAQTQQAJAvWnU5DHHM/BVZwg15\nriJ7a3dpqeVNklFNC71ctQjB8V8apbrxAmTm0H67a7BvaJ2AQJftrkQVJROu\nCFs2JKpzTNHqugYanq9p2x4hTZrmhOVXkc3/9U3YhQ5wYQlAE8jgYARjgA9f\n4OgjKg0scaNZoexXCOML5syrjcr+rPJJ9/7myicFEGfgb5227EENNzFbz4uz\npXurfcl8KJDc93Bcx6/WZlLfw5xX86A1fGE95LVN2BiaBzceelmH78psoMpo\nloOx10QSVJ1vOw46OMov6fqaed5bAevUScgBsJ6RSKeVmhu6UcLDO6za1Whm\nTL/qmI/e8ln8uCrt14S5aPwPpomABaLLmsCCDIYv4CCkzJ28dTBcxIV+NYsE\nRxk5yko44VsTeCwCKXWVdd3dl+gfHZCO+ezR+IunLaUvXdVv0C9s9c8txpdZ\n6ZcjtZ4GI51KqVY3D42kjUKpvfx7ogw9g+c8YtlbMnw49JH3ejJ5tJP5vm5Q\n8/LvxV/yCrhN+xFB3Vf4I37W1OKpq+dduqjPWGNgNleYjLjlVYbnDhgmu0ds\ntKfZXoeCxI6G5kpufMJBINP01epX4tDRby73ju91bMBjqHfnfvVk6nndi05G\nsLpn6oaRpdfTjVufu1NomcoRY4WaBhWTxTiKbmZ+WwHo3TR7a9nZEAC0M52H\n/Pwc\r\n=07RY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"index.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"9.11.1","dependencies":{"@material/tab":"^0.40.1","@material/base":"^0.40.1","@material/animation":"^0.40.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.40.1_1539033343263_0.8021985871323649","host":"s3://npm-registry-packages"}},"0.41.0":{"name":"@material/tab-scroller","version":"0.41.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.41.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8978def0d2ae4672d99e0b199de55473f120a522","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.41.0.tgz","fileCount":16,"integrity":"sha512-dyxaxLLSiDigIUVJ0BwqnKBtBseALrOhmPgvk6BQVDbynnRQ2bOvaNZ7cbpe3A0i8zOQGOoTZF4i9D38/iubcg==","signatures":[{"sig":"MEQCICpbBY5UwzaZBrA9vCwB9vuL3h6Dh+hK8ruoA+fCjycYAiA9JCg56fnNh5QEE4DmtCCANNUj578zoT2Uixj9hqMfPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151862,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJb12wLCRA9TVsSAnZWagAAPNgP/iq99MSBl/WSt8b0JRbh\nCY7uVgjhGuQTtlUpsYvbBEiz9vulPIGcY7c0p+car4OfyGBXMR8Asr5BGgyK\n65vHCNnpOLWlWHimCx5HycIr5V03TEzv0zU6xWHJaTrxvwuzfe7zOYMeEgQu\n8XnMCkovLi3KXT7ZUgXSwEeQFKiFMsM3pqnduK6CtvtmXBbNh1S3o4Wifegp\nHB9R2u4FC5zLXosIz+X9ZhpGjz9Vw2ZBLm7944DA5yfFsy6HIYzNwdAdiJlC\nbgF1gpZxx/1MZCnDmhh9+IS1cBijJe/UfQMqwrluLfA15fWtFdZ+xqpvOVjs\nMepviEOqtJfYH6+NYHD+aPtBlJAVgSff1XI2KO+0ndAF1NTqbHRYOx9GSynB\nBv7NTVKfnBf/YwEDtugQLuuuFlLeW9abtQ/pB94e4/gkiOwq3hBRKI5nuJPZ\nNXe0m3jIexmMQ4WVblE5uWoU1rwC1mQkCSHsttdEKrx495mUH+KVxQM/qQec\nDnx97r6okR7cr3BPxcgtlb9e8/GWbvOkW04x59oF6Qqw3Bt4UuGlQRRvqcKW\n+J7Z0UpGqpZ9+9o0Jb9dUF6PG9kbNOfbjvJSzsvXx+SKbjT4rWmHorUmQw1M\ng8Ftrab1bsmfSSw37H0B/H/3xFWt0zkULn0wJ29TWbz12Z3NAaYNrfghnqKH\nfy1x\r\n=f9yZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"8.11.1","dependencies":{"@material/tab":"^0.41.0","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.41.0_1540844555108_0.00910693847391908","host":"s3://npm-registry-packages"}},"0.42.0":{"name":"@material/tab-scroller","version":"0.42.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.42.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1a3d44efda8f3cc85b4f7e17095d647c22d13b35","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.42.0.tgz","fileCount":16,"integrity":"sha512-V7LGwm05+SmsFfw65mEHIXTJZtxxSYuczId1A1UKN1WaVWLz0EWPECYGlk/QMM3ZIQxpcsSLV0q5MeJUZip8Kg==","signatures":[{"sig":"MEQCIAN1Z8LPFO59gL02j8WcXDsvY3GcT23YUNMdxLm2C10eAiBo1D7fBv+iZ1Gb9PeiATxOIU09usEjjs5Zgtjl7qvTnA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":151869,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcBwXVCRA9TVsSAnZWagAAZAwQAIbW3ebcZP2JdGOLtzd6\nzLIn+qiuLUosHKgXtXnmw3NoLVdL3+nO51wFBUlGqrVR/VRze8ZYqfzfq2gb\n+c1Z6LJ94v2ZJnK91H2Pp76bTH55CGoU2digosO3H7B+G735+tbcKNwApmv6\nRns+iK+IvsYyOP6vcT1edrO4JWnfOsMtMfLn6GuSQLz2GKP/oruwLgUe9bpL\nn4YFaa4Bx8XKOPgg/skte/rJC0dLg63D2f1TnSKs5Vs7R3pP5iKR/zQpVby6\nyac9KoEoy/9v8PNBCwNgUcjK+d209GsVayKpo/AQN8fpYollSnAEN4VCP33d\nMG4f0Ss9p2nnAjoZ27uaZDadkCfMwbDXct9rdtA0Jm2QCiRArxb/pEYkMVzG\n9sYr6Amu2wHbm6/xH3ePYpkVFSXFS8V38OXq5kM/8lwarEbcIQIX1Pp9M/Sv\nJhIfWFiEodReFzHkyHaYPX/K53bxDEX2LvLCsTjEc6FxZFUCmb/a0IKmAEgo\nwC8xhLTJgPbWw/nntAggV/xKurQWEFumwBn+8sTTm63eMpsAKhH7kjT//Yet\nVCafYrRSsbSdDi5crOe09n0DTJ2Tn/n6SpFMFAo3/KX2o+oUAKpnZK4ndZWQ\nZWGAqUBd91LDzKQkMmpXurz3oJCFYgf3MLmXWF8nFil3LL1Xa3d9s0YwLuNR\nEWUe\r\n=39rA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"williamernest","email":"williamernest@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/tab":"^0.42.0","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.42.0_1543964116473_0.2815510155116967","host":"s3://npm-registry-packages"}},"0.43.0":{"name":"@material/tab-scroller","version":"0.43.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.43.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"1ee5df34077dc6645e10744f2bc51c918b322138","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.43.0.tgz","fileCount":20,"integrity":"sha512-QCGJ2ty1wz/A5E+0P8MP3QarmiS1SVp+VhZ1o8WHdhg6K69+ErGlHTAEJN3AE0vT1DkjB0bzjP8ljlj2g+eJMA==","signatures":[{"sig":"MEUCIQCxD5105lyAblVKXjXYQJOKYThuuuN2523LX9mcWeuwdwIgScOIpUeaqSVifZygU66Y2UzSYoIk1vyZvCWIVAhM7Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390181,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcM61VCRA9TVsSAnZWagAAAZwP+wWBPBJdn0V8C97uTFYI\ngQPWJkA9l4WP5bRBb9Sy129mHGCzyjIVt0KtO2tw7pKUbUws/cbRhkIlYCLC\neEinVtqu/awtqXS/6eeEU9w+98cq5RJyH9/IG9SYwXMDEveeMmZpYg2svM+S\n1sGAji4w/w2ixCSBJgR/e+Q9WZ1WwrseJCO65/mA5OMPTdw/psTfhU2AyiRQ\nFwp98ZHMucHhacs3XUPXN5WSDSmeWo6wvlGdilMOuhmp2alynkbJMZKCjHiY\n6gxq50ncMzq4WYRQeVW1jnYq2mwMnsV8FIFP8MWyDNGtIpam1mYfN4tLvJ1U\nBEGVlUo1GScZmCSpNAObgfRundmgBYyp/ORYcUUM1XDUnZUEzOWPzYT1k489\nNRzLbReoZLBLk/LfxLMJpG9paceWVCKMnudGgn3aVKfxoQTydpWR1DCD8GWu\nQJCBi2ak1bRBjpTP7+eEwdA7MuLjnGeXasnps+61hm04NfepWbeWpjPHIpvh\nL+/VZEEptYZ8FCi8j8sRdOxbyvGOrVVj/6fUMbwaKhFVko/HkOT+8yYmkO7p\nx9EdanjjFASGVkylMrLEHdmP+/p8k1Cs9ggJ7+4ZvOkE2b6dcfVNdmD0BkeK\nwWiguw6qFgRjO5VHXkJP6X9vCawYwjwxCLjNvLWSKl1vSbdCKHColItTAIIG\nsdF9\r\n=x24f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/tab":"^0.43.0","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.43.0_1546890580761_0.4546638077931857","host":"s3://npm-registry-packages"}},"0.43.1":{"name":"@material/tab-scroller","version":"0.43.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.43.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a146848c714b6f3e2c75ac2d5374981941071ca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.43.1.tgz","fileCount":20,"integrity":"sha512-9FuNTxLO0jqnr17VvDFiGlLcZMSltGo+3G57eEHql67ZFAZ+zy+hiK/38/I45a0Dq/qtDbdEU/YjwZM+vplo+A==","signatures":[{"sig":"MEUCIFzI16UchXi702QI35G+LYoKPW5Fadtcn1O8j76cpE8IAiEA9Fyz/QB/JlJu/vsizGiIjaBb9L+hlVDhzn5zHnakBwM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcR5x8CRA9TVsSAnZWagAAjXUP/iEyKFyf/UqZRsFAOyRo\ncw2jMFxFtcLGKdIbJbJ2VtrYb9kX031GV5SyLiU9DhY6H4C7kWpGNjokXeXn\nRCYIquN6toZxZ+koG9ZlV2m9KFGUybZiMeWYeo+jH3F61e3Xw+kC5mpI8scm\nJCtfra7/aDHkEGT8IMP6gDyZc5wEnCBchHmnhcVxtCZg3z+tP/RzRYd2B5Xw\ncqc5JpOTkyxidcqYK395lc3SOjiIrjcx4zz2xRj/AYdPgCUh1bb87DNQMLIq\njfLn9LxALOcIbHznbEOdp5r0H6HWTMzg+0qeCqTvSzGPgNpA7/InYUCx5awe\nrb4LN4EwhSNG3lXpdDy6N4eRynw8iNZYGqVauZnpkeGYTzhl57fd2p4QYtYM\nk7NSNKj+Nn8YSNoyXnwlE9J29FU3IexmYA18BLcD+fRX4WqVoeNRNE+XQB4V\nduPNzdhYEl6lH31Grvsu14o2JRXsOQF5tQfRlbtKWoiEwI3bQ260wThRVocE\nLcO/iZqWNqEVEMBX0FIRoP/nhCuMRIqg3p0WzWWXMfdxCAkjj/wdZJirHyol\nXh5cx7+067krcZ/9RUwL4XgwIR4RDPbREC5oanHVd/W3qChw7dqmIuDC6EEZ\njf4JOxVuEy36t42LPjD47QSruFiRqu3wb+xccTyZbYicDnVxnDoESh3yemQH\nerG+\r\n=jVdr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.13.0","dependencies":{"@material/tab":"^0.43.0","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.43.1_1548196987606_0.49689016072173353","host":"s3://npm-registry-packages"}},"0.44.0":{"name":"@material/tab-scroller","version":"0.44.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.44.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"82d092ed45d2ee9d82038bed318e6ff6bdc36dad","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.44.0.tgz","fileCount":20,"integrity":"sha512-Ufd3NWBN11kY2oA7bGmTYWGP1uz2mq0tfDM0JOiqoLMgD7y3Z18kmxnpq2qkg1vi4kvix28hBYGGMfLlq9rGDA==","signatures":[{"sig":"MEUCIEmV5F45HBlYdmUw7uVcKIeaocy+lMQAmqOOlrJVpPofAiEAkxwpcmDcqIEZGQXdBfwDx2RrA7I2zntMsmytm6Fixss=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcWINpCRA9TVsSAnZWagAA/9IP/RHfvOeOV1QTxFj8frAv\nJfVenVeEb+NjFr31IDrohO/VMWTm+GuZAcnc0erLdMGNeylNFlYN/zx3Y1aP\ncSyj+/i8H6i/W+eVcwGhZ9q3Wzikm/EDdBPLgkKYnhbH/eBLgVUJwQnMKSN7\nig31uAs0fdp7V6e/lb+YT/Sl/7B2YlOQjXQhUkCeIMDcto2yPDXCddhISu5k\n63UhSnV+iHWF4AtjhM4Bff5RMNe5wRzHSKkzjD4bBMfHO1B0Vjh7bj3utJVV\nAD7VZQ2Y5Ldq+QkOYrf2YEAxNde5x1VpTlsNiUv5SaRs2gtJWVBAvXQ0bk+K\n1YoeC2mhz1qEh/nNcwiYA0uhGaoHhrfvvxu8KK1lMlVVazedbOOlqMbBphhE\nR3Pkt9yTHwND+kx/0ewC8xISt+/FLdE5S7RY34kuyTPVUj4d4NanFVjbdkjz\nLpsxT9ixXgchP4TEWpMoFEBm9W/AFNX/O2i7ySgMIDpnc/lCaNttcGOU5Hcv\nxcTUmnXN6NAaI+AY6EH+sVF+sd45mBWIjP3K/8gNSnV64AERW2+MAUNUryti\nIxYTN0dErawm0l04ck3g0PwB1Ab4p6YdJbB259JPz5dU0psyc8kJmKeEh0kE\nt74QfUxUC6zFhROmxEW5/DFmP5xfOgARspTQqoZSR9ATfd2nBl1BTc846Kov\niX1U\r\n=PMaK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.4.1","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.12.0","dependencies":{"@material/tab":"^0.44.0","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.44.0_1549304681233_0.5962873723209581","host":"s3://npm-registry-packages"}},"0.44.1":{"name":"@material/tab-scroller","version":"0.44.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@0.44.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"37d957f3bb58dba94a495c4390126d9caadfb7cc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-0.44.1.tgz","fileCount":20,"integrity":"sha512-FO5NAhJZOJc7opCsXOGYrHu0xXCKWf81456vSMH7/mLV1muuVi8IV6mfxv9Dp2uPmDKF8XGcBDku1auWNb/Z7A==","signatures":[{"sig":"MEUCIQCS4SC8blXFyhJ4cU9K7tXRcOFybxO6rh1u8mZYaZXg7QIgUsA5s4S322VZLEL1SqgKr57UQhV8QuYBcCLSunegu+4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":390141,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcbIs6CRA9TVsSAnZWagAAZEkP/396a12TiJSGRT9rxxt3\nBhxudEzuiL4zysKBv/T36ZDZ7bZbNfcrhf1YasHePSJ3XDVMZIfjIM+tn5uv\nIu+5Z/DHSDQnetTCCY6veX+qiztlcMEPMne/TNVTSTy4dyWhK8GzSqcl5rvp\nLB9hgeV9y/P2He2+CbP70uVAXBduzBIlpkSaYSaxiBYWhPSJjsktrmTlmKRy\nn20Kqx6czZBASY6PK+ZbSN8EufzWdtp6bT6fd/XPlKlHVkjEzJajBKDBVrvh\nYigxNO4nkjhJnDXmU1vmtP+xrxXZ7PS05JaNiMbh66KP72puxmOaLfi0lPGd\n+tTmD+AR+WWKtfVDnOL8cQG+qnSWOvq35uAiwQTWO09VZR/fNdsD2opFSegZ\nvxoCgLXL/LyHfPJOSMdUA1HXJhsuY+fcPokLdvIDR2SNmc696gxvN7jL+1l5\nGUqN4cpTn4Bh7Bble4VxjD2ZvH4K3TZDdvML++BpZe3qJ0SlezawGcEG74md\nvpSr/v+MuC+okDpof/GpV7gzw7YT5uVpmHDeXtKmM2/8xTXXabyXevaskUTx\npdiIcGYEfcsEPLUXcPbHHGrQ9Sr5kkT0oh3my2iNzKQ5tUzpSx6ajLjWkS+4\n7FoNcI1e/hYX6sUyCC/mbMmMjE5THaMkEPPfdZwTZOGk7NhLNAyZI6HZM8yt\nWDvb\r\n=bbwO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab scroller component","directories":{},"_nodeVersion":"10.14.2","dependencies":{"@material/tab":"^0.44.1","@material/base":"^0.41.0","@material/animation":"^0.41.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_0.44.1_1550617401930_0.9688672260928717","host":"s3://npm-registry-packages"}},"1.0.0-0":{"name":"@material/tab-scroller","version":"1.0.0-0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.0.0-0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"6a0784200c9617ffef6b79b5385c7d298c795e0a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.0.0-0.tgz","fileCount":45,"integrity":"sha512-/gEAmUZbK5NAAibrnkTZUO7p7/aQByWg6VxB6Dr04jMwGDXyp4s1I5wQYR/pg4O3uhK00ppKwJ0C8kjxUuOCOA==","signatures":[{"sig":"MEUCIQDJbrUHYOP0fFahlDcJoQ5iR1f6PRMJHoyvgOdKWFQA0AIgbpb4ZJwJBoaRHu8k5O36slEOEeNYzOMfW8qsP32hhbQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcdySNCRA9TVsSAnZWagAAvwkP+wWN/gNuvt+S0IjqAW/x\niQYqN3E/BKNJf3Snhxrph/+oKOsmLuzV5INwf5qCujumgC0LUdb0ASZb/8Po\n2q7d3Gvwvl8vIlmd0uIOUvIEyHetzF67gkbCaXkGFpbC+OdbtgrgQsI7+iJn\n4ESVdU5JhPPFxvb+RRdHeMexIV73Zfz9Bo1s3Wha2MaOfdFbcgayLozBP46j\nUVcm94nf2NnzQnW8rRTnRBUaqM77eEGQmf0y75cgv9mCyFr1ihBBlLpngOO0\nycL/r3XBUIq9MDeiYPjG10S3Xh+Qvs6tLyg4MZCMi/kRIo97OA3LUGwOUve/\nGNts19Mcyauz3cq+R+/pX2FlQoCjRRGIRtfFcIh3ulzV16rAWOjac1M9b3Yn\n28Tl1CBXTZygGkZCT8Rxr7eVRv7negOWh5kMCzw8AvlxM4vyNTyckEG06FkA\nPVm3TePm21ITDdBXPqn6IHM+BAxlbNYPeh4lZmmjFD1A1PZFbegOY3TNTJ2o\nnEkiCXDBPXmBhQLaDdjX8O2jaOqTqfYcHTnlnOBselxq2SdR8c8nvxIk/7NN\nL1puZcc8M5jd/Lxu0uD7nTXX7q0TAeNi04PWnCbkYCxpwd8hGWPaFRx7OWxc\n8Xq2HTNU0NKJ2gy/i1pySdI2T3MJH0oVGGkU+EpEFRhYsiCq8/1oqf3fAzUb\nAyES\r\n=yAaZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n","_npmUser":{"name":"acdvorak","email":"acdvorak@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.14.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-0","@material/tab":"^1.0.0-0","@material/base":"^1.0.0-0","@material/animation":"^1.0.0-0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.0.0-0_1551312012519_0.14482694707481714","host":"s3://npm-registry-packages"}},"1.0.0-1":{"name":"@material/tab-scroller","version":"1.0.0-1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.0.0-1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"48202de14c32da770493f3239eff9abb4f8cdcd7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.0.0-1.tgz","fileCount":45,"integrity":"sha512-7O8uGzrEj03hKU9pZnhUJfnvsXMgwnGO9gVbErMRGv8DxDCLioeH2ppqI92tAOSQRHR+gx4uyz5QemTI4cCCZg==","signatures":[{"sig":"MEQCIBGDs5uhd6W1uonJk0NfTH2E0skBpHu9zLb5WgKeFXcJAiAO+9rd/mQiAYqJc4y6SZcDFFNmIA6Fck4XyqXvWzsh7w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511462,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcfbXmCRA9TVsSAnZWagAAbMsP+gLuzMnV9+3sajEy2g9t\ntivCN0ej5qGZwMsGm8KsRSSdLaxKRklIIMW01Sf+UgWAI/6+bauSl1cEZeUJ\nQ0TEC/NJVDiexAfjVTMG41PqaXr4kTTWsNuFH8s2zQGi1BQzCGTcgKxSHGz9\nIVRK5VR40CxNt2RmRm1/TEjeL1eQtnVyGndxB/N2I9EpG2aQizijTRFCg6sF\nm5eI2+tbURO0Oklnoe8B0FaCwp5cZmGWztoUb/9B+atzrlHu+aAgRMesp7xL\nW3WwZoHWwGTrkiVJA/oRnksQ6es4mG5aWuRpsaj8jJgeB47q1EpOkRgPpaiD\nPnZeDNUur2frfpU919XQpEl2hAjkE6frMYM2ZjZvUiiZ+oc7E+LkxsI6NSHc\n3bn0DYpyikjnbGB2hWG2owmQEsYrha6B43r1dpMXZGJWI68yZNKYm3SuXA1P\nBWJ6r8e8KocnOPgU6iPN/QeiNpHcMd4PUjFeNJO+ytwS7LemY3QfWHyGIIPW\ns0Dd5DzKhTZhywQbDemAc3YQnzZjzr77a24Y89kX+O17PFg+j5s8KVPu5eFh\nVEMHMhT53NfWkgnl+pwaZTsJXQPjxRy3AMOW0pE1VEJdrvr1BNY/7uNfcW6J\nRZ52CeN2EMt0vufO5oS809VOcCu6MJ+ajOFhGHr6iUDneZh6sEwOV2hAId30\n2G8K\r\n=Af2s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0-1","@material/tab":"^1.0.0-1","@material/base":"^1.0.0-1","@material/animation":"^1.0.0-1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.0.0-1_1551742437914_0.16677027919767773","host":"s3://npm-registry-packages"}},"1.0.0":{"name":"@material/tab-scroller","version":"1.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f45259b9d0c7a66e43d11d3f247b2dcfdf5cbe2b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.0.0.tgz","fileCount":45,"integrity":"sha512-KqLHbyUr9ehrL3ey1wqj+2vadEnkqean+p82IniyIfYHtRSF5Tw35VMG9Amu5dCYnsfWZ1aDSEu3aLEZQnTt5w==","signatures":[{"sig":"MEUCIQDeTZCsv6C35fkOxyHRaodnoeJDDhrb6Vf7LR5vQW/gFQIgZUudCQjVj/NGv8yQhvv5Aigtnjzj25SrO7Xx8RPDSW0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":511452,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcgDbgCRA9TVsSAnZWagAA9KsQAJK95bTSMWREz2rKhjPJ\nOE1m2RGHTcvjBHuAJrwyIN2paP6zRwao7cM7/nM7Nr2/EE4eLM9oQcReUpib\nFMzNQlPEw46XRZGidD0rZitswEtHZJIH8VVXFFa9lj8/OdWUnoEz6n83cXNv\nkHcjo2CPAfWAZ/tdDuHp2Tc8azXkhxrqBmczA6lgxW+O7yx/Bk3h/p2hyKmf\n9ShPSzb5+743KPx80G8sG9qNwkPfvMqTrEKGSCifveXu3PLkrDQ0q60KHJn5\nsJKFxwkRb7kSOUS8fIw9jStQJKI/aRUZE2UcPOwtScA41epd2ohSJYz4svxo\n/J4Tr+R/DW8jT68AS3yxOIY6INlG0TUHEqvOtYsWOZJ/V3uEafBLVO+mNkzH\nqigoD1oxG5tzaS8F2kV0RhpD9oThxxrzBjakHy8+78yLAgEfmmN0AxdUfgej\n8txVM1Nm6r1QBWvhodAMnJ33Wnq/nv21QKJn59IF2hH9VHITJNNPZFMkrwAF\nXomtqLZVJCoSHaCGKol0dORpKsPFe/LqM8fE89oiOuCw9OfpKxJNxI4oAUle\nlPWdRbspym9HLBRyEKfeIoh/g2hmrUfQf3/vNfousaM5yZ+lxdtXMHLTMvYf\nt4NXyf+4CYCiqSkFIPNICeE2hsiIb0Dlc8yyIX3oPfrxRhqMlalb298UYvXF\nDJtT\r\n=sSgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.7.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.0","@material/tab":"^1.0.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.0.0_1551906527414_0.7753238540594982","host":"s3://npm-registry-packages"}},"1.0.1":{"name":"@material/tab-scroller","version":"1.0.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.0.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f1555dc56307cf699ae4ebb548ccd3f0dee3baea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.0.1.tgz","fileCount":45,"integrity":"sha512-WpOw710NbLlx3W/ZqAmeoBCon+6u6/PpoSusrh/Qvxats9hajc5bQUSfjm/grzEhZcqfyXN/bCoci3lBIbfWvw==","signatures":[{"sig":"MEYCIQC/HNpjNCOa8OnAH0yukJq3UK9nNjuPgI601nWIBFg58wIhANv1Wd9+6kkB+xvVZ+NBqHQkbZHLifx4zezQ5g7BJ45U","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":418860,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJchtxDCRA9TVsSAnZWagAAozYP/3kWWF3n7ZYPzl4X7dSu\nfqFtR7soYkk7dvOuCMgcXfgFWzi4K8M5GbUnGreliPhqfcVJ+BGjFp2T3q/x\nlMZBKfJVm25OnoGQU5BELP8k10P0MaNkAyfnUDTw7ZjRXfsOsdUKPcOABXci\n1Cp8fWAAdfRxqfw8D0FExH/L5kS1i1Kl+XYR8PCTF8pvHQ1MAgSFYnX0Nz8F\n65tkFMbqmKugFPbJsKGAMNIJv2fIj4x9OwonGDZEX1NFCxBQLhtmLJXyo/LU\n8AjaXL+Wc4B4cYx1xxK7NPH+bMFpTvhnyzCjTKIlWiiovoTjGMczl/iHul3/\n/ClFt9Ujj7dm4C5zSkEIo4o8hieTkYkymZekiqdLWizPT1DKol5i5d5PJvUj\n+74HyNtURnllQTVhJwrDbqy/LpiWoqRpxM4qMS3pkpLW/nBBHAJxHfOSOjDu\n+0WFK9YomlrIRejuTe9+chVnkdZKpMs/Klo6yroZUOeksIf6RAm6YNrl9hKB\npjwMtMwJtwKnUBjdxqKoQBok+noi+yOGUMlUdxQ90NvVdgjBC2QBAK2XtqYZ\naNFi9oWrPJjlEMtt8rfNNySFyUm+T0NOFQ/x3VPQwyROOSJA5AxY6c3WRVKh\nx8RqwmPoj1LEGiCNjxea5VjI2Hbym77mVMOQx4+mTv3Ae1SLh+chUORmYIXh\nVYah\r\n=VhQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.0.1","@material/tab":"^1.0.1","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.0.1_1552342083435_0.8378749056135935","host":"s3://npm-registry-packages"}},"1.1.0":{"name":"@material/tab-scroller","version":"1.1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"081340c54cba7dbc1c299bd996cc223da3ab85e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.1.0.tgz","fileCount":45,"integrity":"sha512-o5AuG8kwZaghuZ4kvYXIsp2tp3plHoGArF5wM7UgERk+8vMeMRmanagnpYvFwrtGgsta8EQa9sKVZ90dMIDZvg==","signatures":[{"sig":"MEQCIAFyI0TmuQCMENVs2GSDbrI08Yfnkeb+A1eD4NVgWAQCAiANr4kv3vhRr7RhiAeLeE+uGVgQ1KXhKXC1iX3cPalFUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419360,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcmnzmCRA9TVsSAnZWagAAJQoP/2+RD+m2jUHJ9s14Db0z\n2wwwtlLGIGUlIBD/IVXhYU6Fiblmg3X4lee0BB1oY2bmcrsjg7Nz9NMrlqhN\ny1Se2G2DOkIcPfSc/tsmokOQxsrg+uA/4pjFoEobK9MXwYdG7mWzdAF93OCI\n3qyfF2vRff6mF+M/plRjQqhhR8skwC0gNnamuIV6ODrfcapuyBO+6obvenVt\nNsEZm3SwXSAYdFiwv7ZfNoM2m4aRo+tnp91H87v7ctLaTwGIERlN/UQ6DFC4\n9vmPkrfuNski7It2S+bZcXLqRHAsunKTaSdtUMmk25hg1A2rlHuagphu5qKU\nLGT9Qa82jgfNHExHkDwdr71/hyFuY+QyEvsCGR/eqMoUsJuFSQ6T16osLqWl\naWKxITYc0dzw2D5ANH9npMnXyj3kW2kznROJ5fpcneB2kUdr5ZIwBYVOozTb\nAhOt0S1T3silsFfbS/ZzlK0x3SpWNZ8B53L9uv4rhEm6OsVHDrKvwARTu/d0\nxRky+jyWdmkjmQjRqbbSxOBoYziojFTEm/GOi5BCzik1jaNkg/2V3LOG7HOY\nY2aJKLVZ2akFBPMpZvDrV9XUVo8L85gm7WyrlLoh+c0oQGjGBcD7SP1UYjab\nmkkBVwyndJSjqN1wS9hyx3j1HOotr87jlG6caXn8zNrFrT9rAUF83HncZxBe\niCVV\r\n=6abK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.9.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.15.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^1.1.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.1.0_1553628389459_0.932417982558239","host":"s3://npm-registry-packages"}},"1.1.1":{"name":"@material/tab-scroller","version":"1.1.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@1.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"e7704b2d3c4de9b7474d4b017e440ed655ee9c2e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-1.1.1.tgz","fileCount":45,"integrity":"sha512-LwYXIdk0rzjisnRTNBw1OPMvBzRWhMVGfVV73pEuDV3lkpcp1v4gfig3GR6JI8U8iPZXpxbPqaVEl/K/r8zhYw==","signatures":[{"sig":"MEQCIGGurC9Hj93vKGbizK+aRDxbHYuM6CoZSRtvBIS4uJYuAiAMH9OVdn5Sud1bQ7jIi8//vKEvaUaMg4WtYO1c4y6scQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":419414,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcq6uQCRA9TVsSAnZWagAA6CEP/AzByaCetKuJUmAYzYoh\nr6990w+zuc6YShkQREONrpcQPIC8R0G4HjZ08JkwWrgMoXi31lBQxp5BI3G9\nsvc5ovE4tZmAHYksYTQTy5g2XOmMwhTLuDHnUfRQBag6OkIen6yXGS2R7qDs\nzBCFQwiv+1lKuAhszwbsyU1aB78VNHeOvWeJL/tdOiiY7YGCuw9CEBXrd9dp\nWRQjZeA5ajVfYNJhoFy5FlynDHK7Q/zhBHm4fwc6egSybRfLInaxK66hl/Zf\nVZ+FTP0+OHaSuuK9Q7YcrF8iENaP63wr+8xZ0uEOtei9kVib/WYiXYBLqFcX\nuUAK3J1YNMNcjYTbeqbv+obeVG8ToSobGrFKXrfhNgXYRpNVHxHpOID3Swaf\nKl28IM0GOlHhdxmei2Sw9lgxeMbj3RME0xBDO+zzcxqLXEomPN6WZ89ZqGpR\nN/2OZVD/0wg43IE0tl1tCB3zYcDisSJ/pyj6RYj0uYN7zRZ0XecaV7MdWduB\ncb/Xer2sUUbByqid0skDtzSAIHo/J3Oy3JYcrm6nhqGkqvAGInqY6VNVRZJ8\nVV1CXgvb3jeJSgqyM9HHEU6QWwzWv02QkqK8e7o/8/FMbl/H1jegokTUW0ye\niiZwhoO6jYnwIjHgNugwwjOUuEXHbIfHeZcR07WHWb9uEa/o2yzGy4S/cXNV\noYN+\r\n=DotT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^1.1.1","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_1.1.1_1554754447940_0.21799155455872388","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@material/tab-scroller","version":"2.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@2.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"663fb313de13bcd6d64fb9d88511e84918c9f919","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-2.0.0.tgz","fileCount":45,"integrity":"sha512-BO41QPx71UQbq3nB3Z4zIulV8kIpmQVu+EByv4xYye+XSKjQ5CJDnDdIenegiozmlu2kJ/08ae/CU2QZEkBBcg==","signatures":[{"sig":"MEQCIHDML2KdyM+be64L7IEneB9ZILeB1PXOaf2GrrR/ltwqAiAw49LP3AxbLjKPz5EvfOhLN7lFZb8GtPUTU/aFyVk0dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459574,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcxzcPCRA9TVsSAnZWagAA9+4P/jbrSY41DIqKJA7eozEg\nzJiJQKF3maK9c4h7NyJGSeJOIV6CP9RmNnaWdvK7VzgJVXcennXClbks1/Zj\neiZ9XdSRM6zukIxwbVq0QHQptKdh+EPToyCGaJbzEPYtKhq96gF5vjCPojYR\nXSwXeVfEYjGo7G4JlsJ6nlGIGp3WdolSx68dGB0aPIVblroq+LIar7yJ0GRV\n9W/FdJ3d04cJSVPjfQWvc3aWKKDonnAwURfXASBVl7KLcFueDmdCO/A32lyK\nJerriP1uxQFjQfW6za+EpwgowGyz918y1SfvDWw62R6NCi2wLcXbpwlIg6OC\n+vbkKg1134A8Ppl6XsJ1zt7KwDkIbzckr/hMqyOzRCktmwcwVpVmr/PjP0vG\nEyehxYA6wVBkKcNpiLVh4hyDr8OUZ+9PN6w11Ilc4u6yv182KGWyiLeoxiBi\ndyDoJLyyPe8x2iUPf/nxxk3XKGXTrAmE/qQqR4iBJMDBEqIdzOKI3kIQAPol\nhBQ/m87a50gjsrb+hWZaGoYRKBDWAoC62MTQCaUCqp6bYIHitPSvRVKCi39k\n3cUEYA9bTdQLjaxCzMKxbtmq30urHjkSpStAbJ5ggdfGwFAaFR0X1f7X2Ro8\nXjhzY11U7WYwp6L7DLKL86Evn6FGmIuHJxFr5JKB0DpTYPlsMUtwpUk6s/nX\nNPrN\r\n=XSes\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^2.0.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_2.0.0_1556559631145_0.31620376086469637","host":"s3://npm-registry-packages"}},"2.1.0":{"name":"@material/tab-scroller","version":"2.1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@2.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c4bddefdbc8c1b0c1b60203c1cd72f976503b316","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-2.1.0.tgz","fileCount":45,"integrity":"sha512-RsojHqlxFlI32i+XjKrmJtnqQBZtuxGelbfwFL+TZprCDycCdW0WTXWe9TLY07UmODJ1XjpLB9M+m9c8QdKTvg==","signatures":[{"sig":"MEUCIQC0rkMYlJ8RDJCk92qpR6UcGlu5SpOlD6QzeZwJIS85ogIgU12VBkso/Ok7J6ZUwkYiDiIGKvJPvKvf0A/q8HB7UIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc0FPkCRA9TVsSAnZWagAATJEQAITAGufV39ZMVDXDTgzt\n0NAwtT84uFNmYpHRunkZJvcMRE91LP2czLSzP9KaoB32USuX9STK2ZmGli+A\n4TsXfKflC2VR+HYaYOlPZt+1FQqLKgQyMXnnaKEn23ErYNc4W/A4rYbdq+aL\nGD2VQBflT2Dn8bSi8Et4nCaml1VSoXCjN/J69qRaPZzvAT7GpjDeI5KvvozU\nujIFVs97hc9++actNOwgioZ+r9bXNkkSBGNwJne/3lqlfAtaOxJf/ny6ysEn\nMhKfa/BLCmteiJKNNJcS5cUsgLVtrhR5/qhs3cLS1yn+wmna9vbmrWjuREdL\nVoaO0TqgwX36XvamAmPfKkfI0kyyv7PKBxlglhb2ZqGfCzE9jrvHCjpeZmZv\nW5sTiMdxOor1VYjiqtfgAA00AlaHme1Di1BKeTyyp4wm1+X0KFmUcZmOEX3e\nHzWJYxmMI7HLa4+JOtGkRMMfMlII2inGKZ6r1O9e1CqwNiysHJae6hnEs2vE\n2l2GUowyUyS3pEWLNTU52x+GD359nC6/ffy95uHUoRsbKQk8CvLrjrKgdrDn\nCc9QGv6qfXwO55fdKhPnKcxvfDqRDY1d34qpEqensypfr/PqLiAMadiGuJof\n78GUdGe6AgzKNzTFqalgkDYQWHJdbtDSiolhhW1xjJu31kgtabw98YzFXmzw\nMRLw\r\n=KApV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^2.1.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_2.1.0_1557156836139_0.14099136550611258","host":"s3://npm-registry-packages"}},"2.1.1":{"name":"@material/tab-scroller","version":"2.1.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@2.1.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"31b9eae40a29757bbc5d5f1d1742423049f5520c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-2.1.1.tgz","fileCount":45,"integrity":"sha512-dyoJjdRo5Fi8A/PcLVnLODcBoPYzx0VKgnUyRSkxDggllIALELTv6LXnCEbrAxznwaMu94nOVjZ7eliEgu62cg==","signatures":[{"sig":"MEQCIFOZwE1ON554UT1kJql1HwReo5/1givfRos6gRfzIfhjAiBGFedTGFpnVhAJTRCl/fsslO8iz8iICnoPJ3FDulyDMg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc1bQYCRA9TVsSAnZWagAAjhUP/2N0TLX6N2n119HiJdZ3\nIBXeQ5flfY6Qc+Lu92PbewgUEQhEOIi5hqcm/U2adxhaKht758VcWxSVFt2C\nJluB19if45e4rInOKYt/VuRw1xKv6s5d6v8PobnnwzWruwojiyFudS+zxFPS\nry+hUFfZQyb6If1XNHzpdS0IpNP5v36+NSWbCq8Dy62r1l2EdkEbQJhssDgT\nS+C2s6Q5gSIZhVNppKlh5ZULYhFm4HZKfbxizkrVGzNfs/0t5FoVbO3Iz7Ij\nyCiaNsE7Dnm63SrEflEM97hgafWvNYzXDC0NiB2QVY2aIi7qB+jGtUh924J5\nR9eTus78TwZ47z53ivWZ2gwu4L63VTY56TNHy6TUOFVXRIcvLYQrXBiOcsPG\nyTSMWf/m56jwdh+HdnlAppbvbKUckAi0bD1rB4LlB7aVhTd2jDKXVASs+Ubc\nA8iHD2q/1bDiWzadXMGaJkizce+2U82LyWF5lf3I/RqmiZl8Bre7PHH3NLpJ\nNutY69xQpr4lDenEyXRJwBYtJCQsvUlIP51g0/jmzhm6TJAHshoXCOwX6SRO\n08lrB3aT5Y23eYE/07YmHE9tkDfF2aJcNec7MVrWRBC/klS1b5Ioq6FYdt4/\n49ScgGKM9+jYaKgx5HSLJHuVqkLlcBt6HXYPD7X6aBh3I0sWbizpQQa38ytI\nDD7R\r\n=uZY4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^2.1.1","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_2.1.1_1557509144260_0.29755875764025386","host":"s3://npm-registry-packages"}},"2.2.0":{"name":"@material/tab-scroller","version":"2.2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@2.2.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"88c6fbdf3e2d241abc4da99c31e81c49f5009f1e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-2.2.0.tgz","fileCount":45,"integrity":"sha512-bkEhBAwZJDkhS5fUUb6Re3noJiOw5akeL4OrTFyFfUFMj0GMlTiwWaOctRbKGy+Vb+f04rdCSh7inc+FInntlQ==","signatures":[{"sig":"MEYCIQCH4z95A7o8mmcggJvAkNHRTPt5JFRNyG8ahNiY+0RPcAIhAM830CLPWiobP0JqTR696IlrFCtHEqLXxmq906Oiz7u+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":459792,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc2ezwCRA9TVsSAnZWagAAVnIP/3b5WTjV+DTAzGLhZyjq\n3PAlJgxfpiMYd2TWKgNqGZJG5/dpup3kPnEpxK6pO4iZRWz5eglNfoBBLG2v\nBKdJK0P4hCDCM20v8TsrLEUT4JIBG85Z6nRGSD15Z41440Zs9e0/yjHLkr5l\nmTw4kEn5aelAMLaAImCczoBUSjwyIIB3ZbXlyfAwdjfg8XtenIZq71DNPiP0\nzSMb96AquKFtPcCIp/tjGR9Y9qZMLPV74xj9sqTqvakLCE40M+WaY8TeCJd7\nvwbazQAIZ9I/O9R0mvhCWsSB/+oeGlaEvAYEPfZeRvatZYRbjIOjrimMI3md\ntAIZ68MkEPxIJXQVYCk4j/fBfYmOZ6fVfQBtdUcEbVRQM/griUQZ55eJVEfo\nhJVUtN9bu+A/hDj4XDWuLCB+MGPo4KcCu1cZttvgX6DfRh+99oGTWL3JJ43h\nUYj/blofCGIAv2pZQo6DYlilrxB2uaL531GK1KPvjDir43oQU49M0gSmhpHQ\ntrZUDGq8PvVsJlOhqe7QPbVXbjSABV7VPgg5V7EHiB7nvTy7MAUwCdgDKAHu\nNijcKRRlMYplwiEm7V8vxWerSqhVpJnI8QG7Uxv/BXzkiLKubslmvk0WLTa/\nxunXtlbci8AYBDcbq9JcKG97t0ly4F7GpQH/8j4HIbTMDkS/AQDbdUVRT+9w\nnkuR\r\n=PCJe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.5.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^2.2.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_2.2.0_1557785839697_0.5707409008692199","host":"s3://npm-registry-packages"}},"2.3.0":{"name":"@material/tab-scroller","version":"2.3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@2.3.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"226b73770bd5b4b03026124e662fd2e4ce15e425","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-2.3.0.tgz","fileCount":45,"integrity":"sha512-WLAH6po+3SrMJSsnq056aBcLxNMg4TVGyST+TO/wdWOg6QYFSgrjaYpZQEJIkPO+W8Jt54xieI7GPoU5KYB7AA==","signatures":[{"sig":"MEUCIQCoEGnQ7JKlpEnLE3AI0KpZwOL4uGevXJO514N5xKk5XwIgGE38chfxINO7EdiD6kRTjxoiZBTHeVC8f/IvDfIZrxo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":461698,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJc7acDCRA9TVsSAnZWagAALXgP/1tqiUqH9TpEv56tCzPj\nHfUxkl8HCbWjeYxqdVEDe5IVobltO+YYsk+Y7DG3z3bAuTYhelGcyXm2AK1X\ncuGJyMapVItacjhpeQdovYI8xM1diw7FQCvVp3+XphDvtHjN2qFUT8FRXeHv\nklEAqin9z33R8e+ks+J4DEGAL7IM1p14l/IBbFi7/aEB/d2PNb7tgFW6RP5O\nY2ywyx+kTl7L+Zi39Fk482742hex0XknEHcET0LFyfIKIeYATq32lvjwVgiO\nLXgXCf0QrPD0P8qn4KXToJ7tBrmk/kt+nlPSlU0KB68hRxZAzzfMWxhO0Pox\nEzI6UvewR7SXMgGCTSHem5KwkgsSpE6Tqg5rO+plE1hzprCJ3Yzxqy9f5ZDS\ns3MdfE4ccyK7sT05GDl1OCEzPDf/OfkR9VZHFspgjnMpCq4efEFK0EQaDPMi\nLBFNDBGfMl2wSnCGkKPFvVlfele9yRcaRMREt3LJ50jN6hr4GVnLnGBbEbJ3\nVtbuDU5EmNCy/btTkkkZBdmMzViLiClDP+WyrVWKIloz8TVwiq4cGlS5eQTN\nFQX6+htb9UeXpV9/UQ4d8D6B9iF6fsYag5O1eVOZvFy+Faic36pAN7jL2hv1\nn1lrDsm820LhMq7v7fEX8rkIq53RXclbIWrTWQXo+ZHJLALs9i29ZYGWuVz+\nbTzC\r\n=+HJT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"6.8.0","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^1.1.0","@material/tab":"^2.3.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_2.3.0_1559078659021_0.11030606790435726","host":"s3://npm-registry-packages"}},"3.0.0-alpha.0":{"name":"@material/tab-scroller","version":"3.0.0-alpha.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"b3a7bf159bf547e527d4b75cb40cecdc8157783f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.0.0-alpha.0.tgz","fileCount":46,"integrity":"sha512-ZbXYAlEibzl6JN+EpFVs8QwTroAgcbZ6GIpa4maBCQfUF7tusgv1ECylyYqJXPQ4065N1tHVjTdvrcJnhu4cTA==","signatures":[{"sig":"MEUCIQDW6zXUZs+FovMj+5RpLIGQglRm4dWeEkQl/9BpKSsssQIgNUyw4EdSg8S10QjjHB64rVr9jGKL9L3aG920eB75LgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAHp2CRA9TVsSAnZWagAAQ+cP/irgX6BGUDEezt2OcOgl\n8vyRVYdckxMnHrnw7hbrAB9EfI7Knn+3PE6UjFuGq8/RmzBAJNzwzxiVIblb\nojSYzoq+JvuaPeVN+/LSuMLJ1CUEg3hwcFs4XVf/LPpo5zxS+7SSl8O7lWlp\nPZEQl3OmxllP+mOzwIz3bNkQSqWN1ZZTBc0Lo4PeQHSzl5t02VA90A6887q7\n0M4ZnGk0ZewsaBV+eGV+RrAe6KMAiqR+G1aq5sEXsO/U39Tjla+fA/vjX2+U\nP7UoBWIAQYcngMaTpGFxANvuiF/n1xEi5WJKNKWc9yoK7Yir/54xjzEFMnj9\nY91ULw3GWYvWTbIKjT2uAI6EoaBa5Lk6p1jI25iwLo4g9/HnRg9FUG6bW6r/\n4cHZb2HAIam8xNFKx7nCZXmi04SpaFRS1iYU67SOc9nGRqPqcg2tLG3jRqwk\nl08P9FxS1UNzeWkR+pjD6NGZP0hZyJ85VA6WmIWSFkVMazORKWFeOjPNnTN7\nESlIwyAqNMp0SUkA5Cvwnn90sooluvt+Fytud+H28jI2KJYwlQn2DZTO3sgk\neWYzYm2hfZakXtlrSvbhYrWNmZEbNdTrdyLbpxXRoJbIp33rW8vgXxBeLK5X\ncNYMhinijqoKOMRCjkO0vARw3gt5KTOvvMa6t7JCZAdd9WDxXDtnDVKgG+H7\nNjhQ\r\n=t8Kg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"094e507fcfb488303e5adec97f7f985b30e8567e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.0","@material/tab":"^3.0.0-alpha.0","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.0.0-alpha.0_1560312437671_0.8328001995383862","host":"s3://npm-registry-packages"}},"3.0.0-alpha.1":{"name":"@material/tab-scroller","version":"3.0.0-alpha.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.0.0-alpha.1","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"8b21f7a7387c61ddc9ffb3f78692b2f487478c63","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.0.0-alpha.1.tgz","fileCount":46,"integrity":"sha512-nuF6FQyzo1G3Dvx7WKEQdzf2YZ2FAVte2LRN348fVGAYiQgMm3XYZzfxq46O9JxBeX0fTj0MzI21BR+ameSJsg==","signatures":[{"sig":"MEUCIQDUXEZzb3QY32XPIkdUfoWvp1Uk5BzuG+zqbDMrIH/NrwIgR9NHSHgCw0qlOHiYrZ8eq9WIdtjCL4TYQKrHws/D7ks=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":462857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdAUxPCRA9TVsSAnZWagAAYrsP/14L9eSMKqGFdkBhqILM\nFfmSEiKMJw0S6pckSPvDIPNKxtZyTh2+zbHZvaJCLRenzQQXCpkK4vcOuf1A\nA2gUsUCNi4Ffz1PV0Zwh5EeY2KjKcDXl22hjwFh7WTwOREXBQQ5bWY4sgXDI\nsl7O0Nl8rb452kOGJFP5R/2Lkjto+8GMR+IElze9OnmvFhk0yBfBrDCmZE/A\nJubEjUKx0VCwkZS3KaiXxxA2OyGqPZ0ojamAsb92T0So+CTijZd8FLl41Qv8\nDKOzr946cOS+Y81WNDNOHioKy0FDdmymqSieWhp7xZ4OFyEaYKSJ/Q9LZ2nB\nwb9G7dnjvfQ89pcU+QX33dMokm50qiRKvWVjLdYW8164vUJjUxoppg+rvDFr\net370E+VzdpHoCH1EGUrd1A5JHvIsI8/8RIGFWj2rEYo6AqFCb7hkd1JIv49\nawvYmJyKicEqUOceHceDsMaXR5SedXpQ7TT/7uF1BhA/b2KZeoGCOh5fnAaj\nIobHv+PXVEUcJI/nrKBFf+CH2vyS+rE2VgNaUOhAPns8p/I7HaFrdQDF3nL4\nikLC2myrHiBp8EVWQWy+Q0faEWdBJj/juohqK3GCM7higgG9VVC/x9dRhQ9e\nSVwHRX9/luw9qYbJxVUmVc94fR+80TCdZkvLbA28jfI7jvP0wBUFzaXIHm2r\nh1I2\r\n=TXm9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dae97b98c21bb93075a9688cf1f9076a4fe5a85d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v11.9.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"11.9.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0-alpha.1","@material/tab":"^3.0.0-alpha.1","@material/base":"^1.0.0","@material/animation":"^1.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.0.0-alpha.1_1560366158831_0.4742771898063056","host":"s3://npm-registry-packages"}},"3.0.0":{"name":"@material/tab-scroller","version":"3.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.0.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"f8ecf690bc7f387d6e1968867ead1348dcc38f91","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.0.0.tgz","fileCount":48,"integrity":"sha512-Os3A97lieBtWF1q6HAM2BsBPBMYksC33i0oih4XdI54CQ2F9KFGOUbmzf77So6cNm2fnUcunahWRH+7vMFKUfw==","signatures":[{"sig":"MEYCIQCNLAQoBg8p0d5ji5BwzpQzazXQa0E+jkfAIWER1eMKCwIhAJt3r+EBxmLDIEXV1NjAd/z0ZhC0COETXW1rurc3H8LV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":497971,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdEp/4CRA9TVsSAnZWagAANAQP/3hYUqfJ/GVw7Yz3FoAC\n8YGMcGnK7ow7qX5orSRwBvrTYyKobxtptB7BxCPSxR3AUkhGzOzX/PwLb5z+\nZE4f8Bktv2+mwjpO06oeMApXRgwq7oFUYsbgJEC/vRBBNNlb3SXSYiMv9Zhp\nr6LrmxgTSN2q6OGhwvissNyJQ4X28aJA4jlkrXW3kSsIqlSVUNMZRLgdw6nC\nPZ+W0wkF8scz1DwxJphBd580ryCNn8p+KKox8KIlpwyhgOuFFFukB/UCaFh4\nE/1Ih8OSEjDLgcCmF/t/cxoRoc31rqMkl3MDslM36V8uU8CS77KdB99DzoFO\nL2Zc/8QtMAikLwV+jcwqsWUyrKPOw8o2ebJdVbry4Z8gBmZKWlJ7iC3nXW7S\nvWlaydGLyNLdmwS08l9E0GDFlyvKHlJ03XyMNj+j56GnrefQkfNexKNNLomo\nIwJzo+A5LaufiOaUlNpE79+afl9VGLlKeG0LtIxi++66JU83ATXYvEtJuzRx\n3u5/vTQCxPgPdKXOVOMZZbP/K1edUt79ee0+Ym1dikvzk6r9fbDQIXOpZ7BE\nXqD6e1tzaKErUBurOmX3MN49hIxLNkEpWovsoQPeEI92erJmyqfLi9VayyXC\nhpoz/DZz0+IyQwFA0wvPkE/MzCKJmaz/fzxB7zdJQFjC/fTrujLEKk/34JCP\nxerw\r\n=qYQJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"747f6ed544e3a3bb3fde71ceaa51359f2212bfb9","_npmUser":{"name":"moog16","email":"mattgoo@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v10.13.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.13.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/tab":"^3.0.0","@material/base":"^3.0.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.0.0_1561501688141_0.9209475003231948","host":"s3://npm-registry-packages"}},"3.1.0-alpha.0":{"name":"@material/tab-scroller","version":"3.1.0-alpha.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.1.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"c35c2ff2bdc6069b916d11371704a58a6c412a22","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.1.0-alpha.0.tgz","fileCount":47,"integrity":"sha512-606qamnnqegMqiuZuatYJnSv0ca8BRhLrTnhJqK6Rgi/6VR8r5Wf05H1eVMOm7kn263p6o3Rg3qHAMkcQDpTHw==","signatures":[{"sig":"MEUCIQCvLXn82hh0Sa2TjsYpMGizB5bOx8Mw5yQlEAFTjSrSpgIgLZC/gxbsuVyjT7nWlecKFGiamtS2ZrcF+MBK3C7Ntdw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":299988,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdLdE/CRA9TVsSAnZWagAAjyAP/26mSmDfH6nrPHjYHSom\n00VrSLEZPjL4ypHoQ7I8RxnY8qUOyxi1ng+J9lYnSF8PBZKwRoT8TyUY0Xda\ngMqqhAsF9VM0pGe/5L6Q63ENzEC7HhiKo2TDyxWoaJG3NpDTiyQKcTnZuuoK\nEO3Kelk6+qXAnrU8t1mppK6/mDTslVQ3MTemJzIfULf+BupD6yRydHFCnDob\n2vaxBWVW4AsFU2ExwpVvfx0MsQp5Dh5sNY/0KwqwoMPS9i7hPcubAJuHJz3o\n1UIQ2aSnvpe03WWKZjYH7GB9zntAdcBb5Q7pD9Tm15v8QQFOExaU39W/QHdY\nKvkz9nFxQNtNuwaXxQCW+Zdc4zloHCOxDFtmO1ZrhQtsOqoVLLkzyJaM+W8O\n59fzL82YYsVxHaIy+mHM4bFxKPHHOKW9k+JRWVQUFikV512b7mL35JYEEbqt\n5Hjf5fPfCnkZ1pj3frNSLdPyE56z9v6/lDETPbfefZOpjMCPT1Mpu/QuF24L\ne2mbmKFfntAFxE4iV6W2W97arEHznJVZTbsHKu1sHuKa5VBO1QAC7MlznQ5P\nBoBHR1DSSOUin6iu+LxF6DYNt+6zZIyyJnTxQhjn8fJyASrunvVBo3ybzQ60\nkFf78AJc09Aso63eWU6lEjQdwS2ualNnA3QpTfjgxMtkYb/jAdkBDNJ4IbVi\n5e9w\r\n=vUJW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"42b485550d87a4c3328a07847b4070d15f09af8f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.0.0","@material/tab":"^3.1.0-alpha.0","@material/base":"^3.0.0","@material/animation":"^3.0.0","@material/feature-targeting":"^3.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.1.0-alpha.0_1563283774988_0.9479134303514543","host":"s3://npm-registry-packages"}},"3.1.0":{"name":"@material/tab-scroller","version":"3.1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.1.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"795c984f7d3c9487d6f62f6c8a62306c2167e853","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.1.0.tgz","fileCount":47,"integrity":"sha512-tV/+imklWOrbZuNF1egCbIY2/sHunSmxdiyW2ppF1t26M8NnKYHv7H5JRejdJDAwODWrmvMhwXE+rPBT50FvgA==","signatures":[{"sig":"MEUCIQCvdI3yhHM1pnN6eXGq5a6stJB8H8BCQAxSn6bI16/eLAIgY3tJ0GMh54mvekLKqwNDlrM5YArU7d/XL61Slpr19Uo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":300198,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdNjKVCRA9TVsSAnZWagAAyzcQAIJDhAeWyuR4ivA3b+J9\nd/whzcxpnvTnOGHvMIIHS+GiWg7fh8JjT8oFw2g5aJzriMCQa02aYGs+LD4r\nYwVZoKZqnMdllKZedZGvPKjbGVyVSHNI/QtGRtD0CK3jCMIlvaF47IZtdthL\nerfFSzx+s65WgXsxGzpNP+fV4fvEfSMDrVcMka1OdMv2SLW/1kijfiMVJ85q\n71N5IZogAbl+ixFqysoysk0/CTn9xdjZQPqiDCmW6GSwOEfaBixppCJU1cxZ\noqJUfVsZaJKOeob70ERO5tB2B73libCQVstFGnJtoXaKzU1olICd/bJjPxnx\nqVlcSLE/uGiIBfy1IKFjczE38dpxhBPbSk0Is/8RcryyFiZnl1bQ9INehU7J\n0almE+zHG1ETEE5NpPCJkMlDqx0jghfqcQ+kti4ufS7mhZkeFuqdEdB26wcW\nxbf8GahOtV5PrgvXa2QhlfI038ekr3e8pmfahZOnWreLAq6M39JZ0kRDhouu\nH2geuQoN5xZz1s0q1hghSDwfP7j8l2q2hKSEXN9LwxdWmK/LyhJKbStkfMMs\nHyNUi5Mrb0HhC+239JLHcMqdeuHvY8WxmVwIFmTksTOuRxwoivlvFfve5hv8\nfW04LQs7v/f0bNfPDVEX2MWqUQke0DOzGfCTvKj8eFrhaHtjTr+k3PgrGslZ\nmDjX\r\n=pjQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"6b7e616da1a1ca53df2253f6207642739e13b5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/tab":"^3.1.0","@material/base":"^3.1.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.1.0_1563832981003_0.6059356581092135","host":"s3://npm-registry-packages"}},"4.0.0-alpha.0":{"name":"@material/tab-scroller","version":"4.0.0-alpha.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-alpha.0","maintainers":[{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"acdvorak","email":"acdvorak@gmail.com"},{"name":"aprigogin","email":"andrey.prigogin@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"bonniez","email":"bonniez@google.com"},{"name":"bwobrien","email":"obrien.test@gmail.com"},{"name":"kfranqueiro","email":"kenneth.franqueiro@gmail.com"},{"name":"lynnjepsen","email":"lynnjepsen@google.com"},{"name":"material-admin","email":"lynnjepsen+npm@google.com"},{"name":"moog16","email":"mattgoo@gmail.com"},{"name":"patrickrodee","email":"prodee@google.com"},{"name":"williamernest","email":"williamernest@google.com"}],"homepage":"https://github.com/material-components/material-components-web#readme","bugs":{"url":"https://github.com/material-components/material-components-web/issues"},"dist":{"shasum":"4a0b9a9e4db280c3a58e6edc5f4be07de0585a9e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-alpha.0.tgz","fileCount":47,"integrity":"sha512-2EJoIjKXiNe6C4rzm1Ec3egyCAGB+R8JW/4tjq3RZ7s+7gOvPUMyibQKDJJoiTdgaVUCq3IFj3wTNNYII6f3OQ==","signatures":[{"sig":"MEUCIDDfTi2zaOVvSomXiGZqli7y6dMgGKFr7Tv5UU0FTWKgAiEAhchh//JrhAaVVjzZ0/nwUk+S4elwUMc5sLqJlKy2J0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":300442,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdSz4qCRA9TVsSAnZWagAAQXYP/RID6jIDZ1j8yzdAdIx4\nrM2wpXPOIh73kcj1tHfFJl3A9gpI7/ir5iNYn1QSz3LzgBvg4yzkE82MvEP8\n/Ra+HvBGtTdmN3fqiaQa+o/CRqxzWfABM9DMsZe5ywwpIsBBc89Qmj70dSZv\ny703wZX3/cWAsyCoK4Cjooru/egrcUGWUEWV87cqAr+dq08ypL6ZKkkO73ZI\nbkk/Y/9ksZD7hMYudSAcOJSrJSnjH9eL4lRWMaqtzoPleV41SCck7UY24w1S\nBG6TipK/OdPouiROGg2lGJnUa0a1ozlHJ4XerZmVoBo0iJvTfZDexTwvJ4TQ\nXW6alT/semKEdNTIXbcKdi1RE8+WvxavcmHzwSp05dXNyY6fOeIZxlbnwKSi\nTxmQUf1ZUCRNOChqhYicZLwXDNTV9/Gu7GcILw8F5Fjvh9DW7wlfRD1qJAhi\neXnGllP23ZdDdC5vaWoQNtlmBbEmbBm3oWss0zFVMUjVL1CTXhlbRGHoVyYO\nU1e6gsNdW6oZSLutQc0fwzHEbRLOssLLpuhAIfQddlY04Z5mYVW3FgAy3+Xv\nZ0Pu868V0bC/NtjoK6C8VDulSvkSe1Mi5MUMj9w6fCaHaj667XKKIVc5Hk9l\nL4/GSXDkCYto5dlIR+6aoFr5pXTqGIgPGwMfc2EkdYJCTAA3ugx4y3NgkpU8\nLqVT\r\n=e+Hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"184b37f65b79a260f2835bd44e422dab2402d937","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-alpha.0","@material/tab":"^4.0.0-alpha.0","@material/base":"^4.0.0-alpha.0","@material/animation":"^4.0.0-alpha.0","@material/feature-targeting":"^4.0.0-alpha.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-alpha.0_1565212201207_0.36025907040917216","host":"s3://npm-registry-packages"}},"4.0.0-canary.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.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":"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":"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":"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":"c5c1e1bda8d8e52c5465b5be5a86d2e439d2bf2b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.0.tgz","fileCount":47,"integrity":"sha512-tIf29jLhIMJH0+VW0TXjsqmU9Ek0GCpEsU7VYVv1ukxdrsfcHaUZlPeb0yV31p5tMmu97bwn7ztYc75fd2DfSA==","signatures":[{"sig":"MEUCIG02dWuRCNmJmMwCIlNZAoB5mGN1yC3tHPTHQc0SiVL9AiEA1TeWk9uNFUOIMXCtVNBE6QMBlnjIK6UScIg0MqO0j30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":301724,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdcJE4CRA9TVsSAnZWagAAs/UP/36OhfkT3NJTdXZO93Pk\n4vKtjx6EwlTfRIxVbyA6rh4kNPmfCdXvoJsISj+hUbNCSD5tkKA8/9JrTIAZ\nB91VDyhFEEVguUfncpS5vXhjuZMhN+wQsIr0CTE+JF8hIV5iiH1J0EQGS2uS\nro6yA/iXyHcHs9yf7p1H7wLqmDSGUleHY8CAkbsO6BxeD8dkFRXc6wzB7jAh\n7ePm3R/ZrR/gA+8x8OJSBtuxBO33O0qplqaaBWNRQMvf1DeTF9syIyfrWNvB\nZapArxW2I42XEsKkddjBTPeHXzz/x1KFXlfC6h4dxZYrGSaKxYNzCplFp8rb\n12hWACzda+d5jNq3yC3ypKHDGvlTt3QpWm/GoOUZ/NyFD96jNzWkkS5NlNvo\nJnV5QvI+3NeynhznCV8mfXClziJ/QSAsqyp7qz9/lrEtErZNz+25RqwFbc2q\n6Eyk63shxPIZ7PxyJ8u9zsEEvjUIBV4aIPyXkuP+kbhyHM05fU+o4AeDD+fy\n5OAzkVWQaKfUITScOMFEEG/1hr/aKUFSsbCPIpuNCkiV8SyayHTB+XC+T0/7\nhliScJzbJyNy77TgyI5OMoNBVynlrEeQ8t8wjf3PuqmmOyK2unOn3BVt423K\nobpeY5TTtwOPBnzUQF8pbtMFl54x1WckmGmy4sAdYhr+NglFnx83aglhOjRW\n6XQF\r\n=NjxX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a9e69493144f4246efe28a958126afc2fedebd60","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.0","@material/tab":"^4.0.0-canary.0","@material/base":"^4.0.0-canary.0","@material/animation":"^4.0.0-canary.0","@material/feature-targeting":"^4.0.0-canary.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.0_1567658295959_0.39962043448964235","host":"s3://npm-registry-packages"}},"4.0.0-canary.1":{"name":"@material/tab-scroller","version":"4.0.0-canary.1","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.1","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":"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":"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":"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":"26dc5795d78aaf77ed2957d0b56573806fc0d784","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.1.tgz","fileCount":47,"integrity":"sha512-H7aAC5BI36Cw48WoKmKeIcWELPHRU2Z5h3ASbIi7szgdz7NMBTcyp8ph0zJwRYeXF2PqaJZPNR33+a9RB9QSZA==","signatures":[{"sig":"MEUCIQCXGExjR6P7vo/jHS0VV9fBxmUchnZZysdQzIIyiAkWJQIgQigYxONZvRs6OwTjT9rVEYapAwh82AcOA/PNOjn7XQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":302120,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJddrQ3CRA9TVsSAnZWagAALDIQAI0gkKmrJP112N8c24cs\nQjx4GM3T0/YtFtV/kogggEVb8l9JdGwMCF4oY+2K1N6dhKPtoTxx6hxiDvVu\nW35Aag8pyv/ktQunalBtJUF2pO0he63l2RLASnfgWFazj9ytR+H2eZdyeLcT\nGOdblTuxzd5vp+XDacXtieaHgp2rt038Tr8i8QRz1m6NiPD1NBMUyYjwlFdT\nTmv6Un2YnUb+dYdIk0n2QU9lcYWhFlrFZLhUWrwpQ7nvraWezZ7R4ckFo98G\nb4hO7iLPTyIyJy/6dp9NIifHtAAiM2ZdKJ/J/FJUogwS0glygMmk3dQPk3lZ\nB/7Dc9XItJPLOoNBU/Klwj/VIZeLin57R4vNtmb/3JzQgik3mYvX91YSVblX\nEC/GKnMgV55sSiLnROP2qTb7SMxdpm0XoHQE/r/qtqdHlsTiuL3F9BfmGz9m\nS9+mFRCKJHiodDgeE/NFWMNblcibd2tdheoiAMe3YHY9LMUM1cxPlqYy510w\n0ePXd81NOQBibCDVfdXW7tlxFqr7YsyBoVR3p+fSKEjnN2k2WERGsi+GRZnh\nw2WIE6pLxiFf5LN71inld74ZdblQjflqJNRnB3yyiHGe3cvRAbxBPSxD+Ny5\nbEeT8E8m4ArKrYh4bPePKQtymjIX84att1ZQ7qGDi0/YQPsCk+XMKjVkZXJQ\nknkT\r\n=R8FN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"edc72a4d7d6a61d61620fd05a80e2491e518bccf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.1","@material/tab":"^4.0.0-canary.1","@material/base":"^4.0.0-canary.1","@material/animation":"^4.0.0-canary.1","@material/feature-targeting":"^4.0.0-canary.1"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.1_1568060470881_0.1618250454508734","host":"s3://npm-registry-packages"}},"3.2.0":{"name":"@material/tab-scroller","version":"3.2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@3.2.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":"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":"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":"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":"679868f72ccf707d7c7a029327364593dd226f71","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-3.2.0.tgz","fileCount":47,"integrity":"sha512-tf7QkLd5Javik4jjHcz1P64btgljvC7IjlYZ8tfoYGbs75Z0MGa57heCypzve8QZFjBcmfiKkw61dFoUbtkU6g==","signatures":[{"sig":"MEQCIDdhOtfL6Qd93kTyHvhlTLIsnsMFr3rDrra4derzLabBAiBO25dZqfCqJvmbr8E9JN7CER7SWPrzM1fG8i/gjKY7gg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":302174,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJder54CRA9TVsSAnZWagAAasUQAItYoMB4EFrAzSDHxRJZ\nEQcmtFHZAQ2ySS+ulLTpVBj5aU9oetOy2NQB/nkcsPFeEK2PTulz6Et0dkuh\ny50cux37oBkBsliCs1RQe9L0dGBevb0rWh32LeeuQlkh7+pawJkIWCxCwAJA\nIwgujObMVeVxrbcLZc79umT/HODzZvyRKl8RDpSFukZggnNXkfGHQH7M9vk2\nVVDDeHQm01Z0t1rIInvp8UQlaG8K4ZQMsX28rcIAJkFgqZ2EJvTKtgRwaRuL\nWZDIGLBlzrYx5SL4B2rCevbG5AntVuIz3D460cND157x8TPeQSGecQbhQdMc\ngkSrLbdxduhOdkCnm31HtsaBVM6HDs0ZgJ0YOAPM18kV70rjUSOsO7Wco8+D\nfjT2n+4YEnUEAw9x4iAI2K1CL/wMG+MndVyRnQPSyszM9PN2hRe+FXR4iWq3\nN2hXfmejwuuw7CJTxRzHZpXzBQlBGicUsXNt7HCDy3eNQ797Ew7iFI6DZ75A\nCRYpk0O/hLbKGMChOi9/l84qGv4vfu0BKaC85TMBFoslaA6v8wFkyx2QQ41S\nR59c0wa3CPLtoGeUHBFGeYEpTSXmyaqtw+JRcP6gvrubxf39pZPK5qLw3bQ/\nBbd1D9+cASNW8GfKrcYagFD5b/f54ljHEBHaJLxYQ43QjVF3aby5LCd/1LGV\nmjoL\r\n=5HiN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"abf67305fa705591abea3972006a18ab5fac7f63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v8.16.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"8.16.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^3.1.0","@material/tab":"^3.2.0","@material/base":"^3.1.0","@material/animation":"^3.1.0","@material/feature-targeting":"^3.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_3.2.0_1568325239917_0.3495943552970109","host":"s3://npm-registry-packages"}},"4.0.0-canary.79d881baf.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.79d881baf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.79d881baf.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":"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":"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":"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":"348a16fd2d0a7ca305cb3c45b570d733cfa65248","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.79d881baf.0.tgz","fileCount":47,"integrity":"sha512-W8dHNhaJTLu3Bng8kg+UTscZ1lq9e//uivTxDxnEfQztA7OwnDawJtbFT+LQ7A+D2X1paGoocnhA8hcQpNPnsg==","signatures":[{"sig":"MEQCIH4J87LT30fP+qqN/QSK/XoE7sYztAQ4kZF2zHlsVz4PAiAK1ZXnMB0dBGF3PZLF3HSuI7Rta/l5hFTfN4mVK2oCSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":303654,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdev1HCRA9TVsSAnZWagAAm6wQAIpUuGgqQenKQWAvvqRR\nBHBMDO0dEubWB7jgmNwjpGFsUCcrkEzizXDSoR3CeyAms/0CS5FW/GbHy0+S\nDPxYi5yqF5O6+Z2g/SLiMFacLfniADNv4i6/9O+t3K/DxEIaXAbJROZikf/U\nLyEr+rGOPZZfzt5O5uuAnFy4tGKJmdKmWkdQH0oc9Z/IhHTPmZh2Crp5J4c4\nx/HHAeUAIPfTJmV2qm9KDEpVKiuYbq/AV1WZjQ0uK9ByPPEKT+9THuZBeqlk\nHdtdhcUpljUVAmQDKkTVeJoKyCWi4DHrb6iarisksVUbwcaR9G71JfHRm5Xz\ny8Bam2flGWLvhZ0AW6AF+0ISMVrL764eAHvhxdzWazm/z/Im5X546VkAc97q\nBHTgvDZ3yPaiJymfhWFWrch57R6afrr7VGE+qDEB5IY7/QwCPWzvW1Msp3zM\nq3+V3Li39fDx6FLPVMvIU3FZ8ibGete3DDZyBaHt349OlctexaoZDX76xvM6\nMvomxSE8nKzn7WF5+1im5gEUXrxqLbx6sTDOdptbvvyPzPl33URmwjdLndJa\n+5hmni0LVI7seEOcpt6UQUd4NvovWdQuHkP+tKhikromFwxxQ3SvPyxrBMtk\nI0/bEOvqvuXUOZKCVw+3D1ggJzzJLTs3rbQDel/YOEjPgc/d9O7SZvAGj/KS\nB6oV\r\n=8c61\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"756806a2389389441b5b3c130de02948130d96b9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.79d881baf.0","@material/tab":"^4.0.0-canary.79d881baf.0","@material/base":"^4.0.0-canary.79d881baf.0","@material/animation":"^4.0.0-canary.79d881baf.0","@material/feature-targeting":"^4.0.0-canary.79d881baf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.79d881baf.0_1568341318316_0.7633105013914205","host":"s3://npm-registry-packages"}},"4.0.0-canary.e851d4f40.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.e851d4f40.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.e851d4f40.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":"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":"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":"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":"a42f2243c35101507a134dc2160e89c48c132527","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.e851d4f40.0.tgz","fileCount":47,"integrity":"sha512-vMy9AxkF3U2ClT/He6PYvzT8mJbWDGp194x9A8e/IY2hKkd/YN1S2wu2TR5vWIBihIq0GPFcwsA1mtWEt/5NHQ==","signatures":[{"sig":"MEYCIQCxgw5By54DT/x84LU7aPUW1W/R918540yHA9fDj061AwIhAMG5UbVngFNUgQNvjnjDQzrHSYKxhbD30b9mDHBPPTDq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305776,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdexYTCRA9TVsSAnZWagAABqcP/RJ4xaTu51GUITKZz+Ba\nad2SLXk3eeLm+ijw96WfbXngA+/tyBhNtjBmyCEntMRtQhwEY10DeSoAP9Ne\n0kIScxCfbyYB1mODW5SgxMYUBU5AI/eZkOwOs35Eb2Uquckidj4zWoBBgxTp\nu+lcW9HgKAkHJToi9Sl9HZqzc7/k9DozAtk35UbEvvEKfdj2kZMpiNzcSzvu\n2aHWhXa9fzQIz4cut9zTZU71sFuRBXDjQq+PQrsCMMMTDilKIfrUMJ+CHMnU\nhxFPsSpQmKh7BUX1OVXySrTwOEqIoFwswWiv2uVcQzeg/oAPE2Qe/wp4ic5S\nwEbxJrpMx3PV4SaXHh/RXAfSFflsHbBOxCMp04EwMiK1mObk1ClVOItH+hn8\nszrftGtaFDKy7ZlmP7a5CKIm6012DTM/5Udmh7DwaiEvu1gYOk6wC3QkbHG6\nh/E7MFuXDuAOmkG3lAlTdTy6P/9ORP/ZToahTi2iR3XyS8pCg3OXnq5AUwqp\nW7k6TCZ71RGbNeEiSqo0/rk6J7zZghZQC5dlaBABFDXRXYkc6Yf23OzPivPL\n9LRngM558Lk2C5FWs5OZqXCTIel3sEeTA9EKJB4U2eruXpkKi6g8rnM4C0Yc\nN0MUm+ozzVEK2kHW9Gu3PLPA/N+C/ydcUjdyfeXD6xLvDn7OHPcVtJGt96Yv\nbbgz\r\n=NF58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"353401bd143fdc2b4a85abf330176228e21dfe13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v12.10.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"12.10.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.e851d4f40.0","@material/tab":"^4.0.0-canary.e851d4f40.0","@material/base":"^4.0.0-canary.e851d4f40.0","@material/animation":"^4.0.0-canary.e851d4f40.0","@material/feature-targeting":"^4.0.0-canary.e851d4f40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.e851d4f40.0_1568347667309_0.8409918498044027","host":"s3://npm-registry-packages"}},"4.0.0-canary.905884690.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.905884690.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.905884690.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":"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":"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":"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":"3a66192a588a468cdec55beb61a0b34d220a54d3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.905884690.0.tgz","fileCount":47,"integrity":"sha512-0MIE58s8qKQuME6YrT0feZikFl9YjluHaij6hPFrU5fcrr81Gi2kClhaHKsiNhWJoLQlbelqZaqyJRVvLpkAIw==","signatures":[{"sig":"MEQCIFxEN0tcvZHSF0ESAkq8DyVhlm3Mgmj9NhMQAFW2zAO2AiAmgRaprY9X0nSV8T9JWldHUo4BJ41ajW1fhfMPB0dkJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":305994,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdgB9TCRA9TVsSAnZWagAAxQgP/3cNpoYq3BJeUz8QdDq1\nYMwCoxjatHjictAYTI6luevM6zp3wWMhMYq1AAXlwOSkHpCN7Z2ER6Igb2jZ\nWH2vo/br3tU0m4OUauH7ZH+T6OgeyUpBrQhi4M/O5SVJwTR8XBbsWFHIceob\n/uAG8OF6rpzPtdjz5FnIEgzpOQZyT6oNr7F0y0UmkHC2IkTgcdz2V5wsO1wc\nYwCeZs4ewan0yICYVcOEHxSB/U8t3jGOKbLyp3zr9C4pbNbrJeTiwOqoDh4k\ngH3Cq5UHuHJgOURWfXI/LaQqc5ZvOWIycbmXN6I1ydgams43thUeH7XStH01\n6LqWKRbvFcr2KBIWCSIL1lH7GjNQ2YZ37EAgSMG9ncKS/dpwpSmr+d1rIx0Q\nVroNBqAnOz29t4K8Q/cTjxjAbu4oFKKFMTGGEqH7aMj++4lSJ+arBmRSQd4u\nr4s6OgI3ywMKad/eO3nH/OUK0m3pyZR8pclwGSt3v6bENztNLrTQFEPlmUdo\ncwGICo9QoXc5p2v/YCXsD8Rv4sFYxJUU0M8/xNFq5PUuneJXnI624JI34ulW\nh9HDWnZ68oZf71ibqaVD7aFmHrsp5tUGQ6npJ/Vuhzo9EzzwMcNIQWSg/V0e\nha0OleBHI3szIdjxFmWQ8uq6Va/lPMN7UoWouPBIvftq/PzJ0/PsXo9TIn0A\nuEKM\r\n=iAap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"df7fbf65943b1227b1bf145a2774abe7710b1e30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.905884690.0","@material/tab":"^4.0.0-canary.905884690.0","@material/base":"^4.0.0-canary.905884690.0","@material/animation":"^4.0.0-canary.905884690.0","@material/feature-targeting":"^4.0.0-canary.905884690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.905884690.0_1568677715330_0.5064697242093161","host":"s3://npm-registry-packages"}},"4.0.0-canary.199534d61.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.199534d61.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.199534d61.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":"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":"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":"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":"1234bdb53f94a68cddef30b050336d15a8e7b928","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.199534d61.0.tgz","fileCount":47,"integrity":"sha512-rZGufJ2YYYPQdJ00l9wcqrsvQJy2oi0lGt+f6dVZRzwzqIXGKbtDuYMD++PHCQVh0nWXZIj+qmONBibF30mJQg==","signatures":[{"sig":"MEYCIQDHqNiLozNDDGKDLiCFhVh6HUeMbCV6r+LC8MKdDVo+tAIhAPxjcNdIgT6V/taeL6ww2rrl7AsSaXjhEheIm7o59rJa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":306212,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdjlvOCRA9TVsSAnZWagAAu0oP/045pmP7JM3nwiyRugYe\nBmfaD/8h6h9raFO6cECK9JPwbsq4zAOUnue78iE1PTK0CxlkJ9ID/+ML+KDd\nPEg0e3s8kOpHz6Zft5MVap7Zku0isO49wF0AVYMBG16CRViG1qPgTFLawYcp\no44R6FTe1QidHjalyceONdlVaRU+DUg7Qv5Mu6e18JQvfmXamxaHnCtvKm/x\nMSI4HDrZOVC2v/p/TH9gDnp+ltMf+Wld9wKaLfF/wV5DOkWIS+JnP+y7aYnY\nChuyxy9fWmUv55HM7zMHV3+9wNKOjmj3BeHS6DtKalZ0utEEDmh7lehdNe9e\n/xwHfenC8MgJ+woI2b6rYucWVIYGkGCU0d8jLCUdOrxOsqwAoz63vJIIjqkW\nyL9TWpNi1upIjjKX2JhSjBGaJ02Ozr9c4gYL+n67c6VbF9+5y0IMleaBdXWH\nuL8QlyrEd4Eqn7Huan5tbC7UFP2K5rDO/BTxV8PLQcwwDm4PZCkr0ybICX3f\ndBXhLvWMyNe6TGtuMQxfYMxMLNlHxu7i+S8X0INpo0LsYSxPKiqsqcN536xQ\nadvoWwVbQdGROjIaoqb40rxjkebfWJhfNo6m71Y4fRXkNbWoyIaPVqQI6Hld\nVqkluzwwEr6KWjwYd3CjFQOZxI64/uXM3aWDI79r/yy7vfdloEv9sRjmsEk4\nviJi\r\n=Rk84\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c35810420b70c99e38a1438e1fd44e4bb84e21be","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.199534d61.0","@material/tab":"^4.0.0-canary.199534d61.0","@material/base":"^4.0.0-canary.199534d61.0","@material/animation":"^4.0.0-canary.199534d61.0","@material/feature-targeting":"^4.0.0-canary.199534d61.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.199534d61.0_1569610701676_0.5772984051345977","host":"s3://npm-registry-packages"}},"4.0.0-canary.22d7ad2fb.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.22d7ad2fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.22d7ad2fb.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":"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":"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":"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":"4fc5a259660aae04a89cbade8e06a3021c29d63b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.22d7ad2fb.0.tgz","fileCount":48,"integrity":"sha512-uFiFkORuC8fNzuzPP3r+lLWGjvS17Y1rG3Lmw6iwISWoBN13I3IBUSeR/KkBwBFAtqFVOAQQi8gnkR8jKvBUWQ==","signatures":[{"sig":"MEYCIQClOOQJgRcZdbpCSq23/XGliZZBlQDtwjClcuN7BPhgwgIhAOS+lUY/ewMnjW4ENCP/YT0WeMr5YjTxdRvvPyeop9eb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310589,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdphakCRA9TVsSAnZWagAAQPYP/jM3mCcMIKHQ6sxczmAQ\nlq0U6JkoQsMJ+jk8fgMyNhA8wjSBJAXi7c+cagZNnvqFbhaX2/piVDMTvteP\nITtN2SfMgA1ZytXLPKnF2wlE+ThBS8PR80rafYB/S65CpZ2tZzwdswUEoJc+\nzUYGqTrSV2s31NNs7xGR8esunEM46dm2Qvu4ipf3zLkPLt+8jG1Sgppzs0tm\n5fETWbaEqT3FRQKjPlyHcxbXAdmyWwgnYALVuCvLWmE7VAPzw/tTYgl8VSJB\nGTYWnakA3/+m+labb8bDqJE9ZqMUO94ecsybS10fjWIL1/nDuXU9Zsw5ZSaN\nlfG6nZbnkRq4kB+v8y5wh8gPlfpI0xH1AM7cKhVSTdVgtHDMUFj9bjw88Cmi\nt3zKtXoCFZY26JRSv/9jf5TJ1hgIM5XLqQv/BMb2G5NzQ5mjNimaxk3uKSEZ\nljzS5+p10qfuktGEAKwE/xd5BOXuBcTcJdzGyoP3fxNZ6QL0SE2eUCGAtxTO\nRPkZrBvwvOUShgQzXSA6gjaeoztA7LJvjZuWjwygqUcBnvoPwIBKlIat49/q\njl4BzC8mjrndUVHbZkOooSJBT5tZk51Cu7j4Mmd1QQHN+w0Zlv2dn9WwHWLs\n7qjc1MQ8RW+uGmQahr47HWjCrz6yJ/zReVPOJnovI3TaM/VVGf8jsuujOEcS\nwQTN\r\n=6nG2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bdc05bd56f8cbc11face1f0f2787fdb17f450fe3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0-canary.22d7ad2fb.0","@material/tab":"^4.0.0-canary.22d7ad2fb.0","@material/base":"^4.0.0-canary.22d7ad2fb.0","@material/animation":"^4.0.0-canary.22d7ad2fb.0","@material/feature-targeting":"^4.0.0-canary.22d7ad2fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.22d7ad2fb.0_1571165859497_0.7808060400028698","host":"s3://npm-registry-packages"}},"4.0.0-canary.735147131.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.735147131.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.735147131.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":"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":"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":"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":"74151b83d655a616bc72ad10bc1da5ed9d9e2f89","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.735147131.0.tgz","fileCount":48,"integrity":"sha512-EXxsYgpltBM9CInjv8RDlMTW/FSaejiguKcRunf5T03KH/gAyKApgLioKN+jfm7NSoq7q6XBVwcFelgvTvbIew==","signatures":[{"sig":"MEYCIQD7dOj6iVYB+ttDLL3XZRMJXZo7ya2wzDMTxSxBpfz5LAIhAPArRLhesWTfj9eRBlvi1rwvAuCdnHgWd1VKfNSPyXGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311374,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdpnE0CRA9TVsSAnZWagAAW/YP/jDGAOtpLDssdMPA5MFi\n7hK0IHM9pMiCmHgeZzuMEGiJL6tQshnA0+0GKTz+hx2FmyPG/37GdligDLxI\nQskmF0yNPSN5pMlvlNcLKCROrcSuAbpE9HRyeTdTqamqHD4Qd+Cu1F205p+N\n3DkdFmcRiLkJs8U24TOt4yHzlckB8rTY6YSNHwAIKS3Qbuy7NB4S4IYLH3nv\nscRvqXLRdjgZRVDFzyVPmAcwBcSqvF19OxIZ7hHN2FrcQ4o8BOTrFMEWwSFD\nL0pQdXBVK1IlUJaD/pqcwyu6tcG0UBOGNe/A9nKyk3O8wZ6BoFVUhycqgoa5\nJ1OQDgZRSAEX/wZfppEzkHAMDM9vaMrPSJyjn7r6OQwehG5+Ke9H5GF2OiKG\nD/fh2vV+u+hbrHD2/zxHUpe9s215fn8eDHjEZNuzNYwasZGHiv0PKeQ3V24B\nkibuw0nbXDMs/SuwxMx/+Oz0t/F9d7FFJdPm6k8W4eDfGFGqXNNX9UVLdfI+\n1XRWjXzg4EOtdaJzGnkg3JPByZ6uxmGinzB+4coYlLYaeNGGmYQ+Yv2j2+H/\nvufHqUHoyuvM7oUEv552q/NhmhRgH7uI/ItXs1lL01TGbYXawpCF5Ujx4Gfr\nmUDH9x4Llz9e1q00tYsKGJmss1fstmEiOpL61N6ywJ/Fe3WolRz310tjms7K\na6IO\r\n=cf1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d7bebbe119e39bd973d398066f5601862aface5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.735147131.0","@material/tab":"4.0.0-canary.735147131.0","@material/base":"4.0.0-canary.735147131.0","@material/animation":"4.0.0-canary.735147131.0","@material/feature-targeting":"4.0.0-canary.735147131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.735147131.0_1571189043859_0.6120723415348939","host":"s3://npm-registry-packages"}},"4.0.0-canary.062ade5c0.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.062ade5c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.062ade5c0.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":"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":"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":"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":"b0f4c2580a2fc4ef4ff3f3f90a364c16b7659b16","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.062ade5c0.0.tgz","fileCount":48,"integrity":"sha512-S5wPeMTpJjToYJRi/bzkUBlVLB4vVcg++NJVH0TaLrsmcwtoQlyYDLX+p+FXhsi7pIVUTHm83rrXb+mldhKzIw==","signatures":[{"sig":"MEUCIGZYhAVEHSCOe2/wd3wIY1HG2e1vm7AzlPV4TC0qQkY0AiEA1d1vV5NbKLWGV7eCb0ISHfu753uBL8paqQ4aqVIV11I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":311769,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp72ICRA9TVsSAnZWagAAd+EP/1RhvLXXie8c5Lal1ITH\nNUfZ6OVCEg0aVswI7XrvmAU3C9PRZT4aMlB/wKmBCtRx3apJXdMImSu1LVmD\nWO5iGUBU9kYRsytnfdbueCiuT4CFubNDhmUFMJd8vXhQf7Wwdm1G2I+riv/K\n7mjgHoFl+hVNhp+NCBtBkg+Sk89ikzrkrUqNyBsIBytOYzPOZznjRtDtRLFa\nnLWhq1qrqBGXoWXrw4gCeqOgm9vLYRLyD6XSQfNlcnZOXqXPtK2zUd9fb1Tp\naeoc15Z5OxZppSnGpJp5tp4WFNbokragpbTQy+zailvHdEcqQeOR3IA7zZD6\nw91B4b9NcQlbUMMJKqqmKN99Wa6+yWNu8K9+pr2NVLEMhpR5PL0fI+jhoWe1\ntwhbIXKBTbiWMTdgl7CItjjFWI01IPzTq10zCv6KGKys7aFVi28QYkWs+KhL\nC8L1rwMUt9+CxPskfA9yQCaBFVQgHbhy/b5U39e5XxWnluuGUVyw8GdJ1fzd\nfDS0GTY6ZKdtxE9q+daSwuymc0jp/UqH+paocB2VmJ2y27qYmpPaXttC5FNN\nqjV5/9SrTXb88qrDKKb03Yhkxc4BPly+hSEcCJVGuyaLxBTYvg0SKIpJEgmy\n1ANtOsCi0FTsv4pOJOcY8KpTFwWK+c/0ynQdql8yctDQqNXU2bb4Si/yHzvT\n92CZ\r\n=wr3e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e2025b4ba4d9837dcc1063934417df1eefaf29ec","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.062ade5c0.0","@material/tab":"4.0.0-canary.062ade5c0.0","@material/base":"4.0.0-canary.062ade5c0.0","@material/animation":"4.0.0-canary.062ade5c0.0","@material/feature-targeting":"4.0.0-canary.062ade5c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.062ade5c0.0_1571274120284_0.7690124300628651","host":"s3://npm-registry-packages"}},"4.0.0-canary.774ad4f8.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.774ad4f8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.774ad4f8.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":"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":"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":"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":"1e0b5e0bc2fb3799d8d8d1e424564281bb5f914a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.774ad4f8.0.tgz","fileCount":48,"integrity":"sha512-voHD8BBTzRdC/Q5cRTwDLd9JtaauSoPO858UM9Gdku8R50obA1Lo6WRpulHOR9SvgaMrRKsDybbHD7u43QOLRQ==","signatures":[{"sig":"MEYCIQDrhjsdCxzp/ZV6Ubn+2rQSvUZI9TCZOonDmuMBMxsseQIhAJWoDKNqTrylJRwb1iyzbKEKiL32DjToRuurNDkcg3p3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304489,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdp+iACRA9TVsSAnZWagAAIO8P/jWwSQ9W83QIcnogM2sS\nwecbAjGd1yyhUOVH8qAoli9jtSl6kFe+5AGuRk2JNjJpAUVzuQcXZcesklM6\nzM/vKWoZUcqqS8lvOfeGkLkz4nzbTAaZpEcl+TbBQTd9rofQC5ULdQ4cjwUD\nqJjGTU5dDQp1n6NFC6ZfhsiOjVNS5wCK0VZHngExd00A9B3zvwdhAV1D5mCX\nVKIWRfqU1VOf8kdhtPpXND/5OXvlJ9GT0CztDI/uH3BufDRqKTV3I78EKo1I\nJfrGe0p7D2DQz5P0125w/sci+ptJO/2W3IAAdvgCeaClh69Elo7C/tCOh+/0\nnuapL7XSaLraojgEF9Q0k0/ijy1bnIVEYtGI4lP4RlTFQlWTAAMIuWIl3g+O\nzNRb9cNrKsrwa46IZSgZeNTgT834nDkQzqBr27bHMV08IxcFUponnCTkOTH8\nWKMk6neFEI8VpU/Lmk509bDBxpGYciWEyWzYIKGzsTPhCjVCcpWc26q+7JcD\nOvHeYQwSQhEZBLNecQQkzU8l9wvm2iq5LGaEKjfO73vCv67uy3OnuMopFA+j\nkkrMJAaiugeQMfWZyxSEMmxwlypGfIZiAhI7mI8OuXBKFyvEfVPU/iZ1XGhT\ncTXRJEJrMFZNbnlwjK6Mg8ykKR/+bJ/MOSfDtKmcyxe3zd/uqTut10l3nBH5\nJYQX\r\n=k32Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"66607256fd6f9e4fe92319b094d8476583109bac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.774ad4f8.0","@material/tab":"4.0.0-canary.774ad4f8.0","@material/base":"4.0.0-canary.774ad4f8.0","@material/animation":"4.0.0-canary.774ad4f8.0","@material/feature-targeting":"4.0.0-canary.774ad4f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.774ad4f8.0_1571285120136_0.10961276830708333","host":"s3://npm-registry-packages"}},"4.0.0-canary.5916d18c.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.5916d18c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.5916d18c.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":"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":"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":"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":"a18a6fa6119dc8f5b9b03a4a002e04a167cd9cbd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.5916d18c.0.tgz","fileCount":48,"integrity":"sha512-ClMzTu7Ss0mdwBvge7uUGBAlhwsn5adCPRzxiGQ3glXmMkozRZkL0hxm3rPBQxMPl0R3UgiKkN2t4D3hQulf8g==","signatures":[{"sig":"MEQCIBQj492UdbAPjUJNMeP7RaXFUPUKzCL0s8jaqA/uq+IWAiBYhOQqn9HT6Oe423PsYN2Fe7XsLhXLuxQaiPpm1gEqxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304670,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdqhv0CRA9TVsSAnZWagAAc7oP/jNaWIuX5YFtmc29trz/\nZpJUUxHoJKQDdLgauc5RG9mi7R70Poy+LM9JxlLwQPKYo5tVXHlhy8G9qJH5\nCAEuzOSCBq0uCYA+bjdbkjIaJdjdjdtrWzhR8xz+nYVL856btUA2PD6vLSkG\n3CwQJSUiEY1+hWh6ZVngOVrax6WfGpMsxnZ4oVG/ENCddx5TSfHyq16tJk6E\ncDTVcBPeOZRGJKhow23btnCpbcmM+7Pj1YQFZRFPE53StYcEjuzlnQq6mS1q\nkEnJgkVSoO5PNXI2KS6A9y/vwgFMmqIO6piXmmZoa3CXr/BJYcFoE8l5XwQ5\nTMI/n9WuvFefRr7S9YyuUKwnP7uUkaQYMUOQaVomVZz1CZIKTgazyCEL5LKB\nCHzN9HbtTGmwqOnt7Q5fq8ospCGYHLCIXsnG+OxOMszuM2cCZK3UAmMcW3XI\nEmokcYpRTsUt6KMNqgg05s/eZbALG1FXzvQygLoVUTbpgyY3WBIabRpMVSTD\ne2mxpJWK1Cz11dEvGH7LoJMTxS+mTDt8m6j2ClYJtM2W5M67eIfOTF9xpLUX\nSMh4aAHUyXiha/WPjUGSR3T5HMx1PZ4+8CqjGjGErsuK07mF1bUU4CcZ7olA\nhAf8AQbYJlw294mpBC5Zpj7mxnix9UJEYYS4wBKRMrWsYHDzcz+CLm+tHosb\nnU5M\r\n=tjgN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e3338b891c5ab3207ef8340a75490415e30e313a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.5916d18c.0","@material/tab":"4.0.0-canary.5916d18c.0","@material/base":"4.0.0-canary.5916d18c.0","@material/animation":"4.0.0-canary.5916d18c.0","@material/feature-targeting":"4.0.0-canary.5916d18c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.5916d18c.0_1571429364015_0.9661073651278924","host":"s3://npm-registry-packages"}},"4.0.0-canary.d4141c95.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.d4141c95.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.d4141c95.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":"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":"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":"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":"66617b42849b9c2da736bd9070e3f62d1b1597e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.d4141c95.0.tgz","fileCount":48,"integrity":"sha512-Hf0koryFILNlaYyW4snuVNFkHeCudyefH2c5gmurjiVs52joMIA09KvCDrbpwR5iW6tCShEety2TEr2mGLjrsA==","signatures":[{"sig":"MEYCIQD+CK8/CSeQB06o4Us6+cN0su7kogelfSsFL95uam7hwAIhAJ4mexvUq3sw5ReR0vO5VC67fFnZOPfk+LX3hS+Z+zbR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":304669,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdsQC3CRA9TVsSAnZWagAACbkQAJR/TF643ty2jh+lBsnw\n56pqeA6L9dC+nr6GOqxSxjBdy/aaNzNFoP0gIzwKU3Ppv8wcxgom6JOopYWK\nPQxQlawHu//ONQ6L/JE8RV4xUNARHMSbVkdu6Aq5B+8QJw/eJ+IN/5+V/InE\n5shMTQ8PddZwUTo2dOyzVB4UikK/FJu0S/ji6eak5O8GJu7uh9rAJOJP4ekN\nHfbcIQXcsaRtoi20xPAwd1cycKdPb2IU5ZybB5ErqkzvGY6xmI0bzHXzoh/B\nmdsNoqNt6cuA4a3faBD5LpnsJXAspCpj3YCzcUKsErvMyKa8vv+SJcclyS/G\n3dTjNef0/XvijoOtNaajq6bub9ff3r4kTBqenWvfHoo647oCQBnc/E97nu0R\nDkEIMt1bwlsurHB8Qs+4Vebfb9FJghmISuiGwcu7c7FEOMSaqtuTEU3nSafO\nQ8WlPrhMYEBuTwRq4hqw9YjvmMRSelbxmSpo4pOuZHZW19qgDS6qPhMXOx62\n3IYRx1KErXYipYQijKxvNv0jtYkVhDxm1ECdpE1mY8mOO6y6dpQV3MO6iaFT\n65h/ZPY3k0N+aHrxREN1FzGh/xp3g2tsoCIeqAZXGOOf72OldzA/7LVwJuEK\niL8oYqIOeGbIy7TZhIZJsylq9CZNxNN6R191kNDB/odse/mlnJTCMbI22p1J\nPY7c\r\n=TMEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"10ba5eadec617b7fd2711c838dbbff788d6f209b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.d4141c95.0","@material/tab":"4.0.0-canary.d4141c95.0","@material/base":"4.0.0-canary.d4141c95.0","@material/animation":"4.0.0-canary.d4141c95.0","@material/feature-targeting":"4.0.0-canary.d4141c95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.d4141c95.0_1571881142714_0.8916364040957436","host":"s3://npm-registry-packages"}},"4.0.0-canary.2b878b3e.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.2b878b3e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.2b878b3e.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":"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":"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":"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":"ac3e44361d787f8a6d634ce64ad33ce5844f3791","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.2b878b3e.0.tgz","fileCount":48,"integrity":"sha512-t/6h4TnXWB9VIBYUlLWdqGX1GKOfr2M9EAg/oaJ8nCwKN7PlNPfIxnoaosDmWnAYXbipKm/kBdrxHnfanVlDVg==","signatures":[{"sig":"MEQCICChuQ3GBx6wrjZbIzNuIwKF9bhN4vf3vMjK4leC3sbmAiBUF0lNlmDkTL6JRbYgKXw74N5ayhqQTSqbM2GQHFa2bQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307543,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdslnYCRA9TVsSAnZWagAA6FUP/1ImZuLd577HoBMpkGHm\nOx5sB8ON1WWMwAIsNnrus0LKVVW+1tqwcPAv3EIqyjiUH/qOYzwW+QRuffls\nRtPbfF903UWH6sZI4CQnL4Tyy9T2JMAMe++QGym1gVctJ+P9wbsmoXXp4FvY\nOAp+YSmWSqL/+i0gGIthdzKW5+W4HqkK4AlLc2pem7PHZwDhgiURXyuShHsc\noB2p0GSSKI8XWajhQVPjCkCMewy92YozsNIvoqf83fNZo4Cf+2en+O3dExE2\nTz/66I4at+2kttS9vdc5bqfEEsGq8e/yIRZ7lIX/BZyaqhu5/5DKDjVPs8Eq\npodb8mfJbSCtbDiSn2F1wivq4ryqomENdYH91bVN06GoRPBY1pA3xe7JP1dn\nynt4kNhapDbZvANGDCaHNyUBwihPGr3GlDudKMECxDymc0njai3is8BQAWbs\nInaZoIoCRBdlH3tOXwYPhhDDGtNJ9bVBZo3CvvY+O7ezmVQyK9dj044N9c4d\nUuzghx0y1VyC+Jfrw1Posp3c2Zc+03XP4yquf2eysoSw3vZBLpLZzgWyC+0O\nRooARQdbDKy1cZgtUuWHEo1TRkaEfc7Wocf9aYo5iviI7eXlKtWRh4+X8uRk\nN8O7P41NRzh205qq9PAjritdz/7vpR47O/hOa9Dqp2UGzoJDRs0HKXjjh7lU\nWOzZ\r\n=8Wzd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"29ace6a085b0e37c6546b4613abba6356aa82430","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.2b878b3e.0","@material/tab":"4.0.0-canary.2b878b3e.0","@material/base":"4.0.0-canary.2b878b3e.0","@material/animation":"4.0.0-canary.2b878b3e.0","@material/feature-targeting":"4.0.0-canary.2b878b3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.2b878b3e.0_1571969496165_0.6025641980539533","host":"s3://npm-registry-packages"}},"4.0.0-canary.b06c0efe.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.b06c0efe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.b06c0efe.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":"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":"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":"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":"2379b897670179f92cf825e28d0cb9c3f08c352a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.b06c0efe.0.tgz","fileCount":48,"integrity":"sha512-Pzsr0SCEOtrqZtofb99w0NnZkgXkVOAY6iOgq/EsGHDZeDcEiuTwTkSCKNXi2imvVOjQ2sx6g2SOoRTa37berg==","signatures":[{"sig":"MEQCICyu25VIuT1Fjd5k4O28u4XyHW1ZwG2Fvxly0R2kA6VHAiB8PU7RUK5SdD1fJ6qoV2UxRMNAlecXapajCs9Mf+zFig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJds6L2CRA9TVsSAnZWagAA8N4QAKT/sTGrS7EPOaxv1ss4\nDDYmBWysM2XERNOOnEtDo2AuO+8iSBkCcn+XtwrfAzFmWT8LWYNjnI5Z2etH\nbk2KvDCuBZ6uWOqP/ms2guf/sNvwSfftG5QPLGZ1VpCtPmrkaqZbAelOewTo\nkqhG46i004JwPqxfi+7D6dYMFCJbJb6ZnWlzB9aAdQ40PZae24WIYKkLroRc\nG4cQA+/ewKI4hSbBi/GOa333iH+Mckh3Uyt3+qzqvMAJdW6Qx8Kty2Ky8FZB\nZ4AEOdAXPCDa+owm3TQ2naQdYsD8AMBW2Vji2Ml80cHWqki1DWQQOE4tDXB/\nSEV7cajXTjzCsjJIp672hJPR30cafMTPVp+p7kXuIxXn2Y5EB3gRkGfFPd4u\nmtVTb1+zg2KaSedThdyxMfRnO1ICOvisdAnvrjQxV4g3TnaYRVjplbWRs3W2\n9pDiNJeqOLPFI4I2QJFGrM5T0Ub1/t8qlVrWISz4HbHGXte5QZ0VSZwakyMW\njrDK0HC4So074u5mwh/20QsLQVFFxV3EM9Rtbf4GaIJHTVP6/ZwnPv1gVLFa\nyb2vkeBnUXDMXcln+dMwc+Fukuw1kDN3KKPHux+eFbllBKWy8Zj12Zy9cG3i\neuVnwtbwUb6zB3k5nFu+GGrtFX5XakLgx1HnvH1/E53yMC+YVQnIXSr7XFZV\n1uGp\r\n=IYMf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"023500a209a10669d135ecd0a8f00995f84b135b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b06c0efe.0","@material/tab":"4.0.0-canary.b06c0efe.0","@material/base":"4.0.0-canary.b06c0efe.0","@material/animation":"4.0.0-canary.b06c0efe.0","@material/feature-targeting":"4.0.0-canary.b06c0efe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.b06c0efe.0_1572053749608_0.23655783103319394","host":"s3://npm-registry-packages"}},"4.0.0-canary.01628efa.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.01628efa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.01628efa.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":"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":"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":"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":"eab56f0c1c68d13c77704447c8c979c8d52f8ea0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.01628efa.0.tgz","fileCount":48,"integrity":"sha512-RS/ygYr+q/GNI5By7i80xiPQT5W/XqCR1jFXTlDppm4fu1N7DP8/VWimOHtfwXiH2zDzDSQY+PnATssulVuERg==","signatures":[{"sig":"MEUCIQDnhh1/9kJdlLqqy4ULT5fKKV6xmxXX8WaQ1rr5z8tpaQIgB23/dogkJeQMkFmDxOKAZaKfMRGdMAG2XdcTrPofmoU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307540,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdt4HlCRA9TVsSAnZWagAA0ikP/2m6WwXBmhTiSmHhvfye\nCwb7xJ5kwdep6AKyyy2VhSKEdtYn44xuk0x1wKChTbq7tRxrtugknJQrqYFk\nYsnspCMz6FMFK7gcHr6bFg06HdGBSB4lCdQcPuuKlpm+4hFiu6HYqqC1/+01\nap0WRQ1rMESpZCzSOE3s0K/clmOUVoCrqOmnZq1s5f18cHANe3wVqJomV3N4\nFFheSgiVhbKAte7BcyjLEMgPp6UrXrEe2p+yDSezFXXb7nB3fRlYz7MgEr6b\nC7LR5pp4ykWELiDq41P8eR6lWZYDdCT6awHeblhdDLnNeFYALHraTs3oICXK\nXxOd5Gp5Fb6v255QsDoheA05q/14Jy6cszUdsp2FHalcQHazgWdZOUF5KZ+i\nO6/xdhh+qfBEf7k2Wb2WNnP138lQMqxqPan9gHjpiUBRN/jb1lpGZTzdK3X/\nV2+TEXY/qFZeCqVi1V5uXGxTifj5bddw76S3ddgjxaemrk7OT0z9CngJJDcP\nVx2nUjzZJHgaoIaP+rLXqpALPlt4FDg9ZriYIJkDzPgUfqWzVuMP8lQl8Tlb\n6bcDbeIWvHJ3nQNNLEHiMUk8awArNI0ZVlVelU6BpUmsdoyPemujQN9jBwRZ\n4fSR/oGIfLehw8Oxj02mI79WY9iQ8ulSKp6JB+C2Wwq3CE5VLlFfmwLU1Rlt\n54xO\r\n=qakR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d736a6d7c49f31b52dc64101effcb7cb18ca6cc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.01628efa.0","@material/tab":"4.0.0-canary.01628efa.0","@material/base":"4.0.0-canary.01628efa.0","@material/animation":"4.0.0-canary.01628efa.0","@material/feature-targeting":"4.0.0-canary.01628efa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.01628efa.0_1572307428784_0.8563452490327037","host":"s3://npm-registry-packages"}},"4.0.0-canary.b5c6d66b.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.b5c6d66b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.b5c6d66b.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":"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":"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":"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":"95bc42e9c5b23f77dc0f11669afc5ef132c516d4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.b5c6d66b.0.tgz","fileCount":48,"integrity":"sha512-fXsOiPflf1ge8/IT1tFvVWnuHU6tLxyJI/7Mo4FBXHBtac9ofkscqnJKCIF/vVz4hzdj+MLeR1Zzg4NLU/AXOg==","signatures":[{"sig":"MEYCIQDw27VsemRR/0fzIgLUNZiKLXVP21P/PPq3+0IfY1WCXQIhAJZT7/PWSxhrlDNqsoRNbk9M+c7B6hCOe+tlVK9Ac+dc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307427,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJduH2UCRA9TVsSAnZWagAATogP/2jSARbjCyb1me1dc94i\nMNH7sxXXT0xlclbNPh4toZRnKW3i+L2gthp1JZiiarqVpa9K4kqffVZrk8Qn\nC0STY8/I7wH0oNysk2d4UWKeoc2Pup/iL7sDBic3siuGJfyGwEAoT4CtcgSj\nTGD6P23AbedcKX3dV3aEpYxlCKHN49iwiNJqj3k44Wtn8ijn77wzVWJGc67F\njt+KyYI/eHffdIsHN3GMiPNiWSiIJu03K2dLyg/njXSSPnyg0mn93OeigwQ4\nWCN6z/Pva7HF8Vp7NEnjErYMsH7LN/KTGMkiis8HkLOt9QUQZUWNSyNdhx74\n1dX5741YMishQH0UDUT+yde4Ys0Tq+1bYo+p6atjbbKaucCiPD9afs/huCkg\ngnp/2iY4h7MafpXaRF5pZJTMiFh1m1/rHdjWcKD/H7d0S0Qg4Cytb+w1aa07\nMsYmPXO7Q/SOHIQ0g36we3M7PX+SaPTIHT6SiNe7t5rwnoEfsIvzebt2d+nQ\nd6dCpsoePC0riccdfrYNTqplyJdHXzwRELy2IU988sHKeE1Yk237h4mfRhwf\nCLhUhx2z9rdUvn0WZwRApvIeCICsYoNJLiIA77Yk+UIf070MalgRT9QwBufG\n6b5nYojBcjzRvj9WwveDOBvHNz26coeE9lUtvfv5ZVhji2jbbXV7coY8+3FR\nCRx9\r\n=zBdW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a29efb24799035b1ee49295daebf1ae46a92b529","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.b5c6d66b.0","@material/tab":"4.0.0-canary.b5c6d66b.0","@material/base":"4.0.0-canary.b5c6d66b.0","@material/animation":"4.0.0-canary.b5c6d66b.0","@material/feature-targeting":"4.0.0-canary.b5c6d66b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.b5c6d66b.0_1572371859468_0.7348614063079169","host":"s3://npm-registry-packages"}},"4.0.0-canary.cdf858ea.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.cdf858ea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.cdf858ea.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":"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":"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":"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":"f42d4140935d8a45a4bcc6ef4d02c5c9685a0a5a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.cdf858ea.0.tgz","fileCount":48,"integrity":"sha512-tlXHY1t6Ms3RE9l75L31r5RlMqga7+h0Fp9WHgYLI1iQ51QKiPQEQ3QD9aKF/d/X8vV7AConGrKalsjs5n8Rxg==","signatures":[{"sig":"MEUCIQCdxSpDOxfzTa/7Okak5FxS53z0gEPUdPYidgDhni1XbQIgRp0e4/u01p8NK1skZN+gxmpA/aARkKD1RudU7KOp7E8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307253,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvHKJCRA9TVsSAnZWagAAUAcQAInsOnLpq3r8ldfqgohA\nbLXU16T0iIF+o9YzREMnT1rn4+ndnctcCBPyJIZn+hYFEbRODRXs4JWgf8oV\nf2b6uwoIa0xxU9lhL6HF5nvLydd2wqGxZTReBq1JVkSJQiBgBeUG+h3cLOgC\nSFWVZVQvc2czsAWyWvWFDUOJKStQ5ssQQ6rT0Fr2VBhJLS0DXxUu88XDdGO0\nU5W81eNCP4gdnGXx+J19uBybQA9IL+aEc0pD8+UVMY1QV2qpIadnfXcG+fsQ\n0G+GHrpMPS/b5tKtSjS3yg2ulWuscpol2cwZ1ie5Ss4aFaqchU5oJcnV19Q8\njWC/l/ydx7AaDeMP4w+5HoW0CfPmH+ww+oX4e7YHkrBMtPz9JxKImhI0/bKH\nb8lGvLRq9Z1FCqlxpmpXIyoqkABz2ERHa2DHBdotrLnJkjD8X3Kz+pLAHZDU\nS1SdlQaqyuMa62BVx/WdRugX72DtyJlMOwDHcgfsa+jDNSfDIn8F3vMDTTy7\nHOoKvuKz6ZomKoJvM2riemVfIDM8D0zMGZtP0ZiDSkWs4o9sBfpYa5OH19JR\n0MKwbt5rEI7JL/R3lzAAHmfg9qWbH/pQ99lsA+dt9nXy36h9ExjUuFDDy2au\nvnHh8mVhpGghvWJTmCIqHUlplFUfucn7nQLx9cVrkHUQFePQ0jTdny3n7/Cs\nTs7e\r\n=9gWa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"436b9be1155a7b7c0fd4aefe795809bcebe8dfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.cdf858ea.0","@material/tab":"4.0.0-canary.cdf858ea.0","@material/base":"4.0.0-canary.cdf858ea.0","@material/animation":"4.0.0-canary.cdf858ea.0","@material/feature-targeting":"4.0.0-canary.cdf858ea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.cdf858ea.0_1572631177245_0.8855657127165086","host":"s3://npm-registry-packages"}},"4.0.0-canary.719b57e1.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.719b57e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.719b57e1.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":"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":"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":"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":"9efec0035244eee5dfd02b827844b273379d3490","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.719b57e1.0.tgz","fileCount":48,"integrity":"sha512-MrU1BN6rCLclGRdcN60ofciYF+R4WeuAG/JDxE1VArjbccn/CNdvmRze8tv0JQlIBr+bW8M7pn/o0z+lnc3IrQ==","signatures":[{"sig":"MEYCIQD+nqKRUEEXY/Ff1rcWa7g2KiznJbYAFkYmlRk89Uz0wAIhAMgZjogJDCFxOJ9pouwbb+VfdDJ8yl7HLLTsXjmN7n3K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307443,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvI9OCRA9TVsSAnZWagAA3K4P+wR8N/W7xmWgXLuaNP9J\nKwRRcF97Cx96McOVMaTcjjiTGtFlcfwHJsk1L5Imy6qMeBqOMadC+f4tBfeV\nRrPVcB1bVkJr+HzEYgGxubBHfhm9lQWKhAVtEcxCKLbosvIJWDA5bxfy2FNT\nyz+YXrpKX3dxYdwxMXLxm6R6rAYHEgbLSCICKv6wpyLALyPiRsWteErAs1xW\nRUYnVEuDKhs4pTdl4sdASKh7zWB7YOPmKK+8HDO/Cokxim4DEFYtiTlvijiP\nj6GQYU3sDhCN+PFTzzbDmn0I1Gx2uSsXUgEx94hMgdYIpWrnSw3M4QSp6e0N\nhayjjhazX2XTimAojSSfs7j4lcFUQuf6S9gQ1/Nk6/Ku3QRpNxU+aWe6mYVK\n5nfdbSzx8mRjVPPtJwabqMjwrl4QYMoCaWlMVFi5T8OnI5gHMcOLTx5yVcMG\nnxcYS+voOEhxj+3kH8uRPYdrjmXlc7DGHmnL+c8A69pA4KPyHoHd70tTjIiR\nhUkLV+2lOJEkqFZwfD6qEVj6krK+JjC4+WcgO5mcjqxaKjZ1OnpdoHJNpjDI\n/DKxl2UDZrUN9jQWmNfYDmKEjFg73e7nTrlnuZdpLC42aErUsMFl+nmxTAJd\nFyBoLRVUAP4l6drtGwAKae8fhgDmo06T8sHQqxNY2KVTGA/QQvtCLgrDnv3C\nW/iZ\r\n=5BW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4184aa06e4862418697a150eaf45a13500e1c4ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.719b57e1.0","@material/tab":"4.0.0-canary.719b57e1.0","@material/base":"4.0.0-canary.719b57e1.0","@material/animation":"4.0.0-canary.719b57e1.0","@material/feature-targeting":"4.0.0-canary.719b57e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.719b57e1.0_1572638541957_0.767081032299493","host":"s3://npm-registry-packages"}},"4.0.0-canary.97cbbdc2.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.97cbbdc2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.97cbbdc2.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":"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":"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":"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":"5706983dc8ccf600c2216f7ae4bc172547591ec3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.97cbbdc2.0.tgz","fileCount":48,"integrity":"sha512-IKVtjZZekRNhBgUTeGrL7rGlNMyCnKQSAHi/fk+ocGcYuYPLr4ufkibqZtSygO+0xNs7z9BrheFsV/WYqkr+uw==","signatures":[{"sig":"MEYCIQDvIOpRRflivcHV/+JjNXbz7BPWHvOZmxryCkVDHGYCnwIhAPgBNXsCDxGcxpyjOowy6OUQQCjIqvRWeKpFZkAK0fns","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307456,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJXHCRA9TVsSAnZWagAAA6EP/AmbQdjlPm9A/323VF5U\nouwOuYTXDvLyKRpiwF/2eusPU61O3FDccRpyF1TvSDIcZUFOtnnUxng3NzNY\nQiSTVJDdD1h++0AzbvomFmXpEyzkt5mY6p5Yk2CrxTO+1ajOEaZNQYl13kK2\nWhgXHDzE3G+9OZ+/sCCzG0CvUO+jDsl+fESoizD1jGNNS1zYwRrpykEFKhg1\nUrVzoGl3qAzJHX6BQSqYKTkvFkqSVXS3x+OGOtX1dJCNI6MwvcLEYlZLrZ+9\nEwf1fuEnYrZu6zAlsCFh+zTrSfVn/ub54FRVz3RtLlbjB+eUdVVdyxqV7ypP\nw4vUX6SCGOgyXc6yFooFQxGuFy9ZjU/hIFoEAvR6kY+QKGp9msb20VAmAFYE\ndnVcq9RsX+5fcXRxpl77c9nKDxQ2XzQQl2a2CuNoyj6rJAKeBWM2wBj1yKgr\nQSgAiPgknuTNORGyTVPPttGE313kHadMICWC0TRqKs8ymJ84vXgbOythPjbG\nsWuujS/Itv4EV1HrGAAr0wxZ7BwJnRvwn6wcc/VSrv6wZTRY4ZAZ/fAXD3Nv\nAxLlw9ltsGM6RamB3jsMtkwFKl58Makb+DbD20of7ZiAZ/Kf7R6AOfev+CGR\nk8kNiF7D3/TFyQSgcn+5iv5vWg5o8XQdGKxci1qWjroNVFkDwjrgSZKphicM\nfRzQ\r\n=TGX3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"49d37bbcdfa0f5872581945f58c03e62abb97090","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.97cbbdc2.0","@material/tab":"4.0.0-canary.97cbbdc2.0","@material/base":"4.0.0-canary.97cbbdc2.0","@material/animation":"4.0.0-canary.97cbbdc2.0","@material/feature-targeting":"4.0.0-canary.97cbbdc2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.97cbbdc2.0_1572640199079_0.0137803909230787","host":"s3://npm-registry-packages"}},"4.0.0-canary.8e36b3b7.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.8e36b3b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.8e36b3b7.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":"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":"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":"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":"fe30bf49595ff9725fda50dba1b426bbd45daa1c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.8e36b3b7.0.tgz","fileCount":48,"integrity":"sha512-Q8Me6REFG+GBmGz1C+P+hUKeJRMrgXovr8SWemTxGGTs+UMjSkxZH2J5+HhWf711aPeX46myRvFzTSX9nm+VQg==","signatures":[{"sig":"MEYCIQD7+1EcrpJYGc+2FDy1QAerLKmGOoc7mSACjPVm6dr4fwIhAMzJmizTC82vU/jULqH2M3unTMHQnn1/sy+5hDAmblPm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ1bCRA9TVsSAnZWagAAabEQAJCySjYZYJ7lvjpZaCFa\nCZh7QkWG9lciyZzBPLzdFo973PngBiCCs5ReUI2R/6RD6inskUgWOdKDioL7\nKh1jJgsVrWC/bZD9V6SEkhgM8AOqKcQIA6/hk1X/uAk7+H/XhqTGKlu0JVRm\ne/IrbP0e6Zn2VXkgMmgN4EznNQliBmpx7nKqWLeEzGw+nAh2Z0zMrDxxTt7a\nQqpX1x7aaKnJy3vpkWqj0/j+9G3qW49U32WKyKNhjNSCXVBZOm4GmQtlB9/8\nvOAm8RlcpYmvotZj2d7B9EVGbNfY7RihKsbsjCVUxnVZgVfLKjcY9h31gvR5\njhmaexD4Yoxd/onqDH8obWwSQNnIM0+Vc1fo/G/vTzbjnYKi0sLbkQhBZLGq\nUDclTDW0PcEQE0+b8wxUSUdJZn6Ic9kuI4DhtDHcPzawJUryXRia8Nl7ISIB\nT9P8n31xUJIhPJ5HileRofNLsZuhFH6xpYc/erZBObxOJZnlbvV+Gju/7vyn\nXTYYtj9VSnIGZrBC151ozVDutWmsQtK7aJWXXaVIWUvzJRzqWrjMfHXB1KjA\nzuWFcNy+iOlM8zId7U0tEbLjJyqoWYa6KTy0p1qaRrnYTKY0xCBATJWSf0YI\nChLIqvsfWpr07i9vF1ezjPWd0tbQLaBZCSgKZkZJRXDEtuSzlyz4FQ0msrMp\nebwf\r\n=pMQO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"62f51968b94685823af7942f779c63658f2b0350","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.8e36b3b7.0","@material/tab":"4.0.0-canary.8e36b3b7.0","@material/base":"4.0.0-canary.8e36b3b7.0","@material/animation":"4.0.0-canary.8e36b3b7.0","@material/feature-targeting":"4.0.0-canary.8e36b3b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.8e36b3b7.0_1572642139241_0.0316322660768924","host":"s3://npm-registry-packages"}},"4.0.0-canary.62d3a09b.0":{"name":"@material/tab-scroller","version":"4.0.0-canary.62d3a09b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.0-canary.62d3a09b.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":"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":"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":"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":"3dbe196670d11ca368bf9b1be1ea2f5684f5ce30","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0-canary.62d3a09b.0.tgz","fileCount":48,"integrity":"sha512-ydwK8EaiH8hweuDinLZ/Vc4sH53Ys8xNcjTk0OXGvoJ0Ne2Rr4yPXB2OiwyrMH9ntBcLBXnYKGmAUOLdmXs2vQ==","signatures":[{"sig":"MEUCIQDBpQbgoAWnTdjo5bqXOcmpLVveu/Ez/Yu0/RZscONaswIgf60QE7MVrBFtm7fKkyk3Ni7MEw/TG4WLt146Uo4kO9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307249,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvJ+LCRA9TVsSAnZWagAAHbgP/jfv7jRnqIyjICiddVOh\nDg2uqjOC3L7CKcn6Px5zdv5cD/yBsaA3G7L6iEC1EKRVzGZcX5KagEcXkJLN\nn5x4ghhsC0UF3Av48XB6Kz1K7Crsg1snCpRB384syI+VG7m88vKcJwHcmft0\nb/MtQIeFPvWdE1IsgnUbY38P4h5z0sZlq651giVqIU6rGqzz2BciSfBNBk2E\nLl+dcQDgeqcWwJIPzOvCXvWO0UOAxdg+6/okfbXy0/pmOOZgLq/TWLqJEA7W\nWKL4BWf36PZt6ls1VkaY7szdsAbo+halsqtyfjEhUHpf2ABRd5FHv+3+6L/r\nUtXc5k2bBO/raWBLpR46wHSnM2xkE6yLzIKuRr7qrwCgGn+ZO69XlrrhB2KN\nUS7ZoCA5Kxha+aHIT4dwtWuR8S/dpycJvU98tciKW11P/AhoKjELelcgFWNZ\nwvETN78NAXcm9uIjGWwBr+TUo+EtYmQ8d973WSUZBnxXM0ZHuse8QIwL+B+L\nz6SkfccBXk38EnYToCuQ/vENTPKISw8KamNnZEYdTg1OFYv1Iww1yIkkdP3U\nS7DpLHCxP7RIMugJvf+Dj4yLnLESy34n9w//hClL0SMUswKv8a2ekNIaXhzl\nSW4JRs4y5l3xcNviQE36Y3zRG/V2DMQeLMAJ2OB/mOjB5fPjZ1yjFiz5nhLE\nOUEp\r\n=jM9x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e00a9686a58b0fd5ec957d4008b6674dafd4dad2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"4.0.0-canary.62d3a09b.0","@material/tab":"4.0.0-canary.62d3a09b.0","@material/base":"4.0.0-canary.62d3a09b.0","@material/animation":"4.0.0-canary.62d3a09b.0","@material/feature-targeting":"4.0.0-canary.62d3a09b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0-canary.62d3a09b.0_1572642699086_0.6751637646383657","host":"s3://npm-registry-packages"}},"4.0.0":{"name":"@material/tab-scroller","version":"4.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@4.0.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":"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":"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":"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":"f8ea0094c36a1f0f49e85575015d6067477ff8a5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-4.0.0.tgz","fileCount":48,"integrity":"sha512-S2DnAW64U5TZ8GMlwmLi3XjCrnIxgz6kB02TAlzOfPlRlUfE/n1c5F1UbMjyED9kc39ZpxL6ppeKLDjdUuItpA==","signatures":[{"sig":"MEUCIAHSfrT6ahQH85eA6Cp4SN5QSbRhVzPv9fr/zGpDp31dAiEAlfCRljZ6zo04wJUyafy+eo8XY0zR6GW/NMbLY6vnxec=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":315115,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdvcb7CRA9TVsSAnZWagAA6qYQAJXou7ED74RJcoCUcKgs\nabaHrEkKsj6n7CTiYtvtOuBP/ZiLAT1Xy+a/uZ+TtMJT9ggxB2RLgNufIo1S\n14dBuz0e9mw2OUDTHVsIzj52xv7Oqo1+L8EkHXvtmTZx6Xx+XOzVpxTJ/6Vo\n4f+/TLdl0yPpjy5NyPgsY0KuSYOzziVzEGS4+n6jcmyYEN8Ok5OneOIeFyAv\np+DN0a7XA7d5QB07FFeX0Uxc16cNzDioO1O8ATDULo1tb5slKcNH3/v66tyZ\nbVpJUSOIv9kcUIVHDWibk9IArA9MZfLCmTFu7v9Qg/EJV4zZqLkFV9IfdhPT\nMt0RFmK/qbAW5mXRytgny5q24UG6nsbvKTcwIXlDXEoQ4Vl/FBXyxhcyaft5\nS3666o0YcLcXujEPL9PepcP8Mqnj/O1XLmvyjkRXmD6KEOLq2RAtHIO0LEHr\nmZEGdJXytNrk1Lq3tW57y+BvcrHtNUNmseHuPZeDGkXGGdrrEfcmr+sciU08\nJWonOW8l4RlIvi5VGmMFDDVLgZgBUhCeJzpGAYo08FGLGNbxcc4lgmgG7bFR\n7Wec4buznqYhdJKp57bb7H4xQSW75rSrLP8nTZZJji2FvdfNZ+nTP69KR3HB\nEVNKX4MMlM3dWKDw8/KajSKaTVwgo+MjfdpOVtmmB1b5HI0yxlkL3PtGiqAx\n7+bx\r\n=IqrL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"8fcbb009cd3b5cc004b302613dd55ab4b5d6ef72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"^4.0.0","@material/tab":"^4.0.0","@material/base":"^4.0.0","@material/animation":"^4.0.0","@material/feature-targeting":"^4.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_4.0.0_1572718331370_0.30436982341751384","host":"s3://npm-registry-packages"}},"5.0.0-canary.b5eb51e94.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b5eb51e94.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b5eb51e94.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":"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":"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":"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":"668026fa124de0604de764445352f1e0ef6c0a45","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b5eb51e94.0.tgz","fileCount":48,"integrity":"sha512-8g2s7NeEyFVOtPXqAn13ZNaT4d5qgL+Gk5X6Bv4hBfQKpCneeugMC8fNV76RQ4PHO1L++MyTje81gF54XjVf0w==","signatures":[{"sig":"MEQCIArZ/u+DE2gb0gEU8jQwHItQAc03uOwuRRSAVwMXXfTUAiAS0hFbExaXmfhk6j+QT1fdeKbvS+et0llE5KEzzsStYA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxGO2CRA9TVsSAnZWagAANXYQAKJX49kb42Yc+rBYln2K\n34OWhy5IZ4ay9T/agWdvLVefflBvFnIThKN7tgBy4mr55d+974X18bCL4dwq\nD5YhGyaLMSRvvDvTUdzlot1zpWVq+NGA32ebmarxoRZRwx2ZHkSWfvC/rTyT\n7nQorKhqS5y1wfIzdZCFQEOJs90CAQGwP2Xx0zSwG0DMUVhlLJSmsexRBzX3\n1v6jakYh/IBm1Aa0OF0EVGucwT8N0v93G2ZLQHUpfZsU0BclahncviHidudz\n1EfUmUVEJo4G58dafXMGIDvN+IldmbzWrus+lSJVvw2agnzdkBmG2NwLHtmX\n7I0tul9nNOsenDc7I6LWkh5oBTb1IjDKbya1BElPJPS5GA1wargMBA4ar5oB\nElpyVZyGwWbgPt35X8eo200mDUJ3pi/yNDfhdm5pJMFBgPIBFl2qJ3o5KB7A\njDQK4kZBK6UT9+kWZT+eikrGtOrThNIuaNqH/VpUhoH3vEEN8lJnTOgL/E1v\nE6y57EH8d9TIXRqkugiZNIH0LocMqMAdHWt5EJvnABzlfhfI3hhNZfOCXHRK\nYGds2QYGQeETEXta2nRrrdFCDFRuZYG/JeaHDQY8vbRUeqKt5NxDQZ9kl2XN\njRImcIT5L5S+0ba8zxl4Wy0Nh3a+wZ+GOtrMqC91u4HSy68v5RDz2tvEhzIX\nw7IK\r\n=JXl2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7e8d43f563cf6b162c2aed47d2a006564994e4d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b5eb51e94.0","@material/tab":"5.0.0-canary.b5eb51e94.0","@material/base":"5.0.0-canary.b5eb51e94.0","@material/animation":"5.0.0-canary.b5eb51e94.0","@material/feature-targeting":"5.0.0-canary.b5eb51e94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b5eb51e94.0_1573151669894_0.012606496488128505","host":"s3://npm-registry-packages"}},"5.0.0-canary.58500806e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.58500806e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.58500806e.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":"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":"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":"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":"6fb9606a7978eb38f1671d090fad209fc5d7d016","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.58500806e.0.tgz","fileCount":48,"integrity":"sha512-DMsXd07gxWWePPmcKgpJeH/c+7TTDxkAJRqfDbGBU/ZrSxMyQgr0kH0+7ikkasjfDtf+iHSeHY6QyoAAQ7BlQQ==","signatures":[{"sig":"MEUCIQCWOGyIpG7q8a4sO+R7MqNCMCIYCobxJZrf9O9UMSefOwIgPM5OBZ8SS+QJFQPqjxcGuHlMZOHCSZ3ixlYmmJHF4qI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxYt+CRA9TVsSAnZWagAAPSUP/1JHSbeIJRbIzClGV2BX\nei7UoQgv/zGkOVwPshbbakAtQsu1V3b18bX3DqDV1+E80QFef0Je0rkpHWDZ\napFSgNhbwufmqwrjKXcBDU2yhMxnBnxb2Wh/PNO/g+TG2qmBSzFOQWEOF7XB\n5MWkghEJtTnafcfsckujIrQxmfoo7xzFjU+nlz4if0TTnD5qfAqGfO6OLJn/\nVpQm7KFi+uKwBiPdlzDYb2B4aXR+FtLZG0Q1DkxIBIHetPLZXcEfXfVPDek0\n9zm4nKYZVYY+lbwknNjBfe0Ez3yOnGEMN6Xi2BO2CiAUMRB03PiDPCOiV/k8\nEGWDsTca1JJ/ZaU6VY2NZaDdewZuzNMwyCaqweHMHvubevlwY229aMVDYGWi\nYdndQA5udEvRlxGVJuxrvbxnvhPsuASmkpLIuX0/FhL9cTky3Q5ueLieOYJt\nq0q/RUADTAh2EHDVylwSLR4GJSHsOTQTS57SA2WshCjA2V6SgtWpuLxaKHel\nPhKUk1qiqsXqagW8aAsY0ePTVs8w9NuGvIOjrYJDHBjGe4H8w/tewmZ9Q1aw\neBTD0ulnbjnnNCF9BnYb6hnbCQbyvMre1kE3tjcNz+lKeg0AbC3lWY6ojZjo\nRhVvytEKZ1ft9/pZAnv5+Fi5IXSaw05YBMcoI+16cqScUcTR71yNmcqKpE+d\nIKg9\r\n=V/Wr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b155f26dba1f11e3c9d7d0fe036cca6da8b37a3c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.58500806e.0","@material/tab":"5.0.0-canary.58500806e.0","@material/base":"5.0.0-canary.58500806e.0","@material/animation":"5.0.0-canary.58500806e.0","@material/feature-targeting":"5.0.0-canary.58500806e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.58500806e.0_1573227390193_0.23041054917039006","host":"s3://npm-registry-packages"}},"5.0.0-canary.66299b646.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.66299b646.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.66299b646.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":"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":"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":"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":"87fe521efe962a1156f0f28bfbbee9fbf441d9de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.66299b646.0.tgz","fileCount":48,"integrity":"sha512-MjvZ5SNuE6fDD37fNyyyUeFdRarAZzGG7pf0S6vx+XC5GAhPeqet4C4w49qnt2ns8UsyenYF0WBRjNs+g/iK4w==","signatures":[{"sig":"MEUCIQDsfMIShPLthSjrInwa8cMNHqCne01pe3lZAsOw61zs0QIgYUY6mN4howPAusCVk4JGGXGPMU7028LOZABi+waUplA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxdFTCRA9TVsSAnZWagAA88gP/3W1jbdT+xrNV8+tWOuX\nMSJOP4Hu29UY+f9A9LmLniFJcLMHtheADh4etHxSCHFwdybE6oos1h0Vy/Vg\n8Wzjv6HhJntW67HcOEdWFOR2JIpJmacYte6xRMj0QXQYhNCsQkllXC4zJEUi\n6R0htTuld3JxP4IYqBxRwI11sw+9o12ZHKUPMu9zOI+gMeS67fCWs32bSfOB\nBf/q1J3Xoi5Co7Wuf5C5XcpFS9wHUTXtUqONkgW1k8jGEfAGU7BRImu1W3yA\nYRiPonNvLfXAWAuOrZaPGELp18uddXQ0WszsfYg6XSvSga5dlCcCBCyxYCsc\nx0EAens+jhPl/patSaoqG/hTEt/3i7ZwtDTC1WhPGwyNSR1OaejeZO9WZ27C\nJjtbjS94yE7MEL2434HWDAad9lmCYWBCGR1Y5ORR8eCrmA7AUgVdzXKLDIdq\nMLpu4V3WQCxIF8/PSgXKvoNZYfg3BFSV0Zr/fyPxcTmqnbfvS/VOqKY6K86m\ni4iniuXu4Ot72a1FrKe3gBOh61s8ucKdAlF5lMW8goipJG3GgsaNP4jXQwF4\nDQpVi3OJGBsmr0zvSQUDkdyEO7OfzwMcE2/6uP1NepHNo71tLN7DPYaFWriq\ntSLI3nyhgi6qG2Bw9fzOCU+FNee2P/9RVTXqaqFTzJe2z5ghdTA/VZp2HWt7\n5JVn\r\n=+bwi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4bcc7c183ed18cfdcbaf564e317231824ea91b6b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.66299b646.0","@material/tab":"5.0.0-canary.66299b646.0","@material/base":"5.0.0-canary.66299b646.0","@material/animation":"5.0.0-canary.66299b646.0","@material/feature-targeting":"5.0.0-canary.66299b646.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.66299b646.0_1573245266781_0.6132369635809072","host":"s3://npm-registry-packages"}},"5.0.0-canary.821871e04.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.821871e04.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.821871e04.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":"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":"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":"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":"db6e8666bb75faa5e2c4383c35fa694d51a9d461","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.821871e04.0.tgz","fileCount":48,"integrity":"sha512-8015jlR0L7fjue6uZmiII6aJjVs1HM39L3CEEWTAvPRotP6uYHjGILMeADVacZnETY4xTE3Jli4ABdf2cRxR4g==","signatures":[{"sig":"MEQCIETts3jEwXBr5aGemp8NnGmUPAz82Ba+2WSzY8FMR6xUAiBu+kathwQpb1OZPUtVNN1jqhKy/1hGrIsylPihctTTBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxd4ZCRA9TVsSAnZWagAA6gAP/3SgK0SYkg9WxLdybXkL\n5xicnd0qMo+EdiyfgTjXoqXexaQOYJYdcsYEouCW805m0zalBOQ1By+nj4yv\nXAkHql+eogpLn8pUTJmKs7GPz1rIg2Lvx5ZyeQ4TtcC26+c43xYo/i287isF\n8F67toeQSWcZIJKtvXES7tOchHpsrHhHK3nzgHwlJ4sTPvdG2ilEYYHVSTvc\nKURne4q+0x0eVYghj3sBO12W4gPs0ShTqBptEFyHBsj4bBlU4+YwZoRITNFd\nUQCAH29RGMvH4CaZplV4Exu0YhTcs6FJDpkzYfVAKapx6N7PuElA3t2WeZu/\ncAbk9QE5H9NHvpPreNeH6nqKnpu/wTwaE44p4ia7P9WEIr7F+QcILANnoIN8\nyBvQaD1QBI9GVMA2XS6/XWhdyzMR4u5IDYANVg3nofbIpptWlTZnc9KQDhDS\nROpckDzk1T2t6MH7BsXn1t32HGZ0dfNHK5TV//6MHkNt2pYAuHL5Oim9zbnH\nKySlDzVoyX6JgeeJIrCiOoNtkppor/IeeiGkpBkVkUnohW5ISjef1vCUXrcs\np+kIUnY1hJ8SGSFAkbVxetut60ZlEFVkV/PsOzD7ZQeNx1l81DDe5czQP73/\nJKFJQDW0yfKXhInuwpLASNZcBxy+j18Or+F5ifMc9mcKieEPpeFvXH/vJdf7\n7NtS\r\n=LhKF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"20a91d4645dd0fd2db7a61459d752f390e050899","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.821871e04.0","@material/tab":"5.0.0-canary.821871e04.0","@material/base":"5.0.0-canary.821871e04.0","@material/animation":"5.0.0-canary.821871e04.0","@material/feature-targeting":"5.0.0-canary.821871e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.821871e04.0_1573248537473_0.1607530721158219","host":"s3://npm-registry-packages"}},"5.0.0-canary.491fddc31.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.491fddc31.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.491fddc31.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":"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":"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":"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":"08fce0e18e5f4dab982ec83bed9f30d02c973ec5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.491fddc31.0.tgz","fileCount":48,"integrity":"sha512-G3gmRtDuTe0jFcCJXVebSLU2BDpBqie+GKAjArqE2G93A7GtNP6BsgmiSjNAw3ToE+IOzqZJWhsMORdrt4cqvw==","signatures":[{"sig":"MEYCIQCnxvtgz3RfwfoY80HPMB7RBH2SMJoO9KJH9VwFyMtILQIhAP4Qwqy6Ln2d7/a98HT00y05hEaY7005J0fSfI+2p7TZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxedBCRA9TVsSAnZWagAAi5wQAILdyHXZrSNGpWZDavbU\nD4e2lYKuoJ2jMnYhUwLRKvaNQVsTJgDRIEp4p2udBxDupDZQI1MHah0oGUPz\n1wsAwggOmZT0Bvk9p8WIZKOLviRTrmN64hzYCT6QwVSga0X1Dk++J3n9EoFA\nZuKntfR3/82UGCk22Q1cIve9e/BvarZZA6XA+q0H923a1UU+st06uiWf4jss\n8kT+n5Lkbhha21+vKQBTIlix3YuZKQccE6JpFN2Ul0aMt2i0y8ADH8Nv0jX4\naBBa4Yflb16vMQuST1Ms4D1G+pi3qRzGjTJegi6eckIo+tEUCHeIDzpAJzlS\nJGMQFzPJ0+mAcqxTagtHUNeg6UxBQSFDJS7/RcHRkOH256sQ8iIfD8lIDFZC\nQx8dkhuuuaLZb+bqn3dG+xwU6X0iwGI3cNEYuGdsb8u4dRxSy3286VL8ybcM\nfmhtCHuejun2vpr4/0i2mWA9tBHqrYhlBPRQ/+AVKsefvFchH3rVs1RMVkqR\nCrRZhlqL2Zg9BOHBo6qMV0/IC0lp/IPsdHDdAGQvqVnO/WctUpY+cxob1a/3\nzEp8O0pjyo/qWksKxbsq6JsLXaDmJKw0qv3gDZnWpJiytnomg2KXMUtQxWcl\ntbz8rnzBszJJLn+rXhMjbhbiJRkZ8PBqQS4imed7UGPdVVnkUrmKWHsFhOzA\nZ+kW\r\n=pb+z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"36ec62985e32e24263ca2d444e04a01d98ba02eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.491fddc31.0","@material/tab":"5.0.0-canary.491fddc31.0","@material/base":"5.0.0-canary.491fddc31.0","@material/animation":"5.0.0-canary.491fddc31.0","@material/feature-targeting":"5.0.0-canary.491fddc31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.491fddc31.0_1573250880891_0.9213047578258831","host":"s3://npm-registry-packages"}},"5.0.0-canary.b0cecf145.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b0cecf145.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b0cecf145.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":"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":"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":"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":"cffae2741ff75c2caf6acf9e394b9bb692ce1ac0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b0cecf145.0.tgz","fileCount":48,"integrity":"sha512-e7PnNGr/zWgdd6mPSMcIWZCNfP4BUy+xCVIDUnrm1phPKto/gBW3Eps7QUM35HQ86Bc0Ahd1IgFix0y9E7aeYw==","signatures":[{"sig":"MEYCIQC2MqJOzjrrOeg87DNddKTe2lAG5iU7I4qi676JZL6WBAIhANfDDHWp/xAH0WxU21tZRiTyDB7yFHBTu7JhgK+r6479","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdxwi7CRA9TVsSAnZWagAAD6YP/jerfi6gz8BwauUZgWMs\ngQr24gUIbMKB3bbFIxsvSNvavQ++NWsfyF5eMf4QAHv9E5tQfhel+1MjjRUt\nTUsnbE1sc2ELHFo3w6zjNfE7nW+dJ+Z9jmU4mPGKRs4VP8fVG5RY6q1fc5JP\nt9mq9AEsXSS3x7ZPdfsSQ0ArYKUF/3CLyXMdzX5U0GXeP2QuvjDpBWui/Gli\nV1nHbt37L3/00FmfgkwSbH3KKExTBpZuGZmW4KXtEQf67kkXOO2eWemNa/OQ\neks0Jm/dCDlc0iYGVHWqVjOQ28VQkUNvVGcDvJ7F+ksaffpwZ4UJVc33vcw1\nRdQ/2ms93UFSPVoDmbR2JZVbaRZZ30dBjPfhVexg2224mQNYZavRoDBHAv5w\nHggMO/ow8I+U0Apm09vTV6/cmtAa1zFwnYFxGxgLpZObss3ktPslMrT3F7wZ\n8DFltrG8GFqbkZRPiY6L0gFWhPqcXbUja6zmUYgl0LPcSWwpUADjfvYP0IAh\nLR+wBhTqFUTt4+krLN8MqsJcfKjn52U3mD3j595lnSjCKet6AcFIwLSNXXdq\n0sc/JbOQxWaItsy5FFeDX1mEM8m9jl0rEJF2R8ItMkr3JDNrVzXruZfjoTR1\nDRul3kZWg1HHlNzToqBtuYh3KYMogMy11XpTBv3BVoZUyF0SCK16m/s/kpaV\ngagl\r\n=QCtV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c20143ddd0d46da106e793fe5b768b628d433923","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b0cecf145.0","@material/tab":"5.0.0-canary.b0cecf145.0","@material/base":"5.0.0-canary.b0cecf145.0","@material/animation":"5.0.0-canary.b0cecf145.0","@material/feature-targeting":"5.0.0-canary.b0cecf145.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b0cecf145.0_1573324986811_0.5767215346774082","host":"s3://npm-registry-packages"}},"5.0.0-canary.afe0dd1bc.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.afe0dd1bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.afe0dd1bc.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":"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":"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":"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":"7e67123efcebb4c5b3929610d9a30b8293880b5a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.afe0dd1bc.0.tgz","fileCount":48,"integrity":"sha512-W9F3tqmAqrnIsT3r9dT40m9UuktXoJPgfgTtSotrz575OvswIxcmYJEzWGIsQK1In90JQK2vjIQA8vk4HsT+Vw==","signatures":[{"sig":"MEYCIQCd9hbyrda5M91aLjCWsqfdTh+LOLQ0hZTU8cMeMWVYIwIhAOiUZshw+oUBYfY6jhPTEZDyzXcZ8aOarbbcEg4Bww+4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdyYB2CRA9TVsSAnZWagAASccQAIko8c3vA0wyfWhqE4HQ\nnNS6QT022VYBKWNaarSA7XhnWZKdPLoCFEq2puAiLIRjvHoTltbvfPtT3zdq\nat05LKbbOjPMp21qZMZsGGU65Ne48rc0Lf22W6QffIlk44CqCiqDtkOdrLka\ny+pnQ3uEKp+g3HAKADwMBTKCllc7y3wTQVNiYCDDTYlumc9CJQcjFeQZkryx\nUhGtHTUCcZnvyYRvfle8FrBY6mghk+9F1gCgwW3ROdUi1d8CXTgTgTjJtzkp\nX1p6bWUFsFQI89zUhHlCuDMS4l5CZqZwu5ciDS9XEFwm4HsjZipm3A9J4KMb\neRfxOMCgmdugEd13lOxeKYgB9HW5/vxAfl/mR4qAqMXgt3iBwr0fzhBKGH4r\nbM2bpwCs/R6emC/DP9SZOtvioGuJvkx27L025mVz6gGOdDnCWgS8rEjbCinM\ngW9bTX9/TdKxDf9Xh9nkB/7zB0Fxrzf2ML4cZpkgrHCwz5GAifCanRDGUzxM\ngHTLdUsmamxDMvBg5zzA5msYlFeubWScxyMopTuF7UUtzKwgpX0w7w9HUxxr\nKdHPrHsl/Um0i/RLgny6O0fPHeeovY++zSBbQC4MFwBPj72McE7Pes3rc/zp\nsipF0TAOCoDwFoJ7vK9T8n5HaRxwHbZXrNu9SlDgYieZO3LDUvNi8FUJ6bbO\nnClG\r\n=g2OM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3bacd69fa765f810b8bf40608eaa3aa2df12bdce","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.afe0dd1bc.0","@material/tab":"5.0.0-canary.afe0dd1bc.0","@material/base":"5.0.0-canary.afe0dd1bc.0","@material/animation":"5.0.0-canary.afe0dd1bc.0","@material/feature-targeting":"5.0.0-canary.afe0dd1bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.afe0dd1bc.0_1573486709613_0.27369410919142156","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4cfdc40b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b4cfdc40b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b4cfdc40b.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":"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":"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":"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":"06e7be6232ebab6fc3be20653933d4615795f9ca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b4cfdc40b.0.tgz","fileCount":48,"integrity":"sha512-wdqq7e/FmTPCXm67YL1D81bjvvgahGVWNdOE8PIisBNYoV3FXF5BHZ3g2KbLLPeAINAr/uhdyRi0mevJreRzIw==","signatures":[{"sig":"MEUCIQCm1fU1WQIDVMTF4N4zxnAYQsIevMkHn4DHCW4THNcvmQIgPG6CuZLmC9TGLhhN9Oq2WrzbOFz2j3sJdWET5S/o8wk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzXnpCRA9TVsSAnZWagAA5Y4P/RK30pOCArl17giNN2sI\n9K3hIgffgnhHus+52FdNGuH/yY7V8dXOQXKDID+Dis1662X5Qo8PjV7UJCQ6\nCKduAg6pTmB0dIbsc0/j6cPvqk4vpYxYgYxiHdWoiUrbhzLbPMlHQORLA+o9\n3GNJSRK7lEpbE6eYFfgWL+x72gCwWw6+e5M4PjjLrrp+Du7+1CGwhLGwTQ04\njM6yTVjRGr0YnTOzHIhqIv13NrdZasVmPT7R0Z37d2klOuYf9GMkRayfgEVt\nUPXAJIx289anjIc4Xe307tQ0WFMwrez+C/0QPb8Oh9WPVXrx/Pap6kVYWtVX\nzHBZwZgKo9PmPBtXgN0gMgD68pOAlPthnP4QjFFgWHdshE0pXvi18dLlMS1e\nSlNr/cugc9cXUAPF8mMe1lXOqkLUUTHj7RTQ6JWlSPM8kXJ21tImxPhUl+7l\n7vSlckicd8mAKWA5h9mVGNU0h1RSY+JOJEb5MQeetPvSYWB/mV6UbFkAX6YR\nkFPAHxbl0mD11ojlOWceTiE+Jmfv/O+wWztgUWOnZgmfiXsQuIoFv8b9xpEx\nc0pi8wBuqFbSiFOeoXGv0sCjkDKFX2yNsoDVaYohgtU/wlAeh1QS3rCsvuqK\nYSJU1LVihaZOpn/qTgSOdaAjjNshlTykeWHb6AdW2I9BHkawa8YwaFcLJCD6\nU10q\r\n=a+IZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2a81ebd1a573a096ffb378bd1ce7bc223a3cb54d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4cfdc40b.0","@material/tab":"5.0.0-canary.b4cfdc40b.0","@material/base":"5.0.0-canary.b4cfdc40b.0","@material/animation":"5.0.0-canary.b4cfdc40b.0","@material/feature-targeting":"5.0.0-canary.b4cfdc40b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b4cfdc40b.0_1573747177113_0.4899133681053671","host":"s3://npm-registry-packages"}},"5.0.0-canary.525989b5d.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.525989b5d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.525989b5d.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":"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":"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":"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":"e591d24e9d639b0de04daa5fa3dcc23129f6720b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.525989b5d.0.tgz","fileCount":48,"integrity":"sha512-tB55/nyb8CnfjOgSOBaUUGpvCnBKVpjF/tPswSlcFBehgWSciSMY6nMq2PXlRv+9wAUGp/dMUhIyYCV8QqUVpA==","signatures":[{"sig":"MEQCIHoriZjQaVrWAqd6zV393duAa+AjOvykaTjtRscEyBlsAiAZxwdsXrC8quhOViYOFDKdVtnOULrTfAwHjvj6Qoiw7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzePYCRA9TVsSAnZWagAAB1wP/0gnEi/R2GJBmaOjB9Hj\nuz1/lyOvbxdRuOuaI+BGUEkZ5T61EIzr8Ehtt9ZZNVb2ClOYP1yBKNra03N5\nXtlruS1asmCviw6gE3IR68N4bDXboXuKpV83n4qe6zobLIb89bqi1EAVg/DG\nnyfBng9HB476sx8fNWoGPfFEGAg2ozXcLk1EI3AAakhySHpuRcDtNjQWYp9V\nsr32aswnPnBzzdZvEcH2TsAb6TS+elVK6DK6h0P29ZhtbXseM9iBEeklcKMS\nvy2QevnhsjSSPwEuhJib11va4dGttKxR4r932f/6/DLjrcNj61wJek7X8YV7\n/FnTQwgAaoCPeRFGuOgkA4/u7TT5vYDGZ4W2IEzaQJ9GTtexJtdTzQCPzAXT\nYBokSGOy6lHgj6tw7Q8v7rRqeicJ1zwrQgD1Bl/ErQ8jOAGCPbHoVhNL4Dft\nIoIGRthP6qN/TApXBhD5+eZGNC0gKd3UxpThVr/Y4vcAZoaMgdMDD6R035A1\n548mnM/shlb2UvjZpvG0KOfDKFVgVZm0FC4MGQYfDoEMuJf3I4/qwmLPMFaF\n/qQGXR+YRdtpL0TM82wvlfnVZg+ZGQygJo9bgNsPYMA2txARpvOxp2l1Kj3c\n2Y6CPcIKCGaVEIFrke28ggifaG8ENgZT46Wp+E3U8JCiAytOVNob+AUYuzYM\nbMCz\r\n=fInC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2fcf375cfb22882468cdbfe126d349a996b450ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.525989b5d.0","@material/tab":"5.0.0-canary.525989b5d.0","@material/base":"5.0.0-canary.525989b5d.0","@material/animation":"5.0.0-canary.525989b5d.0","@material/feature-targeting":"5.0.0-canary.525989b5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.525989b5d.0_1573774296158_0.16847967481563697","host":"s3://npm-registry-packages"}},"5.0.0-canary.7084b403a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7084b403a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7084b403a.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":"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":"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":"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":"3f5ebc93da1e73cd455a00ad8d9bdc995a6b79a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7084b403a.0.tgz","fileCount":48,"integrity":"sha512-Sif6U8JCG2+pZgrnGqg30IC36DLfkSvrRYcxOsbBao6oFt021RDxQJIdsFHmPf6UrOJy5Jas/Y2WabdpxwsLZw==","signatures":[{"sig":"MEUCIDMZBD/RqKVMicRL5BkyEwQiMqC76d/q4nX2waWighlHAiEAtxnbkqSgeNGfS8tcA/iog2KJuGpww9lhX9NesmjhN7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzfoyCRA9TVsSAnZWagAAY08QAIUIznlz95ZuFuhBSm2q\nH9oq3wMfpORNaxya6xYu9BEqw3dJHMSWPpUboE4ZnSTSasqgNyy5zPakuffs\np9agtkmbCJm9KOVu0vcS/2jwjUoIcbU3Vaw4u2O1W9CVivBE/phgyX9OgML6\n0pGJy4gpYyH0RhagCRVtsHib9uH5qIxtGEqtGsxhlWzRk3e1GG0shAfyXl6i\nWurkcXdq8rYMph4XgbjxuuW5CXdG9fQR+4fLAdzzQjFOJ+X+4WESgVtY6gih\n5a0xqxg47DQaLClRT5Xl0+0X0wWm4TuCGqIVkJUHdghRq2uuIiV9ksXnurtH\nurE1PJ0bSI0SMt/USA+45qQaL7mgBofayOTBxDJwIXPsPx7+q7xddqXTsT2P\nKYwvEeGJqPfSFLYf23ULc9fDiZYq98ny4JjFt57zFinLSSJEhbDhba7AIVx1\nrLT+MdpWZGxvZkZRog45PHhpN90vf8z50Zz7mIJpm6WQQ4D9xxBaa0Wr1UzA\nRKuFBf3eAmKwA7KzXTEnj4lvX2kt76/LByskJdDQhdgslnUnaWr5uZFWAO93\nQt4Yr6ITW09KyztwNNodFzpeKJAWOwtIApo7mKSJIrs20VNxhxLJSK0iYwBm\nJYLAh53MIF+FDzVuKSUXkJGgqIJ3J+g3leAdfTa3nTSoB08i3TSsCaS6ld8j\nYDcx\r\n=a6Sn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6a82bd7664073498cf25876314019948f3295c87","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7084b403a.0","@material/tab":"5.0.0-canary.7084b403a.0","@material/base":"5.0.0-canary.7084b403a.0","@material/animation":"5.0.0-canary.7084b403a.0","@material/feature-targeting":"5.0.0-canary.7084b403a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7084b403a.0_1573780017755_0.15891716128609068","host":"s3://npm-registry-packages"}},"5.0.0-canary.3cbee6dac.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3cbee6dac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3cbee6dac.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":"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":"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":"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":"130e592a6c3de672804dd44336ed19e8b35f6c81","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3cbee6dac.0.tgz","fileCount":48,"integrity":"sha512-pMqyVg7ailcBjtAOYk+8asZv7fivveMn5rzKW0vefmYKAovgNr6r4wEOYD4T4V7XnaPe3r94Bgv2r8AzOtt5eA==","signatures":[{"sig":"MEUCIC0spmIoW80BTYE2NRCcYWDbpxPJR684snUM163JmFdxAiEA3HHmEFqZVVmlSQpWscKoGKZMtdbioQdVMT5eXE/ld38=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJdzyfECRA9TVsSAnZWagAAPSwQAJ7HGQfodXwAT59Np/N+\nQeplC+tQ7yFTO8tSrzvpx6JTfpPdjS1LGE4RXy4oZ4TEUruCgCcGrnDJvptg\n8anW45Y1kTGOoweGz6RlTog1D55L96lqT0+h8YyVwW+f2LmL+GriqI2bgb2t\nGIXYAvUU2KYAQ4xH3+SK64OH7iaKTz3tkqcBfnUGcJ8owtNxrcBP8tzJQ7Ng\nmrUVFI0uhiUQ8M9sQ7U+FpuhjwCRc4jBztEXOdEy66zppnARt0bbiOTb7G8c\nj9x6tQ18C0YciqgKRQDmKTouwTdgNt4tAkzcQoOchBZ2GCXCV3ZQ4vaQiqZk\n+EjuID5zABQWoUcmg/YlS74f+PSnaUCzMDjxluenRieaSRy1k2L+nLHy2eQV\nj2D1Aylg2d9qc2ec9j/vEtlUUKJG73YupY2Amdlzc1m37y/K+2YH/fa6nw56\n+LTRI4zHqO49z3zVIq1+MnH47Cwj/3FjZM02ABmmmxmtp8DLgVMHDo3VcOTu\nXfvitycV65V9LhjXVmzSoIb4ruIJwraDUQTMIv+N1hsRGJdgdvlQXxTmPkuQ\n/wysBB4y8A99FrlSBhXGyUIXRhCto735ZIs0z/dec0qEP2DNY9b29oxRBLCc\nrHnTwHoxsm69uKSgOUXYHbGYx/iBfJl8vo6I+lZWaUyFzk9toMK6mQ2Mp/uB\njSiA\r\n=wI8k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5ae37026c572ffe6707702e535533859ddc81a48","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3cbee6dac.0","@material/tab":"5.0.0-canary.3cbee6dac.0","@material/base":"5.0.0-canary.3cbee6dac.0","@material/animation":"5.0.0-canary.3cbee6dac.0","@material/feature-targeting":"5.0.0-canary.3cbee6dac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3cbee6dac.0_1573857219871_0.6914930960170014","host":"s3://npm-registry-packages"}},"5.0.0-canary.591a6ad44.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.591a6ad44.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.591a6ad44.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":"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":"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":"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":"e0e51f2cfea6c70daa25e21f7f110d7b77408957","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.591a6ad44.0.tgz","fileCount":48,"integrity":"sha512-0DFxsQvWGgfJIdhpgO+KQnxH3LzMP8QawhQ5D/xrs5B9h3BVk+m/ygljWrMvqTu0rjKcLdQ0Qr70UnW7PLUK/g==","signatures":[{"sig":"MEUCIQDmGyfUPQ/7mfz8IGob0kXksRypYbAczVPAeLNVanMB9wIgdW3Ves/7f9PnsczPAGjWbokvtvOA2qCSMgoInvXr1Og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd0y3/CRA9TVsSAnZWagAAh1MP/0kmzHyhCtyKxBNMUzMX\n/XrgM8yzWITfZ68iKMnZ/IivShvXBRHbCB43FZWyK8tg45dPFfzv9NuJ7z2z\nAEwwTSFOqkly6TVy8j24x4o6p5rGHO7QU0ddKTVvtd79xO2wVGEOl8jodV4+\nbGI7Bar5q/HdwHg5gMXoIunX0/XxZnXtCWZvae7q3wLzMdjHzIqa/SVu5FbN\nOUMieHGsacJJwRKJkbnwH4+K4jEprgcMttKm8EtFqXjQnW0N7Yn2rtNRt6Di\nDzLHragv1dHq+Ioey9yac1Iky/yRN1jqU+B8T1hD1BfWcdWCfmlhNgDCQ1Bw\nvMIZgJRLnRnfjk8gut1qLCad9GU9GZNmH3ZFZmkF66gBvsbJTo77TyXvTctn\n0R8ujtfkj3mxf4fv+bZsGPyUIeYoMf4IgsNqwfbv6gcn8bnlIr3zL+RuKa1+\nd+BS/BOe1I3wrZexfeM4tDdotcDynN29ov388E4kGdhnrROzl809RRs3PUn0\nKdsvCBXY+5EUMsjqERr9n/po1lk8kf9vhme4FLzMqLVfp7Le5WP5pKjV5GAJ\n5TNZrIKqiLDnPqHJTsEdRALQx7FgHg0BUVG/pF/KWTJhar272eksU+cRWwnU\nXAUmkZoTua2tZf/ciKkpK/e4l0wSy26lCzcHBgf3JVNT67Dh2h8nGPYBNN8o\nQTRX\r\n=42D6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b5469bc1cbdcbb7c9926006be2d2a65c3211c220","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.591a6ad44.0","@material/tab":"5.0.0-canary.591a6ad44.0","@material/base":"5.0.0-canary.591a6ad44.0","@material/animation":"5.0.0-canary.591a6ad44.0","@material/feature-targeting":"5.0.0-canary.591a6ad44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.591a6ad44.0_1574120958636_0.45142083512217934","host":"s3://npm-registry-packages"}},"5.0.0-canary.5729943ba.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5729943ba.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5729943ba.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":"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":"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":"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":"8473933b4f4dadcc319c6841e74ffa7bf4173670","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5729943ba.0.tgz","fileCount":48,"integrity":"sha512-1kXXOtALtw5vzJVrkNvXpqYZA82Tsuju6voRwY/Iy+tjAd+Fls88P5LRqL2uVhauVMfg+l1Va7w+AbWk3Lbm8g==","signatures":[{"sig":"MEUCICQLyerLuBu+bApbVhVGZ2n3IvLGC78C2ydE//mikV1qAiEA3R40X+HOk0iVubuopQIIKmFHK2SB8Ar7pUM6B/MLGQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd1M0JCRA9TVsSAnZWagAADg0P/3u4HRUP3JLixAMWk0en\nPrWe6S/WYUZjWBSRMMJPUNFr7+9Dpmo6fmItMnaO00hucN8ZtCSM2P9GhYK5\nRHy/0J8GMUeJU1JIRtqMpMQ3ivh3SoV5jDl0S0GUKnd4NUJkAIRmsDmk5HK3\nXVgx2CkouzDYBNiONQfK4r0jcuz/IYevuhTq45NWMzlFqL9giEUyizotl28+\nWM9lqER5H/IZ3LWUDm0WrzpzUfo80APrs4oae7Lf5sYn0QXn8NsndSyOJhi2\nwWY2wqoBlVUZNJC+kqHY++hsd2cg7UMzYM/Ty4DtQFBA75r2yN1yei3b4w2B\nPJ6RjmucqucIdNF5KXdv4vEI4Eh6j0YYIJzvQMzBRIUX/LPVFrSMiURthQY2\nvxveaJBHBjAjX27ohU/yxHDss8K1t9poPWEYVt/OudpXe1j92F90npEg60Pc\nfj3iTu4X7pvKwVCn0rIcy6BA3Ah9E9oJgodpm8TjsWIowcHzddzwhwDU6EFB\n3/PJSNLCdHjKZWwuZar9GyuOa5SMEVtGy9h2nROLHmlpODyFOm+S4r6sul1L\nFeoUcTc2EUUXcw95kVI7nXwlVwlgW0Z6A5JgOzYaIn8WbjJkbUR71R2dvsdr\n9GnZvOppUujHRwxrym4Q44l8y41CYX3mAj8Zt8EQN6K81t720HUyXmEJqHZX\nU6EG\r\n=ELc8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d49cf0658a3964963bb2b39b2e3a010615c815fe","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5729943ba.0","@material/tab":"5.0.0-canary.5729943ba.0","@material/base":"5.0.0-canary.5729943ba.0","@material/animation":"5.0.0-canary.5729943ba.0","@material/feature-targeting":"5.0.0-canary.5729943ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5729943ba.0_1574227209516_0.0705570120850294","host":"s3://npm-registry-packages"}},"5.0.0-canary.e89750dc7.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.e89750dc7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.e89750dc7.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":"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":"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":"9ab499d1d17ca2339b4cbd8881d955167cde17d7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.e89750dc7.0.tgz","fileCount":48,"integrity":"sha512-kEaRfPw+pb63fnlA5Sw4iyu/ftIv7TFUP0HPS6LyErzQLKi2sG3xQGIzrtBw9kevGCJNDPmEboQt2i4zoX2CSQ==","signatures":[{"sig":"MEUCIQDyWJV+KtAYyD1ShlxcJUbgWi1G91JGDahOPgY6n6mMvQIgL0bp+XXSYERjx+M+PirG1xp/SeVK3CVXpkUUENoxfuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dsiCRA9TVsSAnZWagAAV1kP/2oIuGek9SAiQGom1Rdz\njs2gyOuLHBIg09vXww5cDdn4uT5MFc7zg7OWch93glLQnGnwKNC5qmwaHFzS\n9c/zzdiLigkvCG5MjS/3JCas3mJXzxPmBouNt+5kBdZtSLtW0KNNFs2A/n0V\n7m4/jPLxTQawjHr5lmES3hVhKZ7B/3GKoBSBUjBU/idgB+su4oOm0vXzZBjO\n4hj8ckLbaTIFYHc961JI4X04RrOtGmef0DxdvyD6sNxAzrj4ax0PfMnn/KYz\npJaaYXR5ZIQ7qwovNdn2kAuOcZMdqbklCBuVh0HraESZN9nenlm7c7cfN0ZR\n8KfPx4ozZDWAoR4QytHil9RalrnoBtcOd2mhUcrnHDPFw6aA4OdO0ly3PLRO\nejg6ouA3sTg27CNR0+29vvuRowttwMxzKIqVTg+zCd8p0MxrWvLYSpHe5VF+\nJUKHkUnyaknUlFJHUvuS8W2y6PEHxn/SJXqtziU4RzjLZ+EGgP+8socsdagy\no3wfPI9p+tjZMj2WLzPN9wTV063EjGzfYcR1GBWREDCOr8vHb4xy42QzwhQI\ny220yt7SNCqBXaOtiU2qkDGmIZSF6vJXdTt7LLqYHbxRT7KJqRyMOeNQ1x6X\n0uW8123iORVOZ4+AXIpfzpteN0Yk+QgV+kkrGT3o292UDpaZ6aTkpaYmyXpT\nJC4H\r\n=vCTD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2a166b3e817207f685f4b112635eeb21f5ef0789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e89750dc7.0","@material/tab":"5.0.0-canary.e89750dc7.0","@material/base":"5.0.0-canary.e89750dc7.0","@material/animation":"5.0.0-canary.e89750dc7.0","@material/feature-targeting":"5.0.0-canary.e89750dc7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.e89750dc7.0_1574820642313_0.08082068847244828","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e560b33a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3e560b33a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3e560b33a.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":"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":"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":"0f6fd4c84d39dd8ade71ca969603852c7ccd3660","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3e560b33a.0.tgz","fileCount":48,"integrity":"sha512-lFtEJ+YnUVr6W3104bSLz2wAF/y0B5T5MZAesA9d+tgLIa8c3m8+lKOHjcWJLZWlSVZaKKDO49q+Q7WUWn5KIg==","signatures":[{"sig":"MEQCICvuoWSuf73KdZxuymEOymHF8eNiyUxW/m2Qx9A0Wn0iAiAugL4JsXUo7W4SNOnckib6ngAMAT1n4CCmFh9bL7XMvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtNCRA9TVsSAnZWagAAcqcP/14MDUNtRWgSemP8Pqpc\nRLWKwwan6tjpdQkVmNj8xB5jTSM8BtGLItbeERmIe7SVG8ZYcoNT/xCQEUQ5\nV2XHJgQACo4auZn49MM0PLRrkKd63Tsv72R0Sm19/IFLKUqU5lNd9/S8Y1J6\nQZe7z/qshnlnah3ZnKKzK62K5rTaad7agJHLHToIVsLqnuuQ5X8g6M1RgJEX\nzeMmWMnaO9pz9s74G9Wseub4bq5xUQy6rfEhLk4P+6RZiVhj25F8cQGf9KZn\nZsaz2SAgM81apoa/qYzZEeJyjTW0IrNhtAbdnfj4+OlIn1kwOX7Jq5CLGyo5\nIJ7iEaP6Vg0pa6x4+I6Ho56KP2HWwTXXzg6sWF8TILnwFtWpehvXplRbc18a\nD9CxcZr8dF+rq//fiOdkA0v84gvBZPhcM+IFKxfJ8WnAeekjXvKZbNVQoxqV\np2Y48HjCPlLmWk4pW2469+wfTa8PDWLkqJelacXoF3a+SV0ilRNzQliWBDMs\nZURi+hkOWE75vzVavUTUgjL8RiKYEINdelyD0A1n+AXd74c/A2E0bWgXird7\nD7fzVsgLyxqI4SB0WHHFFGsKBCGEgyKnXxpVmWVCbhRw8PDDi0W0Up+6cc0y\n9pG5rTcOq6RKeN63x8QnZiVGZ0HA7ImoM1hmVS+ICcr2diYZCk0HbPYH5oLW\nBQxW\r\n=aXCe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a86efd68e1e91c0cae784ad70b0e36c13c923dba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e560b33a.0","@material/tab":"5.0.0-canary.3e560b33a.0","@material/base":"5.0.0-canary.3e560b33a.0","@material/animation":"5.0.0-canary.3e560b33a.0","@material/feature-targeting":"5.0.0-canary.3e560b33a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3e560b33a.0_1574820685292_0.38987439367563637","host":"s3://npm-registry-packages"}},"5.0.0-canary.7fd17ce5e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7fd17ce5e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7fd17ce5e.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":"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":"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":"11ab7d7ce4a33af8a5bfec094bb6bced0d9d9c21","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7fd17ce5e.0.tgz","fileCount":48,"integrity":"sha512-tgsTsG9wylBrP4yXLdpeYupWXtl3I/+jRwsobohEBMfOZWE8n5GfKaElsa+HIwWSPJu4slLK3sQIQdyQkn+sCg==","signatures":[{"sig":"MEUCIQCT+c4PL9sSLVeHIM+Yc9xpv5BORQmi/bRj7kFoFyZgiQIgVBjs710lPQuSs5Wmsswg2mojm/G+HV4kpsGdilfos7w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3dtkCRA9TVsSAnZWagAAtkoQAI/lWK8fk+3IzRvmtMVp\ng/OA+5rftVconMcHE208267Nd+HWzGTHrqFpAh3qvPtFJthURVkhoepsQYOS\nVtBv5rl/FQJH+JwPhMfrD2+Wh5Fuv41PCLLSCsTI5YYEj/Vr7l61gh1xrhcD\nK+IDA+MG2+1lfi2ZKpDEZieZDA9DyQfXNYYOZPCHzJ68AeXr3BwxdrNJXwPA\n5GNSkZhE8PEZtFO+z4xX1V8hbZfMQF6O7wieF78wSDHPayilhMwjRB9EA1Kv\ntCwoCLFgbRVPZYviGTEdoZ8jd3q1TS+p+Yy257TxOfkGkSCjDIX5or7LPLTe\n3DVI6T4ZbisqTK15NnTEjnx6F9CQxbz40T31HNJkPx71issB76TICGcRC3G9\nOqOm4ld5BJCMhSTzLjcx+dc6i/Xx0Qm1t1kPeYOQcSlsdhlw6LRNe4/Wsv4w\n8SXMmAD0SLA7BPk9f503grmxGvnBtamVSsOHDFPjRDqbs29rjN0+veymGIhA\nFmDt3LMS8HvffruJK0ioCPdwGE4CFZ9Xsix6mMR1DjALDQar7LHih0Zv+wbZ\nCIHa3A4wL3JNiv5+9R+3+H9OhBfo1TGWSQi6251uLTxJKcj6aMEhnCg+HCSo\ni9f8/Kra8vJtWj61ZP82pf+xqwRGsFLlhBmE/3V7jPfkewyv6MdlS8OXbr9A\nTv1O\r\n=Zu6a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e798e5bcdab4c998c88b2bde71412b2d38dfb262","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7fd17ce5e.0","@material/tab":"5.0.0-canary.7fd17ce5e.0","@material/base":"5.0.0-canary.7fd17ce5e.0","@material/animation":"5.0.0-canary.7fd17ce5e.0","@material/feature-targeting":"5.0.0-canary.7fd17ce5e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7fd17ce5e.0_1574820707681_0.04753844293154397","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec729683b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ec729683b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ec729683b.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":"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":"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":"d5b350ef20d6af05ee651ca3bbf27a62a9caf3aa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ec729683b.0.tgz","fileCount":48,"integrity":"sha512-4ObqH3ruk+jPpVI1NJjyJMEGoklsXFS3k6mHSyahwxxPT/U/eVD58qgH5n+n4Z6V7dIDuiQXRiPWGCsyecMJnQ==","signatures":[{"sig":"MEUCIQD1UUz7FQa/5feGzNX8t4ElOTpIm631YGGqFvIdygv66wIgO98uAlEyzETcB07J0SOKDjJF7ZFWr10AfswaNsRJcyI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3pyUCRA9TVsSAnZWagAAcacP/3hlsmZucHTv3TDRkX/k\n6YAbPTJjP8KhO91UICkIqqaHZfuDmmfJLPLcLW2O6sE5svEeywd6Vv7Vho5o\ncgzz7nf9EBZfdrIbhxCxOyTbhIUDPXg+yc1CkBwcHQC+oxKsm2HsFr6yiC0b\ntgbbWxOH2bve+NE80ITH3RsGxstHi7JUJZBj84VUa0s0xGDgCAv3DHxAEsmx\n1GPvIt7/7djusCFJbWAFLAm0hIzcXgGuH0mmnACLv0NB51Rwi1JV9VzrtPne\nCGzzMHq3ahhaGAycL4m69a0uESliVUJ54EnZ0zK1E2j7ht21s8C3JafMWNy8\nZiQCvXPe58Co/6Tn+C7jKXhk+G6TsdULr7//VLJF3rK4r9u8QesPuO3t9b2z\nrDGetAMWuxvGsxhvnfw/8D7/eiYKlL/2A6A93Eo/aOBnJ81NbMi79n3d28q3\nk0fL6LQFPJotQ/QFcnkHu1pqBTSHkgk4bSvj9/JDBSHrNIOs0x0WKK+i8NVE\nfnjuo3jqtxRICMIG5P+ATxVM8B5acIEF9TUF/sbq34U8oCwMD1Xngbz2A5bS\nSmnpHI1fmkKnhPiCVkEhj0qkZTDI3cRLkLPLY6LMvOuuwjNMzMRaCH3dAo46\nR7eXSV8qyNh95tdWHNyob+UJzwOmLV3qgHmWN8/DY5iTdo755HwHUHeVecxz\ne19Q\r\n=I2Mh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"919526f37cd7606c0de4cc409ed4c1ead34b60eb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec729683b.0","@material/tab":"5.0.0-canary.ec729683b.0","@material/base":"5.0.0-canary.ec729683b.0","@material/animation":"5.0.0-canary.ec729683b.0","@material/feature-targeting":"5.0.0-canary.ec729683b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ec729683b.0_1574870164166_0.47881743981392155","host":"s3://npm-registry-packages"}},"5.0.0-canary.b8bc4a26e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b8bc4a26e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b8bc4a26e.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":"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":"30080d75dc0a3304d310db391bf1e574958bb4dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b8bc4a26e.0.tgz","fileCount":48,"integrity":"sha512-teKkp+sAdlwfUBGnzvdfLSpjv3JMbJ05XHKQq0TCj4HxMGkmoRfIYczbQ0BQC8vl+MjLrYzhMfHk9L/XLAzB8Q==","signatures":[{"sig":"MEQCIC9MKEIY99mhsBP/riF2igb/lPCAkDGvtR3ZebdxBoy4AiANTxnm3oDrXYqqhz76t4l1jQ+J1h3Swjrv9wHHCRk/uw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd3svNCRA9TVsSAnZWagAARJQQAIwR1/asro0uZyx6FE0z\nJ7uAtjD3Mi2ShURfue8T0gzojutxXfatoNdFEYCC+tMc+wt/DFFpNLjTIgiE\nFUycNA1I6vWMSDfcmIMRCjA2F5kcE6o9v3Nd/msJxUIsS6xjKr9pBnzbuVG3\nLMuO9LjTuGkCFgLOIW2YnCr0WTcitjJod/w0ubh3OW3wJCREyELJ9GiSuwOF\nFdeR7jR8UdVj/0KnRsRdpIP8el939Fl5fgWzS2VFhEfxX1OvsmgjLYFEdGBe\nf/ZWKlB4p6M0zRwAwkftpNaIPj/fHmAlyR1XPyoPyWC3XhWyAeHOQAfaInDu\nFDrTCgzCuV1KWwJSsvH7D5E5RZkisNU2tp+ba5vHfZ8mXwPa9e2t35Iqswu1\n+m8VnCg7xQ1RhjHD0bNlpbVXFFkm0Y/Uxsa3T9WdL5JbefrQ0N5oWuKRqGoI\nMAWQyDgYm8vYCpIHoARekvdtEa/jLcNrb6sTFlOrgVVI7yZWYRfsODJw2n28\nHNN/1f69jSgKNMg7sADNI2RbbFPRlTsqgirEpuRDiyzOxwfvNf1OiXaMEaSi\njVSPZWIlPKX9ZhQR+c77Bo7fu1y880gsDNI0cyTT58TcUt6QTT5q/p7045rb\nGfqj/401n5ut0szmlZmnJEq/xC0FEckDnwbMkcL9f9siyd8vA+aXrZV9eTXP\n1kv0\r\n=vwhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d04615df572bbbf2ab2eeb76ea45696d0a40563c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b8bc4a26e.0","@material/tab":"5.0.0-canary.b8bc4a26e.0","@material/base":"5.0.0-canary.b8bc4a26e.0","@material/animation":"5.0.0-canary.b8bc4a26e.0","@material/feature-targeting":"5.0.0-canary.b8bc4a26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b8bc4a26e.0_1574882252564_0.06745195265849069","host":"s3://npm-registry-packages"}},"5.0.0-canary.f978109c3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f978109c3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f978109c3.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":"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":"9727ec8b2423de37ca8bcf24515401d3ad10c3df","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f978109c3.0.tgz","fileCount":48,"integrity":"sha512-2MuMuvyh5uKDhzCnfPOk+wZeIhmSQSvUajtfLada8EserdATn3x4edqoDV3Y5ASfQeELD+cmxxI3ipRJTYQKzQ==","signatures":[{"sig":"MEUCIQDZahVoPzIJyRHh4fcLLjF8DWBD0ZTZTvqJ0DDwSjPQngIgFfb84dcjvvi8P0FVx34K4DW767r6/JgOlKpffhpphSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5UUCCRA9TVsSAnZWagAAVEYP/06SkPQIlJWTdOuAWfn7\nOGiXc0f6ZsnG0DjHlVQpXj41RKaN9tlIc+Kv8qaovd8KSKEv+Tz0ihb0qUrw\nHAW/N2irtgw/IElYbEcLRbinvmFFFxCe4IW7CWVerG30iKtzCoQl/HiesnGy\nd9U5YhEnefJmmWYlDLoFzjtALYDKNqBigdcgXRiHVAVg4+wAjAK2vjZK+WJ4\n/YjR0FcJtqw76S2awMvIawOUG6hsgXcCS8yDbBcDCHEYYN6n5p0Re1ldJTZ+\nUQy52GxpkgZpIne57gijTGxitLW/RUlfSAAbqiDtNqbV9pHjdDsHA1Rni2ci\nrtHWu22LRgbriR/rOBBbOUgrItEokBkBLFbdt4y16oFLWluVAKlixlIB/6PO\na88g3nr2m14zGhUGl313KOQpoEhYE6m4up6YrSpPlCwwmTJ658SA6OgZX3SR\nxc7XUhC76rqEBQH+pDacDePpJI3LwTP5MCZoexhIw3ts8wOEfiDOncb70Jbc\n9HZNjTgc/C9kCfcE4fwu+Zy5pgsHmYWW9usTu+RCz06PkC9ikjs80gwee+ah\npZ/mn5sCpEJLtbtGW5dEMWOQLkCFUwlh8PaNn+8Hdn/Xd2iopM/Wd5Ycqvgp\nNiOJkbCNHbt7iF9ys+SMERetYIPOYmoBYpEP7hlaYXWourvYP3nrqGBqpdZ5\nL+WB\r\n=6OIM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"27bb2072dd0bc0aec40da3282431f7513467bbd8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f978109c3.0","@material/tab":"5.0.0-canary.f978109c3.0","@material/base":"5.0.0-canary.f978109c3.0","@material/animation":"5.0.0-canary.f978109c3.0","@material/feature-targeting":"5.0.0-canary.f978109c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f978109c3.0_1575306497471_0.43634919618324286","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad9dfe706.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ad9dfe706.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ad9dfe706.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":"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":"01de83a9d5077d492b788cade68073cb24d0a2f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ad9dfe706.0.tgz","fileCount":48,"integrity":"sha512-eMsOsGqkrpItt98fPzJCniyAOCIshRqVQD66E3xIaahvHlJoSJZ3r99bqNErm2nE+b1U9FKJAoCONvl/FygApg==","signatures":[{"sig":"MEUCIHU8HOL8lgbEe8IZwiChW/RbC0hf4zuiRBvCFKXuEn4lAiEAlq7ImwoHDJw1lDM6zj8rlEvmFHtLDXfKNeL4rrxG6Ho=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u1iCRA9TVsSAnZWagAA4sAP/1PlupnzcZHrwb/hW8aU\nP9WnI6EbGsLueeviiS3ioLI+sQ9wbGD6lcronPBe7w86m2l6h3kdUO65xGuE\nBHjQmYFporDxj1uFA/Lzcm6TLqHmsUqy/tdjf0P289lINko2SXU3oY9Yxmk6\nxkvFSMcn7UNvjrSNRDtSqTXC8zCiwIVBjruEOzz/YdrJYpUz8HpjLwXn9SNL\nu5zmx5LYHFeDsYuJd32CnMToqHH2DinOBO8nROy/Xj/ohA61ewwQK+q4Ke90\nElNw8F4sS9jlmbh9t0/lQaXX/TRzAL6zgQiftjkENC2W35a2M98GM5mTC1ll\nA70Swi6zNhCIc4O3H5MNi1I11AN3e/6EywphQL0qwM3YwOVIYh4W0jXHo9+8\nu+7Fvhl5B7AvjqsoHpSKkzG9pj03KR40dOqpY9YA0J+TtyL7eQhz6rWpMJGZ\n+CoPB8KNL1vwtmQr2sOJ40/gfhgOZbgXrBXOE38sgJ73Et/PoZ/FS8ae2gPX\nn1ZKYQS39sYbSVNW81bfN0lyWDVN6TtY4jd+Mih56rgOzyzCpXf+36q4eXoG\nmtT6ZnBkXIeDqhXaJVM0Kxef9tl0iecBH2Ho65ZxQq0z9jmiBNd0H8KP3wGf\nXJ3BiboccQ61WGuZa9HTRQnZDmwk82h/ElQXirA82LJj8YR2DtHl/FfW3jEj\nI1iT\r\n=FmLJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ded1665c7a532bca8466d5bc100026f56ea99715","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad9dfe706.0","@material/tab":"5.0.0-canary.ad9dfe706.0","@material/base":"5.0.0-canary.ad9dfe706.0","@material/animation":"5.0.0-canary.ad9dfe706.0","@material/feature-targeting":"5.0.0-canary.ad9dfe706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ad9dfe706.0_1575415138265_0.6884159895565742","host":"s3://npm-registry-packages"}},"5.0.0-canary.5e45d77f3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5e45d77f3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5e45d77f3.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":"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":"b78de3a0eac537acbc08658aeb484bcc7d7a902a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5e45d77f3.0.tgz","fileCount":48,"integrity":"sha512-sC58bT+Cfy7rdXkZxEzEvJITbVlYMQVutskiAS75hQC/YApSB3010fkBxJUaBd+Qe1LJmixvoqUVuDemhEsi5A==","signatures":[{"sig":"MEUCIQDSvUi5kB8xp9KqWeRWqhY72AlOctXUq1GBnTkSLnnvagIgEGmTgjhA0QnazWN5ZBvNIAXO/KZfjVQV+SUzRyQ5uc8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3YCRA9TVsSAnZWagAA/TIP/1ZrPIGYDjqmNut3N8yR\nEDrj422olwT6xaydXoXEsFEculvuiBSuVwrPRyAtq2KZ8Z7QlCgKKka+Uyak\n0FQUyKJNaxFEuQJHVh/ZMtuv1PjBd+69+MDpZZvL+IaFKt9t/+GqN46HEaJt\nanrUcJvhuIpDXoaQcZDAIc0Ra7SKzHLH+gROCikjprr8ryb8I535NbLHSEVp\nY3AKWimk3YCekYMa/w//RCnDFzvazGL9UXkbhvSRrBHsDHPPacNCwJAgF55K\n7zn+wTf9J1pLyaSzPYTy6QN7PCqIHeYXNdmH7F01b+auasig+z9ZfaTRu6BW\neklghP3NtkRV6/LwrRISNTflpDpeKZs5xftjwLhXBcE4h6MI0cqWqzFKUrgA\nDd+k09VkC8ugRUY/Ogr/p/bf5/N2UZ1mXO17rSkuBKF3QNEpYMC3cFSdid5L\nX96k19W3ySjnirG+jxbgipzocUElY6U9DaBCDQ3yqGoj5kLPFs8TlUfbtXx4\nw/pMJMP+Qh+yeJOANLtRUEuMBpoMzvh3kMVeYSiunnNK/ltguRN7RMQ24g5J\nwFyeghQSOqFHFsFay22PcgdDHnCTOkVgkj/bAURBQWCmxPaC13iXm/Uhbd4N\nyArXaRz8euAqqNfNmba4w7MZ49iQ7MRhKJF/VQ0qEKvz4cs3NP71G4HRN5RC\npopP\r\n=DFQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d7a20a5fb792fe297fffc09187b6dd3859babcd2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5e45d77f3.0","@material/tab":"5.0.0-canary.5e45d77f3.0","@material/base":"5.0.0-canary.5e45d77f3.0","@material/animation":"5.0.0-canary.5e45d77f3.0","@material/feature-targeting":"5.0.0-canary.5e45d77f3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5e45d77f3.0_1575415256114_0.8255453847143763","host":"s3://npm-registry-packages"}},"5.0.0-canary.d10e8cdf3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d10e8cdf3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d10e8cdf3.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":"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":"a2906f38e9e21237b0584d039ac416bef9a29ae2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d10e8cdf3.0.tgz","fileCount":48,"integrity":"sha512-YBPqrNO27vNUmrVfG6Lo0Tj9nIBVocDn8yJznQwfjL90B51wTHoejVg9Bsfm4pXp9hN0gBOqDpPI6Mctn7b3bg==","signatures":[{"sig":"MEUCIQD76FG9hVXAxYIAtTXswaXKLnfMBmeyORjGVbHbCAHuSwIgULMW6cCVL6JGZGlg8pyG6D77QR8i1fMycX746/U9q1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5u3sCRA9TVsSAnZWagAAwKoP/i1i7TFKi4Ubti8TgfE7\nYbaYRrG6738191Zz7lo/FJUTxOkR7y4PU+j1bEjpRwRCrnkuVBH/6HxrFnoi\nT0Be2iPLNRhglzp/KA24o5IeKYpIStY3XJeDmYgSFeIjzdHkkRZ5ZI7+00R3\nPk8VFDzKBwhr/r/6KnGjuILvqkq9RiRByUfB2NnHJ4AxqZbA5kpv4veawsOP\nOAW0my3ftuMrYhB+Evtwode8QmQ+yobNbY38iL2QJLZ/kacgVmEyyaX1T/SP\ng2s11YfHd74k7eAEXqIeUXlhNWu0lg6tkJbTsBhvaw/KgNKzM26XsaYTz1rN\n4OPqvIdHhL4rLCeJfHsa6AUxaDtwHViRijnM7iUGyLEXC8QVGMTBmL/OLOBT\nuOnYV8f32+2Xq8d3S5btOHQYyUd87go4dtI9oBvA+Xoh1jNm12dMS/T/jmht\nI24sETL8CLSuWq6BS5v1XnQNLjsUluASSvDuufGiPe4Oix4TDKtVAz56VHdB\nX5s8aVzpaRMinIez1oO0rB3WyiiSebjuAvDruaOtPVgGfVH3HgWPN4J/ttyb\nLWbAhQUzzAGUSkoEWTU/iJBPB2f0ZpfoVB4b3m+qdY1ZBEJIY+p+dX/I/VIC\nOBe9T6mODYpst1Eev6jGjZ+PHHB+ajqQq79HoarctL8h/CE5OgRKV53EKmvp\nvlK+\r\n=+h+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"855cf0e11682e4f0f44f50292556ce39ae2824a3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d10e8cdf3.0","@material/tab":"5.0.0-canary.d10e8cdf3.0","@material/base":"5.0.0-canary.d10e8cdf3.0","@material/animation":"5.0.0-canary.d10e8cdf3.0","@material/feature-targeting":"5.0.0-canary.d10e8cdf3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d10e8cdf3.0_1575415275919_0.5381323450295892","host":"s3://npm-registry-packages"}},"5.0.0-canary.a5dbd8a2a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a5dbd8a2a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a5dbd8a2a.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":"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":"521efd401793d4aadf818e57bd0870f2d865e5b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a5dbd8a2a.0.tgz","fileCount":48,"integrity":"sha512-yJtUTXtGWIT7ueSyVQUlFQWcy8MQ7N8hPr0erzxxfF/weFawlXTPLr7I4c9xMAeiyEu6hIdy3QXxmqpu+y2dbg==","signatures":[{"sig":"MEYCIQDQpKeGRqOdAK5wLd65UUCVTNg102L7kVw4J5RbCM46EgIhAPIyXmbY6VMAEelDgp1fwSXbP7nAX9dyql3FRxhaeqnt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd5vYFCRA9TVsSAnZWagAAG7IP/jy5lPPP9KXNa8YW3Bq6\nEkeXJGnUIAalAXn7+/h1G7ljbIR2Wc0EWjqgl52fYSXzplBSzAIgjCGRBAFT\nWraIT2X2s4+t+0hQBy9zBI4hTUyXw5kVpBty/eowZtLQ/BzGXCPvjrzkDo/0\n/CQnI6zbN2v43Pw0t0iTOH+7RS5R+tKtCLPTiysjKEwe3waw44dDhpr4nlbN\n4hsfcqA6++0uoWx45WbLVkEuXRDjmvxz1cS/rC0DLG3s1VR4jygf8GuyWuuR\nqAHqaXiqjO7nfuhQe753Z7xZQk/1MqzsTgbI3vqNeTMhMix8G4ArQapVJiEH\nFmlLiIh9hz65lsn10ASV9zARUkXmoKrm+qcvM+NwF4JVpWukQ8q4euw7ZnIF\nYkF2TdOHu3RRTwfHOXbiOXtTjiXp6PUBSrqFufBvoBh3mzdUVolsg5Du9s9o\nWg/56SwhE6bcMNskB9V3ciu2OnD4K4I98RCAH1E35t5P7lbGqZki0wgiHYKd\nOjOiQ3DrjX5neqr9ZAirx/p607OTsQj5IrqhzPdEGDEh9Oh8SeRdthI96yKM\n5rCvIPWGcB1TJBPBMFMGcXbVAVMldBxyVz0CiYs0jtzDFoMFytqMHVqzKr7o\nyIIHhAHT+RNzJ+AzLkgBB7SN7pMoJ+rgV/1CJxj3xsPnOd1I9KUWdkMIVp7w\nn0AL\r\n=5RHn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8a67c95c393a733414be4fc008baf7637a9509b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a5dbd8a2a.0","@material/tab":"5.0.0-canary.a5dbd8a2a.0","@material/base":"5.0.0-canary.a5dbd8a2a.0","@material/animation":"5.0.0-canary.a5dbd8a2a.0","@material/feature-targeting":"5.0.0-canary.a5dbd8a2a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a5dbd8a2a.0_1575417349507_0.5747089189238161","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba879b68b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ba879b68b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ba879b68b.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":"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":"e722d8b3996b4ee638e103e48752f8340732a48a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ba879b68b.0.tgz","fileCount":48,"integrity":"sha512-sBPTHAgAC3pGgIDb4X20/A5kc74cDzgk/2hpGL/td8HsjCi0ohGHD/w4nkDMX3RIwV7znBCEUQgG0lcT2EIvrA==","signatures":[{"sig":"MEQCIBhmmX4WmpwOwct2qNqaLXpA7RenEdhImG5GJnyC6E6YAiAZhRxvc8nVYV/U9D7HZ2+aoQsaMAfPq6qeorAHwLsC8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6BXHCRA9TVsSAnZWagAASvkP/2fJXOFAVVLzz4T2XPfA\nqzGBizdZgOFA9lgwtvIl+ydVSq4nQKDviZaI1+i/cp/agne4CNoxmHZmGJ88\nZ9sWNfHL/hYfRGrKSV0PHrY9pZo0Q28FZ1B61h/bvf+DnpRzUkJIJe4D3I0P\nfiK3cZPgnmYXWVz68Ux2Qy8NigPemvX9Xzg13m+E7DeTgSYWjw767F7wUhnN\nljM1VOYe18zHTGkUR72/Tto7nrcTTvZuDYLQtDO4sfJGNSmXn4nIgDBlSjxh\n0/gtyec0W0I01uatRem7MzmtdVz88hTkg1JXrvPvmxfg2F11MdEHGrQMxj1r\n8AJgknXuwfO1Y+RyJIUTsvzjl7Odl9aHOlsNfGqMEJIBS4HYJ+ehqxJAMHJG\neIJ7jg25/rPKfhcf8s56OY3YWFBch4chD+8pAUd8naq6DHTSwIcnXWAt0e9H\nx7bjM70p4P1O+EwXEsbJgTUsg6doRIjYSyhQi7ghn9D9hrazxLq2Or2O1c7l\nmkh1fiC0cvvUKHLMGBLD36C0pRpF0lmYZqj+qX7D5zhC1T0FerGIkNp+W9TX\ngqTQhJnzopPFkvMt0zJUapsKW4SryZ3koII0/yvq1sUx6lha/ljFoO+lCVtc\nXBBaC+aGtVu6nY0ZI0uV41+Ai2bUW1DAEM4aBo088rjW5s8gn2DlO3q0CY9x\n5ZJg\r\n=4y0n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"83bad042ea5d5cc8b93df88a1d4730099550bc6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba879b68b.0","@material/tab":"5.0.0-canary.ba879b68b.0","@material/base":"5.0.0-canary.ba879b68b.0","@material/animation":"5.0.0-canary.ba879b68b.0","@material/feature-targeting":"5.0.0-canary.ba879b68b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ba879b68b.0_1575491015493_0.10247261672315533","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa0eba489.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.aa0eba489.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.aa0eba489.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":"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":"cecda6e5eaa28e8c0d205b2fb5dc4603a1172d73","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.aa0eba489.0.tgz","fileCount":48,"integrity":"sha512-jcEyT/P9EQ/bPZcHIocsZ0cJ07g79Xwmv1bp2uUY1WRBQZlJYaCooe2Pya2CY1UGyLnSVHZEV2l/XYcWIMRheQ==","signatures":[{"sig":"MEYCIQDYu6DffT7FO4V5igVRt/itv2PBnk3hyATcewPIDKyjigIhAI5lgRddTVEYwi6VisOFL4fBMSZGPM9Um6ZrJf1g8YsW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6bYbCRA9TVsSAnZWagAAE2cQAJfg98I4Db41uU8wbVhx\ngyZejOMmfp71+wRNkhb0m88bbL1DPc+uItJqdnF4/Z5h8ftV6FkZyge/F/I9\nMwIYoRR2onYDr4QFrIxNnYSn11Glz0equTX+y4XtbRdXuC90WJVkwCwFGFJr\nMymXTON3u+gj/y+c6q4kAcWKJAAKkQLaEprjB1mz+XJAwbaARzC+F1GAUbKa\n55JcEgvicIZAHBoppkoO9fKjxXec7nIVDqRuw5ezXAO3k0yyCj1jDvF+xpwt\nKNOHGWrcc0opIEsI61dEt/xnPAkcCbsr/g54w3ZPQVsgcsRmoJtOmH0PcmiR\n3Bku3GfBFBcZPaHKKUMErmKT6f8wcTPd/5LjdxbnHBZ3xMsSO41NySHErgH9\ndf01TbX35/bCxxnlJk/rqlUbnDyoKVxPequfrZToMjajti3T8E8JVNfnf2X9\nkgfzuBtU9owLIpzLxqEd2+22JsNwLr4YREmnfke9tK9DReDRO8Fg1Mdhc0n0\nL6G9ygeTGhTrCn3kUqa5obtpborfvzntcV+uQNZpQyWpSyLhguIT9N3a8XP7\nwMx6KYc4qwXRYh3IhCX3robvrWlK7YyHSyAWUDaT0joxi50hAy/xftBvkka3\n9mVtLV7vTSCrd2mAOtG52KsYGl25qVm4FaeMGSa5cjRDI967O25mlloQdH47\nr5l5\r\n=F5KN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"50ef06854f8319df2975cafcb0b8c94fc399f155","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa0eba489.0","@material/tab":"5.0.0-canary.aa0eba489.0","@material/base":"5.0.0-canary.aa0eba489.0","@material/animation":"5.0.0-canary.aa0eba489.0","@material/feature-targeting":"5.0.0-canary.aa0eba489.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.aa0eba489.0_1575597594675_0.5129272723198806","host":"s3://npm-registry-packages"}},"5.0.0-canary.cb7b71a86.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.cb7b71a86.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.cb7b71a86.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":"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":"9b806e53aa358098f3219ee6d1239e6f5a5b01f2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.cb7b71a86.0.tgz","fileCount":48,"integrity":"sha512-9fc1wWfCA9LikR2QTRFI94KGIISolG16j9v5er2juloq/MTbX53nf5QyBgDhmT7DcxKInI83fdaad/VEWRNG+g==","signatures":[{"sig":"MEQCIB7eZ6HnNcoc0nRhN+3xNnYiEljYOokIbmIMQPocioMCAiAfwT993HpSJgapUiBca6fJwj3DBdPaVPUEG1YycBs6kw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd6uq7CRA9TVsSAnZWagAAasUP/RUBPAJNqxdlT0MsD9lN\nLogNFoHxVqt3W/0OfbBCxG49hIgAxV5rRCvwK8Q3NQnNZiixNhsjE9NE21jT\nQXEP9SWD7SMbh04PyM49cW+EOV2ocmYQi2up//I6q94YoKGZUvCmTDR6IkgK\nhEQvwVoBHQmjWO1bO4/mpSJZJHbvmwkOvc6PI2lcvCfVMv5oacMgSnN8D29o\nQKbQcQGcf+W89qkpYpH5tc/Xo5kkDBo0m6SamSn+DvAJSbWpjzzu10xlN6RR\nIKwMsFSv66oLt4Q1Rx7MYkg1V8Z6NtTkYmxV4UGu18x8RnTAFQ2BwVeOlOyP\nchmagABE6O2xgCaXc4Q9XEsBHszTvDrSGifSU4pjOPHHye/m0Aosl2ZQhPRj\nHqdVPt1wN3uHv1zG5YlegJhCXCeVDKDNZsFwiwhrQx2Z02dkgNlUKifrEHj4\n5ibDI30oCjVVSp7AUszXpgfjvXG5cWyc4C4D7RVG1Yxzh+9Y/qcdlHHApWJ9\nP0RAewYFfN76yXoEKO84aukcNIbQckzcZmbfPTuZC4M74LwHjnRBMsNWL4/u\nTGT3g570z2vtZxdbqtnENDl7YfhtIIOZ2237/oGjJrHD64DuRQdbATIkjAqL\n7L3XB14pmDriZAnr5o2U+pqkYoAJhScpjkz+TNGvOB/0cntEYOZcVu52pwg8\nr38C\r\n=dLKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2866cdc43c0ae69bc09927b490f0805ca21adfcb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cb7b71a86.0","@material/tab":"5.0.0-canary.cb7b71a86.0","@material/base":"5.0.0-canary.cb7b71a86.0","@material/animation":"5.0.0-canary.cb7b71a86.0","@material/feature-targeting":"5.0.0-canary.cb7b71a86.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.cb7b71a86.0_1575676602679_0.8343039675827708","host":"s3://npm-registry-packages"}},"5.0.0-canary.50f110a6c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.50f110a6c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.50f110a6c.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":"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":"4ceea6a4202120e9c43dfbcc7f04cc8197899747","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.50f110a6c.0.tgz","fileCount":48,"integrity":"sha512-79P5xPVcufboGQF4suq9vxXhHLs4sPyJpIz6B7nCLCwshNL0Ab5kQAyKo6prfxpudVaj5LNx52F3nnp8ly88+A==","signatures":[{"sig":"MEQCIGySmEtWaoi1v6aY3hnhdzQZG6b7WIbkFzAjoY75vcD1AiApujc+P9OWLM7LZsel7zG1ynQ9lKA6+5XOvksczsjstA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd7881CRA9TVsSAnZWagAAxQgP/39h+w4SwoTCfSyMSuY5\nQF7U/RvUf2MX/zQqvIXLvd/4zk01TjMq2BAK230xRoYIUVTVv4EUfj7GdWw9\nhI6KHR5U0OQ2+RuOHVl04cxjajNvQ6erKoDEGDbc5hWdlj44a6j7d7XS3/jw\nXJDjR4PrnrUj4kXSvPlUscLT7J6m9MWWzP5VoSILXq7K1flFIqL9CX7ayx8T\nkEc9fUax1+KckyhJoBpOR3T8qHH0OHCHsMyHTkkTlQOIz1NXzALXPVKuKtRW\njuw8VZ7t3cydSPIk3eC3Qw9YGGnmRLhsGgJFgZEvZHgO39Qkp5GPs8lePq0o\nX8Ny/TXJbasVKxBUEIB9FfpdNeV99mk2OrSCou7slMryX9eQRkpi+pYLignl\nR6t2iCUX5M/jktvfPSAxrmjuYf2aq2qnLduTZiIMeKr0UvppfmpQ9yIoEyeS\nVdLdrUCgd4bs1Vpl1LhsJfvNjzpIYfv/yYLTWVnBnRZpLoYwx9M5/++ymmod\nPmUCzwBkRBZsgC9guIuapKCkJkNy2a6j4vQB4DHSQXdoyRo4H6xW31USet0c\nPfxKkZNcQY4yrNPiM4aUEwVcCFH0eXuNkA26RQzJTLSgLVc1dgX3C1vSJp6Z\n8kwFLcqdW1agLyJ5I6jCqe99HTc22Jj7YpHSr5t1SmMo6E5YYwUPoJvgd+jw\n8NT4\r\n=ufiN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"84e9b8113e75730b3079c429f751cf857a866b51","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.50f110a6c.0","@material/tab":"5.0.0-canary.50f110a6c.0","@material/base":"5.0.0-canary.50f110a6c.0","@material/animation":"5.0.0-canary.50f110a6c.0","@material/feature-targeting":"5.0.0-canary.50f110a6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.50f110a6c.0_1575997237118_0.10142027487607419","host":"s3://npm-registry-packages"}},"5.0.0-canary.878a08b7c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.878a08b7c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.878a08b7c.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":"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":"e771843190eb447776db67e9090aea749e257c21","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.878a08b7c.0.tgz","fileCount":48,"integrity":"sha512-PxoadzPDKE+B42oezM8QW1WEDVIL5Q+ufB7oVPq/1nuwR0utDrgsBls7nVmpS7kznkB46MZ/VPd88hhfkQ77iw==","signatures":[{"sig":"MEUCIQDjcWXHgWnTdul9WhhoqXy+dGhbbJaRel7I8N6baX8bwQIgFgrH37lOUzJa0BJRK6NUtx2W+eIk/03zG2i6Yywg50o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8U7KCRA9TVsSAnZWagAAQj4QAIcIGx9WEv/hio9kTEVM\n3Bc5rjYmFvsORprz6KBEbyuzxfzevYfv3DV8/01ODt/0f/1UOdW5doMy5i7m\nemhPIAx/OIHPd/w25JUbySBzx2xf21mSUwGosw0uj0C8+biMhFSQJNqfZklK\nQ4S8wiJHlocP425XxVN74RQnSFZXgwkg678jyDtDJ7zqmemu76tdB4N/BQTC\numjPFqMhLALEF9xzl0hLx8VM5enePmfYH1RhDF+J55IK+IESigVwHR728a9s\nasEjhMBQnfzaKE4h43Ki5WEN1+wnWHiZSekRfiC5DXuL2vKfs7AnvrNW+f/e\nsM5ivBKEIEKJ4kLt8Y9jXXRmuXip0qoUQgw7eGWTLTMycRidzMuCuET+KjdZ\nc3Kd5GbqhLHB8ueZ/JgsR0gQXtU0CID+b26D0jG1cHGru4R55pH2QE3J0OvE\n0rZgoyGWyPW2OPJHYXBXOPKLolZsEKevxfh3T4nl0vZPHz9Sv/kDWCDIqFff\nCunPljEagVerksattJndeHa9oLngp/oztgJ8oMkmBocy3VMQDmQr50eRbZwM\nzUGP5h4SPdAm0cHpZvGuNMlfFeiYqB69wx2FWCxu7TEG4lxHskCljop8UtUq\nM9HUwachjdeUZjpPcG5FtP2G2w78P6XXNDXRzzl9m1/lJRLQeoaFa3Xs/w3+\nMkGu\r\n=03cG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"13bdf58f09c0e231663da8e8e9856d7a442efad5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.878a08b7c.0","@material/tab":"5.0.0-canary.878a08b7c.0","@material/base":"5.0.0-canary.878a08b7c.0","@material/animation":"5.0.0-canary.878a08b7c.0","@material/feature-targeting":"5.0.0-canary.878a08b7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.878a08b7c.0_1576095434278_0.3068172886013236","host":"s3://npm-registry-packages"}},"5.0.0-canary.397905b4e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.397905b4e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.397905b4e.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":"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":"d8773a548a18c716ee15a6a58a2b785cbb8632ac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.397905b4e.0.tgz","fileCount":48,"integrity":"sha512-q860wQnJ6Z/rK+CMy/kfvKGTtAEvsL2UcWRr0v8rZAxMjwgP0iwD44apjRqNZfhUQOFmdx0KNh3HYIhTrsDrBw==","signatures":[{"sig":"MEUCIQCbyjZhXNJIdiZxcLChksyZjN+wzB37XATfi4n+uLERqAIgNH1/r1OyXGVb4Y1w5z6WWxuoqX2HhuSMZSnN+nCL2xY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8appCRA9TVsSAnZWagAAjrYP/2ECDkKX5wG+In8a3j81\nRmE0ThVV0PaZdYT0SdRtn4v21u7HeHi5aldPveNAVYJkIpMIQN0Omx7CPZki\nGxmVdbyK5YMIgBSWqOX5BImZt3/1U4zDmEfB9Xp45cp5unjdybNpLgavyDPl\nDCy8iLotTlsp9IqBox2zVTSD8IVSbZvvZxYXq+l9Egdhe+AwuY1mEt37TJQx\nXTu/4yz2oph1lxMOKqvGMgAT8wm3Huk/Gb+og8MUxtof7JMlAbX01PAlVR7r\n14A76yMbnW6V9sKiZCM0OeshC2iVJ4sUo9+wyHxKkVTfPLK+UJKyyqU/a9g9\nFuD1NKCsIJDlO+6KYB1xJCL/I4udNBJ+HU8xSgbarH0BbnttNxH8PuFomGRu\nSQycrXKMmx1EX2jcYSweojCTFdrrLUp/0b3dypcZ8mcnHrFWWM3OVxfcCXIW\nKyLGpFI+w46lY0UZCceMBBj4qc45vxYdFtPkqVkLV5VEhQl/mkD18HPu2Ute\ntuY/iN6hHPUp6H6aNsqkljlNgZUzKvDszlqM3OWPnZXBvwV3HQxq9JH9sVxr\nHeG7BxVnlqbtCs9XaUvdsLpHolKllu46O5ctZziQp9CNXgUNKkSNtsq3PxGV\nNavzcLuGEifRAUujGInwq429pA68ah0khInLNHMx3gWTW7c9xM17hwyDxPJi\nXU/4\r\n=BuHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"43ff8b8aaa48d3a31fc6835290f1ea1822301146","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.397905b4e.0","@material/tab":"5.0.0-canary.397905b4e.0","@material/base":"5.0.0-canary.397905b4e.0","@material/animation":"5.0.0-canary.397905b4e.0","@material/feature-targeting":"5.0.0-canary.397905b4e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.397905b4e.0_1576118889323_0.5917753657084985","host":"s3://npm-registry-packages"}},"5.0.0-canary.1fbf5bd1d.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1fbf5bd1d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1fbf5bd1d.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":"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":"4a6a222cdbaf5977866cf3bad7f942771a296326","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1fbf5bd1d.0.tgz","fileCount":48,"integrity":"sha512-rghx4fEiwdTN3AsX2xSdpLcH/2GdfrAw5QTtUxY0/7VPfYVRgVBBeSuEz2SXjsBPbxnvvR77apeMUC1kQLou3Q==","signatures":[{"sig":"MEYCIQDGX2xDLVaI8TdHR00sudcekdbwZmF68mgrQlKwepebTwIhALTeKMyKfbD4V1vIiYJNxv4xCYtvRjm36iLbHURU8cOb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8o47CRA9TVsSAnZWagAAQ7gP/jwkOVE9RGYj4UqNno1F\n5eci9l3KYk6JCNFBXeySnA2HPNHZdy7ZqK5dfWd1h0INItsatMs0X0vivb6w\nYVAf8DL0VWhTLVdO7qEIqMxCJ4ES4k5r3x7LPvG0U1XsYvAmhnQOR5629klt\nhxncFT4ZgRhfPkQKwDB8gaAOfRaN8DJvRbXMFFzgtZYlxPIhaBYIS42mFzZ/\nllfb/zL+iQC5v/99gepB47rOSMyzzMlb0f+y5mfBkpyQlcx8YJBOsQwrDGk4\nkkiKCbnT+WxPSD8S4SWaqhH3EE6Ka7cIju+trePDnuFJwfhtN2/7nLXqxAC2\nKGx64oSx7PJ279ls3GmPkZJovMZkynom+njP+X3RsD0jvMjV27vyJX1EN2L/\n6YgleZsnyYypcGgk2PBGc6wUuKAgW5+j8MiU7BoXNk1GKdWQ3DN6yqa8jHg7\n87uSI0Cw9w9sHaF90p9/VCFHgbuZ0MAb8TlNGJTPG+uNQZVNg26Uqg/m1Bij\n20Kn1FjDQRNgPU85JSxMHacD/hCjSZKyyefZtWbhwvzgW5s+qjZRFRdQT84o\nNoXPsby/fEDQrqi5rRAS7pgiYA5K1EWy7fpEe1qFZEHgK+qQcO1fDKeEqUe3\nrt+JDbLOOO4oMExzY8ZAcrsiGOI6nAJBLX7ScMHyWM2W9u68i7UjP7Gw+Up1\nQfdu\r\n=53gk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d1aaf5edd2a8bfd34d05df3e3c52dec6affd6812","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1fbf5bd1d.0","@material/tab":"5.0.0-canary.1fbf5bd1d.0","@material/base":"5.0.0-canary.1fbf5bd1d.0","@material/animation":"5.0.0-canary.1fbf5bd1d.0","@material/feature-targeting":"5.0.0-canary.1fbf5bd1d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1fbf5bd1d.0_1576177210725_0.0399171149333275","host":"s3://npm-registry-packages"}},"5.0.0-canary.b723dfa78.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b723dfa78.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b723dfa78.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":"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":"ceb94116a7d33be58059ed7b6b9f8d08fdb0f131","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b723dfa78.0.tgz","fileCount":48,"integrity":"sha512-2elMgvt6v78c0GzWQTROcuWD6kADzfZs0Weh+j4PwaLDA7IjM1q5/xDW4XPHh06i5CYoypwQLbxPhUmJwIeHtA==","signatures":[{"sig":"MEQCIDO37tIFBHTagEogx6OpFldwSVzPsgVzYYsnf6ENIAuLAiBBGhkazkQKJdQpd0SMBVrkzhZMwvvUzwUJjDVOFRgvVA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8p7UCRA9TVsSAnZWagAAUZMP/0rDvebWdOwFZdPWbJZz\ninnXm0x2kukCZodBNTK/5EforIofnceAYHZmfMFtVmCvh6PBFApzUXdNcgyB\nEpyNPa9HNngd+oM2oIViYvY6jeVhQCE+81zFXP9TDvZQ8LVCpJV8K0LlSPic\nlTT4zSj0UmgN0NuaXuj3xti1nUWWt21veL/gz8QhjpwUxPGw8oYT6shQm5WN\nE1Oq1lI0ZSS3Dr3e5eXJ+tYJLrmgVGeUTlwCALU0MXksFcy8lZ1ILUuAeqT2\n3YUX13F+pM1eCcT37Zclz9UhHsRdD6ekQCjLd94h5tcgjLYo3xboj6Mt0JVe\nXQdJwrZdTS6xyVzuieB6PVXlGrfI0BknrzlSk+T13KnQcr9K3cGXd39CI4Ab\n9k6QUVXKOWGT1q/+JjEdwqAJDNLzfOLuk3EI/aYR2OrPCoTIPedilB5Ku9bp\nJpt5q4svcFZujyfPh7ods8Ft/Jk2CVnVFTzd6YQtJGZ8WlIYA4fzWultCPNw\nn9jR8YBLfUrKSyo/AWv0DQzFR3nezFg6OZTknQ5SadTVAeY6MJywBeB5h+pF\n6UNh0SCvF5ywgMSrYEPi79sVFffwTfwmiZxHSGtLFOMnrQO970242ZcL/RsQ\nhL5lLoWHMK1nv23E3JMZZ2UiDQvQGypNzmu3xytzqrB4RQNb/2IDgMp/zSFc\ngsP+\r\n=P8Ol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"643046d4c1ac458ec8eb1623c5951b3c9a17d2d0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b723dfa78.0","@material/tab":"5.0.0-canary.b723dfa78.0","@material/base":"5.0.0-canary.b723dfa78.0","@material/animation":"5.0.0-canary.b723dfa78.0","@material/feature-targeting":"5.0.0-canary.b723dfa78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b723dfa78.0_1576181460149_0.5822649711446664","host":"s3://npm-registry-packages"}},"5.0.0-canary.1c494e567.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1c494e567.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1c494e567.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":"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":"068c7bb34655cdc3222544fb81526abe3e012c3f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1c494e567.0.tgz","fileCount":48,"integrity":"sha512-QtHQFHy220l/jnjojTY9lowAS2ONDwYP3kt18IWJ5JKZiAfVset/y5KoSnCvNtdb1mWihEJKhJdegOYdU7aTOQ==","signatures":[{"sig":"MEQCIB2FxG94Vn+AExfm5Abw8DPlNq2Ayu2bMp1R2NVkWdnOAiBHU9295YnnyjWHkVik/Q8cEcS3p3K9LoIjQBLNdVgsFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd8s9YCRA9TVsSAnZWagAAgIkP/3AohzyEercbAlfaedWq\nsL1AxL3keiWRaHrPw4K7psk+fbxttQmuX+qjwFCh+2Gsb5GMaHboiHyR2JO7\noZcN4f33m9OpBaa9Zvg9yXv8whaw5d7VY1d8XiLFNqgIpZWBUpBQR14TiV+U\ngd9j6V+cb27YanYkmEkrwsY+yYTIncO/jUnlZ+udzZslsxFEGhBfvhZdlfn7\nw9aAWXUXPcfLkB0+PbL+VKvZSwRhtvdW3XvwLWp0HGG9QZ53muOjxuQt/6/m\nj5nqZLYczvjpe1Ji6btqO408fc0tti0ziklcEqIzZPori8fiH3H7aw9Hu63f\n/BxrG3iKNus3gp62c+tyHwborN3h0Uo7RbGg7C1+3YSL3ePPPzyyHFUFEU+A\nuhLkcQC3Cp1KDcTNZmzYaJuAbDdA/4kHWmk41+8oq9ZqT5lo6adOsq+JGsAH\n6KA2PlY4gi0UKak9H1aG8O4/H8yvkOgciuuWRX+fF9Ji7IzKv3aHXIIicN5l\nwzG16YjrCl8qdgOCzKO4h6afJgzTjqMIDDmOPzNlP+6hCC6xiCGIDv4ShLxC\n1g8olrtmqXQm11iDZY59aeJjWo58yA8oYs0hzzRcChlt+WRCbuLW3avauzj7\nZOqiLL38DP3cGfJH1fUfeOwbmQVrSaxVg4czxBZXKguMPz4N5i9DnumV5aWx\nx8Xv\r\n=acx8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d7e01eeb35d8a54be431b39b46b389f3b26262e7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1c494e567.0","@material/tab":"5.0.0-canary.1c494e567.0","@material/base":"5.0.0-canary.1c494e567.0","@material/animation":"5.0.0-canary.1c494e567.0","@material/feature-targeting":"5.0.0-canary.1c494e567.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1c494e567.0_1576193880432_0.7001281078781563","host":"s3://npm-registry-packages"}},"5.0.0-canary.c9e98a125.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c9e98a125.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c9e98a125.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":"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":"f2d45e7894ea22fd23616979042adfbd0c94cd6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c9e98a125.0.tgz","fileCount":48,"integrity":"sha512-bmN80Gfjk9ZJ0nWGBZ+QtEI4+K8fDvLDTR9nnlibMfboy8ls0TwmNACeceoZon3av5vRIZlb4wvNYq/T3zR2oQ==","signatures":[{"sig":"MEUCIA5Z3E1X+Ngbfur44SovjaoLokURatlG8OejBJI3I42TAiEAuHZG1S0KN9cwIP5yL3Nl3H0WZqMkL3iTUlRQqipf4kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+RpGCRA9TVsSAnZWagAAf9cP/RCfYOj9wtNajvirVSRF\nVgqaMWfNjiNzyGsRW3UsqICSu+hus0Mw6EM9bZpsiyql9JvRm0llh5V7AMeI\nQSV3XGExqhPXJDXjE4lOJz2ZECJ8c315zNa18EIYJxciRP4G+2rQlHGEHmde\nSBrwg+Ys4qZjeMcufhoT4UAPgPjvKvdFD9XTWY7tkB4A7/WLPwLB7POjcixs\n2uGow0gC1Os6KelL7KvCNYzRMdf1HiydSyovjv7qokeW1g3iK6oZl3XKgfv/\nuACsvfptiqDWqNjtOi9oN7pNR6nChUwhm8sDJB2wa16Sij7u/hlhNbOSy8oP\nsgo3iu7ibJO4ZVvtArzINilqeKMGoTC/2t7NC1U5aJz+UKqcPkNSnYT6dmVz\nk9OIf1oWPt0otgm50E61lsJKJWoGMZ5U+9II12ijTNu0aEM1JXObkh81YoAX\nMY/RFwXj9gvu9Czu4InONZ//yAMlAYXuQxGF1cEUnu51hEqkyix0QWtk5IBa\nWpIe5+sC4DalOWp/6ocpykEyEnBgTkr9ZUtEqwaAnEFIwSSwq/FOvFNd7RpH\npoyK3VhLAISvG3UEgEOz6GulaI/veVn1YA8uOOzGZ7oggZoLhpW77/QZQsEI\nWzK/fUhENw9sq2kGsIfwrCVSfIOvCgxHSdsKQjOdGLwWkdvjsXypYAdUsS3B\nuj8K\r\n=tiF1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"34b4d9d0fdd6b65308344880ca9abcb67a41ec58","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.17.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c9e98a125.0","@material/tab":"5.0.0-canary.c9e98a125.0","@material/base":"5.0.0-canary.c9e98a125.0","@material/animation":"5.0.0-canary.c9e98a125.0","@material/feature-targeting":"5.0.0-canary.c9e98a125.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c9e98a125.0_1576606278634_0.7719049770926718","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ffe8f7e3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5ffe8f7e3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5ffe8f7e3.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":"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":"72d154bfcc3c3626a70cebc2d19ba3157d5e3937","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5ffe8f7e3.0.tgz","fileCount":48,"integrity":"sha512-prGhSO1kL3XBd4ByvTVAqkerO51MvyscTPpF7/GqRmXQ7OMJhbwiCSsWr6aAB+x71q1f0Ov7GohZaqfAQzK+eQ==","signatures":[{"sig":"MEUCIQCHzyF30spi1Ar0xDzomG8oOAIJP7C+pFNgX5ITVwmaoAIgKAaHq8/1MsyXsSpn0F8za9Mwb2IfERGF30OEE4L5N78=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+VfuCRA9TVsSAnZWagAAEGMQAJnAh4NittT7zfSuBJH0\nS5OfbS7ZzSnXQcpe9FqEpbB70VMvwz0/o7VUSWpIU+ij2mT7FozTxVvmojCc\nhv87LY7B2sZiVxJOmOzYRDjIdymZNg91sPibhCg/wbZnTAhP5mwE/Aih8/A3\nRNzAwsI1b+T+kf3+LzV6/QTtZhZ/FoQRE7shK+TQP3aavSLoSsE55P0WQz8K\n8PVI1252pxOe4TaylEeDwj5gzwsE/2Ro4mdf31JL77jwQh4ggG5JgDG+P8/O\nBYWl417tq9G0JfwYPHp4ZTGnOGPzvWHcMQyDH4CuU8Q/Jd5ZBlQ9jNangeRm\nh0MKTLxLHyzRUdloMKlUkJC9uE01inCIuXZQuIXLZ/u0auXCM5SODxHnizvk\nVll/8DRB5APVftPO1IlzXcz0XtKc61pQ+ozrbAtBXXStJoT5ScjALYA+43oH\ni/xFSGVJYI8gdTc9EC1V0mhch2n7887WnEGgjw1l3N5F+Tb5ZOq0EWHqwAVY\nbHGMfOat/IkXSpqfhxsoCY4wtCcNASfCV7zxI7EkQKH9JFY8VNVwumMRFKuD\np4PpRdUJcH9QIgdVRqa57vWCQ+D+oTux8lPsViSf91NgCMrmISt6W1wdF9h5\noBcDugGYs7mUAmQEriHnQM7QgmuGeG3nGdGnpkwGCPLA8oQo6rovxX+LCRRY\nIFnU\r\n=gSiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"21e7c11057bb3bfef94ff10e24676b9da6f427b4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ffe8f7e3.0","@material/tab":"5.0.0-canary.5ffe8f7e3.0","@material/base":"5.0.0-canary.5ffe8f7e3.0","@material/animation":"5.0.0-canary.5ffe8f7e3.0","@material/feature-targeting":"5.0.0-canary.5ffe8f7e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5ffe8f7e3.0_1576622061482_0.14220805745126142","host":"s3://npm-registry-packages"}},"5.0.0-canary.47949b08e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.47949b08e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.47949b08e.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":"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":"906f5d8dcb4b19e6f1d2b5325fe104ada91a4ebe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.47949b08e.0.tgz","fileCount":48,"integrity":"sha512-oBK6Y9Bpbk1vMJxRwoPpwvlhH0YLZRx94gVolLeifzNcXwZv1NXCAcYLsQWn5ICACv/5gwGMBPuSAvde9w8Ciw==","signatures":[{"sig":"MEUCIEUHmJazAypkBRmYLAKRH5UYcPrAEUtICoINUYdK5pJsAiEAwJJZyj2eRjTiwe+QFnBZGW5KDcfbvjNXKt0JvM8y2+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+mTECRA9TVsSAnZWagAAUfEP/joD2BW2S17JQ3tofFK+\nCcUlCKWeYLvqt7xdcTtGl9sxaBrO6fpZst4JLJxCZbIQmiuJFeWd9jHamZcF\nBzpjMv4P8+dfwdW4DHVD0e58eIuUc9Bp/56adMheMIrofDmXfEcVzhAGO3Mt\nv7CIoTlMVN5BR2tRxW37YyUhTwY+RRtP4NhNuER+R43EH97GN9pAXDCo79yd\naFV/aCK9ji6LE5t7bL+CBDw7veNXAfrK4gGLnZRU7BqKYVfoafGnoThMKP21\nqihieUYO169iiKV2aZjsFP9CnwtSTNXwiNSiHNTAJV6kgPFaXFX12OK4BunS\ndEb6SMRnq7gbZxGcOdc98zm+Lkd1dGBUnpsy+tZhPYNx08NNZkaJbajplEJZ\nC/bqUO1JQ/kfFTyR5FcxacgUnvIsNcixqP5dBFMdvDwbMzBnovHJg+cqGwcl\nAHS6b+PV72Ag/3q9gm8HtOJ+0EpV2ZkP6Snyi2pNA1znWo9KFY062Kaj1yW6\nYvLEm7g5pX8e5b+QmKZ+85wt2J+6Pb7IxUOOkF9nKe6yzRfi3R/2LNvfBb/n\neueEzDn3vo4NuRnMpx9gHH9jPUmACaWSLgbGPFA/DHntZSloNZ+TjqcZ04nd\nbkhmRM0LM6AeF/Np3R3T+W3r7+9KeQbfjxA/L5PBzEtP7wXGbLelBsdEvpdc\nQfup\r\n=pt9j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dc8ea470b79b9134800af9e8866b99949c575024","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.47949b08e.0","@material/tab":"5.0.0-canary.47949b08e.0","@material/base":"5.0.0-canary.47949b08e.0","@material/animation":"5.0.0-canary.47949b08e.0","@material/feature-targeting":"5.0.0-canary.47949b08e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.47949b08e.0_1576690884582_0.7986152034211218","host":"s3://npm-registry-packages"}},"5.0.0-canary.b240bcc1b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b240bcc1b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b240bcc1b.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":"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":"43e0e2440f8b6fbb41fc1d1d14c6ba64c869fdb8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b240bcc1b.0.tgz","fileCount":48,"integrity":"sha512-BauFA5OgNOFbfGe1MTk7ayNHKLDrieiVHMFk0UhVVFmp9TGHapUaM2IsKxPjheoXhOl/sxG+pEWA2HFpBBYQtg==","signatures":[{"sig":"MEYCIQCitAU8Mw0gYcFszLpEGcw9o4PCE4k3+TaMLjIlNwbP1gIhAJMuM3e/UzMOn9d3ilQql3dbOZMSJYInyaLIuFphbUVp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+ntfCRA9TVsSAnZWagAA3aUP/3PgR/SPLeDBZ2mbXecC\nfn3DZOvKy5bWiFwdHS4mO4l7uALrmhJB66Mbn450rZghC113e/f/90XC+38y\naF3OmtFbhWGPJAraagWy0zYks8C6yLcZkovIgkGO6oV5hy2UUCUqawbEiqdj\nS2plKYTnNbz1cC6NKlrmWflwK4xRHDWGhdlBL0g4R0ZelSmofPFvespFYf56\njt3vZbN+VQRhnJfYLf6Zv6484m7W5udS57Ynjd9Qu23cqLxbNZ5FAaOWMGlj\nlo3aLwzAFp9oRc+4JCvx6+vocgBnh2xilnDtPkJHSQb2Z38wF6y66k9zKlzv\nWgIdeWvKpbgGGVGpSd2/nj7A+e+evSV9mPTNk1AuAg5970aU1Mg9wMZSByuy\nYrGYUrngcNKct8fJxnGId4AlDLqZFKHH9AuibNl/AOAI703A4ZXc+nF4eanO\nobHxUtUEqc3ccbIc09FjISN5z6TqizTyIaXi6CNrCZktamqQfCikDKtw2W4C\nA0repWJY6bZQypjJIzKp8c1KPj0PJD66GOFrRgEBNJyj5SA97nDBs3j/3vJn\n1rB7lzjUta7XucknO22wwXHrV/tYBsZWl5X8WsWspnr912Xpu3asxUvEZWMi\n3UgS/ALsuCuXl75NCo6Krs9Aq0tp5dM01ldwk9S+qhGaxGrbYgtwn6MdxS4z\n8Fks\r\n=cOVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9915c413ced383747e1ca7f2069e170e38517b46","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b240bcc1b.0","@material/tab":"5.0.0-canary.b240bcc1b.0","@material/base":"5.0.0-canary.b240bcc1b.0","@material/animation":"5.0.0-canary.b240bcc1b.0","@material/feature-targeting":"5.0.0-canary.b240bcc1b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b240bcc1b.0_1576696670915_0.9907783297593147","host":"s3://npm-registry-packages"}},"5.0.0-canary.391674a26.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.391674a26.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.391674a26.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":"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":"148897d84604b67beaa81ecdd23df7f67aa5129a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.391674a26.0.tgz","fileCount":48,"integrity":"sha512-cqzGaxzx+P3VGntEFI2yJnJ3ZRATc2p1+RVTUDHBsZp2L+bb6m7JF/xNiBdnak1sLs8R1HutwXSZOcFL8wOnJA==","signatures":[{"sig":"MEQCIBszesBTuBEvgHcl2j6cpllMtWCIyKtXGZvR1WeZVPRwAiBPxTRHRqGETpYoNjToBLgNhXHaIj3YsnlDI690zygpZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+nt2CRA9TVsSAnZWagAAU0AP/20HrIHXLgvOwBgpnnXk\nF2mzUgCwKMI5PDqiCrFTJkpnFUveWEi/+BJaH5RpQPWKTZ5lR0eLfjV9Qs4i\nE4J7kXNbyDGe7LuEaIN1LGzGb86yKJPT7pSZTtsrYLOdLogBRNIfOgUesxHO\nn3IKeXq0oikIswasPRYdtb5voVfdwJ9Ryu06rEz1E1vA9CgQwUStQpckjbs6\nnCDNXbwNF0ic+Kt+FtA3NSAbGdsNOONcOVn7eCuGMxq6GoP3kfvInoTZPGLI\n7JzCNTgtHgbqaSn8/s8nzOvBOmpSDS7tjr3VhFlUZaIgxl3YdJL21igRo671\nQI1UQ4RwcVw8Z9aV0cAEVPBrMvdaWhkn48XLbvCaJmn9xBHycjRkBH4t09Ve\nfRZi7gJrESQPqeDBQ6GF3kWgnWdbrxFNIgsI2f3wc5dfmyQ95jC5AgjlT0Bk\nZajUSzWxRXEDdqUmayaiYa7i0TRPTdVLSTYP+hU7OGLqoMUJw1aHwGLZqmBy\nDb0N/iTRVZjZwe1+PNC/jGwDdKZrpl2iK7V4VNtzRF/z6VJzhC7M8qfurLid\npNOnAYX/oYZjqzr2f5MwVxlTjdY/gcfGtkJqk/Wgy6fNYj6lhSKLcIeme636\nEEi/XSixpk4giHpMv9IftMuvBwTvre3/19Bl9rrdGZNyto2FpDeotSThq8so\ncnAq\r\n=0bfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"aa67ddaa5956be1096b1d442788cd4a5565d7598","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.391674a26.0","@material/tab":"5.0.0-canary.391674a26.0","@material/base":"5.0.0-canary.391674a26.0","@material/animation":"5.0.0-canary.391674a26.0","@material/feature-targeting":"5.0.0-canary.391674a26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.391674a26.0_1576696694169_0.7862890042679822","host":"s3://npm-registry-packages"}},"5.0.0-canary.c4837746c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c4837746c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c4837746c.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":"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":"94d5496bc9861fb19848d72ab891a86a971550f9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c4837746c.0.tgz","fileCount":48,"integrity":"sha512-tk45SU1UUWZwL5bTFeoIo1DE9PPpJRyKEsqNae1JRzVTUivf/TEG4AfTlNHWrV+hD/kkFIZEtlfd8/1HyDReEA==","signatures":[{"sig":"MEUCIHBFy5KvQG99t0LklpU3zkqv2s3klxVoCvQZg6huqTCIAiEAoHV0s3JE+I94WMs0wHUX4iOtamaVPrvOExESd9CdaCM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+n+eCRA9TVsSAnZWagAABIgQAICJ0pyYY92jOyTzWbOV\niaeBD4Aq1oJCFIkzISpbM6e71uBMcu3vWjNGyR0dFKzh/Qcj9IsLYDV4qc8E\nRfAqlLGDu1f50+y7mxEGSHBMpPebfCum6Vnn2CZWoOLwTMKDTiOixDRNRnfp\nrQgGwkX/hltwk/Upf+XmZxR+BnEqWOhOOuCTcFnMFcldbvMvOFfujDv6NP43\nEX+p94h5McPRijA6R/8cDTBeRZ3V7U53JfMOMrvtTDISFw02t+KJVFPDPmt9\nUP4F7qtNF7Mzk8gJ1ebTzCLYf4+43pXRPBRISVYCT+KWZTXLaJNyOaVkONL3\njN/b+kp7dXjECqNdXN7oAXnOwYR7SJBrY7dmBTxgphRgkC0jy8GfaZDuy2lO\nB0JhJJhLt9jATIl2Mi00ynwq0/EoiDz1YKwKw21XZw4rfBTmGoQrJGF1JJHN\nQOiv9y1hveusVqJLZx99nTYJXW+kMWJlEYKwF5aRAl/Fj6q9rWeJXWaBkxAo\nKTF9KFJzowJNh5YATU5Vh4dWlnSaGN1tnQhallA51Xf/H6Hp09yXkiNByAbO\nIvxEqD18GK6jSQcA70ActtNuD4BzVoDBfNl5kBQpgL1yqOPmtw8VDn4ZWL69\nM/XTyh++VaU/AO36snmMIpKo4fjcv1QvP9jGCfdOYJUGcU3/sEhvu+hprF4y\nOCwu\r\n=cSfp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"44ccab29aa0b806ec249d5f5117ac9f5d82fc7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c4837746c.0","@material/tab":"5.0.0-canary.c4837746c.0","@material/base":"5.0.0-canary.c4837746c.0","@material/animation":"5.0.0-canary.c4837746c.0","@material/feature-targeting":"5.0.0-canary.c4837746c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c4837746c.0_1576697757732_0.712666273159553","host":"s3://npm-registry-packages"}},"5.0.0-canary.e41a70425.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.e41a70425.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.e41a70425.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":"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":"407c65a5630cbb1c055fb29b99c61f30b920a0da","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.e41a70425.0.tgz","fileCount":48,"integrity":"sha512-B8Ugw9ArC1EL5nftNmm7dCwSfeFA4R93CStsW/1ZCuhUd1AgLNltZ3KCXGEABjrN7pZKTF1bnYDb3jOcOlHsug==","signatures":[{"sig":"MEUCIC18TQr9KSzY/02dnQbiQ9oIWF5WgdQhPHgXOYk5USeWAiEAtfqW0GXejgLBY2LdcK/0UfloGo5WxhZLtrsccazJlIs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rRvCRA9TVsSAnZWagAAswQP/1AqOBzObdF7UaQCC9NV\nAZDgtHjpfKG8JObxgXkCQfoUggvDjykOKGRrTF65e2Ebr0GR6rwIkJnxbLJd\nCHP5mo8nch8bDLImWYKlCNxCD6kKVfxySDEP9yeREznhvwrARD2Lz6tJTdyk\nJPR0upct1lERmR0t3MyzSKWk+47BzNhJDfb2QQKd3FKf62iXw5RP0o9iKVM3\noLhush4y/uu+xcIMwA+DBPRR39Dc+msI4/fbfRmv2Vi2faDWJSe/1QpHXlYa\nU9zrjgjp9FwqdZoSU3KpmYrjzwf6cd0pY/+rL7dJRylIeapFaL0U9Ax9Uwej\nuPN09WE7xzl0MqKQcXKnB3hp7FeUtIaF8Nkh/iQJl5iVnRO+uCxCEoe0Z+OL\nUjchPeJZVHZa+zD6uS2FA3Wn4K99zuFuotyMVYvJM7hJXwFs/wLdOlSeqWkB\n9YOcf50X6pzpAwTHupVPBA8ZmWmtHHb/sHseXPSMANSVxGn890zVh1G+P6fM\nC/vagAWP1Gdqh2r7sR2GFu+Lce4Nyc0lmPI1nUSqqfFzgsyac/ZuZeNRW47y\n1k5iYcxSp9rDzwopkqQmo1Ng6CWQc88MSLQ2FIIeatPEpAoPhbgo+NA/JgW/\noHMxgzzq2aFbP2UDj/ejwlX0mcOkoJomVmp0RQb6ON2XHXD11z5s/5r0dbXQ\n375k\r\n=qRWZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2e938a63bb3297bc73cdf8f1f206885e2ec84a6c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e41a70425.0","@material/tab":"5.0.0-canary.e41a70425.0","@material/base":"5.0.0-canary.e41a70425.0","@material/animation":"5.0.0-canary.e41a70425.0","@material/feature-targeting":"5.0.0-canary.e41a70425.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.e41a70425.0_1576711278772_0.3964797550555865","host":"s3://npm-registry-packages"}},"5.0.0-canary.bac43eb43.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.bac43eb43.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.bac43eb43.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":"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":"00eb5b49392e97ee740976566ee3f4945e8c0d21","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.bac43eb43.0.tgz","fileCount":48,"integrity":"sha512-vMIomcvbrmQQwQSJgW1MNVyDutdbc6JK/CgDE/KdDVqRAWagnNshDadDXXbLwhANk331flhOffWQ3MbMaQ10HQ==","signatures":[{"sig":"MEUCICKa7lOfmLsJEX02K/4bjmXFTLqRCK3QCRfxf1QA1rx2AiEA8lItKJca1aBXXmJNGeTN0RDYRWijjQuoGGGU30e9qRk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+rVSCRA9TVsSAnZWagAAXTEQAJ86W9PoG2WYxoR8wy+b\nGcScSXoxhCMY4Zxizidcnrao+Q0leOpJcWY+emU7LTdEIXXSIIw3xTAhJ97+\nAIUReSWxvzsyPZflI/nQREjCsEVXmTJUmNE9p9BHXuFHACKvS12nPXF7lAik\nfp5gZ+nP72WA3XYJ4gEkwpnFOhI2XsT2tQKwgKkokzsBSSqebwYUOgXRgilu\n/fWHWDDmhG5/P3eKKCrJJIA52+spav6PVSHVao1dAI3aztnUKtxK6Ld1QFcG\niyu5tx4ez8C4VyYjQN2LmVxwfK+xbNvAGPTNKVev0kEKcz74cdqWN+wll5m7\nPJLGBmOfm9AkukvR0mh2rW+rn0VMCESxRlxv8SSgnjYmE0Xz08E7bzWcZoh1\n31uSSovrqZe8szz/c0IiuFeM9ndYaeft2GZlDoWy8YVE3wa6GXp9DbuOqvtz\ny9H7JpU7ddXbNJk64Zc+N2b7YAdTWt892hvKUUdapt4jHcbf1jp+h1bD12Aa\nP63aF+DmR2aTpJyQGOs5vOc0ZtM86RuvSrIt2oR5F8lBdHv/FvrOPIaE6cYt\nBfx78autqbYz2qtoBfR9AVWeTKcm79hxUFSA4Rny25MjVgYRa4s+E2LBc8Em\n7O/PfULCc08rSZvc32/ia7C3y/YenfTyf3AjM5a6LRcVXBLYJ3Cpe1STh7/D\nxiho\r\n=ToXz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7035dfa39edc06f1b58f72c5e285bd2998747232","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bac43eb43.0","@material/tab":"5.0.0-canary.bac43eb43.0","@material/base":"5.0.0-canary.bac43eb43.0","@material/animation":"5.0.0-canary.bac43eb43.0","@material/feature-targeting":"5.0.0-canary.bac43eb43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.bac43eb43.0_1576711506299_0.6755809070563099","host":"s3://npm-registry-packages"}},"5.0.0-canary.2e491de55.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.2e491de55.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.2e491de55.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":"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":"62c2b874fe00302fb90807f55edf6fb0ea5e5a38","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.2e491de55.0.tgz","fileCount":48,"integrity":"sha512-+Mj05uLQfmuv2hheGDhTbE8AsSv6l/n2RlR8T4NzwwhizSUV+iu4VtxQZzGGG1zjMGbah1i7cN8/7EiAv2546w==","signatures":[{"sig":"MEUCIQDdamHhA0G6rYOg5+sbShXqzUHh0zN8swHy5Sv9fOsoWwIgOGt0mL1grnM162MuoVR8KeS6uOwE1wuqFvQoP1n8aXU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+1YZCRA9TVsSAnZWagAAoVQP/0ZfiwB8HHte3itFN48x\nmO3G2GtpSQ+AtsihU2I+RYVC7VxM8/05vhuMv8brwGbUK9NSQ4LHKYF5HlOc\n/ilCva9RrTkyAWz9LIwAAQam979VD3ZKYSzCbWHXmoEMezo79tc007hEmUpX\nyn7wsJFQDrE5lWn1CM5d+jBSCbouVErnvQWJbMzRxXgpe5KzSgG0lohyz8jP\nAT+KxhxolrDCl7oAXBUftKkErzkGRwsDrexNGrYd0Ns0JaYzp/tQHapIVACW\nZXx8aVYwMsUZ1HfmOWKqnDJMajuOOTEG4LC9Gh/rOvT0Wt7XldGYHKpDw9lR\na1F3YFSYr9nKV4GSl7WxsCjFUkbMYZNzIKm/F2HVQqZzsIQCgJ3CKRxGk1un\n7zaYzaSWEdzZO4TXlq0vHlXunFt4Vozo4GJGUuXEkq2zSSIMP1PPy9P89hhB\nGD8ZfLXmjFflsMYXSLUyq6iBRNAQhtBSuXyjzSD0SB+Z6I23voGnU6HBKMGm\nRf6qp4fxwxpdHVHPbX5IpKa+fra3QUmLQMd9xIpmBDhEtisaZAy1QqCjiMVX\n8Aa8VQK3jJEalXZMKtFE6aB6fewROlIGjzNNeU2Ze2SndWDNPRVHxI0wCIek\nuvNiN/gjclO1uKxEg1m8d4fELO3fsXMRWsVPCqugwIJ+c/xujet+7EP8kNPt\nRqS8\r\n=O6SJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"731b98f2f9caf1251d3a82a3abe09828a92eb434","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2e491de55.0","@material/tab":"5.0.0-canary.2e491de55.0","@material/base":"5.0.0-canary.2e491de55.0","@material/animation":"5.0.0-canary.2e491de55.0","@material/feature-targeting":"5.0.0-canary.2e491de55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.2e491de55.0_1576752665466_0.3050961207780236","host":"s3://npm-registry-packages"}},"5.0.0-canary.ae101c144.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ae101c144.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ae101c144.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":"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":"df6ad2ee5bdf3d8676228ff41f28fb0b3fa8305a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ae101c144.0.tgz","fileCount":48,"integrity":"sha512-3GOrjEqJcqKJCP+yvofbQfph7bUDvN/MSxpw6J/LWf2J9UhqxoftV/8ZaKjnA2DA3nXxPCmE0EwIiQdzobFbvw==","signatures":[{"sig":"MEYCIQCB6vTVWgHPODWEKAvsI6AnBCtEGmVPOiQkMf4JN0UedwIhAP4wuwfpz1bYC6ztJKZEepn6uMBmNcvYMsSCL4wMczm6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+6SZCRA9TVsSAnZWagAARpAQAIreGSmcrkAlVCvh3oFJ\n0G4osVvslUIrN7Zuh9tVbCgHcNXEBMAIKRIOMElLxBzHsjTAeepvIvtUY3/l\n9y9IbtHP/9UNODtX0PzIZdMTTR+nMaIxRD0Kb4PrwFn23A7dQxuWFabriI8G\nCZN8JHbv3rbuqz+uOpIvPswSXYKzSpRmw9KS/9A7XH4fZBiDXwUie+r5MJDy\nVCqsamcxPWuO5YYzKaH4JEZPTcg43T26nXuUV5UGuhCRH7PPRUHYwWcFfdoD\nQiR/uYns/cBGBWYMwdiOuXizXLwZxGA6YbKfRG4dicSgqNJMefeBR5qWQylT\n2ET+ubKiJz1APG1XHyptq2qtx1V/+Rjagmzm3bODx8ND6PhrYY+I6pnB/1Q9\nR/6PHC/6jRVA4rDcZSh7DSbZzTtoPImLb1Bm5hxgB9d01gTWJcnAEoclMWiw\nTZWkwiSOWd9zkNi9zoLaEgpsjXExETpewhP6j2pOKGmolAvJAT4SokRJxZZn\n9cOkIScHQsE3qMJpa/gVzJzbYJwnr3SgeYMu+BbokwuJKZ4RN+rQW4jWTTKK\nV7idES0iD1oiw2aq3wJe0HqcwtB2sAa4IgIGJRShMPx1DY/kzB41l+F2f07F\nn4VsYwgAk3WcqOVD8znExKw6GVJyTuKLbU3A45bZUmcJ67LDwVaem0A6EFbg\nb6Qy\r\n=IxPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d11f348d85fc15df510c3e33822ce23f44ee661c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ae101c144.0","@material/tab":"5.0.0-canary.ae101c144.0","@material/base":"5.0.0-canary.ae101c144.0","@material/animation":"5.0.0-canary.ae101c144.0","@material/feature-targeting":"5.0.0-canary.ae101c144.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ae101c144.0_1576772761249_0.7036858329428739","host":"s3://npm-registry-packages"}},"5.0.0-canary.a51c31f26.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a51c31f26.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a51c31f26.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":"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":"8979f2a1e3ae979b56f85f9342bbd2e9c6922e06","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a51c31f26.0.tgz","fileCount":48,"integrity":"sha512-P3WPaEOMMrZ798zKm2yPr36B402ku+1dB39wDGrX5tmG41SGCrGhpXLSJXkAMeoZ0VFvPJhoi++256iLOWuF0A==","signatures":[{"sig":"MEYCIQC/RKkP1U11K4OJXE0EHRb7UHlH3KQSBWp1KTAf/ddWvQIhAJcy9T6hThCFXK+fuTYsgLiqctemaWJchn3EZrED7X4I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+7A+CRA9TVsSAnZWagAAB54P+wbiIaaRuy0COVe/q0Ej\naZCMRX3+r9GPIbQX2yQibpaD4lubuexXUJf6DWGgeZaWdPHmCVYBNTztiBwk\nDLwSULhFoW+t2RgNEs0BxCQe95d6ySmxPQPoFI4RqhRkA3Ep/HqTqyEEmKy1\n9WsrV/ZUiObyjy2msKaeZJmOO4ZVRHf0Ra3u8XEiLiefBJXpVFfI177v5kcC\nhZvVxYekt49lDTYIXIDXPfxXafp6U2QE/C92zvEh6ynKJ8Ycp0aNUM2ZvWCh\nw1Zx1SUcJ3MHuy3ER8C2MwG1W3oXJ2M5qcK5fSKs0bXez6O+iHcDMubZKWhM\nZuM45PL66xCtqLTzni0zkv7LBnx/R9APlGXz2iSAPRk2Hlb7q5YNfRYQEx0M\naG2HwL1Qa05Epv/cZOPYlB9yPonS6Yrco5MbJCEJG33eEp9AtiapuJBtqd9W\nbm1+2Nq2LlOiVVX1aL1exwes1lFAiRKYfl2kAgTsbAdPfEFX3WqZir9fHzvP\nMRH+9iTe/p5OeUzVC+bEcMNXUgtIuLlDJPPRXV+n+6OBlgYzCB3LDHkBJPyn\nwLV4pPzksDyDE4CG6biSwefMzTMgqU3bgB7BpY91munQw52pXkOIdnSsfMY0\nn/t+UjcbN+Kt6B6yubnC/ScsvtSvezvNLRRCM5V380QujEvNK3m/MLvOTRtg\n0AgK\r\n=/vKs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e2dd52b70a7e3cd011647222c15955dd4535cd6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a51c31f26.0","@material/tab":"5.0.0-canary.a51c31f26.0","@material/base":"5.0.0-canary.a51c31f26.0","@material/animation":"5.0.0-canary.a51c31f26.0","@material/feature-targeting":"5.0.0-canary.a51c31f26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a51c31f26.0_1576775741881_0.0771991446004423","host":"s3://npm-registry-packages"}},"5.0.0-canary.21fc4e13b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.21fc4e13b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.21fc4e13b.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":"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":"7138787cf4e147f7b26969b27c7f571f5391079d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.21fc4e13b.0.tgz","fileCount":48,"integrity":"sha512-KY6LRmaHtVsfhfP3l+extLiE4/8LQKUqOUuzGfy9FArkUN2oYoeqFqBlOcWtfNDkczRc3DRZKtT3As9R3Ls8QA==","signatures":[{"sig":"MEUCIDXJfsNCdw3ifuEAeBk9REwHnWzd/E0CmzWOVgCROaOVAiEA5cnrsjAxDW+FPibgMgkun0gOC8umdrUoKr3+iojIw0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd++tgCRA9TVsSAnZWagAAWeQP/2o8cnLXuyM2VaR5SuAb\nvl8t4qQR4JivXuwghy8yxfmKeQU961b9RYl1j9Zv+ITCvk/qL8aq6PnSyVnd\nj+xZgDwA/3ETdKTbhHohfE/USq3VteF8CtRpSjc3F0dqhnhl3HJq2iXdQDSE\nni6njeA+13gZGu72y5scuXSbHuwlxCu8LBPSlpKu1InybbMb7CYvZVGojXjx\nfleFeGN5idrBacfD5VCC4KFm2zyKBcWzLBV9Dci9KMvquGkp5ps4hIb1diCl\nGZoXjLEzHBk0ds3nnQb3pByaVDEHIisWUXwr0wApbhZsPy2cbRls3TgbPZHZ\nm1ZFL4hs6Z/TVCMTC5I/6CVrBao6+c0Z0jVDr5ytfkVetwL8G3Dg+LEt7/gZ\n0keml1QF4x9aHNReqtIw6E2vII4u3lemN/oUUboNAYQlEMwltDzsQ+j99ZR4\nH99ClcSIhnbPQTWyw+U6/jc1OwBB5QTUzryIs3SNupE7T7l5x6WpXynCFAfV\nR90mZr0VFR8xzBcZSxPD9Ly5ydeqQxFQktpp8uAhS4Jd879m7ue6YYS10Wce\nqU0E2CRu2JJgtvlH0wah1c+zx/RYeptdIbXSln2eYfsAo/zN3q+497X9Ymed\ntXFYNl5z8el1TyBshTsy43raZgklIvcqwKGFT8eJl14JrZEEPZx1u89Espgt\nw1n+\r\n=Jk/v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ca71d599c2aed234cb9376ced1aadb512b071fb8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.21fc4e13b.0","@material/tab":"5.0.0-canary.21fc4e13b.0","@material/base":"5.0.0-canary.21fc4e13b.0","@material/animation":"5.0.0-canary.21fc4e13b.0","@material/feature-targeting":"5.0.0-canary.21fc4e13b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.21fc4e13b.0_1576790880364_0.049525253771840916","host":"s3://npm-registry-packages"}},"5.0.0-canary.d2ae6e17d.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d2ae6e17d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d2ae6e17d.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":"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":"771a11ebc9939e5e5efd5749ad5a525821562159","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d2ae6e17d.0.tgz","fileCount":48,"integrity":"sha512-uWYsbaEt4trwCHRrgxKr6sGH5MNvxtAZD+K3DrRHrgj+wMUxawZv8PXwoi9+6w/chhV334XjMbcmdQr5FMBkzg==","signatures":[{"sig":"MEQCIB0Kj8kZmFKs7VmhR3aPjvmoo9+YQcwKWEx+lRe/DGcPAiB7EZkcaQE6/wk/P/0JC4sVHxpUAV9LRHEv/yhaBlRY7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd+/i9CRA9TVsSAnZWagAA1DAQAJtuTzdzmJz+kaWWbiPA\nxIUHDNyksIYnE1wij3DTKbGoiAJxmbvfxMVYcu7p8n2Oraq3bKFREE3AO32F\nsEbzaUNDq5X3ZpXroKfErMCzpzqCq2NP/uvZKrxk8DiKUrfdx/MyVTvSzro1\n9ELJk9RAAovQLrzfgBMGmu8JndCZvHtQmF8lMjEoFEf5CUDALn7Cs741MADW\nlHy/20v/hurzHbjgXkuiNc9QyfoLpssqnRHZ9AA6SrdhtMiwkmCgJ5/P88RW\nI7rSk3EyIJvj1oup06O0T5lQ+1Ka+0VTR4a1v2IbgZefUJ34zUzgtqsr1yCn\nIj8s3cMZpK8U30Ze0ydZRlIiPC5c3vmBV5lH2yUmuaWxDUjdXoLTEyZYAzn2\nEWOtrIMxraLla5tZcqOPAORita8K2bbij7xpi5gXzm+X7aetXsmIe6Fo1pdv\nJR6eBlU/RGO1VxgcWYH9JlykMO2ZP2SYh/gSerFWWW3Veufo8NqfdZuX4Ybf\nEZv5wKacJCDoixPDqIdrmb8JW46C8QKazTTuH1LBAbrAZ3KEJ/PfVYD1UgU8\nnR6plyWMX6JUgNrdDeKAZdtG6H+eIgKErwFe+/em0uYgaW2Pg+ZVudr/xi7S\nj5MO+sp/wnln8o5TzWbYb0AGkDbDpa87uiebKUOE8196YdZiJr+APjePuk8D\niOs4\r\n=dA04\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"aeb622d14d533f70c26396fb7db6c8bc48eaf8e5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d2ae6e17d.0","@material/tab":"5.0.0-canary.d2ae6e17d.0","@material/base":"5.0.0-canary.d2ae6e17d.0","@material/animation":"5.0.0-canary.d2ae6e17d.0","@material/feature-targeting":"5.0.0-canary.d2ae6e17d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d2ae6e17d.0_1576794301390_0.4584644352187377","host":"s3://npm-registry-packages"}},"5.0.0-canary.ba30399ad.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ba30399ad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ba30399ad.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":"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":"337fd891f2e84c2a0c239460b3b898e1fa96c00e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ba30399ad.0.tgz","fileCount":48,"integrity":"sha512-SAim0/s7mU1nACReGftBa7rA9yi+mTGb8528/qvvIzN4ormdUNzqXs95dPQTb6wNNOVB4yxelX+DaNzd331gZQ==","signatures":[{"sig":"MEYCIQCQglDEqZkiZtWrRRWOUUcRK8etz+UkNwnGRZxJYnzRvgIhAPvqlSXs9ckKV4rXjwKh6zqGzsVCWa2A+s4LCLqV5+Z3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/B+XCRA9TVsSAnZWagAAW3AP/isEEc26zhctPMaNwElu\nxErtuLUTY8Yc+5vVyxHrWlnYc+PvHBO6UA9/+Et1zP8moDHssRqnXWMJQG3v\nYQ++XjmUvC9VSlqKEKc/a4DnE15L8DhaAH7vxGig5B1VJdvPGFVvidckWrqc\nWpaZaW//VOxgP+/sS+e79BalSehDC/rpyls84B1ebbrvK+6TFjQkg9PuaVdx\nPJZQ2RihwG4eufOUx2pG0JxCrmY+8QYJOzvQoOloNlZOdDSS3KrTK3QpROOU\ncnb6V/uGcURpM950oUHt9Rv48alDSeAw3LjUxyrFDdXZvyPt4gOwGl5vxrFT\nuXtWDgBBMq10ackh5ZDXYu2sEdGNCzJLkWgQby9TEaNTu8OZHiimU5PJlNCi\n+Rs8uz2Op6zJ9ZD+m0P850YH90+VOanuoAoAPdvjnfDNQo+Pqvs7zhyetYIe\n95xW8bpuVSuaIPjIkgpnVxHU5mBv8ShA0joIu4gcwDGVQs/X34d+LKBVGDgC\nErLmr7qnfElv4NRCDtPk/z2XjmBeUpoOEKYg7+zyEsI0E0zc4XvnpWspwotr\nm9CPjN0Y38ckKg1JlPSU/Y8UcqY/9ccHn5p7RUDzbo82wzwgYnvY5ScE9mNC\nAkqc/CTDqSjhNoa5vKOS3520dNFzzdzRKx2lMUqtPzt4Q00PEx68QYFJNZKN\nK1gs\r\n=6ubk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"75ab7f122d8d469963211d9f9591a84602711f72","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ba30399ad.0","@material/tab":"5.0.0-canary.ba30399ad.0","@material/base":"5.0.0-canary.ba30399ad.0","@material/animation":"5.0.0-canary.ba30399ad.0","@material/feature-targeting":"5.0.0-canary.ba30399ad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ba30399ad.0_1576804247196_0.561922126183928","host":"s3://npm-registry-packages"}},"5.0.0-canary.a08ccec35.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a08ccec35.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a08ccec35.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":"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":"59b0ef723d1798e27ab69c342685d3965c77ad40","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a08ccec35.0.tgz","fileCount":48,"integrity":"sha512-Ln00kkuymp/WFCw3qsJhEPnQXmg9PrqCCIGX7zJ0Xg6oLzG0Psfd17CVIOsIh5hCjpQMbsuj+VBqnTh7jvEvww==","signatures":[{"sig":"MEYCIQCluJy4pjOPYjuywvgScrFKg74/eZTYfxJ0XbjmegNi+AIhAMkTXJZur0b/HcK8WSaDC4EoPjSfQDtObB8PM6mYEShD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJd/Vj8CRA9TVsSAnZWagAAy70P/0Ho5yv0lcgP6nXu0eUZ\n/txu8iffyIjLwLqh52MZGMMXO7qKTsClw5wdGcdVTinq7D168yPy0RFGV6pY\nKC+gJkIKTkQCHshSvX98ZuIKUqY0pyUUazTCNnp04iMlJ9sGZnEDaaInh+x6\ndNvnTuNy3I0CcKIYBJzFUQwsI36h0z8t+nSuIZxn8Z40Fjc1ewH1MHERHKCg\nuKlU2c7czkYXINehOKo+STeQZkUM+sftrOia7cdYATUdbCHXQVVCPxpw9MeM\nxpb5RbXx3XreFnXVpz9u1HcY86vYDcnwvf6CcJIu+yfZumsEZkDmTIskUehi\n4O7QTzDfSeZaA+5uVDsxmvxMqICGi/fwJISGHvNkKOdTrdjbBlUkfGp+A3he\nX2DZJEZt73SIv5vh1v0t5mYAfNmoDozAnwZouCeGH2DwfqUYKs566vNjIUmB\ntCbUP1XWexK0bbjCHGbArOC8eLbYmiOWeRVjIxlBwdKhRtAe95onYxc8aMO4\n5UQS4+fNxPB0gJb1iDAyINjMfGIJZQwgmxMvOFfKOieUEENz4OCGmNzSWmu2\nIx62nD4W8nOdOaj3keDMTxdxZUyS3WYHRgJ29SvY/n6A49zLPvHmJB8zEiNW\n+wFPB+rY78I6KB2c7pxV1UoztWdhiM67Ds16Qr9q3CKr7mBfp86j5Og4uT9Z\nsLpn\r\n=Efuq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"121f2cfbbcf425b2c92760a0fcf0301dafb14636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a08ccec35.0","@material/tab":"5.0.0-canary.a08ccec35.0","@material/base":"5.0.0-canary.a08ccec35.0","@material/animation":"5.0.0-canary.a08ccec35.0","@material/feature-targeting":"5.0.0-canary.a08ccec35.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a08ccec35.0_1576884476536_0.2477706105491868","host":"s3://npm-registry-packages"}},"5.0.0-canary.a2f75105e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a2f75105e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a2f75105e.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":"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":"d2d4082481c1adb35d023a5058e159889726d3f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a2f75105e.0.tgz","fileCount":48,"integrity":"sha512-H59SnaMuvw+M6c0EtNmKJAz2teZ4uuuB7j1nMKqTneGdlaD/QgW7YHEr/A/OO7+kUrYSUqOv9Qpy9mTB5gLeXQ==","signatures":[{"sig":"MEUCIHoMGDsywMbeCuxbL9zgqLTOJMC7CTmrF1jqBO+Hu4nuAiEA/3iqsE+HVtHP5ellLjDmG9YRhXlXxKGVsVqUwibkKEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeARodCRA9TVsSAnZWagAA7usP/32nygNPrYZITemDvmBX\n7DJtyjnHegeOscHObRIR77BIH6wfWY1qAlKRaavfGQq6unrE6s4hcBs9DMkm\nJSBTa36jQU3V+xKVhgIOFD5TJfKfmTmwRtTusY9gyIJmZaqDM0ukmD7qRvsq\n/m27Bfy3xez8ZsaRpuzBT/j4vlEMbkcMzNmwO/X77a7egrxe68wzHeMJEY+q\n3n9jk5aGErzIgk3uPVptqMWLHfLZS2mtWP5p+/6hNkiBCh6kBSA6ATVB48GE\noONPMEdrVCvATAcZpKaMnxBKKu7nuXmD6T+5rpH5Syqrhe00RyLzRaRVMc6G\n7DBvRPAouQzw3uceMSnT0EYErk2mDwhDo5gTtQuoNgYUTVd+dD1EWWyAWy2n\n9OXvLQ2CV/sRoNu6F3RQlvvw2zALX9kSn8dTI7SkqytO0EoXr/6xGx8Bf4pz\n/gVQOykGjtODks1TEwv1DUDFMxnY0Aazvod8HF4jnxralGPtMgq8A288L0kU\nz7wBX2iswMrg3R/NPNsmxV72JvEwRzOPaL+kuMDp/4Me7Z6zehCG3P6Wngn/\na/7pW2rOZ5HvLut+iNBdNE85RL6U656iI6xUJSduyKCrRbGB8nlauUS61sKm\npsHsgUx+x3UolPUbnMKg3h1DRd6facsfNOQD2nFPxY1tEB2ME7fFmsZHZ3UB\n1fSl\r\n=cX1e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7b2f4b595ae59e3e680ef1151ab400a3855144d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a2f75105e.0","@material/tab":"5.0.0-canary.a2f75105e.0","@material/base":"5.0.0-canary.a2f75105e.0","@material/animation":"5.0.0-canary.a2f75105e.0","@material/feature-targeting":"5.0.0-canary.a2f75105e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a2f75105e.0_1577130525097_0.7478635260839861","host":"s3://npm-registry-packages"}},"5.0.0-canary.c054a24c7.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c054a24c7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c054a24c7.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":"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":"dca1335579d32d8c53352d32667f02b59abe410f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c054a24c7.0.tgz","fileCount":48,"integrity":"sha512-pjkftpco0ux/aS/ERnuyaDQG09LHqGq4FsTP3dqSkNCRwiaSFIwRNhdMuay45Ia4T9M0q4YAiOO9rDEKHJ/qAQ==","signatures":[{"sig":"MEUCIGYsIVOtiYsBX/H1wXb/9mdkNY870cwMXlSYiqi4BxwTAiEA/fkOvBfIEbmJkQVq2czRCgmOOZtT3nIgDFZYWc478uc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATbHCRA9TVsSAnZWagAA18IP/3Qh+YjDlb/21Lvm9PcL\nw4rP7Xb67oJ/R33OGzPF5+EBuv8M5E3xZiRtrOJ6Ej7w/4WzH+tiDaPPsFcQ\nbmpX24cB8Ho54BR1I6U0XPsu3/BFZhDuTGgMS5fKzbq+NAPhXnZ2JRzLTOko\nPjB3kbK0vSRhPo5C5VOEj4rOkTuMNsOJHOw63xNKRcMq3YIVNakBsiUPC5Vv\nefTI/X9cUIZXRy21ozLEX/SKmEVgk7Kco2sQc+eNm0HEO7PDkjkq9QVRT60I\npFddcXpPns30tcZ6/DXtzGUfiVVddSERKbiVt8XCrT3PKmmED2t2HPhPxBWD\nYCxhnbS/uK+z2QpR+MpYHE5GEG4utlCScI10Qn1wsUXxSr77uTIL1RdewkLd\n2WElJaiHTUn3jXnPyZyFF/s/5WYBe9BXtpuv+CQqsK2+iRqMH59s1AMgBoYj\nL0qnnwuqsNbELHsfwM8IaK1dpO5dkvaMczgPP3a2NbsuMZkqEvOKHE94dzyy\nmbavTbcHmkMbUKQJL1Nmrs3AdP8NygO0j37qim2hejc+3MTKgGyzS8Voc1Wv\nTxvy2Q7Tut725syxXuvkzcItvZgt8MFypdgkSyIRNEi9beNo07NyZ90ZwDmy\nzO8GsP8JmaAdwdwQnhfTrZ8kYy9Jyz52l0y43hd3Uyb98ZbnneAXs/FTGUey\nvvX0\r\n=8a22\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4e2a3c12859a131938df8918a9f43b9146056488","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c054a24c7.0","@material/tab":"5.0.0-canary.c054a24c7.0","@material/base":"5.0.0-canary.c054a24c7.0","@material/animation":"5.0.0-canary.c054a24c7.0","@material/feature-targeting":"5.0.0-canary.c054a24c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c054a24c7.0_1577137862917_0.5471584186795138","host":"s3://npm-registry-packages"}},"5.0.0-canary.c6808c51c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c6808c51c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c6808c51c.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":"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":"20493643b71bc62a7ca4a7802324c6a13cfab26e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c6808c51c.0.tgz","fileCount":48,"integrity":"sha512-/kBq3ZZpT3ke4Qva/KvDhBbC52sLPH1aIt1Zoo4O8VEfUrIBVbWRJVas2J2m3HHdbLEAEhp7VKSem4Jmk/zZ/w==","signatures":[{"sig":"MEUCIB97fJiVdxcVlF0bwsm3h7gCa4wD7Inui7vRRKtioHSYAiEAx+FTTDvc/taMmQyOQ4akFW79NVIiRUkfhubAJ6fdDok=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeATfQCRA9TVsSAnZWagAA75sQAIu1QeqfgBJkOoC4X1yS\na9WsZODPdHdM59OzOYCf7BsjenFptBX75ppx9udjZkmJ17Ri8qpVPhAQ9NeP\n7HLJZGJ2USwDHV0eZVGMtg6rViU2kASfXoFXGFk5AbBRsed9EnilUd5k6s6H\n6qMnUkbnYqLECyze8BeYSm4kjlYL2HLOhrY7X7WuiAZAgas2H7I25su/Z4qZ\npC0urqOIfXdJbLDQxCtj00ThWPf5U/34F+qu0arMPLH1r+QQGgjwblcSXd/C\nnsHbP4j3rvtzwd01yV7V7EJib/LY70YODJtfb6PQEBAGSk1gxr8Gz1/iobpX\nbbckpbY+6gsdfQsPgjLJdCiatR5+Lu9xcKR/iqWsnkUN0GxnSWTbJZWG4nmg\nyHOoYwN8r0RY6+sZNP3MW6gDLK7VMrOxRrJPhoEEguAGOox61YkVy+YOvjmY\nzucBkRS9Y7Lh3VnQf38x+IfqznMQs4P71xc8XVaqv8VEm3T4ijc6J6jGTrs9\n2G5jvC4RpXlJ9Dfku1hJZlX/QOl1c3ERgfhaZ60n/mnKLzWW/9inOEcVF95q\nnnyd01W6p2uiFNcZlOoR8/oe1zpBXRhQuf12YpVfdscpy4EjzhHygbIXUEbQ\nq33h9CkLfcbUXckH0NMUgi7rsggybbLvlBJtOf15h40QdTxLE6TSI/LHaofL\n7Mbh\r\n=zBPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"02ee460be616b30da3c6d5daa7eddbc5f29d2500","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c6808c51c.0","@material/tab":"5.0.0-canary.c6808c51c.0","@material/base":"5.0.0-canary.c6808c51c.0","@material/animation":"5.0.0-canary.c6808c51c.0","@material/feature-targeting":"5.0.0-canary.c6808c51c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c6808c51c.0_1577138128546_0.5623565851346233","host":"s3://npm-registry-packages"}},"5.0.0-canary.7bce9cf77.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7bce9cf77.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7bce9cf77.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":"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":"042c0db78e0c1738495f6020bf14f834e788ab00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7bce9cf77.0.tgz","fileCount":48,"integrity":"sha512-gBweS2wyUOf8wbeEAuemmlG7E6kNyFm71ClRP1Z1FDkXz19QUDP3SvY+sx8cY9zLk0AqAURjDUGwBeBGDjPH0w==","signatures":[{"sig":"MEUCIG77erBR5JMlfhMUh+ATdjypa4fRQL88IBRriZZdKbD2AiEAoEsW2Qz09nI9NwBBIG7C5GtXPx9Mj7E+iKG40UUZn/8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeBQAECRA9TVsSAnZWagAAnXsQAJIn2ki3Bqz3tJPr5kNv\ntJ6a+OZrij4hPgnXwqpGKuijldhdqWbOjzeavJcgoNlge1xY0rnSVbqIip94\nAjurrhPJlnQRI46dKtdGdSBotGIDLPt7RtoBYD9eXq6pD+5WQ2RCmFQKWe0c\nNqbztHj/4idd82OoejVWgFhW1Eax4S59d9ydMp3pC42pazxdzbprW5eW4tN2\ns3JVj8wJk7JdToLBL3ZP52+/dGuKuatcDxgB7kT46T58K4Qm65VO0+C6Y51c\nsv/pqRH8eje8eAn+NtjE+6Tq2QDFMzDib02Ap4mDe8rjDA4Uv3wQVpJwyTMo\nyjPsUIsXs1c/z+2oQYUks8Bpc4GQyQEdLREBciZaklXRgFP7xUUYB5URgasr\n0/P81jUyqR9mS79uUkeJCjIJlmtU7lpYhluchaYD5brl9QE9fwWXDcIvIgJf\nUi0DuFcafSsRVMIe1tMhAy3plpAkgE7tMfQ+dinChtHRxSLOfaoAG0OhfUOZ\nLa2CAsUTk/7pZLiW2P4VSJ1zZWDvQP97+svdNB0+BvftIkbFkoe2HJMZa6A/\n+gCEi0970vF4cerlXVfc35M2M/X9oFHt2LIaJIwVueySaaJtlo0MPDAcjyNM\nhyw+/XLgdOBbo+pBR1eQuMTvCRsR7F1xJx3LZ4M0ow/k1wT59PqfMW7H1R0J\nYmRy\r\n=3KA7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1f5c1996d2328a53d1fc5cffe847b04aad48432d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7bce9cf77.0","@material/tab":"5.0.0-canary.7bce9cf77.0","@material/base":"5.0.0-canary.7bce9cf77.0","@material/animation":"5.0.0-canary.7bce9cf77.0","@material/feature-targeting":"5.0.0-canary.7bce9cf77.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7bce9cf77.0_1577385987816_0.37144165730135437","host":"s3://npm-registry-packages"}},"5.0.0-canary.c92f038c3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c92f038c3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c92f038c3.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":"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":"b922da9512c5285aa110e66197ec84966f41fa7e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c92f038c3.0.tgz","fileCount":48,"integrity":"sha512-orR7sVfIHi+8ALvYoZWbxinet055+qr9ZdivWJH8w7QT+J6H4k/ehtAF6h9dCVbawKwKwpAX1quBe5EVdUkVWQ==","signatures":[{"sig":"MEUCIQCEyeLo1JaKFZe4bWwJm6gIErLAgHg0q9k8WIt3iFit7AIgJxmzMn/UfnDU9CVdfz1tUeBrFp29fVSdykwRlqEbECk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeCnRVCRA9TVsSAnZWagAA8OMP/RA34pJs7a1PAcWn01Nc\nXlfnL9YWNP+nvZQe5t2TZAUMrvxxyZEYQhUubY6tArLC7fZm7RMQlOmKTef9\n0Lt5UxtFnKK/m0zvjQhAxed7zutxUBIMCXbuzu8EJA1kbQXMkoxOfaQuTSX2\n/g5y7Xud5B1pTTX2Wg/Q1p94glUrzMAe1OPqOIEjWBtylJ0nIvz9khigf9io\ne6a3Z1wvcmQdebHREqJLVnyb7xTK830+nhTNTXuMVouvxK1zzrBDUqJaH6VF\nKQnFF5VoaBOoMHdoAK3tCGJgvq8IHc+EfmHSlimXM3GmkR4Q+hndsqQPGrSr\nOBpktvw0Q6iSRZmeqPh1CAz+GIVq/JM8O2d/IwFnL6S64U/TDA+Ig2hJCdp0\nFyAEyYyUxMXSGNUVZFMl+We8DfEMZ6bA3kDCrSZnxpfz0xLVrXR5VJASHunI\nl+sX5JWdO9f1wFjKyUsKmRRSz9wJA7OJHs9klE12XLa1Y6b//2RfXUkNSabj\nSps/jZrvE4PXv0+ZDxns6uY3IESemLbq6kqNeigXMvqXWo/A20xxb82R2AEN\nhWVylkZ8hcF3xR6uqLxD4cyaOUz/o05vE5+ouid8RKsaQNWJe7Yg+B2Jqbxj\nnru24EGhwcVmBlHp5ufocbfxbWaJH/BkFp1B7Fix7DLTuyk0GeOqPbrhdgFe\nut7N\r\n=ZcOZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"823f4f89b39f86d10ed69fa8a943c050c2d83a6f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c92f038c3.0","@material/tab":"5.0.0-canary.c92f038c3.0","@material/base":"5.0.0-canary.c92f038c3.0","@material/animation":"5.0.0-canary.c92f038c3.0","@material/feature-targeting":"5.0.0-canary.c92f038c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c92f038c3.0_1577743444819_0.5327793864172419","host":"s3://npm-registry-packages"}},"5.0.0-canary.1f1ac7558.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1f1ac7558.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1f1ac7558.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":"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":"a25ec370ce009245c344dd4f2d65432a02c4e9d1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1f1ac7558.0.tgz","fileCount":48,"integrity":"sha512-liKeFuKi0jrhyds28oAEhJkYXNTqic26+jHeuMnSiTlGMXOj9SZ45ZNzLZrl9yoUu24ESEIVin737stv5kErFw==","signatures":[{"sig":"MEYCIQDE/z6EU3Ld9AZGFPHn1vp7SfD3/8l6Ck6X6EmbOF/0EAIhAJ6r0awCYI71MYDWDNuVQ3qabsq6whoK/m7Um2NgPc7H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307365,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDlifCRA9TVsSAnZWagAAxNQQAI6WjK4dtJG7PgkFQnTF\nILb9EYFXrjQKi4iZm/k9qOBSWrcgKJ7B8Rzf7iDq4i489Emz7sxV4ljRgYJF\nTZKZH5GPQ34MxCzrR5SrV7jL8dfIqFnFv2bLyJHYvwmseRl7rwbX4IJUUyeE\nrL+A0mMsLVRFie3vM3fvFqFqgjzYQksU1+i134QlPS2ZrTu89ZbMefyHfSjI\n8jUS3tOV5yrxLA9WSPEovz5JvnSE3fq67nM8KmkiICmB9YS8cd5ZLxSa2rJ7\nCoX33FVTQETYc7RpnWy7TApGQ6reMAk/YMTx/N5pVHToRpN5KawE1uFmp1a4\n+cDMw4/9LizmuzHg6Z/OXGfeOaQqxHLLMD71gMvpAsp3eotEcG65An5UFw4d\n1pPHDJ8heStOmk/czVV67B7HFq1PRouo7HmH3mwx3fXbZLlmQ+Gic4WBJ+1F\nlYi/G73OxRhQ3ZWKS/G7wGAIRBqzb39c+XwhtRSXJz37nCItKK8eHEJkEseQ\nfWG4bjLjH3lGlHX/lQBlWLd4Mnx1gSmgXZw9A5/+CqTcO2umRQztrvdvm99I\nDiXwnNZZEtfmAgfmbCmqKwif47kLE+jzWd6bReEeQb3LKMwyZnSdul0cKQ3l\ndzBF5pjk1L0a/TDlKZwvjlaZ0LtLkXMy4BB4KbfHIaovELC/33jOWxT2Z8/Y\nXIQE\r\n=d9Hj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"698a9278145ef0b4e06e9c33d51051b9650c5b11","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1f1ac7558.0","@material/tab":"5.0.0-canary.1f1ac7558.0","@material/base":"5.0.0-canary.1f1ac7558.0","@material/animation":"5.0.0-canary.1f1ac7558.0","@material/feature-targeting":"5.0.0-canary.1f1ac7558.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1f1ac7558.0_1577998495271_0.03886026645630691","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec26e799c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ec26e799c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ec26e799c.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":"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":"b86b97376a939f0154db84d99072f8d57cd31dd7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ec26e799c.0.tgz","fileCount":48,"integrity":"sha512-NTHudDUPludgC0Ts1c3wRb7yJO0FWbt3xdvpNkmF7/esQMRkHaOxDYs4Ym6FsQE1nskxZ2mcQbTwDeWn9B427w==","signatures":[{"sig":"MEUCIQCcIDwznpf2P2Njas0PQlHXtX26BIBfIFVDmB43uuCrXQIgT9qvsJ5kp698NSzheGJmi08MdWIZjDT29yaMeNc8w58=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeDmPqCRA9TVsSAnZWagAA3ZUQAJKLLhOdZbmMAXhfTWaN\nobDq38abxIB9SEsmdzI+utl5GW1DmxE8H14QkJZHF4U2X2mUKSDDhU6NzssQ\nj3Ocbz8e8+617chMr5KNJ36LqeTnqCt66FrwPI/AnnfRL9NAWq6RItRLJHm5\nua1CH6HyE0x+DkDkSIS2046QSoMU5H/Jn/AqUNGmwEHK/0dwwwzWogy8j2xX\n3vb6ZSoDkcWbH3sUThJVmYW1tzgSSC2DSd0DY7Wb/tlLf83E4xniJ0ucCH8y\nft9mI2V3cVv+AptvYsGlAO12fYAssQSasOxc2spPgNsJWTVwk7zvAmRad213\njw1EIruvH5OoZbbXWn4qCJ3r6v20ljT5hwJIjxG7EhRb8GBnG0p4eAR2b1ZV\nlUUxaOu10XvFzq8zBVRooLo/yZNyC0rALdFpypnHKf4+6efrx9B9Cl9a48ca\nY3UUNdsc47gOeymXEccN9Tgl6E63uSxJrBMOMy/3wf+q1djoXYkz3vFPSe1b\nhUGeAR6yn1YddpVa7/jYS9bXQsf2ZiB/6VBSiLAKgkhQiwLApo6C00WOqbRu\n2HJGKC9Uq3ogUr1qSM1pgvasROSBmNMC/vhC+Jpw5cq28l34ORkvLHE6fjJO\nYZgvynBC92eoTptt31BYZSq8+gN/QC94YizASKlNpr2c+hyvh+dl0WVmJAxn\nx4F/\r\n=5HFU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"813829c13087aa9fccac08bcbdda0ffddacaebeb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec26e799c.0","@material/tab":"5.0.0-canary.ec26e799c.0","@material/base":"5.0.0-canary.ec26e799c.0","@material/animation":"5.0.0-canary.ec26e799c.0","@material/feature-targeting":"5.0.0-canary.ec26e799c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ec26e799c.0_1578001386075_0.699108564748185","host":"s3://npm-registry-packages"}},"5.0.0-canary.0a40ced40.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.0a40ced40.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.0a40ced40.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":"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":"9c8553a60e52c805be4473562de4ad2a02c5621b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.0a40ced40.0.tgz","fileCount":48,"integrity":"sha512-gYdm9aDAhVXgMPB32MEfn7EdA846Wo0kf7fF4en1uEE+kCnUadiOw/BcmzSUkamlS7b7hes+F6mS+y28zagwbQ==","signatures":[{"sig":"MEQCIFnRlPKjz7mbdwo8iU58hlXdrnz9Ew/RX7Zhv6sAgTfwAiAGb6zQGKPow6QmTSZu6N4D11ik994De/YFTxDkZwyExQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD3WwCRA9TVsSAnZWagAAvocP+wVzYoKmrNMB+stWrXp+\nvHNHuoGSQzWZzpvd+G2REYc86UKI2448T8wwqmTq4ZhJRm3Pv3/bYogWSyuN\nZ/OMffpZbgW351zybShqdEzDrPe14c8RBP4HxcQY1NYl5iqAuS+LQsciTn1c\ns8hTY2RkUHJqGEjgenjg1JsrWPIr9GsM5beJg6c2epdUKgRaXg/QFdckZZj+\n0vFO0q5hqzOhs0a1konb1iRVIygUC6m1TVeU1PYUJflWFvzKGVq94WmYdpcS\n+HfpUoQyCS2GEifRNT1dlzY1xn9JtdUlUBWABGeIAgrm6XYwGLyb5TVDsF1T\nRnR0IUfN3ZN71FbnZ4LAHhxExhCHz1pQusWsqkLnsL4Dwsq8XV3CLHBcKTKI\nDTBrSiOSyJ4SLpoKhASCYRdbGhvykMGAHv/t/pnrJnyu77nkX33BbvDSgUDs\nvbgGFyGJCfPEwLS58my1u0Y/8gPikEQMThPcaFDe+wqoPaYu1P2PvOBv37wN\nxkmxVZ++zUB8HsP2CIZkici+jXcElQK/xJxiCyONFO9JsM7CMQqhfofZnLsY\nPi8gB86iX+/BcnYyU9eALj13Klioh03a8ljp2kPtCDXyCcU92H9lbap3+pk+\nSV2J0cpAV1rLG7CNAzDQnPZ/Fg22RdEZ9l30XzG6/YxgKGSdYt3mUy9TCzlz\nd5R0\r\n=3Q8b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dcddd5ac583b29d0fffe1a54b6f634f6b90fa44c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0a40ced40.0","@material/tab":"5.0.0-canary.0a40ced40.0","@material/base":"5.0.0-canary.0a40ced40.0","@material/animation":"5.0.0-canary.0a40ced40.0","@material/feature-targeting":"5.0.0-canary.0a40ced40.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.0a40ced40.0_1578071472585_0.7304945394224427","host":"s3://npm-registry-packages"}},"5.0.0-canary.3adf84899.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3adf84899.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3adf84899.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":"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":"d9d07a4041ab0ce83743b36e6d0bf924fe30f2d8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3adf84899.0.tgz","fileCount":48,"integrity":"sha512-ByGfM2N1t2kEaNGuojk6V/7yNFZsEH7ep5LevXHwG21LClIeeznEsLFCwi+E5WOKlxioVdwu4Y0c+f0QMFcaRw==","signatures":[{"sig":"MEYCIQDVPWwsD7++629BfNmsSarHzzvP31G9bqZ5GfnUPPPNJwIhANbCVdhe39/98eBsjBxu4Cf9Zj4/j5sIaruF+j1CN5Wi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD4aaCRA9TVsSAnZWagAAKLYP/21dKDqLHC/mWxd/z3BR\n6b1Y+xzDDbusKrxpB42AVJqPyduuvPk1+MbmSRHV0G5e63DizwXlgP6yCSCO\nnafzvsqyK2YsLXqTWov2M/KPJeP1C9ZEoTMwZCBM/BZf14RDn05HXZeR2sHR\nHIRV1cDH3VII2bj0G671IeHVe+YUxyo0uQCzbyzzBN9ti2d5mGehenfRMmRB\nD1wisS6Ao99Nx2N/eBiJW1eGOgrUuqT7NwxwAeYrznHJAOWMX4s9aw8EH6CM\nIsgE2GQAXdQQqPvTC/z+vf7w36tnZcBIa2VCQ/wiBopA3nISolsSnqokrMXN\n/OGtwrnvGTdzKN5yJNlBzr1+c8BwWFU+YQkO3PKhZcdm9W2XPYKJG4cn+fkA\nx6Znpa4tyxuY6vKXCpnFYzoLXYMvwSvZ0TdcnpWm1FcOa52HwUcHhYi2xsUO\n4Hv/meNYTsz/IKUjRNhFzQlkRB2kZgkw4/LiKdr610UaVBqx9zxDXANaxB5G\n11p/TwOmIzrWTLpqXxiD8hCG61TPUWqKSFHg/us7ByfmCeubYorLzpyji13K\ny0PeyaFj0CJC6gzVNuaYykrgIQYDv2Ojd8JwqfMnNQOIAH5W0EsUsmzhvyuH\nakEfnVggsdbDvOEVzK5cfprxFGq5aijcsPre8kQBtzRvI+rvIhYJxW4BIiek\nyREJ\r\n=P/r6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9f20ea5e081bb781aeb0d66d6db6a0ea7a0f5619","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3adf84899.0","@material/tab":"5.0.0-canary.3adf84899.0","@material/base":"5.0.0-canary.3adf84899.0","@material/animation":"5.0.0-canary.3adf84899.0","@material/feature-targeting":"5.0.0-canary.3adf84899.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3adf84899.0_1578075802132_0.7681035875957358","host":"s3://npm-registry-packages"}},"5.0.0-canary.0d42ee650.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.0d42ee650.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.0d42ee650.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":"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":"e804ec06771d59af4ceaf5e7c02d0a9ada35c6c1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.0d42ee650.0.tgz","fileCount":48,"integrity":"sha512-x42CujvESIpEeX0E7zUh6rHj8K0vS9SmgnyfPa0wDsqmVNmVoOJJfCgYLqnmkYWItFj7vcGG1GD4cy3wGl/vUA==","signatures":[{"sig":"MEQCIC3JtxnUB12SYekxbW5RIiGRqa0+NZ/K9GDDEaV/8wxWAiAXTxpLjzXqxYsTFYkIyx0nlnkpdwHpcLQZ9BMWio5dXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeD7QzCRA9TVsSAnZWagAAE7oP/RBnm4jFyBTnlovvoJi/\nvTa/8tPQeyFJzOaypjCMNA90r9aNpXgfswPMZn69yMfrAcHPIsKnEmnDh+B7\nkVFPN3JMe1axmyQQbEKOoTeSBtw23F4Yk8p5C4yVhEA+eA7bKQjFf3LhHwPf\ntRdWRvYtc+cAGjR9PVZjfAWv1uPKAQpGs0UpOoX6jQIFYktUVcng6fEl6oq/\nsf9/6RciQSLn6ZID+rB8ant2ftaNUuF/F9oYTBEzrmpYKzog9iCmhFypI6Kz\nE01zRk09Jwuc5gYN3IoZpXYSfaXkhDrUqeqU6Yu5nXeJlTN5VJLozMSnVdSu\nWnWLMxs8vinQHwj5HTnHvlCHR8IUdiA6V7iZlxdSTyvMpGpg/GiDVj/idIaT\n3uvmkgZix7Ffd20xvviKIpE70TACOGHXDYyl/mpLeISjvA70KII/lDfbdjBP\nf9YGBlqxZar4UbFbtT8ut6uH3swhpPTC9+nC1ZAIQmierrw1qy8HJv7mtOnj\nsdgAepkl2WTvkXCWU8HTHiB54RXrvgaK5osLNuRZN8FA355XTGp9y5Dqa/Cz\njJnFZVWlwyTqsqM3MEeeULhf1EQqXLr9y297wc/+niejeLMJTnUdT7uoFlpG\n6tlzkaICvVDIE875qjX3ppuU8NeopSKr7p6JyO7wz3Vt6tpUSaJ0DnldtxL4\nNYdb\r\n=PsTF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"184f253632333982c2b642e450e6e98c9703fe85","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.0d42ee650.0","@material/tab":"5.0.0-canary.0d42ee650.0","@material/base":"5.0.0-canary.0d42ee650.0","@material/animation":"5.0.0-canary.0d42ee650.0","@material/feature-targeting":"5.0.0-canary.0d42ee650.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.0d42ee650.0_1578087474942_0.8466352816100029","host":"s3://npm-registry-packages"}},"5.0.0-canary.847dd1ada.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.847dd1ada.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.847dd1ada.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":"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":"368eb767fa17381eff102ba0845d890f7f30fc53","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.847dd1ada.0.tgz","fileCount":48,"integrity":"sha512-nDtixz68ThH72/2+UdUpz4SIKQKYzSCn445NOIJTdqytI31yc2MlHSJykj7aUxl14JAm2PP5IJm3JQdOASBasg==","signatures":[{"sig":"MEQCIFGmqPYXP6HZ4bmyeoB5B9aL5+FbVXhhDFrziAC4FhToAiAPR/vIt/Y/vkdTFP7OJsAzr1lDKBR0+vlryIxIch3EjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE4oVCRA9TVsSAnZWagAAtEQP/1TtvJkv7cB5q8tQhulz\n/f2Z/HKJCOFw1LTCuuG+/KMqLUVsQrupDY7ywZ2cMfsu65ysbA18jpEJ2jEB\n01hw1bOT3GB6d+/XL20gH3KLJsjBi13ohBRnmkTn3mlUTnUP6o19GL8l47Ag\nCux1dZaxgSawG3P9WmnQcqzRWjtlzbjgPoLFNlB25uHulrznXBCpeTQE7znm\nX36V9UcJvqXD2Qyc4CSyR07WBRAxu+Cs1bcXY/YCI/0AYet5TTFpc7i0+MNo\nwBjMmHeKRSZjPhYBYea3XBvZ5WajtS2FYhs2+bNiJo2Yib2sPK9keYP7Yuf0\nRbKgj7s0qrJTAxMuKtf+jOr8jvgKfniSXwUVXL4q/A+OWV2QAp8IIUvH0rp9\nGR0MErM0dd01Ugg8T+zE0fTmMXxUjTxh9NFiN0CeI6dkqwO1a4rnrNyHJZRS\n01KhpUJ99D1H0WJRX9FMnL7k3FNQvhV0hiU2IsGICESBZFrjfPkW84qoci+k\ndBAC27S3u5/W19B3wBxggWTMajg+AmUFiuoq68yOczZwS0llv/4Ik85ShK3Y\n8+PE5gx7yO9fTsYRonAy5iPZGuTiVlyisZOO/yJbDe7xat8QUzfTx68ygT01\nPMXYkhm2hpAdCd+LcdbQ4Zsf+09YjazjC1CHiaLNVnkUehQPxBSKGpGhH1v0\nRc+w\r\n=L69O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cccb6b13f05f64e22210548991ad471df3de97f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.847dd1ada.0","@material/tab":"5.0.0-canary.847dd1ada.0","@material/base":"5.0.0-canary.847dd1ada.0","@material/animation":"5.0.0-canary.847dd1ada.0","@material/feature-targeting":"5.0.0-canary.847dd1ada.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.847dd1ada.0_1578338836607_0.4340667705898529","host":"s3://npm-registry-packages"}},"5.0.0-canary.39df7e5df.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.39df7e5df.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.39df7e5df.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":"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":"3ef55ae4b46afc762fe2613e86595c86cf0ded88","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.39df7e5df.0.tgz","fileCount":48,"integrity":"sha512-J2RmUN7SC0iDAdSjpA2VAd+jHDHLwClkEJDtd0+q0l4GTK+ATmYWaS0y4gbTIgJfaKPZjVvKFfv4zj3PgeJflQ==","signatures":[{"sig":"MEQCIHXmtDyI9QpAwARxIYqKx3MSXm40xLmgrpteo7BtUb1oAiA6rUn84lxchaJL0XlYTPivQNA2B+464Kob3em0s3i/pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeE9c1CRA9TVsSAnZWagAA8XoQAKUvy0F3ikHew+iA/+XV\nw3FIEJPASwlxmSxbw/qkF9Y1HHW6TC91OquVsuRsq8i3upSI2BJ7TZKpf0GD\nsj6985BtuazHni2B6iA2GJBmNbGZ6q3aXhOs0rq/Hw5bhVNkXHmrgJCkTN0Z\nLwtVcUXqL221xJt5GvVk+sth5Vo45sQYauIy71S5NnTRVtwtt9QivcpBRkn3\nARYgE0G4IdFo1hc8neHnMw/DQl8VPM5Yn+XhJQE6r2HoZFI5K54PoiBh/2nR\ngDV4nktrsJjnp/P0rdad3qmhoWyKCzV0dNzMP/36SalFr85+LKTSoZKgPU8v\nEDEuWppb6RLonGg0zcXCyEqIAVr9VJfmKhLHufjt00VXdJ8tJsyz065TvVZt\n+4dhMVDg0ipKF7QKi/0B2fYFAWyr9pfOR8niMiitvlXTAeCCJTrKbzE/4217\nhWSC4WV4bbNr7DUBOpYO/OCqCkw3p9GltO+c+UhRkwgJqE/OKzwy9syvvV83\nSDu5GZnthCsDLffJvHcMlorVB1Fa/1YcxSS7KEd8wkvPZcDNBAxSq33pel8M\n2mC30ZhgVWibOSNvkVLpfi00K2pARzpLgXkv95K47tiTcbI9/o4gw/Z0s8FP\noABcso7jBLir8OCEu/mpZkkg9l6/dZamUhF9r49Kbmayz4R94Vcsj/OKeFTK\nXnMU\r\n=wqfq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a6995715f8fc80d9a20e6b8ea90e80f4906ca595","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.39df7e5df.0","@material/tab":"5.0.0-canary.39df7e5df.0","@material/base":"5.0.0-canary.39df7e5df.0","@material/animation":"5.0.0-canary.39df7e5df.0","@material/feature-targeting":"5.0.0-canary.39df7e5df.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.39df7e5df.0_1578358581536_0.12536344514970543","host":"s3://npm-registry-packages"}},"5.0.0-canary.f1a2581ab.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f1a2581ab.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f1a2581ab.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":"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":"c54eb58bbd8464076172d682c64be1179fa1e657","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f1a2581ab.0.tgz","fileCount":48,"integrity":"sha512-MOUOSCa5zFdX65X4vP96i5mM3DL6w7HZ0Vffr7bvqEqoGh6ikhQ3JYVgf5Y7tjgKVyZa7xdEtGUMWt195ezbAw==","signatures":[{"sig":"MEYCIQDQiuir4E2Q82h782/FSflsSNkoXdHr0+NSfDvfQkme6AIhALoWfQi+Wop1NECcn41D0bN7VUKcCa71jX/uqGS7m7tY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFJ0jCRA9TVsSAnZWagAAfl4P/01oa6eCwpJtc2F8q3Mj\na7naOoxmChoV3ozpWiGGUJCCVBPHPoBy8QcyY+x21YFYrjvKo3UkSPVi3EY9\nJ1040vfGqKEPhMvLaXovoNoljBjdwx/gzXsUDnw1h0+SZK+bfk5VjvRXQ73k\nhpslGB24DgUBL/1jAiLFl75n3UMmlwLBhTv+q8yzeUXQO1EjuApoCMC0nwqe\nmuWKKTEvwxOwtED79ujnnn7Y6kq8JAfUnqHSGZDsnYW/9Be0OS0dBalDuoIl\n28mKPicucLh9zV3ve/SvEdQoCmC0FLlKhNIeDXdTVeKdu3qNCi6ogwt0qMDk\nhIPFkDyPNuoVXPYCgrEYhgefPKt3soLA2Um8n2Vd8BzGoSMTVXn1Ngg5nrM2\nhfqyhriVPD6HPpDqId5k15Wux9OiKoAHpHql4LnckQLOMUbyMuNkZmn3jDpw\nzSeqrptY6mmAYCQkVDZ3qC3GcHCgfMh6p7RKy5hOECwDxlMKcv1wYLx1+6ec\nKg2C3hsDjwEZDFs+qmIHZ307C8fqs+0rU2HD1IzTp5Ik4FBBJo5O/u0fvHWC\norrBG7tGkZWlKufKyIywBvp2I0H0FE9yt7ths+/SujS1JAbH8zd1j/0/t/l5\nZhOimV3G7cS7BDM/wSqucyAHMfpbHVc6Vxv5nCkxRRFYxsp5c4dEHm//YpnY\nsmnu\r\n=WV5H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ae69ee79a4a22a7695be055fc67e5b974c2b989f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f1a2581ab.0","@material/tab":"5.0.0-canary.f1a2581ab.0","@material/base":"5.0.0-canary.f1a2581ab.0","@material/animation":"5.0.0-canary.f1a2581ab.0","@material/feature-targeting":"5.0.0-canary.f1a2581ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f1a2581ab.0_1578409250676_0.8829194406898555","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c7ddf347.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7c7ddf347.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7c7ddf347.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":"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":"a509bca709b021894f70d7841572f5c24ad962d0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7c7ddf347.0.tgz","fileCount":48,"integrity":"sha512-mZVvPXuxr3kfBfzYKUVe93d9pvsGE/lzX+XbrUDzJCguOqCfT7BLAWVakX/oj2DhXl2bXDx6bP8sBExpeUzgJg==","signatures":[{"sig":"MEUCIBwHeBA2KFLkptG0YoewfqAjVW03inHcU55EqHNzza35AiEAjpGItKILLAk1lNPJj/gMkA+0hxKuR90JBECZBOOa21Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFKEXCRA9TVsSAnZWagAAZy4P/3GWPTUKuVH+UrhoZFeJ\na/Aw75ttxg49IfnXinbENcagWEhu/77QcQimsI919/S1qblodVdCc8NJ0UOc\nR3+Dh9gi5iEK5nIK0+rHIVcMBJGKKGnEl37qsFIEp/sGpVtABnsZrHIIJWEM\n/acSrShp/jzCZxvmC4zZMYbGOj5r8c/Hi7TtwmIczVsdoOyqi8Lpt5wu2uaf\nd566/vLOTa5CCl7e4P0+lCVM2yvxlgtQ8NedD1Hx4MBATESKB0RMFc86hmlK\nr3cDxyQuB3Q3x17pqWfDCUpzSi1m9guRzxVu6pbaunZqCu2txWnhkTYHZCDf\n+dUbDi57T8503Z/pbspXnIm8z9E3PabGQef1v1f4iUSm24n686fsuxZMSp4f\nlpfJD3lBnnfDK7CXEDKf3LVql7j1ElujnzUGF5fpjImevBx/IljinHx70pum\nO6WlNAfjl+AJ54HEsmUa9qNayIq+QTqNh5wQmhKFXtWHXrtsN0zTtj3jRHEP\nWRCURNmC38NCbuhtTuHy4ZHP4yIJMiK0QpuOMP8fm0n1FBM/qR5sbH/bPwWg\nUB7Fg51ysWIf0VtCncuwJGB/7zmqAHH3ehB7UowrNvsVrG22hDCIZudZfyLr\nxZWeghEY+63AbWNB/vPfGVzVB/D9x7/sIOsEPvtgIhoWVyhu/U2iNVt91UQ5\nimWi\r\n=xIMn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"940ae7448647ebd59a16a94b84c479f3f7bba9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c7ddf347.0","@material/tab":"5.0.0-canary.7c7ddf347.0","@material/base":"5.0.0-canary.7c7ddf347.0","@material/animation":"5.0.0-canary.7c7ddf347.0","@material/feature-targeting":"5.0.0-canary.7c7ddf347.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7c7ddf347.0_1578410256150_0.8717774461513308","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1c84d4b5.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a1c84d4b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a1c84d4b5.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":"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":"8b60c62013a84483a084902ebacee4ca3275cb0b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a1c84d4b5.0.tgz","fileCount":48,"integrity":"sha512-8XyW8p2X+2FZ2WS77UGhtl/JSYt4xjD2lI+GbI1byxtUi4eVp4ydf/f3P7X3k96ug0Kg2aPoWzUKUbDpJqBwgQ==","signatures":[{"sig":"MEQCIFTjUiS0NqM6zN/yopCWtBkVRWCi5hENYsUB/4QulYsjAiAjkNRf+XY7CnJ/9yNeGFD+fCzn9qJ/Ji6r2UOswvhj8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFMnOCRA9TVsSAnZWagAAjd4P/3IrdRWUFd17IMJKElvX\nEXBogYj1BVVmR5hgcI2oySvrLbt2H5PZsn8YZ1494XMFSkD2i8Q/2G9IKxDa\nud68Vz99OT5raoFOkScEhN1RxEd64X1EIUD1broCUCLd8L+iq7tyUzdRmoOR\nHX9tBTRmaUd2uiGuaXUxDUp5pgi7PLYpFvO9aERG3Br0XpXEwrxidXfOkOHF\naWS0lwHrp9rIAtDoXY74Idj5pi/mjiP0EJJ0mqWMTYmldeF5X6lCUP0qyjjc\neCOprKxHpKX/zNyBydeJdhRbCmcNuC8ZuYoVkAGJIUIrLhRovvOZA2bNnlu5\nZNUfiwUPfgdXUbNZhU0RfgDDV5HGyOgrYXoBkgqrHne7tK3dFEu72vuX9i8q\nG+EwS91DzemXJvzwaVOgBlUaP7+1zWP6mcdCQsTlVD0FVP0elWRFsCIA97z6\nhaPfP/5LbPuPd+/lhvCHQY72Yigsqn79QuhJki++Ia2YHVwaWMWWiseuepuj\nLUiBHQpBBqvlSx3N0QSAFy425tZBuTXASRx/r8yXOOiagqvXJRwGRmv6MQfp\njJeSVsUtzjSxTaTJn5UJ4IbJu49Qkg2lEFeP3gfbZygKbYOSuGs47GQIi+5X\nfx8GXrOefY/N/srq0PnE4eGHGWQqCUljL4BrBcr3y+JPgc4J1QTCcQi77bAU\nEQv9\r\n=85uU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5ec624a1b571d87d94d5187056a0b6db214d229f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1c84d4b5.0","@material/tab":"5.0.0-canary.a1c84d4b5.0","@material/base":"5.0.0-canary.a1c84d4b5.0","@material/animation":"5.0.0-canary.a1c84d4b5.0","@material/feature-targeting":"5.0.0-canary.a1c84d4b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a1c84d4b5.0_1578420680950_0.767169202462344","host":"s3://npm-registry-packages"}},"5.0.0-canary.ec9f16578.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ec9f16578.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ec9f16578.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":"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":"08c0d28c59b4dea0eafaf496f9a690c80700f064","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ec9f16578.0.tgz","fileCount":48,"integrity":"sha512-IWI+WFT5lKVp3O3M72vyB7ZuT93NHby2SaHpxeZp9VSkORajVrVouebTKpjdSghbXy6mI1syQ+j4JS+NHKvMdw==","signatures":[{"sig":"MEQCIHPGrjAXajBpY0hqqycEipTdEkr7sDiypgEyTyD9TSMdAiBAOq5CXbYvmCkfsPKybeJPnnwLbYmMVnHBUrhahU3k7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFN6oCRA9TVsSAnZWagAACkkP/3uCJHO4yCfj5oJmkCm0\nsYKGGE6cryBOKQclpeD325ygdx0wDJPFHWkMTpCvS2yisyLe6lSxqL7jxg41\nkdy9ay5JbxIddyt5RLUprm6kF0+UDiPZVnCXZhItCuUbTU4FQftPEDmZjo80\nsiV7NFB67Sd0NzfyyDVLBX7CB/HAXc82grvdwV+pXk6ky13dGsb7zrZY6LwK\nY/UcOCDkscnoqMWLr4/ieqohd4ODWKApE+YmYZWIIBpNgmiaAQ2/9JlwI1W3\nVgOk2CKR5DXPM1Bkw1wJ1UBS/AX+fobk+357O2vMSbRqHYxnc/0OF+2JSlK/\n/YN3mAmIn55uCzs3Xma/cVECwxZm8aAaz4q6iOLRf7FTUWpzQ2nIm4ZOnfwR\nRzsfW6D/YH4d1WAZ/1iotYV4XBEyZ04chn1Np0Dq+SwbT3cOO4HMRWoqqbtT\n6yq029T9JXXlYACKcOJbAEO7pbVI74uAlJyZfrPC84Fy9GfRvj2HFnF8e6ms\nZbC3ZQUYb68tGTuUUqqHDn2nv/pl9c4Wpe2gdUsXNu/TD5OG9Dy4489vLfj5\na11H3Tw4VFaGiYfyB/iGxBPFMZ3Uza8PCkz88OkJU55B2BPRI0/dyO6hikl5\ne+QXMomew052cyHTSIARmvcMy6rapJPrD1r59pP0rsHmHImeeUMSY29Qy653\nln97\r\n=+cJQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"23103621e66342865b8700c5948ef9134fa8d1fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ec9f16578.0","@material/tab":"5.0.0-canary.ec9f16578.0","@material/base":"5.0.0-canary.ec9f16578.0","@material/animation":"5.0.0-canary.ec9f16578.0","@material/feature-targeting":"5.0.0-canary.ec9f16578.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ec9f16578.0_1578426024500_0.6596696360711758","host":"s3://npm-registry-packages"}},"5.0.0-canary.b602226ce.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b602226ce.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b602226ce.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":"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":"e2a8bff6859f4c2189cd18d35be031476ad6bff2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b602226ce.0.tgz","fileCount":48,"integrity":"sha512-jdmFhz3DxE6wGDBaij7tVRbhuGUsVafQg3rG24cSsFTGWhnUq3JmlpmwylI7ywfQv8bg0UUGa/24EJ2VCrPMnQ==","signatures":[{"sig":"MEUCIQDm3VyefqsDjRKnC2qeTlRfdefbkQeryYgDj//vg9DclwIgOGWsx4spkK7niAILgRL7nwjsKK5d3DDfmnNq+uyA87w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFOcFCRA9TVsSAnZWagAAxMQP/3ZL+1pCGeRj7WZCMudE\nANbYHy6gch0sjHwlw+TwGXN93Wj9Y0lQWyfjRKhESXSMAij/GpMri4iuOkFK\nT/wv6cnAQvD+DIs+3DBFh5ZiLUicyZmVlncf4VzIThssjhmfjCDY4s8ssidV\nS+VmW8D0qtGeY8CI137t1CLYK7OX6Vg6+1z1hdjEmaUxgZsdeo9ZsR9mBDoe\nP4iag16s5bUdjVbhMaUhzmKK7FJ3w8vwPs+1PVEH7tnChi54/vPlF4Qr2RiM\nPlxewa6K6kL7JTx356LCIA1cOuxE1TTkOfWMGRh82aEPWRcRdmihSLOxg3/s\nE1ar5Z3wgBwyrEI+RJw6QkVCJhttDqURouq/tdKGMkLSsxbp6D7kGte2PbTP\nMbafQGcgFnOBgGrYqy+2PxuPLCz/XMqfSYwQ8idq/j8ipDj5KEArwiXpttge\nwtuZVW2HrAhWcKXpbawfqYXhBQejP+RIViIefcvHY0EhTAuvdnRSaiwVX7bB\nk/c9BD7FtIJ7RE7pefHTMomV7FlkuUrDFH2dwdMFiWcAcQgKjqg7EqgDkJaD\nYab4/gJOkcpZAnDlILx1urCR/FYRg6oyxs2jpSBw2AkHE3r/UqfkLkMqCxMt\n9tfQWqoKiMk42MM5UPCfhrfmShPAyCBsgz612rzRIv0UqUOo7iQkvNtpjHJH\n8NPG\r\n=BZvh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"de0d35ec6a5285ea0c12a54a6e35051ccd0aac1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b602226ce.0","@material/tab":"5.0.0-canary.b602226ce.0","@material/base":"5.0.0-canary.b602226ce.0","@material/animation":"5.0.0-canary.b602226ce.0","@material/feature-targeting":"5.0.0-canary.b602226ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b602226ce.0_1578428165020_0.17082795644832904","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2d2dc08c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b2d2dc08c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b2d2dc08c.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":"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":"960f6546032e2f661434be6ec311ce5febab55a2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b2d2dc08c.0.tgz","fileCount":48,"integrity":"sha512-QuWpezyIN+eUxUGrpITUbo6C2piCI6Q8g72PnueQiM4uzKiklpcC+V0Rkmy6MW/7ASLvMKsTz2tPkb1xxKbEsg==","signatures":[{"sig":"MEUCIQCyEYsqipBAwrtOO+QNPfevxZcpBFNO2v2bbw80PQtSxAIgU3Fu0b8GU1a8INd4PQhvPN0HRYMVY1QbEbuiX686CME=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPehCRA9TVsSAnZWagAAbdMQAJFrILqXkSGd300Q2hzx\nK+69g/L0n144txFL165lkobd6ZDxAeCSP1Sirw/PA613xc3DAOQLgw+v6HPR\nSzmq47BppaiIur35A7A7lpoDP1jUb7ChFC+RcQCv1PA79FJJ8x+stgtkE1J5\nO1K07LBMUowhRknJO0EcdTwPxfTLTIVeRUHYT2CJeW8Wrt3+xey5MIKDQqco\n726kA04zffNsPUXZCQyxASTlWs86d9Lf4y52u7bRnZ8axtZRut2osfCQr3XZ\nczlSla00R766y3yq+wBTFgn9xyt+79d+gSd6Uvz36BTHhNftSmi9uZ3OKkaG\nwj2rULPwSz+8RGwXoxbfLLqRgHAGgF2VsozMp1OQz/tEQ6+KfuvLG4IOt9s3\nBKGemAqhFQEf3cR1h+hFE+IoF7erebKyRSZLh5uSHuYxctcuT842DN13UBpU\n5cMhmgfIzdx4hig8PtUlrIK/zN7MRBYPgp+8Qf4SCx70IcYCLWzjM5xKrjus\nZCNQVHYuJucROAVc9d4aa4uPmaq07U496fCo9hF9l5Bd2ZbinYfi8p7GUwv6\nUYrjLlaNmJjFEnkj1NFAZXkOVq0+BxlbkkCpcE5TumzNemgJTkg41QsyIq6s\nkoLgdckUaqBflK/r/plTE5CkMt680jnyk86Kx1TP6ClEFrZy70NmSDELDQFr\nBxKd\r\n=c8lH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ec9aa1966e1f2e307207d815ccbe3f16750af94c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2d2dc08c.0","@material/tab":"5.0.0-canary.b2d2dc08c.0","@material/base":"5.0.0-canary.b2d2dc08c.0","@material/animation":"5.0.0-canary.b2d2dc08c.0","@material/feature-targeting":"5.0.0-canary.b2d2dc08c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b2d2dc08c.0_1578432417582_0.7534146434422093","host":"s3://npm-registry-packages"}},"5.0.0-canary.61f2d7580.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.61f2d7580.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.61f2d7580.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":"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":"3c1b2398b55b5e0470df60e3fcfd8361940be30b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.61f2d7580.0.tgz","fileCount":48,"integrity":"sha512-i/dLSnpddxz/ktbvD6P9qY5D4UD6YmRNCAcLmyH/COc1X1af8p3LWZbacZE/GSt2fj2M9+uNAqlbb7bryCP5aA==","signatures":[{"sig":"MEQCIANcCqGGOolp81Bw3vWMZpbE19BifDk2t6bkjz6Ib7pUAiAkXb6m4aFmNwPvkHxngk3LsXPEQ4TCBpYsTzIeFG4J/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFPrXCRA9TVsSAnZWagAAx8EP/2264SYcL2MW2cNvZVuL\nOSux8Qj0+8AJIMUjbJVgrX+xfVWhzyKQ1SXCjscLsnnb4rnwAzJLC87ylojO\nrFXl+I8KXgD21TyiP2EUY8+oxw4sMn4Hrmf2gRlqwzau9thAgz1GZ1bbMxxJ\n6It6HB0Q30mII9Xqz3q15fWjdoKLN6tWBlu+dezXQK2PL3QAHrqM8Dzor3fc\nrt2YYKpepVHKYXIqfytIXNEFZC9ZaF6GcpouHdlJykSStOCyEX+DBwyiKA0f\nagQx5E5ay+Qy9j7ghvhsWvx/5Yy2qIxtpoVrk7q69mXC4EP02T5Aeg3vyKPK\nimrsFe9XZU0O8fljF4sRtLrzfDtaMgdC4NB+tFqz8iBbHS1CF8CqVfbomwI4\nhcH0JspZozzZJdU+LwmxpsS0yio+Ik1TXZ++IoJMSMEqU/56Tjm3ef7EFfeT\nmCUSXRlwMFXQ3NjPJQjQcZOtEyCmOx4Luhuniu84fWmcVxF0gJfOskkO1NmV\ncp3cgxr5zHrVBej6j1bX15nL4fHInPk6gFn4k4kFFWDQKR1gVdJ2X6oGJKMW\nCYFLwibQAjxoEcWTlnkEIZYwcGb1N/TvheEs/Hl1EewApz9Ej9ftYbWlqaZE\n0rSaqD5psSVsi7SnsEh9zOdNTpuAe3li3If3nz0D5AWd9tA6oJvVP9e1TZMF\ntGQF\r\n=vFKQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a826fac64c34ef89005bede280cad29c76346e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.61f2d7580.0","@material/tab":"5.0.0-canary.61f2d7580.0","@material/base":"5.0.0-canary.61f2d7580.0","@material/animation":"5.0.0-canary.61f2d7580.0","@material/feature-targeting":"5.0.0-canary.61f2d7580.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.61f2d7580.0_1578433238725_0.14983145738378","host":"s3://npm-registry-packages"}},"5.0.0-canary.d1be53a2e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d1be53a2e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d1be53a2e.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":"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":"b6c51673619a91dea0c9e0447b7885f5eb50df7a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d1be53a2e.0.tgz","fileCount":48,"integrity":"sha512-cNtHs99dwUhGJ0/OqPjcY1/YCzT111bLIMzvNnLLs9F1OEqDelCFj5l87L6LE1AESoQS40WuLDdKDmIBr9d/ZA==","signatures":[{"sig":"MEUCIFPwboKGGDyuHPVm1T/MO8NgsdzyhnvgI/tPGLQk3y3UAiEAroMdlnB99CdDYH1hGrI93IGhR3jjaCO1g2jBBJz4YNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQOgCRA9TVsSAnZWagAATHkP+QBWilsPf1TB812brUdl\nIb454mk3UrLGH8xx5VhR9+qUKj6xmRO6U5OVpKqg+xV6AA70AbDkCz3T5qwB\nSrfU/3t81gg0v7hyirZLdVWStfgn0pQ4LA7RIX32XjWQ5M3EsGNoktctDyG/\n2HCasTZjIW+TFxpbT7myaP5un4SbFDEqhUS8YCDNP9TAk7A50xh55wG+g6q1\n5DqL5f9G0PABsXPJCKoDIXbd8zA4cdtV4WLKbneDvRAiKHCqlBEUYCfnJcn2\nMhs0L5oAgrwn/yp05bI5oRH9X1obaAvGZNGBeyu5pZwAVieF20mD+9PEtS8n\nIZn2zBxbNx0sCJL306FHSqXZFt/xrH7Yy0EZFJo9gBTDyJv26gOm4urhFj/S\nk5T3WPjkZCMMv6TceG55RTOFJNLHH3jmm6dSm5O1WeAusqLC8zKqk8czHVOL\nBorrHefcg33dvtalfe5VLlzWsg2SkyitoB4P/C57MxBkYWN7uSljNwNuQdjv\ns24J4jDkcWxPmKMfT2kD8zPVapWxk+zXLjL9wMG9cEENIiLHVV4pCdCr+73c\nayhFHtJJucc9tYmo0pHE40svDKjwZvtODFhw8WpCjzofR81lMe8sa6sdG+FT\naOIx/oEq62DaADwHi3S+eKGyHcBFSy6JQtc4qmMdWfWtyBfC0M9qbQi2NPrq\nrWA4\r\n=QUqA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5053f71f9a35d62630821c2c4084794f7bedf258","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d1be53a2e.0","@material/tab":"5.0.0-canary.d1be53a2e.0","@material/base":"5.0.0-canary.d1be53a2e.0","@material/animation":"5.0.0-canary.d1be53a2e.0","@material/feature-targeting":"5.0.0-canary.d1be53a2e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d1be53a2e.0_1578435487694_0.37570936841602287","host":"s3://npm-registry-packages"}},"5.0.0-canary.9b0d06e32.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.9b0d06e32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.9b0d06e32.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":"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":"60ef97941847a3bbc96396a1bf8454d6fca8cfc1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.9b0d06e32.0.tgz","fileCount":48,"integrity":"sha512-EI20G8Cwnl66uInEdE+NF61eTgJATvgMfVnXxiHkacxi+v++aU7B/og7PAsWam21RH+dq5hlYJfcU7Z1PCYZ2g==","signatures":[{"sig":"MEYCIQDdbsJyAo/gcI6gO5ahslm87u8zFqlppBXRTTbvzsoirQIhAMw7JTk8SlmWyF5LDblWEYypJ0ywMJfxr3vYfm2gwmwK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQQZCRA9TVsSAnZWagAAc34P/iN4IqnOQzY88F4AGXKf\n+f0LhaU+yqz3esNbJAJXhf8ovtbEpE7i7Xw6D4kHiwp3qlmstoFyZ51ztLbU\nVqP8EQcaIW3XFFT32OYKO00RUsAeX2cYK8F+RvEeoLEhdP6qpntFWw7oy2fi\nhUoeFLVH+5Ukuwz4aMkdcVsEZqqdWMJoPcGOzNaRl1d59+3Zna1ukmvIO5PN\nrZID9mcdHPiqZ7i8eBvjjwtGW0zRnYIaM9AhwX+i7io+6CjCieQYEWw0QV13\naC5tFvhGJn81ujd/x3mOnnF4fgDPTMErCI4RkDBYk0dL6z2NrnE5Ff8kVY80\nxVbf2awJoKtzFJqqi9CSqjMmBaotEaydjnhuJjmWv5e/VsxrcgK2ScY9OhCU\no0F+vHTPRyCMcXimE3ANvllmQPvh/qGMZA4XdLo2dB6xgfQoRrMhboWx8nxF\nmAJ9YFogUmj+gh0d2rfKNyhvwm9AWo3wfnb7iqbs7YESwVV4Htwqq1sLe24o\n8DjpICAFhh6lEc50LeINGsfL7s9PVSxL5OweXfYG0mdpU0S5fNR239bJ4/Lm\nrxhUxUYYWCXoRRGWQxNC+GyNIpOk0kb3BmSbzEoixF0XguCsIlxA+EeC5D0s\nGM/0RWXm4TVdnxwTnQT3fqexAKKDuhoebduzZcvbp2o4B/W8A7Q9LD8gHe1G\ncFXk\r\n=iJFM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"485fa4920288a2a37995f4c736a1d429de15e53e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9b0d06e32.0","@material/tab":"5.0.0-canary.9b0d06e32.0","@material/base":"5.0.0-canary.9b0d06e32.0","@material/animation":"5.0.0-canary.9b0d06e32.0","@material/feature-targeting":"5.0.0-canary.9b0d06e32.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.9b0d06e32.0_1578435609301_0.8228863521832208","host":"s3://npm-registry-packages"}},"5.0.0-canary.730c807a0.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.730c807a0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.730c807a0.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":"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":"be5a581e447e0e0e41dacf7ce140eefcefbb7a05","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.730c807a0.0.tgz","fileCount":48,"integrity":"sha512-MkezyNgmtCriuRNuP0AbVnYB9wgPIG01CpMYHzPER9PsTbDn+Y8wuPb4fz0esB78uDmEHJfDZjcbGCSNnAfeiA==","signatures":[{"sig":"MEUCIQDBWXSbfOhe3PGtNboM/4JCNG9/xROYfQXOKvkI8mgWkgIgOUy4n/sGTvNDgtz5dAZFSdYtckPVRmpM+4gC3JEtOIM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFQR1CRA9TVsSAnZWagAAVsgP/jWqEJj2SLtjDQnL+IkV\nrd46uGKUCD6TJpPNI93TaY9NjLXenm4s0K0DJSM4BNP9KqjspvIRjeckL91a\nRTVjZs3HmPpHjrWLU6mQ7652YQuPu73BaSm3edX0GNR4+/mrZYgTu3Gf0WdZ\nB1r56ZNgnn04slusMAErgNhNAZAobE8WiIRMcsCxNNKIff3koZzEskzVRAKD\n748ZrRJsNHy5Q1Yz7QkAt2zTdECk32az3t8ypQmoKnpc6w1JS/EZE543RAB6\nvJhG4w2VaqiLlPy87KVCgG+82mvWRY0TVzkDoBqPoe3dvCh5tP9JPYgLqWgj\nnVlqA9//yvx4TzOyoanKgfgTgJaRTZnKyQ17D1xnI7iqA5U+IoTtJN6d4TUL\nk290Rpg562A1ZrGb1LsP2qPopDKIpJCsPgyeWbXQP2wKYmf7orZGyfe7qYCJ\nwowpz5cjXMLoSHWR8NU9SAQP8t9Cr4LOpc0zwBNenwkPMRO146xZtl0qFOj6\nrL5fb0TZ/+F5iP7+8+EfyUMSIhld3jKaUrE8pWUug4pq6dholeGD728dPGUd\nR/PSpEvvA8RXGlB+lnzeUsE1kgfAYTlsDkZoyPQXJzNHNGLj7PXSa/UeXBpE\nnMGtZGxcNwMZbmR/+apBv7G4jLzGWc2j/XYnM+s2VriN3rPMbuwfvH0UTccE\nHJiV\r\n=3B+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8860f1c513146b0f8c59a8c70750d1353e61feaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.730c807a0.0","@material/tab":"5.0.0-canary.730c807a0.0","@material/base":"5.0.0-canary.730c807a0.0","@material/animation":"5.0.0-canary.730c807a0.0","@material/feature-targeting":"5.0.0-canary.730c807a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.730c807a0.0_1578435701030_0.3886952538114694","host":"s3://npm-registry-packages"}},"5.0.0-canary.2213152cd.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.2213152cd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.2213152cd.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":"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":"f9e50f034d08738f28be7455a14adb53ddad611f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.2213152cd.0.tgz","fileCount":48,"integrity":"sha512-AF2f1U/ZW0m7Qmf3snQyA+HiFGzsnxlQf/vKcArzZEiDZOLy6PGLZMVFQxObbXX+oHfkky/KId6TZMQ7kMYsRw==","signatures":[{"sig":"MEYCIQDVysciXk+HFHAHDltIehJ/8oulixEHl2DqU+rgQIdQjgIhAOvyP1d9F3u9kjkukdrebZMYaYLHZGZOeRccmgSFYeQU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFg/4CRA9TVsSAnZWagAAIp8P+wXUGwQ2KUmbBypU8Hnh\nhc83l6e+fjGM8TxkY345OKJPyc8bheHJbCtciLYrF56BRDTvo9edzaSnzVZc\nxKBzq3Dp3HvALId2HjDsHPQ/5n1PujivTbDEbe3vUddELdceGV/5+JEH3f7q\nVbfDzPl/mJWFKENjq8kSLbRkHToRnYQRgyUQinBPMs3VhJZ2A07SyQ9ho4Lj\nbZkLpKV4PdA/8bmdOZyqD582j0m/xdRZIFqz+cmQhrJ4z+S+AXHtufBnsJfC\ny+cpuX9qTXnthe7DcAmk7wG74GGfABrGcpvOzqKGhIvWUSoTzzM1NyW1zOuS\nQNXKV02XwUVwqRHe+ubhfqZGluF+YlbHcPR/qSpej4pDrkh/DxIX4MGkmzCs\nZZQaenQaIOGfrI2chy/M9ZcfapnwbbtQaQFSBzPD12zVcc8bGsqfzQPJ7F6H\nKBc/WMemR8PrmUvnc9HbKeExxS8kdmyENyqxltuQWSu7v2PBbPkhsMYv3p0o\n1RwRq/zw1Txv/pRKgRzT0clam2Vrrnzr1d5c0UMNrD81jibMhcqkCA5FjejE\n6QPzeWRJucgbBXSux67uifqwT5f1grNbRo8BCU1OcxrQj+39XrofqU9wCSSz\n2HswOpE4meyUDRcUBFwjF8sBZcnx7nq5Qq4cQePH356RaRxzwf+Z7gKZdtvl\nueMF\r\n=J1ZO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0a3677a82eb2000c085d0cab420c907dca8cf13a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2213152cd.0","@material/tab":"5.0.0-canary.2213152cd.0","@material/base":"5.0.0-canary.2213152cd.0","@material/animation":"5.0.0-canary.2213152cd.0","@material/feature-targeting":"5.0.0-canary.2213152cd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.2213152cd.0_1578504183678_0.5305740401530419","host":"s3://npm-registry-packages"}},"5.0.0-canary.5750f7169.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5750f7169.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5750f7169.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":"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":"99ab7f3de88cfa48d2c4d4b66abcd177b203bb2f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5750f7169.0.tgz","fileCount":48,"integrity":"sha512-L5QZNqSQ/5cgtTCaraCnFQ7JaFgLHdrNq8y1ACyQJUahkcFlhhooLhIB69QBiwk4EcQdGWddb4mdQiW6dnP5AA==","signatures":[{"sig":"MEUCIQCRPQNXK1xrKO01ep/ZOe0sZ+5pifmBxjzvKntSP7w7pAIgD4mfEspoobn8bd0ZX9l2LGrdE12/pNEtWBEq5redDt0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFhgjCRA9TVsSAnZWagAA7DsP/RpgnW80pQkto69HJ0f8\nWsRILIEoKXl0+bmDNbw0iJWF7aZSaAQOVc00OjVupKy/ils3kdjBOFymgUoA\nH3GlI7230E5TeQSXHkvKXVEz0KxWao2G3e3ZCOH1tvjhU7MDuoy9u7+E4VuN\n7qeoEaR2vSzN7clfbxBrgER5OQYJgqfn+ErROdIzUjYuXehUxkq2dOu2VO8f\nE3poqVjh0wNxy8wI15sbIXxiEV0htGROlCLaIizosKpiL9OzUA0XeTl1UUQZ\nVNixaRF8sWDD5d9v04aMyGgUKi+y5XQXeq6hj1ZD5bgrg4It3ON8+jf6wCB0\nrHouNKO52gp6kLEMwe9HBLsqitxtdZ9SxBER77As0OrqW3GskDjFYrhrs257\nRajhdtwsQ7iCSU1EURmW2Gba1lEZ0TQ7/sRwGjOQznNgg51cgjY9nqNmId0i\n7k4Lm+BVq3jX5BhFTLVZi4WrAKr8A0MQzwZjt305FRBryC22KK6EJFS72/ak\nFhLNf6um8caqHmacENlURctNbbCsGJE9YTnK2Nx7Iyz6urNFyWsaLSuYrwJc\n2KtnmIazB5dmC0sl/n/0MceFxl94l5qjMSMg8hoyyW+d9rtys9HSoflBUjfA\n6sWax0gTYU5LiPh6ts0zyPRYkHfKlLcTKfOhfdBmc+nvA4F5tvxp+kcuqv5v\nFMrn\r\n=yBh2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"394a48c85aa714b74edbf6f2b4172e4b066f604f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5750f7169.0","@material/tab":"5.0.0-canary.5750f7169.0","@material/base":"5.0.0-canary.5750f7169.0","@material/animation":"5.0.0-canary.5750f7169.0","@material/feature-targeting":"5.0.0-canary.5750f7169.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5750f7169.0_1578506275417_0.32430574750591057","host":"s3://npm-registry-packages"}},"5.0.0-canary.f7abc7a43.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f7abc7a43.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f7abc7a43.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":"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":"725b8f72234254cb5fda1df802093449b60a76c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f7abc7a43.0.tgz","fileCount":48,"integrity":"sha512-slijo5zO++Hn2lE4a6e1DlFAyJ+g3//gRjhSpEb01gyoIxs99vLTS7Lq4Cn5nRJjXcpKIbAtHYFKBH3kQl7sQg==","signatures":[{"sig":"MEQCIErxwLCsoH4iRwMnX0dF5npqXi8m6STlLtSggLwWnRwlAiBCT2qlhHextvjC93s4z4WkF1j3Z7ggmgHL1rPCd1bKew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFh9nCRA9TVsSAnZWagAAzkcP/RQkbrKo99Aq/W15+K1U\niMnVufSNd5yhiY8XagEl6cvvwGFQrwlwXoL2LCweqn5lR/Fq+1ZTvfurFN2a\nHZIiyebiajl2HPJ/rA0Tx1788uTIxEkto67WHHRxzYnVWwCSXaWuLA89c44R\nx4xrLAZwFw4aBoPeFPHAD41rFbbRTPAMNX9cnrDS1HjmBiQrSdIGMyEZS3k7\nT75v9s0LSXgKHLI7n56NtZGiabll6r26kte2oSem98b6iLXb4vRdeAD/kClO\nLO2Eseo5cTwzkHxZqvt2Dnj2oDBlxTlwwLj3m3xsvVcaQW+UuJP0PCUrvISY\no4ng+rW+cqhAdc+acV24cpmydTenfO+p5rYU39q7k+/M66sdzgxkwGesCfxD\ngv8g0me0dgK2SYA4Wzf9yz25qmQA3IvGxjXyrl7WdufQIaZEmvgrq4NABlTQ\nwStX0Vu07MeVEcfXeo6X4lMX8svF6whZHC46rZiQ+QP5rhE1oK3NSvOQnOJ1\nkSPOp14UXperu3F7mBxyH+RmG8ph7ViVDfqeZb5nOHTbowiqpc7JGRyEGSsm\nSHcgou07/0TrMpIxbxkYiXE9p68qptfxkzlWEp5AZJ4SzWOlc4pRLv+ea9Jc\nZnOdyPtxKYtETHFk4b8C+ja+CBoWmGjJFNKttRkotybBJq0pkWPArhDJZoi9\nmUFZ\r\n=if5M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f7431b4b45a3e410e9cbc1ae6abe69c3b00221c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f7abc7a43.0","@material/tab":"5.0.0-canary.f7abc7a43.0","@material/base":"5.0.0-canary.f7abc7a43.0","@material/animation":"5.0.0-canary.f7abc7a43.0","@material/feature-targeting":"5.0.0-canary.f7abc7a43.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f7abc7a43.0_1578508135114_0.5726904768442405","host":"s3://npm-registry-packages"}},"5.0.0-canary.bf7b4a061.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.bf7b4a061.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.bf7b4a061.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":"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":"9bc1faa15e51c5ec509ab6bf9416c6460e19e932","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.bf7b4a061.0.tgz","fileCount":48,"integrity":"sha512-/l6fTU7aQYWdrnQb3/IZzPVFpLn0mtdqqZ91oGOorbOtTnqHXFwso7A5LNdNXinkXT6PfemSiH/0DMi/4eF/Nw==","signatures":[{"sig":"MEYCIQCMSZUCL2vhWefRZTw3SkITe5VlSrv9a4cXjh0f04XY9QIhAJpVd/G0kCLEqyFFm4nIPzwsFFV8VXB4lWGkndhu3ea3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFiKTCRA9TVsSAnZWagAA1rgQAKO0UFmyeHRp68NWJCp7\nV+okKKoRej67zqpLBoRsZ35XGojquRuMUqKJuzYjWpCFfWn9kpDFXqVAP08t\nRlT5NZqq4Ou84pqJhsKKP2/0/ld5sbmZba64MKRfnx2QSerGX5fj8CrbmcvE\nXwePROe5BNn+q2sitU2m6n3x84AN8HW7AM7Xwx4xeqiqcPLgpJvNp+ACXnQQ\nHSs5yBEymLxo90mJBfw5edeywSZ18U0siB+O7kBeJ6QmzAFO/A9cUpMgKVP1\nrzxLQJ5LPt7eXQt0z1uCA+N7gTCd6XiwzAx3gkXb8z/u1b5LdolKh6L78LKi\nywbzsmk4iEvQY68XGTV1St9GsYlc6gfz0VuFMsLBQ0cMnm/8N+pR+m6FN6dr\nkP1AAUgF+0bDVmRzQ2os1PGHywKArKvBR6KhfI+RzTgCXfqj4934fbFnKY9s\nBH/1zw2tkaUcb7cXi3oGo/76q+BU6ttFuWXCInLPTCtwxu9ilic7skFABrZS\nUQo0bGEhg1Mo0ZZRU4H6Pqoro20u6FcubwcG8tm/keCVQbvo9R7BON9Gg1Fu\nkaUN9SrfKbCl4EI5KOokZbuBhJK7v1KC9XDyFezmZU0IWN8ZkiHq6AHe/b07\nSCUB4ZARWJJKV+wkzekOo/nCdbBPgBz7+/V7omsiWA9Lv7PDLLe0E3xV7mUw\nrR2a\r\n=hk8l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2cbac03ca7852ef897dec80561a01faa8b537228","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.bf7b4a061.0","@material/tab":"5.0.0-canary.bf7b4a061.0","@material/base":"5.0.0-canary.bf7b4a061.0","@material/animation":"5.0.0-canary.bf7b4a061.0","@material/feature-targeting":"5.0.0-canary.bf7b4a061.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.bf7b4a061.0_1578508947428_0.5962916949485357","host":"s3://npm-registry-packages"}},"5.0.0-canary.784fa7903.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.784fa7903.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.784fa7903.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":"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":"6ec0c981b364060d0f6faf90c7f449039635abb8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.784fa7903.0.tgz","fileCount":48,"integrity":"sha512-8xr1u383i7b0QmD4pWnLYl5AeDA2kDjCcSDqOlpTNy4jr5POiJ4elAI/TPY4d1BfbYauKDhRqQnZM/esay6j8Q==","signatures":[{"sig":"MEQCIGe2M7q19RFBxI6F6I/D9AqhEB8+cAQHrdhXRVxgE742AiAJ12ZKy4oGBbe6S3R3wmzmROO8AytYIWCyNpROxrS74A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFilbCRA9TVsSAnZWagAA+gIP/j2QvhR6GhecVNq4pwic\nLZJS5CDcWExjOYnbJpKDkHjMmMnPwkCOr/1ff4ej+iNm82cwNCHVr5fKtk7N\nf3sNBQZjhUSD5Msn0FePKUARBeOTTlDVEVN8VWS434axL+1MNLU3NQBoSLQp\nqVgZc5sTGOa4Ysfj3iNH+LA14JsPJKNEdpHcTVUO+5sy9LJXT1cGRbqhPn5U\nosSBxERBB6dXRbVPFFoFeC5SWLiw6P1OSkzAiw0JZXdWZj38jkFDILrj/EW5\nCrIIvQreCbFoDJ0C9dxrJ6lCsyk/jTnJqw+otNpPh9krRleD5zg1UWWdVMLM\nAouCSh4t+4Llim39LwSVv1b3dxrRe12jhyu7lHg5tHNdij5SnB3+gL6Esor/\neGUgkkqGSByq7m7ztzLPdz8dRtu99ysUQsQ1vnYkCb+vegXM7RXeXq4mUacf\nHfpwnHN3nUIq0CXo5laoMZ9n4cHRdW8P38Lg9rY0Vej/GY+gEJzGqWbOQs5h\n8tspqOnK03m4kJguQOaUhHWV/sfONsNkqHBMTaz83seN65WX4i3ISuFrtgWX\ncOYxrjBQ8+rvDixK6k43GFkDkUB1n5XOepTn8KeuFZu+g1Scz4AWxCizDfSw\nRK0sLLt+sA1YRBEY8voevKem4NUounLdWoDkcIO9s+7GouSh0cdo8r0pWJhJ\ng/F0\r\n=oZuV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"61b0d187c5c030042fb90bb59c1ebcd090186cb1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.784fa7903.0","@material/tab":"5.0.0-canary.784fa7903.0","@material/base":"5.0.0-canary.784fa7903.0","@material/animation":"5.0.0-canary.784fa7903.0","@material/feature-targeting":"5.0.0-canary.784fa7903.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.784fa7903.0_1578510682934_0.278148354247038","host":"s3://npm-registry-packages"}},"5.0.0-canary.823c050ba.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.823c050ba.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.823c050ba.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":"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":"d2da597adaf7939c7cc430ed0440f436e5a657c8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.823c050ba.0.tgz","fileCount":48,"integrity":"sha512-K0jyAyvlEVcY1yAKAk+P5QcLXuu1NN/fErCvvKGkCxV2RTRgEMQDCa7abogVC8lrj3AyrMNH9UnHgUJlIskFdA==","signatures":[{"sig":"MEUCIFVOQrA9AgTik5ENJBpya3awkUFM5/5LjJghFGYjwelhAiEAyC6z9YgRzN45pua8P/xoLM9Av/2HRv8eqb74Kt3eTs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjeACRA9TVsSAnZWagAArNoP/js2gK+jBkkZzcXbimEt\nf3nmHiNqVS777z6NhDsqKfCLvwmyEKT27FAKkDJ4MgaogBII9enXeWwbR6aZ\nTwtnSfvGoRx2wQePByE3FzNz/rzxlYfiT0a2aGsOY5NBhfC5pYHz/DceOjQf\n+FgyKdLurk63nrfrlRSpOU1wD1Pj26Ldt9GHf5A3O7fyxPxKEUcAq2M5usTl\ng/ostBSpAZepa1VIw2VrmUrAgVAGg47Rd94xlAOrQbPLbIzQ67y9ZMFEKdAv\nX08oFWCMczB0dxYJpM+4j8jlid1ufg12xaT7+XFregt/XMY0Oi94xHwVBAXK\nmlB3OLjGSJ1NM4SbsYB3+095ptqAnzCMOvB3E8+arA27FUyy6DI/niZLqgMF\nJQDj4+xGUAs9reCURQKTQ6RSHxatSkTRaeLdfgrI4OuNWjgeAAWivriI1DIk\n/ob+Xm+lun7AREQISSljG645HyRfNWh6ICZXD9rkuK1sXk84zLiB/WMf5upi\nBixlpn/dUApSUwJ4CRRzUftTPsSOm7fByBdi7IpS+mSKDj1Dr44c9ySQSaYs\nIr94JZ/WXCZUPUKQ66RcY2EuxpFKon/CgLsAl/nY6tX8/xOZP1msyXdra2e+\nLBhtgOf+2BOu8t1v0HpQqzcdNkngNtEYaC8Ro58EeGriJVd/BgDeMIefaorw\nxI0b\r\n=QBFH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b08bf7fb482cc6c0e80d365ea2bf510d80680bdc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.823c050ba.0","@material/tab":"5.0.0-canary.823c050ba.0","@material/base":"5.0.0-canary.823c050ba.0","@material/animation":"5.0.0-canary.823c050ba.0","@material/feature-targeting":"5.0.0-canary.823c050ba.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.823c050ba.0_1578514304117_0.12190838513515367","host":"s3://npm-registry-packages"}},"5.0.0-canary.70c708dee.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.70c708dee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.70c708dee.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":"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":"609abc3d39d1f52a38513e2f4f7f1cefe98747b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.70c708dee.0.tgz","fileCount":48,"integrity":"sha512-i98nE5YvydaWBWVKyqQXxAKgswvH/o03ZD3KkK91rw1VMauwcePx8LnP3QpwwCdnwIRaG1FI0OI2efpG9P1tYg==","signatures":[{"sig":"MEQCIDtCG7VSjKJE5G8r93lbAvjHAS/WE8olva1JAWW2wBysAiAEY+FymMG1FKE0KL0OHXrV1oNEsi9dBjjWSmez6UlZUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFjovCRA9TVsSAnZWagAA+tAP/jN5SqI/RqBBUrdglNQV\nQWG5ouAW6G/l3JyMBzaOVy1j/NvJquYvvVCTGPBlM3Nn8cHBYlfr7f0v/NUI\nIHFSuB4ed3tTKyjOBj5dAzLPvxdN2S3208geKwbRdUOhM+/XFbp6Nh69Ey2A\nUHRyQZmYUzf4PLgK/tYZWvOMr6HNmzYdpsESVO236JUghdNhGrahn0qqWftK\nyv8lcluP1EJh11yCW/U0X/RqAl+UTbqUKrm2oHEj4rRwETIgOgHST4y18pX2\nihzaFjjgy1EyCyEJlBebiBwNVeE9XPzMvjy31bcIho2x95I/HuyK2Y0/geRm\nYNL4RNgdgtErU0bmPn2jNgi1RaF4ZljPybx79zLWeqccaEQwcwCMc+OLSyvE\nI5G/JbTfuA/v4hL0HCVNEPcuJPeGzd+oOBd6b3uadtIffKfnVO+kh8S+Kn2S\n/q753+oXctVrRP9XxpjF3ZsMT0mJ8eECTT/6xmiu4F2mCGeA4GVrhqwidrsf\nLogQVK0GEyHZeNmfDPQV+fZF0ig5KO++QVCR8v4GP0B+4Ly6CRQKNfz5ZfrR\nQ/1fqrGhTs8d6KOdvlnp+TqKOOftaewQNBmb8Y2sezeIeIof8aCA26CI778k\n4ACzYLN/DEHwh5JoGiIB9+c7lMZpWTlXQX8WO96pdKNY+cGD18EBeMYt/bHE\nq+Um\r\n=ZKee\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"096bee7c4a6fa97b650100f3d0e0cb484db375d2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.70c708dee.0","@material/tab":"5.0.0-canary.70c708dee.0","@material/base":"5.0.0-canary.70c708dee.0","@material/animation":"5.0.0-canary.70c708dee.0","@material/feature-targeting":"5.0.0-canary.70c708dee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.70c708dee.0_1578514991277_0.3817508438747066","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ed9d13d0.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5ed9d13d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5ed9d13d0.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":"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":"29384f7c6b356c06b2d0b495c1f45daa47d55cc5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5ed9d13d0.0.tgz","fileCount":48,"integrity":"sha512-lNAN5xZNJs37N3ElNFPIIOzhvnZ3b7vLsLxo51T21mJLj5TI90MgvG7IlDQgF5t4pVN+rB1cOq836xlnK6pYQQ==","signatures":[{"sig":"MEUCIQD6oN4s9jHt2umvqYYYHsJq6zY1Cy5jjyUgIxK/DEdG1AIgUXyFKdjMe2eB2qlv+mnb6PsTWqkAFwifEuKn2+if2HU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFkz+CRA9TVsSAnZWagAAeGEP/2H5sbgo6t1QcPLuomeI\nweL1rJl4Ec+tU37SNiE/zTRpRrQ8DkdyXj2bbnZeYabqVZA9IwWTNlSMcyB8\nAfSq+N6UJ5FQPkp8hNrfJeWPEgB2MTP+gU0TEfL9IfESPhOhkTuhVRnH5Ch0\n3oqjHPLbAc1RA5YD4VC/APbfG9l0NZIPmBJ6T5K9I/3jzdG1Em2v3/DqkUUv\nD8aDQDOz0EnrvQyVZAyKrnLY4/G8O+nk9ENgBcYS7cn0YkiRb0VM+hBsGK0f\nJitLcRgH47Ksg1twMTCZyrMEsRVTYKLoLd0SR7rVUC/pXDhN9u8pyI4m23Ko\n6/EdNGaC25DvCfqoGuOMPNI2xrZRoz6UIqIYBkiuLiSAajtD5y/OJGDtUre7\nKB1TLNsRRZ6AFPRDTp8cRsxL1cQ6DnKZ8M15hqLgOe7YCG07QfmJQ8pk4bj1\nZHliT6l4y7rMMd+/6GQ15vWysF60bmC7ypsd+mRE3eqx9v5TmZbUN1KbN5Ix\nzp8ADBlqKbtEtDkky4Lq2z+IFvC1sr+56GdnPHd8rwYq5rAv47iBd0NN8qx1\n0tgfpo+lkVxl4EJ3JPf5TCOMlndQDLJedddCxY9dJWpxlMrBaXwUV5YNN+1j\ninT+c5c3BeMAwAVXDCklm4m5FoNIp6M0vMN+iKNIJYGcpzFaucm3vq135Zb7\nHjT9\r\n=RqGH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3c9ae4313970bc3335cb0223b3e10f3fa3ee8ae3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ed9d13d0.0","@material/tab":"5.0.0-canary.5ed9d13d0.0","@material/base":"5.0.0-canary.5ed9d13d0.0","@material/animation":"5.0.0-canary.5ed9d13d0.0","@material/feature-targeting":"5.0.0-canary.5ed9d13d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5ed9d13d0.0_1578519806346_0.23774822308114762","host":"s3://npm-registry-packages"}},"5.0.0-canary.4819cc7e5.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.4819cc7e5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.4819cc7e5.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":"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":"24efacba4c6bb3d8152574367b911f255d90cafe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.4819cc7e5.0.tgz","fileCount":48,"integrity":"sha512-o+Zp3do7wew23o0gk3/nRMSRnZ7cmtQOoNdTLeEHvZefHZYFRE5poODGBWRS9ebEuTJniSx705MibBiq5MJKew==","signatures":[{"sig":"MEUCIAKpR1SjGQGWxDguy4tl+7VtGsHD64A2hIaC4+Ze34UEAiEAgygdpl5JwjaWCNvG32T9tDVJCRt93lcwZPD+h5rG52E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlCvCRA9TVsSAnZWagAATA8P/Rjw3QmzKTGvOqf49dbO\nhUsg9SHUubB9TOs6M6eusBiEKyxynUkUBg5FS80cuz7yrZgOD75LUTP+aimv\nwL2E2VpwpookDevbO47kfm5nA2HHG8TZC9ZarYx0VjNBbZg1KV7sKvfnGEtP\n5adloUAxN0Uk9HJWGqlfwevyJaplj3xRgMmqjOmFqa9JCCc/xG97oCHhP2dX\nQD9rRMMS4SPLPDddh3n6BAYjAsBGvNbnu3CkmZoqCHB8cW7XCdvke9X/rnzo\n8T7PAIxKIF+QJkGGnjs4X9lvvgCjn14hH2yiB63I6dg4eqj+MvohXvk8xmYY\nmXEw1+uqZRbxwN/Rjq1KLpa30kD40biAbYRhLhS3sObWE3WFtOLzrjA1sv0A\n9ImRIVh+EI+ZP+3xdIp7A9h05CEEvYoq3bJzSnpUojduskoFsRlOOSQzE4+9\nNawI/PRCHCxSAkKohk8l45s69sM3lU+ZlnQW0p27DvRa7pnR4qVTiWHYRHaB\nz00AXF7bmqY/VNVeK0XxmRFZR1I44BomLloBmeyinzqrbt2LBSJtw9jvov/0\nRLQdPQVvaFFUzlVEF4dHMBJbk3AwnQ4C1PmkqW+1FyoO+FxyBjStHKU4wiGL\nB3ID+ovmEneh8YPy/6eFzAGLkIpUcSoDI+W1d1Kv2IEfNFLGWlIsTnR/kLWN\niGT1\r\n=CEsT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1cdb8bd7292ce5180cfeb2b5ea0cf8eb4aa6a931","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4819cc7e5.0","@material/tab":"5.0.0-canary.4819cc7e5.0","@material/base":"5.0.0-canary.4819cc7e5.0","@material/animation":"5.0.0-canary.4819cc7e5.0","@material/feature-targeting":"5.0.0-canary.4819cc7e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.4819cc7e5.0_1578520751214_0.7348080906059771","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe3ffd2c3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.fe3ffd2c3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.fe3ffd2c3.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":"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":"dd6eaf7f4aa988659da39ed3efd0fe6e532747a7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.fe3ffd2c3.0.tgz","fileCount":48,"integrity":"sha512-NBPsQKDLkOGBsuDhuxuN8MPvrtKAjI/wjsRcc09g+DF3k1HyGk64/HRMKCDu5ziRqinM4RiVclQ16kzI9ZVWvw==","signatures":[{"sig":"MEQCIHm1oxzX5NhRNIhCCelpCo73xYCwGYqXAF0M7TuPfW4TAiBWxKGDtiJnyvPYws+10w6vASdkKOcs/zbr17kp4nlQyw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlTwCRA9TVsSAnZWagAADs0P/R0feQzrBKO2X0gSA7uI\nSOeAWCK1gP3L0HXtkWgudpU8X/VfxOsC3KDkz1ke0C9eSKR8Gr9p26XOu373\nI85ypQALPZ58niV4nELEIK6oK6oVSGEiOv/85PwX6iWkLqvu+BjYzW8khTT8\nuR840wsDqCwnJMZNoFX0vIQlnKojQh1T4vtXiSn5UMQktp1bcmZLnJ+v7/ib\nAM8sx53W+5HvXpAYuJ4ns8/J7FDyyQBH9h8Zo4qLrTO3mTBlJbiNw1uWnk8l\n9jQhTpMSPCWWHNZuCxI86kab5+N1+B4oKIY+QrK0Z2Zg1Mpiyg11Yzi4ulC1\nf41ZNz2kwmFezMtmdKTWuNMnmJACu4RcJS2l6sYVt8w+VlGohRhYe9RH1sv3\nVbmGxW9VjZaYrwu6uirGnngu+6nVFBBc3xrpp9eGwUvVuJGr5uKLzlGb2Usv\n7oZXBJgfJ7cVEcfbl8gWR7tEd7Y0uP1Isiit/teF2TinNtbAbtdkG4ndH6lD\n7BYwJIaJioluflwoz1TNvgFDAdjqyGcCWcMFVBUZ12GWLtkbgXm51cWETOdJ\nynMF4VGMPZ5+OpXCKk77c5i5igPUwKpE5uXSUIWmx/HTixpE/P4DE8Yf9f7s\n32vYvOLV6eqT/d5N3nEdWDLSNNtZXr4f3U5aw93HJYcrqb+djApgPyNZ82FX\nDgGn\r\n=1Ds4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ef82dd049d6c2d6439fc79408aab4567780d26f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe3ffd2c3.0","@material/tab":"5.0.0-canary.fe3ffd2c3.0","@material/base":"5.0.0-canary.fe3ffd2c3.0","@material/animation":"5.0.0-canary.fe3ffd2c3.0","@material/feature-targeting":"5.0.0-canary.fe3ffd2c3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.fe3ffd2c3.0_1578521839576_0.2206793036207393","host":"s3://npm-registry-packages"}},"5.0.0-canary.c0e850090.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c0e850090.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c0e850090.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":"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":"0bd742892b879ffbe35e032a66f219ac0c43fbc9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c0e850090.0.tgz","fileCount":48,"integrity":"sha512-oMpbJkwcwsdtPsU2xsgAUTbxGx4wS3+dueEOJuKdeUr20GD7jauW0gxc4sF9AMY4Vm+SPQaY+rBcitsa7z8L0w==","signatures":[{"sig":"MEUCIBJvyu8u8XSpLqfdEfrKs54CfOjC8c205dD9SND3v16BAiEAtxgEGCGrf8K6DgDjBUZ/1aR68o/pXoMyx9wIf+h8GfE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlZ7CRA9TVsSAnZWagAAW2YP+QDKjRd85eMVa5Nfn0zO\n4g4SDlegmdARy6ree1UA5kiLc2QhFuVvH+6/3lrfuTmkvovnK6E4C9/vL7Ia\niiNL7uxJwzAMSMguH4YAO5UHJ+xCvlY3HxIH1LFljNRzh5TqkbKEtwfBRmtd\nHNHTxp6XDuLoCi4aAYzdZQVO9gaFnzJlMmAg6F0R4q3IXW/2+cKsJUnkZMdf\n5vwEtKM/p0/jl4kcOiDDwZEN72UKKqpF4Z9W/JI/9f2ENDkSY6dVlPe3hOHe\n3tct634Lv/SRsn2Pu74M+LeY4xFqDIUjYuMaJ4US0PTRVlfk8U6jxDOFhNWK\nLu62+EA4jEmkCDHtt1joB7xhhY3JM4OkOF4LydiPScHU5XuwxFWIPOnGFE/J\naRfRfgoPCQWnyQqBulMbYZqEMU9OChBytx9VE2gKAiviubojpxke+bTEdCDV\n3U6KlilmX2HQUzOgV3zPDWscrd9k+NHWXwn73+VlN7lVE39gZ+ODhXqvdpQ9\nzHnmzFbgq/If9bnzuPElVENfqIRwQZ7zl3mPVatCexZeWyz8IzsU9K7mh7ea\n4/pUOBg/bQ1/HswuXtzzN+UJskhBv1chb8RjUAk6bKyiAt1h3X5RsL2sRzkY\nuttIMUfDrNOM3camrFBBtafns/1RSiuvqlmVKW885rf0jsJVgfXZkaDRfJ0a\njpN2\r\n=SFS9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"04d9e991ccc9d40d53d67d592c9532cb43e763a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c0e850090.0","@material/tab":"5.0.0-canary.c0e850090.0","@material/base":"5.0.0-canary.c0e850090.0","@material/animation":"5.0.0-canary.c0e850090.0","@material/feature-targeting":"5.0.0-canary.c0e850090.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c0e850090.0_1578522234895_0.9202724998422409","host":"s3://npm-registry-packages"}},"5.0.0-canary.615f86f38.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.615f86f38.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.615f86f38.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":"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":"c8ca99a429da03a8dd6892c618c4b2df8d0e72e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.615f86f38.0.tgz","fileCount":48,"integrity":"sha512-15vQUKqZtd3/kCNfGvKwzFLUdSHZiusfVRPGdH7hjWklwWUVirqahGF1JJo7hNWNHBNmfJzVj5jY4MpQ279kHw==","signatures":[{"sig":"MEQCIGdpeYwmYDx/aMLqMwG7Goq7cDrPFW1ml1c2rO86/sj8AiASpkmXpuuYb77Dzoo+1CG55IJHOEXzVbXKNYGw5aQLtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFlqGCRA9TVsSAnZWagAADjcP/121/awdVeXlBhdifJRt\n+R34fFYo2lzisQ+C6xBGBHrhG6BOeMvJBcTLio+T9H5XWttjFOEtjBPG1FMU\nudPIBOtZJRGavkRbhtYtZMj5M6NpCVkpquZqansAnHXDP+URm9gjlEMa/CHF\n19+wH3PdCW5KoXwgdjTUNykNXq//MGYR9zdmB5K3xyloAWw+C9UdJeiieAra\nQctv7UjcSwzCmvyuR+rwV6KPUnzPKNSqUemqH0jP4g83nXcWSAN2BAFMJdLT\nRQ/thgqmApPTiFLknrqXL8XCK1RMy43W8ta5BUI/Zh9WXTMwc5MC99HOEKtu\n68qjtia36S4gd6QlR11PXQveOaktytewDxpT2HUYUDX2zCulvj16RIxQ1e/q\nhANCoC4Fc1/PvsRcoSpClEcFGtIoKqi6fMrcTFXWv0/kANAOS/wzZzN5khGI\nwfiRBE42CaNg/qby6BB9CJrirAWLq83MUu3nk65Q+1rZoscFgp6TWq/NUZ8D\nbVTjI9E4SN7IwhIIK+ccGkt/uctrpGjWRpFPLGcQSJsylNfmEnyZaMyThmIP\ntKJqK6C8+f9/svsaztOaVhbOUe3V9mUcJEGB4FwJFr/9mXglXbERxFBhbmld\ne/74bKbHp/F1l4ipf0H4siKaTMmZ9sxUk+txEiATXLRNkiZ4tdDpw3JkgQYU\n16XK\r\n=bbTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5ae8bb946c188918a80b70e03e7d35b1e27089e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.615f86f38.0","@material/tab":"5.0.0-canary.615f86f38.0","@material/base":"5.0.0-canary.615f86f38.0","@material/animation":"5.0.0-canary.615f86f38.0","@material/feature-targeting":"5.0.0-canary.615f86f38.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.615f86f38.0_1578523269971_0.19158526827843536","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb032637.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1eb032637.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1eb032637.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":"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":"9cb448b3aa6786582e2717e8022b5e6591abe0c8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1eb032637.0.tgz","fileCount":48,"integrity":"sha512-gTKPOUBzyVdxXk4yUJ8X1WX0YF3HVnTU6U2PXc9Jmovtk8I30rZuQTDT6j4IPf+BiBL/PGO0qLSlBxPZ0zQweQ==","signatures":[{"sig":"MEUCIQCN4EN3+umie+mgkSO9h1mcWkJ3ixw+9mlFeNZPxRh0aAIgXIe/tFuWxYtOd93goLAUIWX0L1NhQf7UL7hjQ7ECxzo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl8sCRA9TVsSAnZWagAAYx8P/RyjPlnAR8fdBwGIsBbx\nXN7+3X3+h5YjYknnxU6MElparvkXfnOSkEG19hvPyOxT15lmXh5nhRKyHm88\nIcRUjosIkU9gwhbLqF2aZgOrT9Ih3RYeci/BgCn7dngiJaQ6SX8vsaxD2wBW\np+N8SfdqoJ22090AIepqco03HXKQTbXa53/ScIlfWuAbtgdZYq7+/TL2Q6Dh\nBM8aSsunic2yugd0SxuHKsx25CO3qiVavwkm2bGnXSGOE37YbYjgByge0MeY\nSNxl0cMky5nIReA3UcGLUFh88OQGgyckbH/pU/rQZZXJPY1VkXFZcbUS9aKh\nM3YtAFt2d9zF1mtO7IKE4EEyK6a0jx9gzq2eD7hXyTePzqP9b6JrGaOTiw3P\n8TwmS3nPk7twzy72nwDGM4PFkNbpNWNFg+IQ/LZyTLUvBz14s6GgOIpXBLM1\nOvn5JbEK0jgkSxbnhupv7y7/NJjiI1iwE3Xj+JB3+1d+ueAtW5Dc1fC1ZwmF\nUrminx0DqT3wOlWtq3Lx1NDtGX7/1Hr5y/KSokNWbfsX+475/luNqbwdd+Lg\nPIPYb0YlJbzBCfMyho+UKTVw7TW8q/FpNRbM9a7EYEu2WbwwgjeXaILuqA1y\n5bmRbKGFlEXPAzdTtxXab/wUhjWtdjBY8KTHTVEmG07yRM5WnIw1OXNvTcwW\nxG9G\r\n=LOlJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ebd5efe5771491e06a78d3b1ca6b1af49af8e943","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb032637.0","@material/tab":"5.0.0-canary.1eb032637.0","@material/base":"5.0.0-canary.1eb032637.0","@material/animation":"5.0.0-canary.1eb032637.0","@material/feature-targeting":"5.0.0-canary.1eb032637.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1eb032637.0_1578524459547_0.03127461226606987","host":"s3://npm-registry-packages"}},"5.0.0-canary.5bc5ebfea.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5bc5ebfea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5bc5ebfea.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":"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":"70dd6c6764aca1b5b8efb94e926b52a1c808d2dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5bc5ebfea.0.tgz","fileCount":48,"integrity":"sha512-Yx499wj0AzMozKEouxQdil8HfSzU+Z+mAL/E1vKSH6hR2flIytvV2sl6d1jAB8Rh5eR0Tzcmn6aESdjh/VaiuQ==","signatures":[{"sig":"MEYCIQD1pqsx618citf4uY9MEEXFs9L3N3B/ou7WGSLAQLdj5wIhAP6RNQbvg21kjHqMrqmgY38rC8FiKSG/iP/L2642G7zb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeFl9YCRA9TVsSAnZWagAACD8QAIZbqq9CTWdJSqUWveUv\nZa6eGjHgijfVuJv2hD/6TW6G4HNfzKKptLPjDzsyL1YBf5OkN+SefPsl3t52\n6/zzYs8+jVBQRGLxbWJo/A/GB5MmIQS6eFF2YjVrROPndiTZJ/4QLHTpUBRk\nUTahI5I2OaAgMRP67/70eoYQj3+6sdsLsbI/BQLmiKGDTSi5dGHMBdzHkDJJ\nnSWPXhq/Ja5UsMSupPa0N9+BhN1ZZxDSCJ7/5CH8gKWOlRGTfDmnB9YcK/Ut\nZL20Xm8z0NEMLbZLoCW/gfGk/7e0mQFcBo/XchhJAwEW5dS67hUrLC3p1RTS\npZU7nJbzghXokrPDhET7o9WndPFEpoMspEx19ISQc+Nq3gSvOgZNkCDjdpTT\nA4Z3J8M70XSINgKBfZEbHhgO/W02euI7BJa97ZgOtAIiQw4Bpp04UUGnZvgU\njR2HdZdjzDItapuhwCPhDWUgm90fz7oyImZerQ8lB4PAud11LBgQ+aE30avw\nEMZYGh4Lk/aGiyPeoVBbKZKQyhPR2N/3QqmuHIt+NNuRDJnk1y/NWEgCBmEn\nuI+aU0CKHAwDWA5y1zuQO4ZSXvBTbiNv9Y8MkQjrmmBqrCiS1Ztg6RYSYbmT\nn4eDzZUEpPs+kzzxYQGgiAbWmuQe0vneTa1VsEd3tFvOiThjhf+/ITUfdJDE\n+pY7\r\n=Qy6T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8d87a9536a0b9e4af0865ecc4d9b558a6c193f33","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5bc5ebfea.0","@material/tab":"5.0.0-canary.5bc5ebfea.0","@material/base":"5.0.0-canary.5bc5ebfea.0","@material/animation":"5.0.0-canary.5bc5ebfea.0","@material/feature-targeting":"5.0.0-canary.5bc5ebfea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5bc5ebfea.0_1578524504441_0.3298188289737898","host":"s3://npm-registry-packages"}},"5.0.0-canary.1112b8def.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1112b8def.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1112b8def.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":"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":"a4951b6133fbf9ae60d04a6ca081642db091a0b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1112b8def.0.tgz","fileCount":48,"integrity":"sha512-viTWyBzf7CAWxUorm3kQPQy1zs1j0bv2jWiznld0lfvh6DmO4jgyCCfH9hCDyj4ZtvsqiEdnAwh38hK80/U2VA==","signatures":[{"sig":"MEQCIA31VzvFK1lw1BVje8EaUhoNbQKCqNFlzhKXT5VHu/qzAiAKRiHF/g5phkh9H3uiUhohxwK1vx2ZRU+gyw3FxHUbxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF6T8CRA9TVsSAnZWagAACnYP/0hhW+pnAUsmU9z4cfhP\nNakOyKr0SmQwjvuroyqPGSHMqdqCfoUs8pCxCEGJpbknm0QCKbaKBkNelKjA\nV4Kk8HdKRsrsbrcRGE3sInG+3P2tXC1OxUuWJC215j9DWpVRl3P7Lrv54xer\ni0YSyfCbljPDQQ4UmmMbJO+A9krQllfrPGouEbH18pjHeXWO9QNtTW7eO4CC\nxEkcT5OXN+JPAlxSStzq0YsyI2oreugqfG9qIX+g2RpXq8lwUsyhTwXWCjIg\n88ho9QIjPK4zz+hv92t13cFWjGUXrSIMtvG83gS6fqhiskgKRG118XyYBD6a\nTh3kbjlKaHN4ed15Em0Yu0PhWP5C/P03PB1vfAb3e+3CRwA1zYXMh8d+UAVz\nDaRDa9/KIu6qlR+7G9M2tzV+4Q4Myo9bx4hOk3iZqAe2ZUi60mP0mDBIS6Cu\nM8TYCvmNy06b+bLVlBUTK9RThwk7lIhkrZLwG9Xev5x4+r/5h9146nSarNW5\nkhKbAaT1IuBTAuofVBrxdHeY/EzG2y6LEZJLQAXrWYhl5MN1DogRB99HKqzw\nqlXQHsH+uj8c9567jloi+TiYE6aLgCLTrHyEgNDLw8A1FTs8UQwcyWIo4lRT\nVgCftOG+rvASGVDlDhmZOH7k4M81ZhV373R6AORTJArPoiZT2VkHMI6+6CcY\njBm5\r\n=shSy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3fdcad176780c1976528d217d2fb149875bb4b03","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1112b8def.0","@material/tab":"5.0.0-canary.1112b8def.0","@material/base":"5.0.0-canary.1112b8def.0","@material/animation":"5.0.0-canary.1112b8def.0","@material/feature-targeting":"5.0.0-canary.1112b8def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1112b8def.0_1578607868066_0.905930561359966","host":"s3://npm-registry-packages"}},"5.0.0-canary.aab102017.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.aab102017.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.aab102017.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":"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":"939278d49415e05223aea947b7ce0dcf6d7256dc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.aab102017.0.tgz","fileCount":48,"integrity":"sha512-hhPLy/N0jxQUM1sgF2NbS9OKartqxT02YJDaevTmwj8qTdHE3Y3BUWQ4pUkFSnGbh9xooOn2xeRPih/i6Q+Blw==","signatures":[{"sig":"MEUCIQDRhaWvrIla8+sitMnfJeCjZvQmVXPHjJ5UcxN68FMMcQIgVkNZZ5qk+RQ4wfups7ggRz6rV2T5z/VguoG4cRdja3A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF8GVCRA9TVsSAnZWagAA5CAP/1I+Zo73J+wUhxRMWUmx\nGvmm38okDnOEHu2wRAil3gCxo14B61IZCqobv7SzQBDItNLPJMeNrxFKGl41\nZsNdMGRdc7q/snE/qqXX9aj4XtV0d3DHHAAQxxRi7j1+3jKOW2q8mgQ+8vJT\nrgAD5k5xxt5wr5aZLYt0qw6J7+SwKdEEPoSWvvTexrTWA15r/GHBc/XEGe59\n44Q1cvnLFbgtcbe/5kJvQhXUn5kG+bfbgAsgkiWW8rFpyWYG32L1bUTVTB1f\n0TGvp/dUglTW4py1cXdrAHwJ6h+S2MIkfJatJuL9q0uydCmcVisiuaNfmAWs\nUH1i33+DYrGv48K3D91AWBReLOKZZW/QpRxACVBupFyS4Ai18IoPQXAEvf+J\n0HzlMJYELrpbN6bTyn6ivczHHbWNIT235uLkhrULJ7dm2VpaW2MP0Qt/ptkC\nwC2elXIGzLX8WVceH7cgjS9mgOze7t7mp9oVAS9EgqqJqDLSdtA2DvFs2MQB\nfi/0BaXenmAXVVgme5y8mC0rBKGnme7CdnxaBqE/x1X6TvpKINZxg4SuzXqF\n5QLZDetvcb9KvePONl7AedDPSRthG8FFSp6qJXXOU/RZn9VfPeap1wre2RCB\nQYBu2Xqp1FQmNfv9D6ihHi99z2VgvyZ9EQZsCH2tNgbmUV/96mWtYxsl/A/R\n/nPZ\r\n=6YCD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3f5eab02080f0c4fb48614a44647ed55d55eb9fb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aab102017.0","@material/tab":"5.0.0-canary.aab102017.0","@material/base":"5.0.0-canary.aab102017.0","@material/animation":"5.0.0-canary.aab102017.0","@material/feature-targeting":"5.0.0-canary.aab102017.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.aab102017.0_1578615188588_0.045352479979888116","host":"s3://npm-registry-packages"}},"5.0.0-canary.426913342.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.426913342.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.426913342.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":"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":"afdd8f74848f00568afda4201ef25bb0ee21f231","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.426913342.0.tgz","fileCount":48,"integrity":"sha512-5TJuOujqJdJIkhkn4Gh4AJKDD6n0RMCPQLF2wiD6s3i715mMBGIsXITYq5opkiV/orvomEz3KldG8CVzkbrv2w==","signatures":[{"sig":"MEUCIQC6mOYfrSDntIfq96Hta4poSoKeOF0GZiovroQzUNc+pwIgbxzohSecqoaTqqSQdlLb8LqwxCoOnIrWbmFV9maYVLU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307425,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeF9ckCRA9TVsSAnZWagAAP/oP/2qSZubAWCQy8h+Xbq9Z\nh2qjzl45kzDeA8amWQV1Xakwr97a34fzA3WRKPrPQn8rKCTbqG9YZEnv7ay8\nKyppIrDnq9XNZ1YXnPifrMWcWU2PVU8mr95vh1iMUwBO6nVwwysgxhrEBwt+\nIq5qp3lx1NKkc6PXKbWnTE29f/pW7V0WPPcVhk4uoHuaTe9aQ8jnP+jLCkfH\n/2jPy0O1Oabhnl6aemr4UK+9SFQwf9j1ZXxDJdpeaVFB0fJjUeuhjtVSG4XI\nxoBLWvkukD38/Ie/cWCL/Nt9jS2tlBwBB+FKVzsyXy6qUyJbnv8T1URdRh00\nWa7ghNgdnaodpbLWayy1zdYvpK2M1XndK2yapoh62YSupQO4Rf6viRldVUdK\nOgI3NbtTbgOXkheVsjgLROdLKi1C/lWLjUsXES0PXyQWzfXfGdwxqqe2YRXj\nel6krDWapimG65W8rA9lTvAxCP4+pgfUHLdB0CRvaUe40ZOJ/ec9ipc16pua\nXonCUGXaI1rUHMK3Xr8eirrH7Ti+zIQC4PLo43brv5WUDYGwBuVQhy2oJSuG\nxnt4OxljKxRZsaWUyOatITuKE7FCjKIUH3H87ksmdtqulHKx9Ply5o9EClpp\npPTWFYmp5L08U48edW80X8wMsSYB4dzn1Mes80YsHaR2mEDPhcxcoqiVDiBC\nIDiR\r\n=i63K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7a6219dfe8ca1677971694ece39ab423ee8879b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.426913342.0","@material/tab":"5.0.0-canary.426913342.0","@material/base":"5.0.0-canary.426913342.0","@material/animation":"5.0.0-canary.426913342.0","@material/feature-targeting":"5.0.0-canary.426913342.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.426913342.0_1578620707657_0.07863828703261988","host":"s3://npm-registry-packages"}},"5.0.0-canary.d4ea9a706.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d4ea9a706.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d4ea9a706.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":"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":"dd74324fc8a86f3301ce3292365424428963c863","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d4ea9a706.0.tgz","fileCount":48,"integrity":"sha512-N5WmNq3bdpVSgtN9aM6WsHEVKRi3A6NY5vbeFcpxcNACY0wTZdCOSvBngBUyiqnZxnI69ekcZEzXyGgXCnUc/A==","signatures":[{"sig":"MEYCIQD80wq0PGoHZKCw5nfcC2CMm3+q+UfbKEtbCjQBkm25SgIhAOb3d24Tjs+GACrT3st73SVt1HS1UFcv4dPC+rDfJqCr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLO2CRA9TVsSAnZWagAAXwoP/2oTlvMlaREMfdkBW2mG\nDhKiDwqVwkShLs/dNVnOrC3rY9/RzlpeuREusOp6RehJYXrRBRx5ai2W/PMs\n+i3HgZSaDyRBbZUc38nnY/S+/alwDKKpT1xF9IlPWGV3olWe0D3eENsUHb4s\ndmcQHOvpkJEypGyxnrPv+YeCchG6crmNM+XGJUX7Z10WmaabjLCnuwRwbwP9\nnRe+CiNfI94u9MHM3ek5lNUmbvJG/JthhPJMAKU1IXfIctQjazfOzk0IO/XG\nU76QA4bQV0Cat7eweDXEOv6ZiSxz6q/rEjtqCB0RYQF1Qk8Cwapye7tvifwD\nD2yfKrSdBj+zXQXFq1AcR3AgaoXZUm4C1l2y8cyAJVnJWCoS7B7NM7VSpBgV\nU5W8zDhLl/8dyY3W6eFwhi0O30FB3+4hatett512gwCsAvpAI9pvtAUgEDNX\nmyKet4wzZ6hEHphvi18Xcy1nSzMn7SAJCtBS7l0aG9T67uXS3Y0flxicca9e\nwJY2gI+xG9ht2HefGGHCw4raEbZnJIkBrftJ4ZmK4PMPjgJJIn7cor4+/HX+\nw5+R2w0MtHevz0Jsr14RLyHks7lNatAk9mP8deqoaYEWr6SRx2vt6i+K3pZr\nsZY6C9sAUHWJpnwyDOWbnyCj7RjFBB33PtBPRTEhl5FlrLAKvBILq9efCgp3\nw49s\r\n=uR9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f4f80c96af6c2e34c34a3ed8f01c1858ef738935","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d4ea9a706.0","@material/tab":"5.0.0-canary.d4ea9a706.0","@material/base":"5.0.0-canary.d4ea9a706.0","@material/animation":"5.0.0-canary.d4ea9a706.0","@material/feature-targeting":"5.0.0-canary.d4ea9a706.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d4ea9a706.0_1578677173779_0.19475678342323377","host":"s3://npm-registry-packages"}},"5.0.0-canary.7d4ee2996.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7d4ee2996.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7d4ee2996.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":"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":"bf5d57394411466e7b92a016b8f05654b728f050","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7d4ee2996.0.tgz","fileCount":48,"integrity":"sha512-sWPdV0t4GWYUnekio4FtZOQXQrd+huvxM82367+sB6X/n/rMwunuX/YOqlYpwaXG+tO0Qjt70hWSwn8BVsCNEA==","signatures":[{"sig":"MEYCIQCOT5vvukKHaEZH/rPv0V/2ssYhnSIkdZT6YpejCjIZUwIhAPkfwJLWEk96VMR3tjodiZzaPD9jv+qxO+6SniJAuBwL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":307403,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGLsXCRA9TVsSAnZWagAABLUP/RezePBP+Cnevv/WgzrJ\nBwvv/sIb6X/MK6WR2JHazQl1cZrd3tOLSfHYJzRx1xET3G54mMk+hKWKxAzz\nqeME0uUWO9oXZAzwaLgZVD7WaE4GIC+fKUB8JG8N6swLhV204wCjlG7uJYvk\ncxG/WQuzlkjgCI9dD0Atfc8bx2/i+SQvwXXyKlPw/FF68Em9S2AwF62wCtUx\nWUPbWJoNFYDlwf/IUW6ac4cEVt3ysF8KlDk+AKvDDt35hzOMeXgKdUZqw2h1\neagYG33G1/jjbEi2ylwIh3FY4TrrpClB6nQC06be7/mzI8Jh3rD5nJCUYGAB\nZeunqSrF69SqqKCEaEskVYaNY4vDT54FcPSaTGzPlmAfsad6a2MzP15cDy7F\n3GjKwqtXtqzt52becaZ2/40ugGcp13T22Xc9GwCgKbjke7VtjsbeE2XBo5WE\nvX9RXgi3A8h2nrCg0tdxA4xz9H4X/jSGc21ec0tZdHFzRcR012GLpgAgulDK\nxCWLCoTZfwL8eUkLDjmpaREuaO7Z/UM22E/TOxx9j9jVoLHEtbsGZEy+HGwM\n6ZqhBjPxolWzozWcdqth1jGbLpInqlR6E2W75fJdE1aZOF1Mct6p9s8dKv2L\n3J+bSKa8gMbzC1D8Y9vk82Jm6ZfRCJPAxWPICMf9GmsfcqdFS35ExO3mwide\nPtwu\r\n=EFGk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"32cff7b459a8aa1e335c6ccc84213cff0f6e66a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7d4ee2996.0","@material/tab":"5.0.0-canary.7d4ee2996.0","@material/base":"5.0.0-canary.7d4ee2996.0","@material/animation":"5.0.0-canary.7d4ee2996.0","@material/feature-targeting":"5.0.0-canary.7d4ee2996.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7d4ee2996.0_1578679062631_0.3526673536603677","host":"s3://npm-registry-packages"}},"5.0.0-canary.981ec9b6f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.981ec9b6f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.981ec9b6f.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":"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":"3569a68329367468ff7fa2c8100aeedde65e3060","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.981ec9b6f.0.tgz","fileCount":48,"integrity":"sha512-ZhwvSBJgz13CqD5U/hnNvoctL5DKgT+F7nNyQIOaicOIeUf6y8wRch5uWUvQrQw8nOqrBiUKWxM8P852w506Pw==","signatures":[{"sig":"MEYCIQCu8/SGn33Bv0N67fUJAvWv1HbRC7UxiY8FYPzcQSnGmwIhAIOVgItctX1o5z0hpGYRg0AQAwAlXHiJk5uNIKBNCR7g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGNBLCRA9TVsSAnZWagAAF54QAIeJZPjEAoiUKaJXZfCB\nJMJxv2B8G/AJGvLaxKIFbuwb1FQOPb1TrhXKgKABdwnh/JRYdl0S5pKx1cnE\nehnWOm27S2jDRUYYdlC8/xGW+ZSEy7uE3EA8FnAH/fqrzeFk3THx+kYeOLTj\nauYTcPFgMcS15sGm0Szr6ktzIhlfBvlQE/Us5qJWB2Cypi8F6oHWueUK12yW\ngKNGIkVo49DXLJ2hkROJ1Y0Gg+A6RH8cldd3y+PmOYj6pziVjQgjvM/JcfNd\nyrWrA/HIG9r592We6cExvKzvKfp+gnVXrdIYwng+jkmlfoEB1zBABPDwjmCZ\n3y4EfmHsJfy7FNXu+OGsbCxokfOTlJqDCHZQ6wFkiKdEh/OHAwlE/N0BPoMo\nn1xjpH+Y2+gfau6FTnLoa285Z3aAQMsK62DbeVjTC/tldCf4WU62IhMUrUXd\n50lVQgH8B5fQZtqZrc/CFK5E7xs+wzjOirqpEmU0BYOuXi1HtapuaEnAEt9Y\nN/RMOmy9ZmRu0ZKzSAWeTxT5SNpPFbpWx+GO6l/YHejdu50nWWzj0lMixOL4\nK7JykxzfRYT4EYX8TDsgrEHxasyqNkMXkrvEuAwRxOgQIrOXzesFf4eBLe7t\n2Nqyb2xKD910/JqYQOzIEUfRGZsyE+wIS/CL9bPznsSDKCIgCt8uBY7zS/LO\n06Ao\r\n=4/RM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e2e9ae33775d14566dd45608f66087b2761d454f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.981ec9b6f.0","@material/tab":"5.0.0-canary.981ec9b6f.0","@material/base":"5.0.0-canary.981ec9b6f.0","@material/animation":"5.0.0-canary.981ec9b6f.0","@material/feature-targeting":"5.0.0-canary.981ec9b6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.981ec9b6f.0_1578684490746_0.1636310419067868","host":"s3://npm-registry-packages"}},"5.0.0-canary.737da83fc.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.737da83fc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.737da83fc.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":"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":"a446006159fbcfb5f47621b48fa30a5918140ba2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.737da83fc.0.tgz","fileCount":48,"integrity":"sha512-aatrSPRXbFLEkNBfskYsHoggRa9LZP+ldhC3484OvheJ8sQoEulchgduQ0m2hPtzzmAFx0NTVuNvDo6CkY3uEA==","signatures":[{"sig":"MEUCIQCVvtXKKSVmVHav5mj9mP1Z8rrg/mdczTQEUbGvEWeGqgIge57xiIDsxqTjIx6XO5h5ZkRLCDKnr2NAUHXE9IjT7qU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeGOpsCRA9TVsSAnZWagAAQBsP/2zO/KmUV2VSCX0b2PS4\nyNmHeIlzaT+QdM7oHF06KPTjS3XotYQYT8yu2oVCmCnNlgapM6V4pO6FCpl0\nlQc/w4+wVuoAUTN24uvZ47qHTLbJ0YajZ4/X2h6MarENJTX4k6X+E3RFmINh\nt9jxXmhfG3UVsPkIygjXOzabCgzIzCkpjTLMvQnOhOpXs02NZfq6NT4LmbZu\njfYLi0NCid5JL+VBTbYxo3ql5rDm2VlZLjRXxZo6cDe0LZnNd9d9s8JXhW6E\nF/dVf0wjin/WRX+MB/mbIo1KR6pQrNEDqgsxj2BMeRF/41DHYMC8lAWPmsRs\nT9c+PdKtw8Vof3fI0uYE4yANs+HXKc2vqUsdIXALwIWC614KXCZz8sb93XLJ\nBhLY58iJn4it72ARKtxZ5Es1wyqEF1l+mOX1ZAkU3uVfjBUAImxAAxZjhcjm\n+Wdmw9HlxJ92QH41d5NLp/KoDAaOaeLI7p1Fu4DQ1+65RB6QwLRTLMgt8uTw\nSBiEXUzIbzG7gPUFmITRlhfGv3/U3XOsy0gdiUHsVUUMBsbxRcDHUJmRk9Sg\nLFPZ5Qgi3GLczMp96pXojXRQJRIjiBBNdy6/+ozDzitVzGkBgTiol/a89TF+\nMladl/mhaBwZ1y4Pj+P7Zfq2Zbp7BqM4Z4ctF9Rrjow5U1Y5hnZTZsfaH90Y\n1bhk\r\n=dZHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3ea8f6e8d81e688483ab007855dce5cba3b72015","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.737da83fc.0","@material/tab":"5.0.0-canary.737da83fc.0","@material/base":"5.0.0-canary.737da83fc.0","@material/animation":"5.0.0-canary.737da83fc.0","@material/feature-targeting":"5.0.0-canary.737da83fc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.737da83fc.0_1578691180223_0.9095396922856493","host":"s3://npm-registry-packages"}},"5.0.0-canary.aca8e6c18.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.aca8e6c18.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.aca8e6c18.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":"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":"d7fb1859156eb912305aa21381dfd35ca487fdd5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.aca8e6c18.0.tgz","fileCount":48,"integrity":"sha512-xKx9/QgI6kIFSppg4V92O1/miUQV79CXK3vTBML7OZxR59G2lcsqManttW7Hy1hNCFL1qJKc1sitLEcVj98BGA==","signatures":[{"sig":"MEQCIBlWnIq5D3swrT/oCa+xmqIDIwZf1lsZ/wwkFBKzzQ6OAiBcic7vBRKMHCKTL90IZlRENLW6LlVuk/gnvgY9dD+jzQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHMYHCRA9TVsSAnZWagAAZOwQAJprYZ0a4rtLFy6w/Qia\nb1+VFO1khfB8Oo2G6/c+RC2985L/RITKLFNcAOFnpAa+3KZsWRIBx4ZMdoDW\nVOVCZdGXFgiFOZ0X5JD9Vuphs/ZDugKrTKAysbM5vQfiwroJuxgVToDYYFlp\neSxcMnT+j2K4XFLC04OuasYbhPXeup/dsO7sDjQBz1Z+gbmTtvgpSyoxaF0Y\njyZ0S0myVv1ywhO75kTnSC9KHjs+CLu/QcOAGVulqXVzHZLUios7h2z9CF4U\nitdJCMuhVnMo3sOAdjghT95mdiZwL3rcNECjS4GwYKk2rB9lnGjzs5WiugTD\nRTkYPFFoEnqcT3p78d3Cnvid8L0ks88+q6aIyqkBVqVjsXY2mSlWvoluYDvW\nv48vbRSIHqr0w8Q7MQCRJkfH4JuE1xuTkD1IMfvHlFrN1oaDdZXY7Tu/MfOf\n2DtlA3epitmheDxkROYm5AVY+fk6kL9NIobms7EMiL74Kz9+odzAZmqBMcJa\nsIQul6Le1Q1f6HDJwIvbsaYe0M0TcgyieJOM0YeFHN0+L2E+KcyIwPTw+AYf\nOHELCtGNb+myDQy/ioB2TJbp/4WPAyYfM29rYyQFOO2E103jUvrT7x/9wmqA\nzPIThA0TYqR+85wBkjOLDchusa27xQ01xnjhLOcQB9uPYuYHfELyrhWt20FZ\nhIkY\r\n=yIzG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"47bc251033c39b1b8f816f8ae77c888c07b20fee","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aca8e6c18.0","@material/tab":"5.0.0-canary.aca8e6c18.0","@material/base":"5.0.0-canary.aca8e6c18.0","@material/animation":"5.0.0-canary.aca8e6c18.0","@material/feature-targeting":"5.0.0-canary.aca8e6c18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.aca8e6c18.0_1578944006906_0.9343231222553858","host":"s3://npm-registry-packages"}},"5.0.0-canary.c38d84e21.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c38d84e21.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c38d84e21.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":"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":"11fa0898caf4936f6178c0bd7fdd3320e63b3951","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c38d84e21.0.tgz","fileCount":48,"integrity":"sha512-lpVApc3dmYXqh9BgzxQraK+JGvBOlWwA0h4XhRa2knjaAaebS9Py6M5GjmI09w8pHESWGB4uZcgbYvcICMy+oA==","signatures":[{"sig":"MEUCIQDhKB9DY0YwX9NSKIEj9TVxyWEcFEBYt/ZYhTaBTfZJLgIgWi5XuIT7ZKDgKpNNcX2J8Z00hFgdothcB+cS7VU99IU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHOvMCRA9TVsSAnZWagAAttwP/1plN6RyDi9eP1hdJBcB\nl0hi+7eBF12VU3kV4Xo9a5pfA4vew6ilL/UhHHi2hQc8siBPgpW+1ExG6A3G\n/S6YPMGBzsxiONc0CIOXMOtTsuSp1yEyg7JwMRp+sSgSDRogbT0EO9ufqq6J\n5tp3LvEH7/PXaeR6AyBFQPtSnlAxj/qACUFRk+D/vXBAEI7BCCozJuT/Gnyo\nQ03NEFAkglOLKKCcPqX+z31Gr2CCdw0q0EB9sha+wKFV4j0yZTVh+iSBuMFv\nLy3BPziMyEzjI2OczNlXjhjbjBRFUUWuDj44UQdZAKlWZhlW8LHGQiOmK80B\ny4aAnSYdv+3HHBVzfzSdKLEbwXvpZjT4vvvX6ML3IUJoGDez7z/rEKXNLMvX\nIsKStCG5cl7Hx/5BjAReFcKTWPNOGnbOHlskESP7uyTKMXG1o+28T0uM8tgg\nFHfnwQ6VGrj0ZMdzcCShFsE3v0Mw4S9IuxUUFRaqHJF0RR9vC692QZc1fhOu\nVwOtMw3qdLhjbfSRjmGoqybHj3Gw+D4I3bfm/rjKJLHRVo8npsqz0AGmQQ8g\nXH3B2+qRENtWJKa0Ahs9gn0AVo27xMzaeF2CxfFOErPkDkxI8oKdkB1+bovq\nQzxH8Tm+47Wb7IzVTJjlPxbbZMm3iAgsadkZ2hHte8+/sRY4PeP9t4QWmSvk\nTbom\r\n=c16t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f283cfd55cbe9b1863cb96e98011fe4badbb1fd0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c38d84e21.0","@material/tab":"5.0.0-canary.c38d84e21.0","@material/base":"5.0.0-canary.c38d84e21.0","@material/animation":"5.0.0-canary.c38d84e21.0","@material/feature-targeting":"5.0.0-canary.c38d84e21.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c38d84e21.0_1578953676181_0.14976655708888043","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4db5fbad.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a4db5fbad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a4db5fbad.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":"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":"95230d96defbd72b97fc536387821664e03b2275","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a4db5fbad.0.tgz","fileCount":48,"integrity":"sha512-65PF6Sg77nuAHT8PwcknZCZ611sHSkAcy0gnVonMLMQPh9gDP7p07/iiA5En84mxNhJQ/Yclx9R/Ez7ztDg90w==","signatures":[{"sig":"MEUCIFufakjf9NwPff+1SS6FAXmhMdos29rtFQ0NNVo+q8VxAiEAivt6iXnBK37O3h6YiMdtt9Lz/skPSqR1bAPCrKl8dAw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":310592,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHSRpCRA9TVsSAnZWagAABGYP/RbBvDsUNlThoUGXzHe0\n4fMpSJk3LaKr0yCU0yy4iW9LB4geg+01aiVqQWs7sA28pb7+/9B0gYeELivW\niE10ulnbN6bbXC/ZIyb77QyDFAiZ8TnI+i/0tkhS+Y9TjkHFT/mikkIhvbmp\n3WXSI4ggJlLTrDGS+fdUNeADL9t/oPGdbe9NxMV5xYjiS7ZraT0QPczoFduj\nN95TeoeKLzT49XNRb+3H+rLncTkFHb7EfVb9bsKsw6+rvTIzvMUwC6XSFUUg\nAYaPJNU42G83LlCdKgp5N5TX3Mq/yugEJ+gn7MNhl4jfflLmXRYsVJKzV/u0\nutuQ6qMGO2/IObolUpxuWpG6V8cyX9sH2fqPtiLBywxa3dozK2CtKbEcAqla\nuUUWX2C1geBHrOVvFnqlAtKjOw6BTdd9pf6IN1khnKZZs/6mibqyXSV7Mwk9\nQS7I0ZLNhC5KXFB2sL7JpY2jlEUHtRNjHVrXsBZpOrZ/ncOMiiUOBD2+0Feh\nYlMM4PZXtUlgiVo5R08AuLjacNVH8sOFQ3Iqp9LiQQhSx7/c5K4aVQlysSmz\nqYwIuKy3tAuV5DiuvrMy/qOhW+G1dFjQu5SC0y2HgkR1pPgR/yMBcBg4jQQJ\nlBzYa9YLaQmLgtXZYCHliZyyN7UsqQT0qc0heVxxlAmx519DyrGf9skPcD+M\nU/st\r\n=ohHr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bb5fe141944679686f178779345a5880a89943a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4db5fbad.0","@material/tab":"5.0.0-canary.a4db5fbad.0","@material/base":"5.0.0-canary.a4db5fbad.0","@material/animation":"5.0.0-canary.a4db5fbad.0","@material/feature-targeting":"5.0.0-canary.a4db5fbad.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a4db5fbad.0_1578968169013_0.008124578845456032","host":"s3://npm-registry-packages"}},"5.0.0-canary.faa9af310.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.faa9af310.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.faa9af310.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":"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":"e4ca151e6d36b10cd04f8bf01d799c77e0f5c166","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.faa9af310.0.tgz","fileCount":51,"integrity":"sha512-8GqUu5JX3u5D1GEyYPTrXH6u7mXzg/4rav9GdJxsJnOyt8Fj02lMTB/0nozwTMrCDNio36sT1h645tVElPBcBA==","signatures":[{"sig":"MEYCIQDl0o2Y7vZEvnCsTafG5uXq/+UvsvTXOx96hy2W3pgnGQIhAJQi1eMEO41+lbWXzk5oy4k59vqBdLCMYlqKXccJ+90w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHfI4CRA9TVsSAnZWagAAMGIP/27B9aUeNgETijEPPhxo\nWFYyaFncZAwGTw6HF65cGvv4j2UerHuWHRHkDGaTUeOVg6tAIhk3s44B/MCa\nX86ZQAjnuTibTfw2lNOcg8v2iL7joOXWVGo4VyyHeK6tlPjt965rkLGq91Mg\ncMTn9cCo3pVi0o6ps0tkwQd9j0tlRt2P7KckVYkj7GWfMBcDQJHLBbIfrU+Z\nMg9Y7LBE4gTyeFlwDYumX4dxN9msrxZikpPUJLWx/cwf5Z4R+V0dRFBU1/fU\nJ70WxeF9PwCMGGn0KGG4fNhS7QIH5i16r83y5ODRm2Bqh73wb+Lltjq6iTss\nfGKOgfEcmORvUzlFz4I2WWmdb9QBEtzM9Dc5bBUR71Kr7t9B2L/F6BnQt+mb\n7UWouUdp9W1lC6Du3xw7IM4Y2i0ZjB252hcng4sFBbYD8OOrx3O91uc5RDdK\nXpN2WEIUTQvJQ8QeaMud/979rmVvLN3CP5h7wpyk1n6KgLCBIN95dzv8FN1g\n3ANU6lm7hO0j3NWZCCdYIASg/6GqIBAjaec2nVpRHybjHoKTBiBFDRIC8e9p\nH3wP8eIQBx4AoRSDNzZErwIDyLlWBJJdr5sHkJJPUWCnHWSzGeMc5Fng/sVU\naArREVXgoSazy2ymu65HsKUYcHmDKw0UobEDK9pnyNqYn+SbkCwQb1Sf7ZZS\nEmbd\r\n=E387\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ee374355df19027c59f24bdaa809bc18183453df","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.faa9af310.0","@material/tab":"5.0.0-canary.faa9af310.0","@material/base":"5.0.0-canary.faa9af310.0","@material/animation":"5.0.0-canary.faa9af310.0","@material/feature-targeting":"5.0.0-canary.faa9af310.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.faa9af310.0_1579020856261_0.7531563265197203","host":"s3://npm-registry-packages"}},"5.0.0-canary.60354c577.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.60354c577.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.60354c577.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":"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":"9132accde1636fad18d661a40019dcdef64027b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.60354c577.0.tgz","fileCount":51,"integrity":"sha512-4YSetfp0I2QXxZ85rBgv5n3nACKFUruz96pR9Vb4kZLPIXDiWOUd0pPftKKxlfj203G8/fl73qh6+ue5ti1jBQ==","signatures":[{"sig":"MEQCIBzTFxHdERM5r7hN8I/CxcPuI0jbQ+vG7saQgm0oFvHiAiAs9OlnnMspYpJzdnbslyXLxGvbbX5Yl1sPGwe+vm2qUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHkTrCRA9TVsSAnZWagAAx3gQAJ3/2KFWZ1wqMppwobK6\nhzZM0Ss3P8Wnb0IOv/SLejR7eDJUpg2XTcyMnQRD8ZETXW3mHZ/p90xM54Ir\npXTxZnHDLikzVe9kkLDIL41ijnrg5urIQsjat+Tz0WADazL2FkJn7Dilb5SZ\nCqg0cTUb3m4SJtHgqhMtwmrxJ3tPM3J+nx0rMvdQkQKWCnjHeF+oO+lLh63y\naUCjyzSoYtfIcebFT6hP8l4moQS5ZSXwdq2qweJ8I3E37KytqqTIaHv5jsQI\nSiHWorsaklXpSozmVZZX5S0qM4pBfsGJyZxQQqSeaXrR+3nhEEOJD8zx1LuH\nzlNBBSYCLp+m5KjnZCojjR6TAs5yqAgk011x8lTexDHYqLRgNJP5NGeaqbMJ\n4y40bDXB8upz3q2ImbBRd6Rzo5Gv2SKdMvdkPxqDc5JAm4kbpJ0kauHoLKlC\nAXBJHqRM2YstJbQ6R2gzVR0COIGPZrpBpmh1SRmamR7KyHfWl0UW1gfjuPaM\n/QtTzmZJrgyZWaZMEmI9yCvUrFaygyWZ3+el/PRphlO20tWQOq4sPi2NvFK+\nzOsvEKYB0F0zix3jX/C/jpOUL77qfnoGVDRGyK48FAilpQGpTW1o1Xrjgmku\nJHEasDdk6f8KKsz7KA4ZwqK62E7PfjQJ510X2I+rzjz/BtG0glVZdNVeSg9A\nJ9Yf\r\n=Qs0a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d9f4420da446050561084fce698a543b0dc6b543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.60354c577.0","@material/tab":"5.0.0-canary.60354c577.0","@material/base":"5.0.0-canary.60354c577.0","@material/animation":"5.0.0-canary.60354c577.0","@material/feature-targeting":"5.0.0-canary.60354c577.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.60354c577.0_1579042027163_0.9386248045104921","host":"s3://npm-registry-packages"}},"5.0.0-canary.d07c78daa.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d07c78daa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d07c78daa.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":"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":"c7b97afa6165eae1b24aad91adca0b54889f974b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d07c78daa.0.tgz","fileCount":51,"integrity":"sha512-8ZzrubNW6t2QHhmkTm+h8ojteE0VO06j+4CamyUMdUcUtHc6eCOJOuwdyBScboI7MydCOFacIM1+8OgodwZz2A==","signatures":[{"sig":"MEUCIC1bCNcBAQM0kBj1JsAvbMe8tijqErXJIboEPNfZ7FDyAiEAtaVowfYaEpDo7Glehddc3WRQgyV4vLCNWnRmlp2Jh2U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHlFECRA9TVsSAnZWagAA3j0P/Rq21qQufis26exdjx3q\nWUd0Q31BvQw6UZit6TxWKH7S+/ynoqyF97QpXsYM2PRWiIotDkPGHmPTzVUb\n5xycnFa9i7yYgs91mzFUbpdD82qpaFj2OM5yr8+vDg8flzTyHgtKvYZAy4az\nBjlluGQg0Y23D6zKLcN/wFAw2El9Vh/Zb95NBPv9dOy7XeV0ZE7bcgXfnjlO\nDq3i7namETUgi9hbJMbOJMejWQq4csUOCceXlvQ/loIN+fh1cbaxxFPrso2J\n14+E/tg0rA/o7/cEz7uODWkwJhpiOYOm1Jv9Br1T6bym0qREfVDfJeFERII1\nDZPpyHhiz1qoa8hK2J5JOjpEHj1fZUUN1acH9VqDaYWCcVPok6Ugd/t6U3Ac\nlYM2XqogS9oqMn1q5sB+2/ptuXl02YaLV+i1lcD/30OGs7QddqyVAqP4Glz7\n5dZ8CF/Jid5mt2wmXZwGXA8p9xsdnzRZNyX1ezeG1yyKS93Il8tpeLQl5EBq\naTJR4HnWjEEruPCN8OVXMpriIlP4sy4xknb4GmZWbA6FTvoxMI/e771gEQW5\nM2JA0JOCyDdubeJMA17Mjon11PsWqhepcZQFGHUjjatRNLkSbGlHD70tNvOR\n3ESPlHzAktjNddGlZXxCgb2knpD/c4FDPwhoPaN3M2b6LBvgFEyN9S1f0qQH\nFtdI\r\n=0M/0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3657a12b1a5b9b1742b2749f6991e06a32416314","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d07c78daa.0","@material/tab":"5.0.0-canary.d07c78daa.0","@material/base":"5.0.0-canary.d07c78daa.0","@material/animation":"5.0.0-canary.d07c78daa.0","@material/feature-targeting":"5.0.0-canary.d07c78daa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d07c78daa.0_1579045188073_0.0871759320602179","host":"s3://npm-registry-packages"}},"5.0.0-canary.8ddd5c6dc.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.8ddd5c6dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.8ddd5c6dc.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":"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":"8a3ab0f86c368a6ee73c5d7194845dfb92dbf9ad","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.8ddd5c6dc.0.tgz","fileCount":51,"integrity":"sha512-Bep8+Y1/oY2e/xbQTsIAAsbou3s7WRryP2w6QYZBZVyi19c4O+muwYmqrmUELnyHJtt+dIC0ZMEGlwvDHcNubA==","signatures":[{"sig":"MEUCIAXZQ9MbSi8G4COUHF0emwF4Q5BkOu796bUaUKhxz4tCAiEAtoQX6DRRW92/jBt7KjhFJKMT6Hq7rimo+QSajt7io3M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeHm5cCRA9TVsSAnZWagAAgbYP/RN610TxK2mbDCEFfTI6\nntkoRjIQnL1EsD/dBqqIWmwilr/Bt6Hq7mKtkv4rQ3TpbMJhRYvNfdaM6TK0\nynzdJBGQyGbyInzG4hqBPY7pngnTIf6sYFaYQjWq4ea4AoA2ZF/KaTpxhJfQ\nns1iAP77UIrfpX3DasfGkuMxEOkeiZrxwNrMCVXFOJTry3+RJixkJvrmwT/5\nc7Nb7tVut7lOijJNbRBUhk/5EvykuI6MG0diRHpyhqAKCUH+VB1OxqlO8hco\nHgU/JBtLmP7L+t3nMhkkJgq58BfnfliOo9gwvpNJ9VAQCiNUPV0Hi3t1MivN\nsLTxEQHz5SP08xA4XTiRtEzzZU/mP2j2Eef70sXC1dabaElKL/E40WUpK67S\n5rhSR86cSmkwTE3lvPQUn/eVM/v82JkTKOnzN3qRLebRx4l9m+nfYNrU720O\n2rgJUOroNU4n3bBPrtmyaL8BItw49hbKjYet/3Pn7yrVNBna5cpuz1wY5K+D\nMCeW+1zrxP8k1lDg7AlRYm2ogZplqCWvzKOobzpNwzrYk8IOX3d4h/hDkr+Q\nfY/Z2QIy9il8zrd/hq6hXJqVIc1p7f+VYLifE1c+RJaJO7i0OYYJA6nlw43C\niynYugbZ2o0Gyv0+7fcLo14GHMdQ0QPOjQzjBa9ZOs0sGS2g+5JmSxW3RL8Y\nspuJ\r\n=2swm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"939fade350708e559f107b53d2ab9d27d6f84f1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8ddd5c6dc.0","@material/tab":"5.0.0-canary.8ddd5c6dc.0","@material/base":"5.0.0-canary.8ddd5c6dc.0","@material/animation":"5.0.0-canary.8ddd5c6dc.0","@material/feature-targeting":"5.0.0-canary.8ddd5c6dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.8ddd5c6dc.0_1579052636347_0.25681516447232","host":"s3://npm-registry-packages"}},"5.0.0-canary.a9511d870.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a9511d870.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a9511d870.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":"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":"3c5f85fa14c369ac4ee6d9c7034dd1e32cd62a33","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a9511d870.0.tgz","fileCount":51,"integrity":"sha512-QZocjL0K+7e/B3kR+J64EksUbRvijBK3Dpo8hvJQfBdGpLSydYI03jT6qAqyCV0UNvuuZ1TLIyL6JbTm/NYEJg==","signatures":[{"sig":"MEYCIQDTsyFMBnmJQ1MRvoSRzRZIrsHg/lOBRMj7No0QTUYgHQIhAMc2tiChFK2d3esr+Ed1vi469M1Mo3oPsPFlvaFY7juy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH2PRCRA9TVsSAnZWagAArAQP/13Ys8LDiVNHcaL+7xVQ\negYl4BbQ/1PN8uEEJGhMle0kyrgus5AkvLtJohHhpEtDQYStW3NJFkEB2eho\ndyi5OH3MU4iGc6sCW0LhLcyRX0x9US/EjTAoKkdKdnrZSLDJoPgN8lUxoIUz\nvg9/uEKdq5e66/vif+yqb8I7WpkbEq6iqKQF04TRgiRYv0dJNgmOauE+/Ix7\nv3F/IkMTyqJ6i5SalgjxknYe8QVBEeS7lqqDHBRs/Yr4d5MTsgq9G8hk1oQj\nObgeu4B2pqSoFFnv3E05xi0tZzgL6kQZ09zFNEiZ2m4LJ2WQl/2v63p9p8FD\nhqIED50sGXI1M2F4cczFpFsdDaS4lHTZ8IhcUp6yC7yCFrcAXkcaG52qazjk\nVZs7PbVjZm2SAAtvkdShHyH95eAvwF9tCBjQfPTd7ZDPLs2kcdaBFQ1mVd/X\n6rlK2fLvX+ShSY3KIfEAhDn9+EXy4YYgBbMFLy+9PwQjSEwu0wFBPa9a+51w\nP8GVoHSOwnrjkgXcCENfPvjamYw47UKpGmQIgczBH6XK00EGEyNgpdpiRkab\nh53EZ63dDWvZtDMmb91v8ZI/OruFBlH3E5F47uLg6ZKjAQono8HHW3MR2RFO\n3MfYpbNrveDtUBpxfdHG/VOjzRFf5g8159gayWEsXuWSFW8yKmutrOq4xQLD\nGfbm\r\n=549l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"69b4f620220b7e580f5273bb82be01e5990b894a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a9511d870.0","@material/tab":"5.0.0-canary.a9511d870.0","@material/base":"5.0.0-canary.a9511d870.0","@material/animation":"5.0.0-canary.a9511d870.0","@material/feature-targeting":"5.0.0-canary.a9511d870.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a9511d870.0_1579115473179_0.7469451579542319","host":"s3://npm-registry-packages"}},"5.0.0-canary.7c8583c4c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7c8583c4c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7c8583c4c.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":"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":"1700c022c3244379bc85a4bd7c4e1f507fc1979c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7c8583c4c.0.tgz","fileCount":51,"integrity":"sha512-pAwGyZCg0i7nVzwL9Jurogwe5ciz3e5iBSXUzLohBUDiIljkdt96WIcOGIXI/NupnV+dnn7xyQUqECG52cXvzw==","signatures":[{"sig":"MEYCIQCoN+HGZz4F2yS7wCFeqxKNibtDqDjOFQN6Kcqp3WlvnwIhAOI475d9YtRTIQUNBQH3hqJdsO7j21V5hDaTM9TmznpU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bbCRA9TVsSAnZWagAASVAQAJ3QS8m+/TEQYPJ4+uHK\nRz3UhYNveAw/s5BO7l8qtt1arOYLN+bq/1gAlNRa4+JKX24ascnsdi8uD6X3\ny1J79st/ID8ObtVLZwsWbNSDzdTyW9Q32H//C+/isq1r+BWu8L0l7JYsWTkV\nRjRSq1m71SDCkPAOPQhDKMMuOfvBiRWj8wNctD+a2und5fHamBA+V/FJxWR+\nsdN0KgFT03OBMKp5r8GQ/X8oyJ31y4ylyhrU9tGNJ0Taf9Wcztuj9oehRSYY\nKQoltqhvtpI1tLAu7iZfxWeyl4yqPYw3YFiJ1tjoB/rxDwB1a36zxOEFt3h0\ndaVPLEywocBNUdmvlXpUCSJ7ILRvhcsME6XJgven3GPrsXgpy5wuPH1BU8pP\nZXQIumXXNorA7ie/jNuMn4Hcwl0HgICpwhml6w9zpfBfGWaKuYUdDLu4y6KS\nMXyaWPMjIebCrBGX1rXSL3/xpqFMvAIm3kypmdbUbpJ0oXSMhnOfgPaGhd0K\nyzrTJWe1wSG+hTHymCfEtUrsHUzWJGk9pF/2h1B/2IzWU/B4moWv0LrTbt9g\nHNZMOWTx4cEcQEsGU+sVt/y7XbOS81YBEqo4bH292OFTLLYbt2724GdYWrlh\n5BALoHOe+v8io0muozrNnUm0lEE0WxotRvyG9AnlwYvlmo80SoMZk3uYcd+S\nRj3R\r\n=eUtQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d89f2d9150d02c17271eeeb692f29f456fed4c1e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7c8583c4c.0","@material/tab":"5.0.0-canary.7c8583c4c.0","@material/base":"5.0.0-canary.7c8583c4c.0","@material/animation":"5.0.0-canary.7c8583c4c.0","@material/feature-targeting":"5.0.0-canary.7c8583c4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7c8583c4c.0_1579128539486_0.20572719669485484","host":"s3://npm-registry-packages"}},"5.0.0-canary.5d4b82bac.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5d4b82bac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5d4b82bac.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":"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":"96be6c94ac764c75521649a1abfb734180cf0b69","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5d4b82bac.0.tgz","fileCount":51,"integrity":"sha512-kssB1OuY0lGWURLo7aalQqnB94RNkum10xyhypMTNd66Hob3JodpkgSg2BPrOcguM23y2FIe3g5gYcZKg+XqBg==","signatures":[{"sig":"MEQCIAPjLflrlGf1w4CHALpLPvSVIq1xxEfO4uNfXY20GJk4AiB45/Qc4GWWxSGKCBVjjIWa3aBLpyzZ3yyzuqujolHNTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeH5bsCRA9TVsSAnZWagAAdL0P/jqceBVtjJebjXDbfZ3j\nK2FfT3s+jnwYXtEzr7nFyMyM3Hus9qs/9uQdsD0AGOv4txXeHKzHO2SgUpRm\nL4SsCFBmFIwweMDrGjqswRot9DvOVX/uaVA3h9Xq7vHyusKFPeoKk0LIMciG\nBw74xHdIQIx1bcTBuos5i/Aa2D5CeLQLaGxNNcmEvSKdSIAeB5PDzgeGBZY+\ng7YIzuquqi2XAFfeehOneEHbNFrVNcqAGUcRqOFWoP82RUwFpB7r6imx8cLx\nJqQ8O3cmdrIblB42vC6nrvTSF1+mwuzU/sGK6kkosgeCaN46heJtoxDP17Nz\nX1lTkjkgAlEYB3CWYahxWO9M017hQc4GqIAcrTMJfOyKikevoRgddlizjsRu\nxFB46EBpl7XA+iRTRQoE91K318tCvqwfiw93AGBOCjGN7tl2uKlewKTmcfiz\ngN+Y3hrocEIOB/2uOY2SOf8MEXZetxTUfn7kC2uVnrv2kMBFjvGEGkZ3ytNP\nfrSfbRm+q/UwxfFHDZ6o03IAlIztqmkIJK2iOBpv9ql2IDDBgmL/BqL/3g27\npINRb47URfOGjLnsZdhTN6EgxTnupphNQYKd45M+wYZv9N+aZZqhdRUi3ptu\n2jAVK0txkwAtdx7q9Xh8XWL5sq/mEedZ2JdEowWSWsQ/Y+ad0vB3OC+lDnb0\nz4cI\r\n=ocp9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e679f52745cb7c74219ab22354c6da39a642ecfb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5d4b82bac.0","@material/tab":"5.0.0-canary.5d4b82bac.0","@material/base":"5.0.0-canary.5d4b82bac.0","@material/animation":"5.0.0-canary.5d4b82bac.0","@material/feature-targeting":"5.0.0-canary.5d4b82bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5d4b82bac.0_1579128556580_0.6416791426586468","host":"s3://npm-registry-packages"}},"5.0.0-canary.57d0186e4.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.57d0186e4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.57d0186e4.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":"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":"1100636463833167fbb4ec2a661e21348474d707","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.57d0186e4.0.tgz","fileCount":51,"integrity":"sha512-IALJDNG8Wi2IEGZ75IvrawqZV2QJ/hYO9SxSlCQxCLe0hgoU5xFqm3fKWw0VvcECpsYsId2vddwygBIHXhJ+mQ==","signatures":[{"sig":"MEUCIHRljPp59GFnJ3PFp4qzJJyfzE9NRjJu8OHqAh0ch9QMAiEAqUhiT8jiEN6oKs2NT1mH7adrT6EHOUbo7QP8xUX8ly8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKjtCRA9TVsSAnZWagAANBcP/RnrXLLcwxFlAKMYQl0H\nbpNp54J8C+Z9o/pDfQg6mtd6IXxtVsiqrCF2zKq7L+zaQL/KW9eh5mLZoh0C\nUlJSQ7AbvSes1dbtmGAgbdVY49EAmBOjb2dx+81rBQB28TUofNFzGMXL/fro\nyopFGwzd8AznX3FHIwDISb+KT0XCm7MuHhHzC3M3E56s4rZpIT7+WrTeCAOF\nehaAmnQCMXVWl3Zjyuo0QIwzx8Wu4+Cdma1YjoYlOCMZcndXNsnO46p6sAB4\nCgyYd2dj7GYybPDNgrXxpnBnnb12xpaGCXOJFmZEZCS88SAX6LAg6IZcEFKu\nf0eXhsKGtBOKCCKyr0VyXlaDRT/ICuoG9JspAytqlkJJghZjUl/vdXLw+yW5\n96jMIiqoNPqkCZIZ99NLQJzasQCOHFo5pNSVdd026JVDe1ujt44/ce0GYEGK\njc4bSzcnTqsNAzo95wyjcmiuY8Kaxo5KbbZvTkhUVWPOC+4M2bUx63qTLdvU\n+Vh9PRLNpM/S7+UHCxMpNjbjUUX0iYoyZwgMlYaX4d+3w20unPjjnHyeKpje\n0CnpnZ51l/N7EjkTMW69E2pR5dsb9ETFkiGgLyv/H3M/DD/0j1hwDDO1Qkpu\n/AiudNB7kAmoApmeXWcPwSfNgDbO2a7K0QhmbfcC0gJ+kbMCpIrgN0xS8pTU\nsCi6\r\n=q+np\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d0058bff117ed84df93c0a71b3aa8c8d6e34cb6d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.57d0186e4.0","@material/tab":"5.0.0-canary.57d0186e4.0","@material/base":"5.0.0-canary.57d0186e4.0","@material/animation":"5.0.0-canary.57d0186e4.0","@material/feature-targeting":"5.0.0-canary.57d0186e4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.57d0186e4.0_1579198700912_0.9594165678894628","host":"s3://npm-registry-packages"}},"5.0.0-canary.071a6ab70.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.071a6ab70.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.071a6ab70.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":"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":"8fde813902fea570f81e087131cb0ce373458a3b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.071a6ab70.0.tgz","fileCount":51,"integrity":"sha512-8sS+LQiMM8ZRc+xgL8dp+N7zr2spiUdXBXnkhZlJ5f2DGDOrdK1OxEs2chp3g39puJgFBCmC8PGoCU2ZJQwGJw==","signatures":[{"sig":"MEYCIQCJWBb4Kveod1f8N/6rBrSl6vBIp3E286LxyMgcymdDygIhAKC7lDRbK636DAyoxZRd4kwioQSZoiYMcXrNxo0++HUM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIKp3CRA9TVsSAnZWagAACl8P/0avpTC6QmAIChWruIn4\nak/orruYq/E0mCGLUlnRkEYJL32VwrZ/UmRRaOcoEfThtpFA9Th4qrZb18TP\nRbcOJxi8BzmhMiMfOvAj69mUQsaGvq1Y4qQB6j/A46E0tsYwr6xVbZuQkVIO\n+AhoXL5mX7aB25PDqwUEIkBVG8+RsadtJNhZBmoKpk6JSMQbiEyvOvd/cVae\nyT6g0247hpfe7g9FrvTgFZ2ovMQIWBbFsqKFRFz9XIDy086qN1W3s1lqR/iP\nTpBYW8gJ9r6HBQBmjaoxb6wr7KeA0EvOnn/twHd/nLxzM6JbftH4AbYzNwqi\n5RFsSus8hTb4Ge09aN9h5fZPuiyZBJktJtRVXJN30bNTfJqiy7ZAdAukeZzd\nR3Bh4BCTsRXxjsdZqVaR/nFaHboAO3wa24TX5tbvjFaXx5pRhoja7r5Wy0DD\nPctqj1KFuh4CfjSc+Qzyqm0E+NReIjgHpgf5Sj++q7a7mQxtBZra15H+Pjkb\nzXu/dKVefzordNFFUsoAHhlhAbUOHL9xEozbX4HpLr09+Vn2WZ9g1S8HOb8R\njCfDZuGQOjLr2L7nBi1WBF7Rr3tvnU2OlWHeAZ27YPR1xADb3iu4LEvlfFGT\ncpNLWl5S9w6VvTz3+kEVY9MpDge9T9dBVyDjc1zr7Upeoh5Jtbr8FkVOdKpC\n/sG8\r\n=Nb1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"40ae26c99d00481950066e41e33aac0545186659","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.071a6ab70.0","@material/tab":"5.0.0-canary.071a6ab70.0","@material/base":"5.0.0-canary.071a6ab70.0","@material/animation":"5.0.0-canary.071a6ab70.0","@material/feature-targeting":"5.0.0-canary.071a6ab70.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.071a6ab70.0_1579199095285_0.6733980425116257","host":"s3://npm-registry-packages"}},"5.0.0-canary.22e0cb618.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.22e0cb618.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.22e0cb618.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":"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":"fa30f88dc118f3571c84af555a5013670f7be176","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.22e0cb618.0.tgz","fileCount":51,"integrity":"sha512-GTol8RMeKHhdvLGB91I2YJs94HcaXuXyLWAQhOym2a5USxxxvTJrgJ9PVj1r1rkl0oxvdCZ4AglJ5icRr6qUbg==","signatures":[{"sig":"MEQCIHHFiyKAuku76QAr128Jk1v459f1eyzpK7ohtTCEpRpBAiABpA8rBQ0CqDDOk5U3UIcgqoaIQ8h3P9Nc5Dnc2nokSA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIK/YCRA9TVsSAnZWagAA7jQP/iVN2a2oq+R09h2JSldh\n/GAZZz8oPKXoFFv6px9jGgDqnaTVwS7WPnUNWmCbHp7rmf40adWPRC5EnGQu\nHR9QHly0XCfpXrfkkxq7w1C+G/HExMxjYecplLG2bQFdNGhvhaRShJoagUmA\nk26776iNM+BxfXMvFk2QMlSn7ZcsWNZ1vLtm2/DYxyY3Q0e80p4klwsdTGb3\nGsUxFzotaRA9zj4Tr1Xqnfx2/Yya7jbZKrG/kGalHG1GdH3xbXBQ11dbTEgN\nbuEUe4jsSDNWsR3xr4QRY0nrmtkzJQ1+WBMjwmlGkJ9J+vZQlKzzewwO/ljb\n3OGaIK/svsYYhfWiRgml4MFXS2R4qu2HOV5ENgTiND7bK2LjJSLWjHPs4CUC\nfdC390dAWAyYuTTqS2PF1s+KHEceSy310YTCpo2YlVsm6mWRcIQIwfP5ZA5L\nIbtsI2M14L6krBNj4JdkAr6ei5XteMOpg6GhkyU6SYLwQmw8yvZApUozmVJZ\njT80UnqZ6Xj0yy5EcUrfyILK4p4raEQZtJxvF/Ut7dWZlOJep+HpiuZ072YJ\n0fmRTSkms8eiaiG/52UNhji/zw/m3JIjaUFCxcAaJcbAE9CyVRPALOrTamSt\n38w/D1icF3Z3sADmU+X6cDXXfF+RkuGITah+kZnJoaPemEe2LvyIMC+6vnDT\ncJov\r\n=+ifN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a2ebae5c07da66b94270b07b137673cf19d6d344","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.22e0cb618.0","@material/tab":"5.0.0-canary.22e0cb618.0","@material/base":"5.0.0-canary.22e0cb618.0","@material/animation":"5.0.0-canary.22e0cb618.0","@material/feature-targeting":"5.0.0-canary.22e0cb618.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.22e0cb618.0_1579200471742_0.7840696862355576","host":"s3://npm-registry-packages"}},"5.0.0-canary.f16f15b8f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f16f15b8f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f16f15b8f.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":"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":"f583325216144a611d891f40786fdc66265e3ca2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f16f15b8f.0.tgz","fileCount":51,"integrity":"sha512-WVcGDZkujhKmbQSTiwFuuFRVTpWsE8b14JZ1vLgLg5uytZiJc8n7Arsu16rNepSx5lg1VOC9HEuJFZgq/YioUg==","signatures":[{"sig":"MEYCIQD+uS5bznuJuAH0mwUwjo/2gNsGhNIvqt2oJz0dF52SagIhALcYk3BVk2mM4mvuRKzXFSCFoxlZjAHyIumvWWUYV5sD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIPrpCRA9TVsSAnZWagAAtdcP/A7OyMoiAhxmEs8+qbgA\n2BnbUJmS98tGGUNkPdrydw6NKVaWX2+Q8hPv+yAkghAGabgMH3prGvQvLfNc\nyRdDXWHPn0FTQeYVexSGuPbo1IttFTIMH/VqNkj+X4y0DzLTezlCClNzS1uj\noFEloZbyVnDLyS2U1Guhtbs8fPS6QZT3oaTQYkK8+HOt9/1X0OB8J8BtrA0/\nIlIhYke93numzu3SXXjy+KisIqQYZFrCOvkv2oz2v155syJ5c6FBIC6kMRsr\nhJWUO/l6BlHJcP/3IddayqNFskC1fGg3JwKbDfGmVA8Kg1fl6sVYqy9YIYru\nTvVKaP6ka7PTTmbMFAIzzoK5sG5nPHeKJuTr2v1Mm8XDZctfTgCt14bja2JV\nZvR5VKnMPKcGupqXIfODwnFCFjuHIU/3AXktmcraRUFqQ9vBrQH9Qhlo5SiY\np02u4sxagv3qBvm3DbiMwxJcY1lVF5ifad4Hnf5jexIKzOHM1W3lH1vwS3Sn\ngkIflHWbwLDTPcJhhMD8mhh1IkqE2RCHYHm0OU3N5Pp4OlMD0ub7xhclcLOt\nnJLVU+qlntx/xTb4Wz9d2IJ5eRbaVnysog1/a8uTgE/lEQQ8JFA6OkCGwx0o\nYUYH7afmAcDhDxKg+DvnCc4lhqJGmaTQU5EpuRHh6+y8p8E7CJW98fr3+nX1\nvglX\r\n=JZG+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"edeb2cce6b325b416aeba9bc6f4598eb518f8b24","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f16f15b8f.0","@material/tab":"5.0.0-canary.f16f15b8f.0","@material/base":"5.0.0-canary.f16f15b8f.0","@material/animation":"5.0.0-canary.f16f15b8f.0","@material/feature-targeting":"5.0.0-canary.f16f15b8f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f16f15b8f.0_1579219688871_0.2288038940785957","host":"s3://npm-registry-packages"}},"5.0.0-canary.aa8e43e9a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.aa8e43e9a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.aa8e43e9a.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":"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":"88f894873557209d2ca1e08c1dfd8a94b8ca837a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.aa8e43e9a.0.tgz","fileCount":51,"integrity":"sha512-xxD5vQTGxJ0jRKw8u53b0Ec/A4pyh53f5aorSMNou+XTS1HSR0kvA94qyF57wTM1kaV/GgpOk2rwa1uRb9Aelg==","signatures":[{"sig":"MEQCIDrFFWt8jb4HvdF0G6AEym/VVFolUVkeVZHpn7eWTWkjAiBGbqcFBlJnZeOJ/DuszLO/bO1WPKnsSO8iX8Bw1fSQGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQHWCRA9TVsSAnZWagAAv4sP/0WiHIi1yds+jt0RTdBP\nk8lhNla6zGJLoN8YgCLUfPDy3hujUllIwuKA1syoEaiqzPgawNyJE5ELSe8s\ni6Cz2nvcEcwA5yHutgruxusXg09Qjr5E8ug0Ne93HwOJAmAKWjPrMbujH6Eg\nUx9ZZygturahRkaqLvs4nWaw4A5j3eqoDpgIPuUbUbnQYIVxEQsKtagj9Md1\nb0TWaFYewqXvxoWZdKkdzDDise31lIVXU6Ax5c8cYd1kt0wEGRCCQ3gYuFiL\n2Ud33VCCPH2EoVNHYhJJtAOtS6sfYuTHbMs4x9+COcKWwVIAqCCNO0zaVpy2\nTWvAh+A2GJ48xXZxK0m/KVzV1KBda0EMm1Qr3J+/1iZdHmn4eFiacxyNYTBU\nAJN6usLgnkqQ12KeQ8WUtOs+75DwlC79t+fny7pyysdKeYfsMBzTrK1Z0i+r\ndCCRyuyqQgPqk6DEKK4OKMdsc7STwk/oMmA9JU/E8TWjHjRTh7BdCUTVXqm/\nR8s2v1HKTFh30aUA/B8yoNCkh5+1yfgUJDdydf8Riba2QCsritJRY4GDQlAW\nZRDfB3tX18zpVDTmesnia6NrOSjYRPk0cqFKAU8qOz4RwkvnOcaO2fGs5Mkh\nqXEjJBcbRqlSePLQt24c2FA0zM2/cAisLlrofpmaJUu8WOvYc0qsrLDSrIIL\n0v06\r\n=Qx9d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b95162346a28c58839b2d3e52201e1f8c5fb9789","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.aa8e43e9a.0","@material/tab":"5.0.0-canary.aa8e43e9a.0","@material/base":"5.0.0-canary.aa8e43e9a.0","@material/animation":"5.0.0-canary.aa8e43e9a.0","@material/feature-targeting":"5.0.0-canary.aa8e43e9a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.aa8e43e9a.0_1579221461711_0.9968001415607637","host":"s3://npm-registry-packages"}},"5.0.0-canary.fe1f3ca07.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.fe1f3ca07.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.fe1f3ca07.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":"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":"03b3a4a6c77557e4996a7334c6cc8c01b77c681f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.fe1f3ca07.0.tgz","fileCount":51,"integrity":"sha512-zD7ElgR1vT7fvUOzA3j0qQDwYfhZRr8DP35d8M9QDJSZLSG+/aPZv2Zi6ehlQ5zKaRgYtcdkRQtIGG3vQme2Uw==","signatures":[{"sig":"MEQCIDCeNS+QVQ1YUsH1tAToNsBKhsyesS3jnfvwlxwK7EvwAiAHFn7xUv+eB9xYulE/KqQZx6V1xCN3XscjYLNK5lpAMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIQdZCRA9TVsSAnZWagAAhQwP/RVyPbd5TmZaJG5XY79L\nZD18JRwv6vL+ykp/Kb4a2ksbnHlqSWWCbfTv+kUaoX2hlxoQhvC1Ss3IDP2r\no7jTCywxH7ZAU218IUWu1T8YQ62LA+At6eSBAWXTTNka2/ZKWsl+zbqOhMpY\nqZ4146IGKwfBHrdCkyyCxPfmHqAkKYO1NKhG+7gzgP4dbSUUBjx4jv+EFURn\nLQFiCZbyR6jc1osnvanM92/9ynhoyoHDQMfqQbVKqT4rPGkZDw4dLG1QXAty\nRv2tAGEYPockj49iy4rkj+YYMCyX2KYnb06nxF/ODFEtXlGf0TnjZ4+0mOAb\nCeEIw9l2OjI+6gMdaAS4aBSXzOIPVSEh1KNVz+7SEKRs8YsEEn6HiZ7xaFa+\nXestz5n6ZCa5eRkTVIhoE373bnGTHE+VwNYd6S+bJuoEobB1Yy2bGOiEwcgw\nKiS7SuGScGTSGROowZRrSGpBoTSZvex1A5LRg8j/qxQfWrMV/vuveYtkxmDJ\nW7kI7Vp7HKCbj5Z6dEUTYG2d8OLXaj1KkTHSVgxKuGD6WWvKhPywypKzI4Aw\nkxy5LB+XbJsQmvvcF0oCUhJYUl7gaoEdfB1IMcuhGiOg3UWxuvhjKnlDYWGS\nTUTMZPlLckGyNB6v5vq2K4fORNNH54UrT/8SULm2PMaYmn2ttO2Jgti1SGHO\nyst+\r\n=qJms\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"55fb21a2166199c09c2ec1273c4d38c6c3eb8cb3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.fe1f3ca07.0","@material/tab":"5.0.0-canary.fe1f3ca07.0","@material/base":"5.0.0-canary.fe1f3ca07.0","@material/animation":"5.0.0-canary.fe1f3ca07.0","@material/feature-targeting":"5.0.0-canary.fe1f3ca07.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.fe1f3ca07.0_1579222872920_0.5558794524774173","host":"s3://npm-registry-packages"}},"5.0.0-canary.d405af26b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d405af26b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d405af26b.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":"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":"dadd6f2d2e9fb857be002ddda723f421f5d343d5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d405af26b.0.tgz","fileCount":51,"integrity":"sha512-D7vaAoelIWqtIuMKJ9hwqkO8TMHWNyEZILm/Py+0byqGylZ4S364RS0oO7afJfQEMg+xobimAA+ywr9LdOyxhA==","signatures":[{"sig":"MEYCIQC3/xteL1cADJZ+qVMXSlEwYJfxL49LpIEajJbxFDww9gIhALOBohfej4LoZBst5pSY3GPgzd3X7azOvb//e+BIseWT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfpoCRA9TVsSAnZWagAATzMP/3GkAyZxsbT6/2VpRY9E\nHyUVJ9pK1+uYjnAyxGS2zQ1Ig2Uk8Qzu258zGP/fmQRaPp7gGhpsP5SDbeyR\nN6L9r1GwB9sNM6T3lfr0/XOLKrIrSuhBmhVxQF7SSBzUHABi0wWIqiz1D4Pz\n5BsX/QXWVCc5OYa1X3f8v7JB+RuQZaj6mam45710/YK/KipHgszf75Qhc2TY\nbjfs6B6OBJhOp1uOk5LEGo8Em/IyXjbbiJ3GoEeVYga7No87BLJ+cj5J7GPt\nDxENnARmElyLjuuy+u0saxkG2s5hB4jYOJWhWPYfplJ6C3DCcSWkYZamSGlT\n8NunsgMrIEbIotBucni3p/xUUJCW3Y6sdp7FGRwoVx482chqwwBIWZxGA7zS\n3KqX7lOtsI/htvy9KHNAXnzGaKfcHOKtilcmNxiwjja20IlpXDJNUCJ4fUA+\nQUrfFtFH/IeWrqi3umpRcYUJu8aNlveJkXfkYJ6azaOE2DWCaZ16ogs2w/qp\nGYoV4hO5wjnIp6gRwHLr7hdlgor2UnpmbjZlJBWcC68x1XB8tW6fSnEgIKt0\nuXDnTrA8RIniZZB2z2dZKPS6NvSjCHiVQsYpgkyG50NIVq/FxRJ0uTdI+5G6\nFBX94404pGRv2M/VzAntm+OZ8AweR4fPgtDduwYMjhKknbB6Xtrb0scFSi/8\n1k98\r\n=XaJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0520800061215f99c3d58fbcb661327da2b8c126","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d405af26b.0","@material/tab":"5.0.0-canary.d405af26b.0","@material/base":"5.0.0-canary.d405af26b.0","@material/animation":"5.0.0-canary.d405af26b.0","@material/feature-targeting":"5.0.0-canary.d405af26b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d405af26b.0_1579285095530_0.2952424231453723","host":"s3://npm-registry-packages"}},"5.0.0-canary.6e857aae2.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.6e857aae2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.6e857aae2.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":"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":"f4ecea45d6b3132d4fc9020e5bc8ce0fee470c90","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.6e857aae2.0.tgz","fileCount":51,"integrity":"sha512-cpFdzaEh5/jX+/oq6Qlx12QyCpkkPvhVIY0IvpGbz8+3ZA/YLqO7ANvYIc54NBg6sTf+SrUAjyCt50vjrMZEXg==","signatures":[{"sig":"MEUCIQCNgYJOHwlofGUbOJIBR4FOOW0/SM/xU6Veg6tKQIey8AIgOvDpwfZYpsUcNledD/RIALg1tQ0+AV1LemkeSTr2MWg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIfs3CRA9TVsSAnZWagAAWHsQAJBBOXjkr3aGqUdj64lT\nwizKDHSQ/DR91yMxY8GlOpbfynOuh59JCgSF/mfHuH6NW+Am5MJn4yk5N6Bz\nPn4bsTWq94WC0ufPW/IvHlzfV/AbokCBUiyvyXije83ISQYvDXbdXqIKaXzf\n6WyM4jEQoBHgkM4epMwEaJoSU7aW+ToezJqZAh8AXj6nMfWRtyfEaob/elKw\n0oS9SaZxnEoAkAqLDJF+E1j+ANvSnGF1SBuEd3L7hjYkmayKZUNXA64KAYLK\nWzz5+6SDgUYNRZlf8/IPx+GhX1ex8o7SnvBSPjyH43J6L4ND6x1r92kEehf7\noFMlo8Mq2us3KznTkVdZx0dKTFV7gLx93FXaa3w3NAyNVvEi4uqtN09dHzHM\nyk/D28ByWPpG5DdB4ECopv51I7lhpDNemAIzhjezURxq5JRF1CeE/2bVpikn\nfgqZqzc0rw5wKZXBvc+d5Uk+Tp45FNeDJLGzFB9x/tsXtIlp8tfNy5CC9fAj\n6iArI+T+jjj81ICf4dEw92QGoQh6SEJ8ojKFDVadeugbqwgKrzc2taTpbQLu\nqAc43N1sWQKX0DrWMs/HXlmWyipx03wZ7aUl9IJxUGLp8RqEidhOsNhp4iMq\nlnOegMSntGMMSwmRLk/OQUb9L7z7hkf/w8q/Bcn2N/QN+74YwF1hFHCRjWNX\nfILH\r\n=8bHy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2a53aa5d8048725819709e1279ce78762b8b6170","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6e857aae2.0","@material/tab":"5.0.0-canary.6e857aae2.0","@material/base":"5.0.0-canary.6e857aae2.0","@material/animation":"5.0.0-canary.6e857aae2.0","@material/feature-targeting":"5.0.0-canary.6e857aae2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.6e857aae2.0_1579285302934_0.919992150200468","host":"s3://npm-registry-packages"}},"5.0.0-canary.e2e764f7c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.e2e764f7c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.e2e764f7c.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":"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":"768b390c935be2452f015a20e4af431d0ec692c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.e2e764f7c.0.tgz","fileCount":51,"integrity":"sha512-756l4spOFQq+6QWEhXb5jieyD5ayirRcGylEa5547MPOR2Qjo7NaF/1dvAw0NViecRf0/1BP3C0deHC2sALMvg==","signatures":[{"sig":"MEUCIBy7WgCegOmm5e4ieVd5wVz9ERAt8Fu1/ShT2+1fAf1FAiEAu4aRGqcWALT+tlGav4cq3712aLDnpxGvwsLpbO0uSnE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIf7LCRA9TVsSAnZWagAANrEP/3aSHgswfnad2uDx1ZEX\nEzd8oAGp7hiiAHyhcZ8Ryf6F1HArPuV/1Y2tX6yCd6VRcfbyssoOXPALMVPN\n3nxcEpNjmh2WpeZRu0jOlUC7f14hgLjocdxLY93ZO7Sjir9f2HZfqMs5Hvut\nTcut1qufKGQyVjzoVYq6XpTg+1TD56CPAMaxyBl3+G0i3su6ju+Eb/cXkGos\npElisMBY8b0z0XRyNcPCIoBuanAHDYNFVHkmk7VF4Tyi4XIK8JxYcrsuvvUg\niDG3c8rIVYO2SK8zOEdH+7yiLacr7Rmz6PFqvZqcfVzOmFOkTNZnY9m40lIy\n8A7y6OWcUec6Ri0Q/sqVTBtoBtxXmj0JjwgesSoWNZLEfIrHU7XkEBuAg99/\nbwfxfSfuPC3aF5uFABoris9h9f3ispbx78VJuzcl7NePz5Kzl5kFC8pUGQJC\nK+p5eOAza1em+Jst3eQ2UZjavFXvtY+Qg2097bHHDBW1BCwYDFysG3WR8V3F\n1gWqE9OEtzdCtBl2UtMMlTurDc6kTdgIoahCy0uMAJi1/Z4+lIQN8rTxzHiv\nsZVLgzyIAevkl3LOTsrUS6WfEhM5uzWw8zACSdhlT10CK9CuKmJUYsQcXz11\nbpeV6rJHSh4xe5eHk8FDIEMNYkOwcg8aTOHSbrXKc7Oi7UFisySXgiJm02M4\nRIWA\r\n=HWCf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9dd6d44ba7288e1e0e80905a629b922c21b54e37","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e2e764f7c.0","@material/tab":"5.0.0-canary.e2e764f7c.0","@material/base":"5.0.0-canary.e2e764f7c.0","@material/animation":"5.0.0-canary.e2e764f7c.0","@material/feature-targeting":"5.0.0-canary.e2e764f7c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.e2e764f7c.0_1579286218614_0.3709597105528093","host":"s3://npm-registry-packages"}},"5.0.0-canary.7ef986a87.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7ef986a87.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7ef986a87.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":"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":"fc54fc1164c398fefa5b26d1f3ff302ae76c896c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7ef986a87.0.tgz","fileCount":51,"integrity":"sha512-s3AM/Z/t29BjwbmqF6yJ12Ed1JqnaHnSem1pM2Nl8cA5iRTv0zXo54O5ZS8vfMQvKBYiytI+DDLbzRcJJ9MKLw==","signatures":[{"sig":"MEYCIQCpFG5onaSYANT/Fy0qMkJkQrlCMF3MEOiAtGt3w97lzwIhAOXzwrkL3kDByVVQArBa6yivEGct3cIsStNbkdeuC5kp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIguiCRA9TVsSAnZWagAA/60P/2GWiJI025ObMw1iku6a\n5Lkkl9xzXff/ZPpdpC4aTVWDAgtEBvz0ZfiFhcUA4cR4O7mwrnqdiwiu6eoY\npcYStLo9ScjbMqdpfVoLy9puh5pQV+aAkagO0kY5C/7vsg3Kp5m/4d0gu3GZ\nffCpAJq0fPtdmumXB/Khqge2QPSX9JubRHECcC30GpUapYFOYNju14dBHLVT\nAxTqMcN2Mg+VgxMwCzkniwaWOnP5Sa0MAelz656p77jmbm3XPhBEnrTe5Rh2\nVs9PYig2k6wmZZ9zJNaicq9vqkm3oJcqJ7MrAO2ptC8vDzQ2h4iG5qYW4sMy\nkTWfirrS3aID1FZZi1lbAf7dXpzSbSXVt+3CWNMxrNwOLSmS7mOz09km88tJ\nM69U3RgQnBis4AKCuKNW11HsQ9XPWRdZRV/b1RtQBdKuD4GAcKV5Td+1UdUE\nHpVDSE/XtQ1SZseAXTqNlwI8qfiki3Bdail8INk6VTDOza8wgAdCiHUImT1u\n616GZ4dBIlYte3VWUpOoAurIfR8T5+mX1gy5WLYGjbcf+tLS/vsmo93WgwKI\nnSI35QLayNwOQdGCBKrIIwYWr/P8qrGMKLq9aYz4KrBY7nOBnrkn+uzvKB5X\nCv3uFkk1Rxms3cMNo96HPAiDYvkQ/bB2RQiIJebzxXqpE43YZGD1bgepdVqL\n9TxT\r\n=ZjFt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d18e160fa2a4eddeeddf0a07020cc2cecff9b573","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7ef986a87.0","@material/tab":"5.0.0-canary.7ef986a87.0","@material/base":"5.0.0-canary.7ef986a87.0","@material/animation":"5.0.0-canary.7ef986a87.0","@material/feature-targeting":"5.0.0-canary.7ef986a87.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7ef986a87.0_1579289505590_0.5801496190834128","host":"s3://npm-registry-packages"}},"5.0.0-canary.29402e2d4.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.29402e2d4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.29402e2d4.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":"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":"db92d963e423148401aa599228e70b08a824e17e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.29402e2d4.0.tgz","fileCount":51,"integrity":"sha512-giYnb7GSuBKv6sGgBiNigSI/4ZHWVzLr97W2OT/w1GQBM/skKGaYlu2lje2VVgwSQx2ZeBVT8Jy7sj2tkqShpA==","signatures":[{"sig":"MEUCIB2SnUftzJ9Ey+Xb6sSQ6WnyTmAhlePeSRcJZuaOYYVSAiEAjR7ZAkIusO5Zi/HDDPHqqWAPJ0uI5tV9qFah2crluzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIhvjCRA9TVsSAnZWagAAlgAP/j8DebsuNRsOvipvQVE4\nP0AvbTX69GtSaX4BQB9oBuMK7xPed2laszGSs2jvGlyzw9ynNm6WM03MfOcj\no8lgfxD7XTLUH8Dk/3afHDdf3Tk3wroOFssfxj0sbD5+eMu42LILYiLvoMDl\n9hwsmNYTzk+WS2u3Pf9iFe7JZhe2c373OAh6JYGqc4BIdeV8G8P4w+xbQhsu\nD+9NeZGgbWtmEu0WV7USdnvqDWl7FUVg+IS0S7K2herZ05CX/4AGyIgm7bBw\nO6TwHrvSQKJi407UaoIKn8XfIp1QoS7atv9mgPd787gEBcuCbLaqRnj8ccdN\n0uQY/cj7VL8SQ13FDNfFimtsjGRoNRWq1d5+B1zaUCbv2+gRG5PSxcimebC9\n1mCcTwfW+c914/zHTZRuWl13NgHmrGoAGjBs01/Iqtp+SqWv0r/dsNeV+5ZB\njC6qu2f1RoteFkIAdx4/Kqw/JIQe4ZCjifGjdrxsA/Oz2GNs0Xhd5XQdmobW\nXTp0Sqv2h33xPnQzBF7gINgP616+JsX/E0W1NuSfK2almZfxbyM31HkffYJ0\nEr7Q7wxcmadttffQdA3AkKMv0orGXBF8ypTQ3K6xPFgB90zdALmCGRQscMJN\nbpJIjm+G0zeTFB1rIdfmgkOL+QKAWNuinTudAe++/CfDK61RNrvFVynikWKY\nb7Vx\r\n=FHB4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6c6caf45e8fd759ec1c6409699c53250c8c41f25","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29402e2d4.0","@material/tab":"5.0.0-canary.29402e2d4.0","@material/base":"5.0.0-canary.29402e2d4.0","@material/animation":"5.0.0-canary.29402e2d4.0","@material/feature-targeting":"5.0.0-canary.29402e2d4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.29402e2d4.0_1579293667432_0.8391589528893519","host":"s3://npm-registry-packages"}},"5.0.0-canary.2b3ec563c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.2b3ec563c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.2b3ec563c.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":"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":"67358e7b6434bac61c92233626cfb140e79541fa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.2b3ec563c.0.tgz","fileCount":51,"integrity":"sha512-IwjgtCGpg3CWT6ZGet8gHNRbKW6wCh3+FvxqGdFbhef5NGlxNeLLwhS4IZM1HCu6p4BB0mbmFZugVjzi4O5sbQ==","signatures":[{"sig":"MEUCIQDejXwifjIFKSCsj2Y0twpR3qNam5jLXOM5XXZHk8jaqwIgZ1Ey71XCQ4mgdsVo3N436ZX4Xsbe7OTpuv5wwXOxrmI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeIj9iCRA9TVsSAnZWagAA6NgP/3h8qSmHVUeq5lo/Jiyb\nY2KoV3//Pv+dtxa306gyfK8phGugFs6adJxa1I0KPpcLj8NIq3sWhDv/DU+u\n9PRLauasvy63la85yYF/Tm0Eqf2FDU4hratuhftr9zcRLWvNm5gFPJ6//Nx+\nfDsye86VUouuFXdSqKHw5YoX3fYW0LlUfikp8bZ14YVU6UfllHVv4eCqHp5U\njhzKHpFy4Mfp+WdXegPkf7rxyxvDZoGrl2uKa2mB637UXIE1aTWl/wuiUhdO\nmjhiEZkC8qWZLlGrk2D3eEC/4aCcjYHKOYwyIdypJtSidzKecuecDB2CCDfG\nTXnqmS6KA39B4NRfBQeLCdIjZsXbEL4m2+QCIH5myOrhxTDAqRgfOysCFXsx\nLzMbA3hl0FQ3iP5Cq9TdECHnbxF+TNCWkPe06lQ6VlMvqT0CownX0gpZwrmd\nB68cnkLtNf8J5haHAgjyY/FCULGTVLSpsf/OdHVa3mCppwysfeyISXZMLWL5\nkHUnLCJIRUvVVDipe3eEJrS4eplzMv6PegTNUhujYVBE6zu3rD2UchKJVyUO\nJr9c+UAjRaTHVMzEg371t5J1vFUPr3Mu7o3hFGfhlEp3VQHFdCKNenS+O0xR\nyTS/1DplnLHk1/Md4HdulcFe6qpnb2M5ahkMlZ7ctNBLe6stso7OkADpFOr/\n3stA\r\n=LQaM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e0de6399e32c2553a23c71775c8e5b54fc527e5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.2b3ec563c.0","@material/tab":"5.0.0-canary.2b3ec563c.0","@material/base":"5.0.0-canary.2b3ec563c.0","@material/animation":"5.0.0-canary.2b3ec563c.0","@material/feature-targeting":"5.0.0-canary.2b3ec563c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.2b3ec563c.0_1579302754150_0.7470392000611792","host":"s3://npm-registry-packages"}},"5.0.0-canary.e8a993677.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.e8a993677.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.e8a993677.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":"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":"99c64045c0cbbccb3c96489d3c4a8398997e2fcc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.e8a993677.0.tgz","fileCount":51,"integrity":"sha512-Mv+t7skL0p3jFZcY5b9DcIuH9eP9WyPyUnyAd73DTSACQxpeitGpkkgGmhpABdgfxLgTvN2kDeT+BWENwpAQ0A==","signatures":[{"sig":"MEUCICCzlz2E9iC2EWASGaHv5k9D+8tt5qa8bRe+c1A8Ng2UAiEAmZKu1hzN8K9Va2+Gi1FGJN83uGC4NS6gtD202p8TusI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJyvsCRA9TVsSAnZWagAAs1EP/RA7nrMNJhCCCREEwHpr\nLGwF2nLFv1Y9My+uSZw1DMUAI6NB8jEan7M25bSkBDvfSfuCV1ClKZo59k2p\n+Ch2BEG9JqxQot2xwv1CG4KPlRJMsbNx3U57EdifERhdCnDL7yg0IcTZQ6Hu\nQvdXkmH7w/8jMvXl0vtphdZ66uf8/XbzqF6w4wqjlWQtgzOb82o3tbJnX9Gq\nT/1Ime5iIVlv7F1QUVp0zjNAdM/bF0YrZj6VavYs0V1YiuIDVZkby8O2syq+\nOBAe3zK1sd1YC0pU44sKz0yu+zi66tNSY/Ml0G1aP6ehzteErtsEFxDPwlBc\nmV7csTWAsZ6Cc31rKChOUL286gmU6BgkdNK00oAqzWt1QAmBjMTiXoM+9/cX\nv8zE1pAXOlNYkIIlB8K4xa3h6CBrtib95fK7L9pCvz0PQ6LZBHveWytZG1LN\n4YrO0Ia2mg8xEnsf6U1OaPlcGf3aWj3rEmZylZ3RH0xd97EwHBzTHVBuBuUJ\nUomaKirmNQV0jQDiAhlVfBYuZewgvhxVQofoOqyYW1k3tNyPtD5VQke97RQK\nm4rtN3yoFlaG5iolw8Ilg0uQwqWCDioaOK8tSTdxmIckDJX2cU1mHhvQ7WKt\nRZ1JRzD5OADZjk3v5Y6dptjsoV4z0RrHp7x6mykUBYrpoa9p/TifTZ8HiE8h\n5Oll\r\n=6MkA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"653e52310f90e65950905e8fd8fca6f99e87ba63","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e8a993677.0","@material/tab":"5.0.0-canary.e8a993677.0","@material/base":"5.0.0-canary.e8a993677.0","@material/animation":"5.0.0-canary.e8a993677.0","@material/feature-targeting":"5.0.0-canary.e8a993677.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.e8a993677.0_1579625452260_0.6774633060800439","host":"s3://npm-registry-packages"}},"5.0.0-canary.cd4903304.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.cd4903304.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.cd4903304.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":"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":"56bf9567e9a6d7c1a39bd86f1cf36d45796727ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.cd4903304.0.tgz","fileCount":51,"integrity":"sha512-NMDnyVxg2U2U0D7Jf0MDyWfihQZqcH7AOWV65w0wHlX2QT/ZdoTfRx4RVJXB1nVh4/Ows6k2PmFxlpbuNkBPUw==","signatures":[{"sig":"MEUCIEqjTMWGeIwLE86FGNERxt0ptMcLELDSRV5Fi0VHdj17AiEAmBPuGmpikPfDspcr7vTQ4ZWlh1fgsvAFMJdH5wObr8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ29DCRA9TVsSAnZWagAAwhkP/13AR2cYdOnP9sexHsFV\n+S5JLokWVT5BI45NRRtWFadCHQVaiFZGF1iilvdZP6u6rtszSGhwhN/zdWs4\nhHN/+WLOoagkiiRg0wwSqzwulYBJIHaYrzuGlhy/f2V4J7roq+Ky7vZkYkIY\n2EZDm9OBUsKag4BukyQ8gCF/DBnHKn1IpNEeFCXeJ1DoD32ji1MfY7yAjE7h\nfM3rt6/4V7OIlbbKsOtsOB3q74IMvP/uFrB3A114UmcWXqXrY+rI8J25PKwV\nynpu8n3e61wP+SqQ41OZQdO5XmlM2TBgl2Q5iZsJPiIrN6JCRijlNrX6gjG/\nwZGPcAX+fj56WXVHzmh2Go7q4hMG2H7Y5xl01plpLvKmB1VuWt0WvN2W/QSd\nPgQkpD5C+uRSXik1GQIwl8dt1gTD7nzwTNH94An7mZmS3cn06s0z9Rlv24wI\nx416sq/eS+7rT4YCSB9taGcT2mpP2LqzeaHjxcpSly4dmK05/YrAnTWzib0B\nfL8RoKsjBFhWlcEnSNSqkml8i7S84nxPI52Kgo6j7XLTrvZOhy2V9Epe2DO2\nlzyDK/Puk1wBNts9UtokYDEN3Xd1U4pQF8ybnJHM10eRl5L7LPCvus86R5Pw\n/yrlXKDEye1d5nqNY6q5c65RtHjGAMrsse8gZdJxU3WbYK5Sp1YS+4K8+FLB\n4KZ7\r\n=zYaF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0a1f35ca90587cb380a06e8b6eb8650279b9953f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cd4903304.0","@material/tab":"5.0.0-canary.cd4903304.0","@material/base":"5.0.0-canary.cd4903304.0","@material/animation":"5.0.0-canary.cd4903304.0","@material/feature-targeting":"5.0.0-canary.cd4903304.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.cd4903304.0_1579642691500_0.9052776773324454","host":"s3://npm-registry-packages"}},"5.0.0-canary.7e4b04b25.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7e4b04b25.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7e4b04b25.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":"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":"cc9294fa5c8fec8d7f51a6be99363c9acdfcbbd5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7e4b04b25.0.tgz","fileCount":51,"integrity":"sha512-sY0YIHEMcjtP+WeBMOdT7U7/rOEAFA2b82w5uNe+dy4LRhsigw6LLfdLoaWklhwzISzhfEx6D4dwRGgN5FkQLA==","signatures":[{"sig":"MEUCIFWabPHemmleLIS6HSrIo6hB2QXPu+XU53NCJeW+vNevAiEAymDTVaODOlFbhKVJj900shfprvDh0ZwXk6e+9OwxBNU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ391CRA9TVsSAnZWagAAPZ4P/0SzWV99Fo22TqZ3dxyX\nwY+wYi9dCQGFY1Qf1GP2UZ8JsXWcu7o9x8pr9WCcWUHBX0UL4TXf+LR42GNW\nHlJV+jtNd+ulGzkfiXb0pw0f13dznGurAjVuAihCKcQdvs4qWMsDHobixSvB\ngsc4FW44oK0YTLV24H/6vvMnUMP/MHTa83hQtbJWfpRfVuHAN0Y6jYIs1Z+E\n6ZXs7jC9wasvgGOAxQpSzGiP8IhoXQZNK4lPJk3+YgXhaNiVmjpTiCdIkRJv\nu01flCdUqZf1tZFrNsJp81/2m2r3rYcRs1I+qpbhw3AjtUGdV2bzqvlyWh67\n1k2S+6tHK3JQUOYjMnIvGstebJmSZlIxxJgQm/kGJYC/kUoTkWK6YspPQeQw\nYzmHU1bjLLipcL3IyY0BjTlAvYMYpczuAd2DRwitKtuqimtYxFM+zTCwpSgm\nSwiZLVwReFdPyDhKqlxmAsfVFntZoF9uIQwm6R3CLXeQpAQAEMYPsG8y92D9\nHD7+dCjBsVnnG/EmMC7ldWPQ6qd6sdewTfIxPIJnAv4twIuzV6D22oBf9pkv\nq088cmDTvUSzX4XgLk9jLAtBhZ44oIkLp3ZJHf2hec8D6ns9xSn7EyBXwYg2\nqJbNXCuvHqfgJq+nErLXg01yNV5/qC6CWp9NIiP/QN/rP0nHfOkiC0oIJDSa\nPv0/\r\n=VWE9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5ce556593315b470008c9bb156d98d7624231a5b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7e4b04b25.0","@material/tab":"5.0.0-canary.7e4b04b25.0","@material/base":"5.0.0-canary.7e4b04b25.0","@material/animation":"5.0.0-canary.7e4b04b25.0","@material/feature-targeting":"5.0.0-canary.7e4b04b25.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7e4b04b25.0_1579646836895_0.7850810085193229","host":"s3://npm-registry-packages"}},"5.0.0-canary.ebc296937.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ebc296937.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ebc296937.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":"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":"4682c127238b0e145034bda6f3c81b53ff094c38","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ebc296937.0.tgz","fileCount":51,"integrity":"sha512-OMZ7So6usoWbSuDyGfz8TZKDbELTcfFs3wpsJnZ45ZAi3b3GQyfWUKqnmJMjMfFq2Ak5i2qk21GsQ0O4EQXTnQ==","signatures":[{"sig":"MEUCIQCfc+liad1FbF44zRVBRKwmDwke/2uKNa5AEN+PpIJb/gIgZlHQlCNmwnyunc7venc0vs5r28l7JE5gtxSUCsAdJtI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ40xCRA9TVsSAnZWagAAVXwQAJfbUpcoUCUUCyKMNo9k\nQk92Kr7vEDCbPl4OajBKKFhJstO365+gGqcYae3K31yopQVPIBGTpyeqmken\nsP1WrW3bwjhPBLnKxi2ClxrgdxodOg/xY5h6hWhUa13y37R8E0uCPs0eJN6B\n7GG4C2aQoBB+1gM7HWl9P00dxwVMsX9+ZCOdZDzEXVTTFRB0tf4gGz2nIM/6\naezXlNsWlmvm1c0RHkWHDFgb06kNDw774OfyESMmuxGfHpjyparxuCmNf11v\nkKtVqGn0u3kpcwpdL/AhgbvQ/6Zv4Xzybj4BPfHAIu3lneYyMG8QrGmprODf\nnX83R5ETNsoCWJL/O8ing5+0SmZZP4dDgk086c2qgNtYJJmKnkvt8G3aryZ2\nDq2y7OCvGGu9+g2MmMSzDo10gW73Sr3u2WEawd/YtEE2KkecQy78GGCnQZAC\n/ip0qvIpnbH00GwmV89/FQCbh8GfqiWneNMiVsfhDKVmfJh8FqxDMLaf1Kx2\nd0xaFLm8gtljlpCYprr/t5o64M+BkUyfhGmtafRxvZxpACBdHvOr151Ta3VB\nl5lstLNvc+14TbsfShaCTA4PzlLJIamPI6nOqGWbwfN/zZOidzZn07jZcaOi\njb+D0QYnMXOb0VR5t8I+aQDvabq4rDVii0ZX0YprHyaC5utnbsWfNQOxCT96\nY8hM\r\n=f7OD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"56393bf41fd3e60f82b11c9571455b6e0b0f2025","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ebc296937.0","@material/tab":"5.0.0-canary.ebc296937.0","@material/base":"5.0.0-canary.ebc296937.0","@material/animation":"5.0.0-canary.ebc296937.0","@material/feature-targeting":"5.0.0-canary.ebc296937.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ebc296937.0_1579650353508_0.2608419066897254","host":"s3://npm-registry-packages"}},"5.0.0-canary.cf33f113d.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.cf33f113d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.cf33f113d.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":"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":"0b21a85ba83a11f634fd4937023443631f6c31b4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.cf33f113d.0.tgz","fileCount":51,"integrity":"sha512-WyLuITq2UhlJzjzzQVMx3qAQQfdNfLhLgqFjkApUEXv0LVj97OQuzDDneQDA41N9X3/bH2rivBHRz8rTaEyO+Q==","signatures":[{"sig":"MEUCIAsKQq7fXi7flnPZ0UU4JYYpOki+PgWXhWmZfs5u9iXbAiEAp8tN9LUNvxx2kck1prXt/cS7xxhrfZrzYpAfLGYO/+c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeJ6QWCRA9TVsSAnZWagAA3rQP/2aNZ8xGXgogS/ofTUso\ncVApvJF7jezGa4FhPCoKAPATiRWNv1G96Jm01XINpfAYNAVyUqycwFgwW66Y\n3cgNi4rAp+F4JANwsga2DCxuG5JJlLDsOT2HszvKb79CwQxNkRFKyYfUM5fq\n2oCZZOVDWHxYHXc8ZT12WW+MKrbgaKBTeYbHC5s4kDnmUYQhyqlmXD3P1JtQ\nVl3dRST5GpF0GkMScpSBwpUcos6lrPEM67Ii4oYAqh9mLce1Z9OqsIbrZ0MK\n2S67v/YEK4GK6iIrK1WCaSuy96OmYO0TBOjrwVs8DmLu4LImGx+K2B/pvI4V\ndFL2j0sictM0cnBJpzU/L20Ug/unENn5tgp0qdGR3SJr/tg00ebSSkopQpB9\nSFtxPj3xavG19ZDnhZ0MXgf6Zvc6rzbTiNW+b8eIOZBGEzcLFB5NVM2WNcfp\nJn48YbtZnyAf/flCiykRIb2Rm3Xr1ty53GvJfKB5mXHlCpQeXIuNqCr34O4S\nDWtRnK86ALcCU/K9whdJR9b8otMLGFFwzHWozvsbhzcgT5a2ifFC+HWpVXqM\nko0RV3tFx++QujqqS+3Qf1Ib+OKyxYN438vXTNDv0OiK8fIKaIzjqM0D4rsQ\nsYEHa95CWqBPjJp/pnVaD/RC7nGH5beCh9AcjpOPcDW+JilWuc6fjnz2309p\nEC9+\r\n=zr8l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"337736b1343fc4e03714756c4fc2ccfdfe1e5537","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.cf33f113d.0","@material/tab":"5.0.0-canary.cf33f113d.0","@material/base":"5.0.0-canary.cf33f113d.0","@material/animation":"5.0.0-canary.cf33f113d.0","@material/feature-targeting":"5.0.0-canary.cf33f113d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.cf33f113d.0_1579656214051_0.7875162680918868","host":"s3://npm-registry-packages"}},"5.0.0-canary.e1d5f1be5.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.e1d5f1be5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.e1d5f1be5.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":"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":"9a5a102c7beecab06310fc38a03c4c7d0b4d9823","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.e1d5f1be5.0.tgz","fileCount":53,"integrity":"sha512-CRtV41GaiAQABtx2PWsAuztorSNNdoY5RPdg7I+uQKOi3e+F2Q8hHW/V2/aRJ9DorB9P1EXEXgeyVd796Yegyw==","signatures":[{"sig":"MEQCIBJ31dYa3YQD3G8z4gqbeI+DsCOFmuy9YahtCA/41KoPAiAt2k8UjhMKYvwjXKLbKE4/FVS69Sn6AAlJNzJ7Qzfyng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKH7ECRA9TVsSAnZWagAAMy0P/j6gFYs0QsxO1wIuLagr\nI6PXQeHd6tJ9aNCq/qFoNhqQdVxC1wd5y9s00SdHIuNrhvbpC79cr92Vovwf\nI+uWvEINw5hgaOGDJK7bJVxGvSu1OVfRw9zJPvbECXJaA7DWSSyUDkV+mR/E\ngy+IGQ2kXUDu5WBjJUSRNf7k5URjzEZFVS2YNiw/CER3pD2kWedYb2RaLnHS\n3Mf25P+ksVDOyjV1cLYXigXCB+LkuVNJmL0vPahbw/42UCGzgXnn1CU5c7Y+\nWzjqmcRNVzE7pVIYLtVMpdubh72T+mI7KCL0hZqVOJrU8yz4jKBpBARw2Zhu\n8zORIsOkMM1sHwBOBWQt4vh1S09HUq7jAjibo/4NuNtIjaMRPTJQCy4gnQuS\nGrwl/TGqQH79/dlRnHhSRKjgHPj7jjcpUXNtcHd55RAP5C2yulTHJH6DTISH\nDzvLzYIY/Q2kVwAKl9ejhMWAfHp6LM1i0oyDbIXBx7gdvPq/xr6e4i/9AeLQ\n0/oDEdTmt6B/ZXcwmhs1S6+tiktUSRJUZ6tq9FAijDM6xRBSFOFB6iToq2Xm\ndSq3tTznWhFSUNgcAuD6WzauSGADcl5OK9kTqX/5TnYck7FUYV88nkr8ovnu\nevOASwmaa87kEL00kgtT9smEbEVd6ku+FgM5giTtv8VhDseJ0md3X/2EX+kM\n9raG\r\n=D/cM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4726896d58f0dfdf4ec6ed819abc20912d43f2de","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.e1d5f1be5.0","@material/tab":"5.0.0-canary.e1d5f1be5.0","@material/base":"5.0.0-canary.e1d5f1be5.0","@material/animation":"5.0.0-canary.e1d5f1be5.0","@material/feature-targeting":"5.0.0-canary.e1d5f1be5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.e1d5f1be5.0_1579712196141_0.9558598669617595","host":"s3://npm-registry-packages"}},"5.0.0-canary.6b6a4ff92.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.6b6a4ff92.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.6b6a4ff92.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":"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":"b03a63c212374f22b0d09e9b826403f15074e224","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.6b6a4ff92.0.tgz","fileCount":53,"integrity":"sha512-8rQ2iKZp4sWkxTCLjoMEhubmZQEL3ZZ2xxb5yzaSSJCeuERnmAPAmH8ImMkgk1OXePlySmOdFT3urPpDtPhhkw==","signatures":[{"sig":"MEQCIDa5TvwYWLY+GZR1mXylktvPHHfjd2JpwNksaZDGn8YKAiBJyC29f7s1KZMG1lXzWEeVrrrQ4QBOcEqqxRQTyCIEzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316759,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKI1WCRA9TVsSAnZWagAADfMP/2yuqHYuriEOMdNaHPwv\n9Pq1Sj+xGAKiJeOX2kv/KOezMDyGMRes1peeL6qsNsW1R+u1RC1KrVoFRpDm\nkEWg3q7Cpe9qmbKLF5EcZM0Ha5Z2jcuykQTboKKgTK+gENuQCfr3XwN3cOpe\nJVVnaYxzS4Styjoi3LDKY8IMZmzSoCVHBfZsU6ninMS1YGzO8pP2PxIirw8+\n2UPe5GjMVIvpNnAIryT5i3NrdOPM/5CfzGUagPaDUk9bRH9WbWwF/AJlEjNW\nNkp4ZeqiWT72sX9AXtQ7iIGDkrgtK8LFsB7xMsBdbE9iR+BdZ8KikkMRPZSJ\nRCieD9Mtpr3zleUe1/z0eCqkvRnsffoezk+WhxIIK8m1lxb7QRldslgb9/mR\n86fVSu/p8cHeuMYlc69tFnIyVq3PKNpZLBDcXBlnmCyRUxSSokBd4LGQg5OX\n7QKP0pNAF5d3/daQLAZsG9QkZWC5fdd+VW958vGXwatjRZBI9X6aJalO9dGi\nFrJ0B3mYFNil3D3cWgvLXfWaXypN+NBYIBXvrvKWMVqXY7Jfupvw7Pw/ERAU\nlii1ect1+XQo88GhhZPtii0osqUHGd6UZHwqpfXQAvTGZHX37DHgq3eZAzI/\nuSqNYkrvn8zTg5WIWBRDEnezO4CrqOasItgGVEufa/19rj/31YGkJYazw+hG\nXFVj\r\n=h9KA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a4307ced3400e7b61e83495c8903f219bba0ae44","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6b6a4ff92.0","@material/tab":"5.0.0-canary.6b6a4ff92.0","@material/base":"5.0.0-canary.6b6a4ff92.0","@material/animation":"5.0.0-canary.6b6a4ff92.0","@material/feature-targeting":"5.0.0-canary.6b6a4ff92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.6b6a4ff92.0_1579715925872_0.48660341407887997","host":"s3://npm-registry-packages"}},"5.0.0-canary.6092f71ee.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.6092f71ee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.6092f71ee.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":"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":"30d64f076b18ece506e605cf405a69490ae09441","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.6092f71ee.0.tgz","fileCount":52,"integrity":"sha512-Ta1HULzNJKwCATPD8E3hf0TD53AhWlOfx8Plt91RW8EdGxL37wvo1le77dP29TXMm7ZFrsf/ziS7zxSX8mP+Ug==","signatures":[{"sig":"MEQCICEUqh1T7DID5ZCNlWgGnD2KHewxZ6HrIqq9XOmZ8TNTAiBcfUWGpoOk5eAKcgN/lPUnVZtH5k3VqiXqFc43jCEIhg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKLwJCRA9TVsSAnZWagAA7OcP/0qKy2HmATBngvdpqbZI\noCWlc2nQpPB+/Set7tqGagfhcLAJigr/ob/2teAJLae4kQAGDPjnQs9VTs7H\nlrdps2yUinmmfKDtNjMQKPeMBpPN38IpEqJcyFFGhs183t/Mq544AXRL9REf\nILzXDykQY5CrpetPfIKTpODo/CUdGqJwuxx2hJDnbG1UN8lsy3tt85WKlIl3\nUMuLJamnGCX/BD8Krfl28kmxShiT30ZWsQ6b71FGblucsJqwD4oiLz/mwWJz\nHnTYP9rHwUhhACBqdT763YUpTM3YkC2cLa5+sERgqjdop2f92NmQAgyDSlCt\nSIK3VmH8jRmjef8W+rW+Qo5/CZ0eQEZ+wqqLzBN4zppqyuef82/oyhumlMct\n6yDbs4eS/ejg8ZThCGuHTJzmbSnIAUe5rJl3q2HqkK5Zrtg7ONS9vkXJIVCp\ncnsGh6fC6mmFkPOHisaxml/V4UHyjirTiN2j8Htec3aQKE5eZvqhTxF5Nf9i\njdrBaZB6XQEsZT914lm/KBEhO7YMm0kwjqou1uM3tKLKNWhRINhUxOCcW6nG\nnDf7JVGU19FpAFIsYd15Gy5aSGPZ8i8s5bgD/o8QiZy9//ek5kX3lQvkQoGq\nIYnslDBfhZoF803ajeWA4U8TvcNZT5ySeOo/AnF+xh7EwzFZPCoCHAqBUkAS\nxm/1\r\n=RG2P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"da5d9e639c767fd3f9ad77c867d990afc21cd359","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.6092f71ee.0","@material/tab":"5.0.0-canary.6092f71ee.0","@material/base":"5.0.0-canary.6092f71ee.0","@material/animation":"5.0.0-canary.6092f71ee.0","@material/feature-targeting":"5.0.0-canary.6092f71ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.6092f71ee.0_1579727880974_0.3401460546342716","host":"s3://npm-registry-packages"}},"5.0.0-canary.d8d95020f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d8d95020f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d8d95020f.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":"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":"e8f027a63d5951fbaabf1daab00b01621ef2e9a8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d8d95020f.0.tgz","fileCount":52,"integrity":"sha512-vQ0IuheRJ4YFWNg65kfkqyfcSBCumWoG7xN5FK6VX24z/LYfka/uuA1wTcXTnWdz1NpNs84vH7jIMsjTkRnKMQ==","signatures":[{"sig":"MEYCIQDj+mVDldyuLlJRsICLdwcqnsAzoayVKoPP5L0ZI4NTJAIhAMmU1FMu1AkoZraxwDPEZmnOeykhdVihvWKlrlabE59x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKNZdCRA9TVsSAnZWagAAplYQAJuXjvF68D9yLP7aNXga\nkrYYhfzNbxcF15sUO4ZM8nurGOFptIVk49V6a5Cbr3mbGhrnhj6cGTZ1yEwb\ne663DhKoNxRDafHEG6noD81TIlBW4rcYP7CLYJ2Nt0iV1U+WyFHgAWzrj6yP\nA1hxyNZhVJDpJ6/4qKNRsgqmwfqsLWYNd4JRTW9jJrUmgwlfW3OZGOUITCoy\njf+8+tU6SJ6c4BUeSYN27QZ8aXHREAeA5GwUL+we7FfqVMUZ+MD9wBBQyhYx\ngf4gYQY+h2BSO7FRgBOLF8qSaBr04BimQV/nCp9ZF036SjAIoDfT7GCIg5wK\nfiYU23TSLBA1bFyBQacOJ3nnwPg8KB91y+ZqhRfzz0YKjw46JIpATA6hJq3t\n9k00kwxhbvtgu/KNbItDdLyQdi/dIR6RUtVDhJ0MiVN7Lckfv1z5ou9o7BUl\nhsjYLSZcYxMvcpw9FF/txqZmZzOeVOkVUq8Ky8ak9wHnI1eJ0MG4jXLuzjE4\nEFTdBM6q1BZWM+nOzthn5a6coXvKAS+crPtraUOW+C7rTLven6C0x3nK/ftQ\nbWuX/FKWKU4O4Ir5BLbrhqflNC2OTP8bkUONwiLV6mc25vuuh1zYZLicUzec\nEvj0/0LbmsSTmYmEExc/tjsLmTevnpsNXtXMF9xxxEMRPgTOm75WpjD4y1gp\n4LvU\r\n=r3xO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6360c5189134a77fd45542c27776ac2f86b16a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d8d95020f.0","@material/tab":"5.0.0-canary.d8d95020f.0","@material/base":"5.0.0-canary.d8d95020f.0","@material/animation":"5.0.0-canary.d8d95020f.0","@material/feature-targeting":"5.0.0-canary.d8d95020f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d8d95020f.0_1579734621203_0.2419026391663679","host":"s3://npm-registry-packages"}},"5.0.0-canary.b7facc628.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b7facc628.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b7facc628.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":"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":"14db6b40413035839f42bf566b7fbf99cd0a10c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b7facc628.0.tgz","fileCount":52,"integrity":"sha512-Bx01QFxEaQnzswjEmm04NSHEcukR7IF8w9P+FkJjvGduDgineRNYiDBPU93KzG58kvGtf1ZTr5Wc9RJ+CMviNQ==","signatures":[{"sig":"MEQCIBRPl4asw/3/KOa9Ggo3T0LWvd4bdJd44Qt/NY41Wh7+AiAx4iHMG6vWj66i4U/MisYkHCRPvz7XY9K1bzXQUMJe3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKeJOCRA9TVsSAnZWagAAgD4QAIy5trOEwi2DyM+SK5Z7\nIqxiRLIBYg1fft+dDwyLHbsHCrYrFECzeBf66TDfQuKrquPaEJ66muSVPaAz\nwQmDnVJOLFnVnJi7ZAG0frCdXkK1Eg8y/rsg3WS3UexAe4bdSqBbiF0AOFxt\npLV9+YUccq3EVbZsM3bLztiH5+ylb7YL71/kf2qN5Xx8WvVCU4VQPfpM/zay\nV+x9RDrpZaIv6aMM8XG9OI5YFYpDjsfJK4PochRzj1fKJYzPL5+Qngmt+rie\no03J1cdaaaVE+1fCWK2ZdtUORPmhXDgd/TyB8eybac00mjxS4gdN4+o0PN/r\noGtuKXpUDpshtyasJkike0AnIR+qSDg8xHUA1D36hiUUsBdmJqC6sOv4oBbT\n4i98Bxn4Q3ibipve/AJK1uNyoDIpqsXMNpscKpSQqcOo9t6d6JXJyptlC6iv\nRuKmn/fzWuZQYIbs+val5dgN031njzyOainF4jzTimfgGiQ2S/f9yvVnajY7\niUEFg02ML1vVD/yg36FXy/ufzHa1kpq32QYMhQLaDbzLijlJk/C2yDjVccOA\npRRT7pNJ5lQTLo54DptlNuYA96h16yMHiIi1hhiF0k1cCGKeEi5o1srlch1E\n6v5SdGT7JX8mEA3xJLZ+ZbMaSPy8dFu+NSbVbZ1G5sitR4oxThsHMxCIIy/K\nrFPN\r\n=pyDo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"265b39c05dba4587f44e16eb788b56c1cb0153a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b7facc628.0","@material/tab":"5.0.0-canary.b7facc628.0","@material/base":"5.0.0-canary.b7facc628.0","@material/animation":"5.0.0-canary.b7facc628.0","@material/feature-targeting":"5.0.0-canary.b7facc628.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b7facc628.0_1579803213561_0.7099547930929322","host":"s3://npm-registry-packages"}},"5.0.0-canary.63f357dbf.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.63f357dbf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.63f357dbf.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":"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":"4de630dfee0713529052b5a0b62554c38f98a715","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.63f357dbf.0.tgz","fileCount":52,"integrity":"sha512-WTGkPFGOQ+4HRt93Hw047pC8ErIXs4jZxVmTWMZEKcRSwQ2LriQhwIgKw4Zg1X2Sp010MWjjwfZDKawvfnIfIw==","signatures":[{"sig":"MEQCICxaNvlOKIaM60oQwvu8q95s+1ngMRGQPFQ/wmsC2bLoAiBc3oTYLV4QDRvI9OevTbbyI4+/EPKTtmYdiZyvHujq5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKhZ8CRA9TVsSAnZWagAA6CcP/RHciBLuoIQVJ0ODDzK5\nSG2M/FqxRSdKTZDf82e1xjOms8WalxJ65EilwEGh37HZhiFGE5bt4A8QF5KU\noGbjQdC5FUeukdWwvmhcFo2H39zCr9C5f7w6gQupCFJ4VdnIcY1C0SXuW07Y\nHMc4ZTeWDLBilEd6lFyBk/rNTrV9TGd67q821W4xTLHpKXZIHUds05YXFyn9\nUE1yd0noFo2/mMR+gP43QNBl10q66OOVmVNmOuYIDpYTL+TXyzm6wJyS3zkK\n6xRqnX3UkIsel/NkkOb7Tvrf4LVTOL65Lc63IvgcuqH5kqbrAQPjs2yCVxCV\nZBPeBT3JIsM/3D6ccN6Vu0+8tpTjTNwkHS3SSuy5X02E7PSp6OPbH86ZMaE6\n/cy2IJJEnQ/eQ6eil5hwknjV7yNP5ntZlFE40F947V4Rgbb7ZtN0grZ4fNAV\nEIEiuDv6qk4zoER+iMwxftYTnBrzHLPaKKYhQC+No/mYuc+smUjj9SMvPBSO\nypZorS1YKbEIVmKjv6E4octaBPh9KHOn//NC2wGfSa+s9jeclQEql4XBZkTH\n1IthoqKi+4NOP+zZ4blJMbVKmKCgG0MEhzLyiy3KkMqYtpNQ+UD59tZtgzX1\n+VuI7er6QqgXDKSjWL6KuL7hF/poLWzuponxfpqzhqXx2ljYO+FNcJPf6CX8\n8dKM\r\n=vTSf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"eeb2b38a1cd8ef32c66d35119a666a4b01da6d7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.63f357dbf.0","@material/tab":"5.0.0-canary.63f357dbf.0","@material/base":"5.0.0-canary.63f357dbf.0","@material/animation":"5.0.0-canary.63f357dbf.0","@material/feature-targeting":"5.0.0-canary.63f357dbf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.63f357dbf.0_1579816571723_0.5333698495176689","host":"s3://npm-registry-packages"}},"5.0.0-canary.f2426d26e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f2426d26e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f2426d26e.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":"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":"a37eef36dc889931c107fc36fba90d7ab9dd12a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f2426d26e.0.tgz","fileCount":52,"integrity":"sha512-ruTe6tbmaWMU/XA2vaxlPruMax89uhGODhBAs4RsCLtDyGCO3ceOHw+E9FYV1cxYjSCD2mjImOuMy66tKINPhw==","signatures":[{"sig":"MEQCICaF+PrQeVnX28HNnDOYaGJeHAGg4nT10eMuEW6chiwoAiAyFtcPWY6R2gnGzLQpcVolz/v2oVSYcY9gtJKogZLlVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKjKRCRA9TVsSAnZWagAA/80QAJ47Etj97nc8p+opT519\nYvxTU4Q4hsI6O2ihUBDLjIkTccRxMCxw2Am4r1zCinI5Zlhwl7xR82FfBcJf\nXlYoCNkjXyOL/xTmXqO1f43/vEx2czRlAaRW3G0LGQR6FMRKHg27GO7JkhJS\nkprYoItCEajgTHkYbEfGQF5evsbiCvFknxV3WbAj5Z2GNIKckLztsA9jANH/\n3TpQ6vdX+RqkcPzJfjiFekmjI8asfHWTsrZa5iMqgKovvbxUvEnj1q5ypPtf\nFpaqFhNLxvBN9OmpgreJFACyTc0rvo7V7LkoD65wuvRs0TUxd7fOEpxRd3bN\ngnFVguBd55OyMvRzmUZbxsn9Og9kVnEVH9VQJDE/3/dI7qLCwmOLme5UZB2E\nbxsFeOLKZ26lfgDtpNZQG40+CuHliZe9T8YADoQd7G6nrWIf29lxAPcShR7X\nPHI5oW25knCtf7vNwtBFQDtRRiGTeMwqrqIhdev6116Uo6bkPf9oZNXJo15M\n8MJ6FjiRlvKL5ZxpmYdqDT2+xUmQMHcKLuV1gnZYQY6MTmDP6p4uRYR9UgB6\nUvu+HoXBiszgH4+F7kI40WKEIT68SPlyZriVNAnnk9SpmrRMGFKJlcXF6ZYL\n2byzUdwFVJOFw+cjrPC5DArVdFCca7GUT7KWVZ0vVUMqx7SKnfaR5VO02Tp3\n1zwR\r\n=cNav\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f25cc47237fd4889c25ddd16c4d80cff95fe3c91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f2426d26e.0","@material/tab":"5.0.0-canary.f2426d26e.0","@material/base":"5.0.0-canary.f2426d26e.0","@material/animation":"5.0.0-canary.f2426d26e.0","@material/feature-targeting":"5.0.0-canary.f2426d26e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f2426d26e.0_1579823760932_0.821630172755897","host":"s3://npm-registry-packages"}},"5.0.0-canary.7f5e0c23f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.7f5e0c23f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.7f5e0c23f.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":"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":"74c9f1a7a3a4044b541fbf2f026a32189c16787b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.7f5e0c23f.0.tgz","fileCount":52,"integrity":"sha512-JxkTCfyUuWSj1JInGc4kKSeLeKtU96xg4P+CtadakPatnbj5hK+xmn6DgO1nzndDEYEZQXFhM4d2omJl5EdJVw==","signatures":[{"sig":"MEUCIDpSAbCvxPKtKtKbd4eATAOkCbAuKS/z+EQC5D2YdFAzAiEAlMZXiEirFnGoTUr7Xtnh5DxHLUWQN83TiSlT/qCZr/A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKx/eCRA9TVsSAnZWagAAowcP/Aqeld6KhH4IACW4G52y\nzCgaByfmmjhdT6iuo4+YVe3Ka2CX37uUYhCRmPxVD8djc1VrFtEULS8gw0m1\npEEDqPV6x9Q+yzi5CvAkiE4pC1bqVdVglOJAIWQzb0SpoxeGIdfljj1g2RO2\nupI01qliVmN+Rfhawtnjk6qH/VZ0Xbj48nx9mH/yxkMNwUoxp9J+Qd2VKBzN\nAh58W8pB79sVuqTiw/KC/3WdAukLDdExVTdGpafTbSoBcPKHF9NmPVbYa8AR\n7x83IMU5BkQqsTqncWfiVwjURgUPZ7BVDgEdw/LxFin0oSl7qmXNcM3in3iq\nPafjS2fUwLun5QTBOKr0Ro5LGFCiaZqO4CoTsKnVuYeHQGQnkwWYzM12hq2P\nA/zfHgyYbUezT/xg6Rv4C8dUZ9NUGxX+ACWK5LCsn4fYVXPl3lVyPFAGMmt9\nqZB8HLYqsaQo8T6gzuPHC1RRI/n9keOYx4Obzuh/V+PcQI+fBwjnAARdebIM\nfuLOetpBxdCyIgj4LdTa+UceGYCERWUyDy7N+trgh3lpXhyRPO0WM+cCfzZ1\nuJpuUwkAo9kFu6CIl0GpFy3gKrNsf0l8HVAY6Ur+pORORhRILFpCEp/sPS2O\nNfGlpeO8Jo93xnU8H8i/1x60hkV33eyBnpPqJuq560kTlMDrWiKrbZ4FO0Xm\nlSJR\r\n=1h39\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"619b057dce90a552f56e341228cfddbfb7746acc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.7f5e0c23f.0","@material/tab":"5.0.0-canary.7f5e0c23f.0","@material/base":"5.0.0-canary.7f5e0c23f.0","@material/animation":"5.0.0-canary.7f5e0c23f.0","@material/feature-targeting":"5.0.0-canary.7f5e0c23f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.7f5e0c23f.0_1579884510305_0.5784103228506168","host":"s3://npm-registry-packages"}},"5.0.0-canary.3fc3ab520.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3fc3ab520.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3fc3ab520.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":"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":"754ea8ef25eac8205ef9d7de4636a73c44e0a1cf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3fc3ab520.0.tgz","fileCount":52,"integrity":"sha512-92FD7adWw7v5WV9zTfje0/H7HHZkXU9QYDYu2Cy3KTdp7+mt6Kn3GhPPB1MEC9/3FCYgxQrsMX7mGExk5fUuDg==","signatures":[{"sig":"MEUCIE/356U8iuRDkk3aCl1RqfFZvq4NAFEWQZXRiRJIUObcAiEA2/BRDN/NwL4w2QUARLEwuQSuKU8A3pHGJUqs2kYoOzs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeKyfOCRA9TVsSAnZWagAAyRYP/jCkeW81YbAU62PS8O/r\nZLxwle4HmmM1/xlvNrp5GQA6dMz1qlHVDFCmTqLgw7nZEs3CQ2fnY3h48jqy\nMPQ+P7SS6XWpvAH24R4YDOhl7e78EYjOmgTSpESQVsQe/PBIHzaknVb03jHD\nGbATFu+DNAFiEBVWQSit03eKcPjAF/ACy5nmmc7+vrJjPhRWmOZKokdTfnfW\nWZtyX5NQRbjvDMt+OUuQviIbWEz39gKwgQ1xo99hc6GZ5u8pwuElhY0b+3NH\nlLAKM9Xbi2L1fcBwdZPQVwnAHweCf3unUPmySaU6sdFdPK6TKtjL4sKrDxev\nK3a3OtkxLyEWRzbpdyILa7Vm394PhenIo670jVfU8uiJBGrR/EZFDGibqf6d\n0GMx+eXmV18N7FLe4fLhIz7f6rTdT9QIMSHu/AwL4bsHMFpQmoy7WzPsi1D8\n6PcLwJq4T3fI6d4jmW8VlLy7blz0Ynk4cQX1uNqKAU0/APkKymM4q0shJJQh\nPL1glfnSbOTdHOJhOudjugb2+CFJYLhQ7UzMV4oLixEzLOwV9Ut2vRP6rX9J\njbo3H+PQEEj94C2Hd93cu55AkgbDAFpYUQorIMWjb5zZINvbRiTHKb/Xd9E3\nVBNZKue0mwVqZMg3tIuFJlVKpuj2Gjw6tc90JrwraDhKzrUXjKJad2Ycq+/l\nuHMy\r\n=2gXo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d15050fe97c7130fc9607ecc53a7eafd2b9c58ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3fc3ab520.0","@material/tab":"5.0.0-canary.3fc3ab520.0","@material/base":"5.0.0-canary.3fc3ab520.0","@material/animation":"5.0.0-canary.3fc3ab520.0","@material/feature-targeting":"5.0.0-canary.3fc3ab520.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3fc3ab520.0_1579886542162_0.22313566920485828","host":"s3://npm-registry-packages"}},"5.0.0-canary.80a4d326f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.80a4d326f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.80a4d326f.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":"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":"72ea0d90e3c50527ba5734741ded6df9c6f4506e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.80a4d326f.0.tgz","fileCount":52,"integrity":"sha512-wRuRwScSnUBeV8osZTZ/IT47M6HQw9Rp20gd171IPA4MhYiArfKN/bLuim6t0k2IO2SVKI61uQZ8NAtE8TBcDQ==","signatures":[{"sig":"MEYCIQDEVeNp7+mV0EGWHysYbwoXf5KOnFbA/QtcJeukDc/9OwIhAJRaEeVGnBJwvJ6fs6e6gNdEj/bAemC68UBgoiFUQRBx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK1e7CRA9TVsSAnZWagAAWWkP/jOHuhIZ0Y+KwgH+3rjG\nidB+o7uqzM4r65IzpYVC81tFoFibgVraSw11fVp1jU6PSpXzIYyHjjUPrIo6\nde9CQHHeVjdGh/gQ+FY9IqPzQj2TRqP4SYiWYNWb6ACIh2EYhSty7IvY1pxr\nFehoE/534YaxFZ1xPgWGtef8VY5w8yM5NIkl/XhQHOmAWTX7/SZBCUJpp0ZA\nXdZjFhPWf1QAfCSHqK9HkqBxEniZwgyIb/trVkvDbPl0kwSQiqfE3kMOZRyU\newx+6C9QtrML+HhPgmBJ1QbMPUep54eJFQhp7388cFPNJfoPkUyiDWANyyKG\n1lmge3nMYRLf61ibpzxmcynDkXrM6XVO9W2pfI1u9fWPqA9Kz23xtKyKl7O4\nTqzTYJPm1EjsKM5hYF64taWyk7HtyEa/qyPFON/nU/2We3o7VfWdyejnEHXh\n4s5Uu8QwK/1d0xlNDSBi/9iqFcGs2tN+udDKLHcF98S0W5aaEgATxyCvp5MT\nTwiTF+GthFqa2cE/cG7vsXZJ3j7qHK/ZUOqEK04X3nqGdXkNJG2i3DSxnexc\n07skJX6w+fCTG23H8xl3oSFJJ820+L4R1+5E5yr3AY160Xpo/5zOTuok+rHO\nU0xXglepMSWM9C1cxo6cV6MAcX4b+BRiqVbBiG4n3jW9HxFyJtrP07SJaxw9\ncJ3g\r\n=tMRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b0001f5c4ba1986c74470e492e82bc13e15e2ad3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.80a4d326f.0","@material/tab":"5.0.0-canary.80a4d326f.0","@material/base":"5.0.0-canary.80a4d326f.0","@material/animation":"5.0.0-canary.80a4d326f.0","@material/feature-targeting":"5.0.0-canary.80a4d326f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.80a4d326f.0_1579898810941_0.9693797948140661","host":"s3://npm-registry-packages"}},"5.0.0-canary.ef7de4def.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ef7de4def.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ef7de4def.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":"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":"8251719a1d299ac32e096ebd21dc3df542b1985b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ef7de4def.0.tgz","fileCount":52,"integrity":"sha512-HbkXs086DN8dk+FnQ6PzW5ZtgMg6UuzFWWAPrIDoq+jAcjeZyRhJGJUgfs2/mb37Mps8aHYoFb4eaYzyzheIAw==","signatures":[{"sig":"MEUCIQDzYnAJZaGE8tKkO1Zxl+EF1KhxqS5SLGhlMtBcV9INGQIgGBwfbR3nwsA/wLnQi4JIMp4ZHG06WvuJtQfVnP0aGYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeK2KjCRA9TVsSAnZWagAAYmYQAIbxTOXs2u5qQYHoOoxh\nnfFRB+SqRp/jMz6nWKEPci+Q1kmh0agfxv+M7hE8diMSJtoWaU2Qa3GyTqxB\nwZBaX09eB9syi50yR9zCtEcTFExEvLawb9HTQ98sEq6BVEjab+YIpPu1hrnr\ndJiBhyKF/8kElLS/axRYP7M6AeB4NPpLZ7T9TMjVfonMf8exTO96sqHF7Le5\nuM3WGQWD65SppJYkMICTJC3P+x7hhw/MnCJKWQLgJFCHaONgaCAc8eHmOs/h\nd0YKj+i9lexyMW9uVS4DSje1E1PbtO8W/XBI8CCNMPmSM7fzvxalARAJcADL\nRo/u8uBgHgCjkRsT9Vv+FNAms/vujebfznnvxrirAxiSbDmesya3sBv8Yd4z\n5V3IIb8aW7KjoY5wdbCLvFvaSwtvaSm/bn7dy5Bx++pBSmY4br6WZwrZKnig\n9yy3BDjIThJ6ssGcK1Bzb4WccrdJ5SHWuSc6NAuSFyPivJ4l2Bpy4fnk1vPB\n85tQ+gfvxUClw53kYQhsBQKGepA5FyknOjJ+1YODULIVv66S+2VYMEZyTBox\nWHcI5wCTQFJshLDhA71OKAuBBYitkoXlmcVEvkMUEnedPYJy8W2eGD7UuJ2d\nZNoP0sJsKVZtvaFrm0w4SYdxV6OpZRq8W7vLurrA9gAAZHlQf+WdvRJD+2Lw\nFo34\r\n=POMw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1ac98da12680a4581dd0427e23f1dd1b95a939a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ef7de4def.0","@material/tab":"5.0.0-canary.ef7de4def.0","@material/base":"5.0.0-canary.ef7de4def.0","@material/animation":"5.0.0-canary.ef7de4def.0","@material/feature-targeting":"5.0.0-canary.ef7de4def.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ef7de4def.0_1579901603269_0.6866653881382951","host":"s3://npm-registry-packages"}},"5.0.0-canary.93e2288b6.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.93e2288b6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.93e2288b6.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":"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":"6d65c8d53f76416b998a24fc7f9a45b9e945d0b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.93e2288b6.0.tgz","fileCount":52,"integrity":"sha512-lKUAbIo2AzOgutoeyjf3GEYJCnoHCx3UstP4YuPFkUD7/L3KDNdJUaVKVt3+GEBslDtxcmTfZPZ4iNDFFwo2PA==","signatures":[{"sig":"MEUCID86mwy/VdyKWCcsfdnAumoavWokcEZyrRveejX61ne2AiEA90KAoYI5BCLxN6Cm7zArwcfZWsM2j8uzv714wYDOa6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMGfbCRA9TVsSAnZWagAAgB4QAKA2qu5IkF7maQOnTqJS\n4Njk7qCOYsa+5u0Osl86pVyJW1mPIxGRjWbwRz3CZ9Uf73tQ9wVzpp47UeT2\naDC506Zhhopi4WiUrCn4DIntxW9XmuORPb+fBaIwTApYoCKoo+OvLFPFcEES\nFrVH8MkE24PBGpp+icShtaWGhnW8iPyp9AIZ9Y5gCx7yLkaV76226Q9gS5hm\njxRs1V+7Kv073GlrMrVWcL3SfTLW1Dr5vrCmTidzQyBk6YXe02Vb56pQ8Uwy\nMagLUA21Qflx0Bqwi+1qfQaOG5PwCZRgE30dtLo7mTCyK+yn/LDSxMu5Gidr\ni9jcqhj1moClm7GeiYNwScb1inPpJ58s9XuN/QzhbvvF40L0OJrSPs4zPaE1\n9H6YAQWEro07q7znsX1B17Ukdrgmk56Xd6e6FPviPOkclo8g8GSYid9NAS8y\n+y4n4UHXW5eW/B7fjCHEIJqQOj0cC6UYF5OpnxWvkF2f4XZEHm4GSFEgLbla\niP41bx3mwTC1N3gL+nSsyXFIUiN7MJBDR73uaJSDBM5yJLbEyOPNcar1O1sG\nu3h654Xy1KeGzot0OhtWObVxRKjLM7HDoTucbGvBTcJg6t52JY93OiymKIRl\ne6Mv/fDj4uHik3RVvgRQjxkc2nW/3SkzpEfWTK5i5nIt6CPBS8/Vz7EEognr\nz/av\r\n=FK00\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"00984d219befe7ef5ec7c042cd975979249ca8f0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.93e2288b6.0","@material/tab":"5.0.0-canary.93e2288b6.0","@material/base":"5.0.0-canary.93e2288b6.0","@material/animation":"5.0.0-canary.93e2288b6.0","@material/feature-targeting":"5.0.0-canary.93e2288b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.93e2288b6.0_1580230619446_0.67344229280041","host":"s3://npm-registry-packages"}},"5.0.0-canary.34ef15f67.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.34ef15f67.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.34ef15f67.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":"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":"6790e72ab39405f8a5efdd177e2a97236e0d9ff4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.34ef15f67.0.tgz","fileCount":52,"integrity":"sha512-aRQoYTozHyAAKFMMcvfjTUdOsqQ+AatwTuzT/C81+eNJLa9kM7Ac0uQgtmRB2UaO1+AdkHvL/VETKiaJOm2uNA==","signatures":[{"sig":"MEUCIQDwGI4KiWLmyVoCPJxo+54lb7LnNNCHHp99UToRkcVybQIgET/WxfuVDgb0J43JAm7RVCQXO2ofXtcngQcRASNBSGc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG5zCRA9TVsSAnZWagAAqNgQAIH/Q1rsk7x+1AQEmZ5m\n43lOQaPYdR/5jHUkhVbdls5c9LTB6pmAyhW9wvcIojqKCsCQLajQV4PyN0q4\ndJ0xWcbOqv+pLu4ftH7WRrmjbNgo3qXrc6Na5ttqP9MhDyBxnTHqT93vIoAe\n8ixGAuqkt45kaZpxNf/psVnAwrxqLm+hIPqzf8jSB4T2q4KOnkbxz00cpyXa\nVEOqbe2fC2MJUGjrmKFPz6qGHPofOqKcveW1mg97T6hjPSMIL2t0iYhAXwld\nAVpDqMHbkAH00sUJ2WGFJbdJ4YNGA7Lb3lMAF1TsrslIMdHdAAvWZ1FtSBmb\nOF9tAuN4htOuJacV9yuG4fx1RHF//LpT5W3qiNkPEnMJ235rNaKv1GaVva4N\nSTPpXucTKT7uaBalj4w2wBuiqJQDNSpKoKceDPX/4CTPrUrWK1iXZXGDBLBj\nKGGErA76UDPhSylJmvyp4eEAadYFxS1BW1DMg22G68OBt5F1TWXz/+v4ocf4\nFwczSh7PuXIo21w615SOrdIfvLX2y/HHES0JPNUM1clAheCq7oUocURbwHwI\nS6CZ25vts4xN95HBKl/BLEWAtHfz6ndHfPtIMLBHj6zgTJ0Gttp/ft9gh1Lw\nwgv3wx3HFv182cLQ7Cygs2bxercRaBtpYy2F6S2qde1CAemPrvPgS/hPZKR7\nLazy\r\n=9oCa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"21f8c61e71f0a9c48eb2042e25093b7a821e30f5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.34ef15f67.0","@material/tab":"5.0.0-canary.34ef15f67.0","@material/base":"5.0.0-canary.34ef15f67.0","@material/animation":"5.0.0-canary.34ef15f67.0","@material/feature-targeting":"5.0.0-canary.34ef15f67.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.34ef15f67.0_1580232306958_0.21734326129565562","host":"s3://npm-registry-packages"}},"5.0.0-canary.d3d176ba5.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d3d176ba5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d3d176ba5.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":"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":"daf2ce0effcf9794e1159d1bcbe3dc72643296aa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d3d176ba5.0.tgz","fileCount":52,"integrity":"sha512-4uzZO1NOOd3p0lmuXxMrQR5JfO6rMR6HyemZMZqrmuq6ImZZ76QRlBdsI8itQsOtDNPM4DeGKJ/WkqRM8wdkgQ==","signatures":[{"sig":"MEYCIQC9SAanqGpEFlmnoOU0lVHDh1TpEKRa/atq//PhaWxyIQIhAPoemuCJgDCzUUfyZv1MmRXxGHO3K5a6LDtT3MQNhjVD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMG+pCRA9TVsSAnZWagAA9n8P/0g8lutNwqtgNBjtFbsY\nBMjqLORWHEUHtIOC1zqtx/9mVYOhAdLu7QK4moP+3IYW+NtaJsteZwjVbYG7\nDFlor/fJdslDiNoPLgTZ5wwEY0je08EsWmPhbYHZ7ckl0/PHY8EDYxIIrkTr\nTp/iC8/x1hsCGbiyE7vX3X6Utly0XG3n52RPQhdXi+F3uXc4lX3uNgqIjyeZ\nAhd0UJdR+XYlIvFpFul+kQPb8wYzXIfoiJK+pzRHbne2cTPGQxdhqPPqb95W\nFP9OWWDezv7Fy1OKP0oIeTImZzjNwCcqv4pKKXrnT99NDmI4if/ItgPawG/b\n2GR3xSGaN7+B3xXJAbtUuWPiLWl4DHh8ZBIFVBMmRBsj092YYsuCmxVlh5cK\n7VcwvRvAdk8gGulw1h+0RmMuMIcmAaM+VvF+JCjY8e2kxBnD7kQDimr5fwL3\np+as6ke20yim5P4ZOjoKr9Graygv7pJATwqR2zrZye4SZy7X0AvtkOm7OElu\nevD+WBe/ge031+cHelJ3LaSNrP+ApmVpXUqamqv3WogucKJ1oZ2hgIxo/Jj8\nH5F7sjJHFFKeBS76wuMica/jhA2bmTlRR127d0Hb+iWYynCK/1rA6UkIiOYX\nLP54rCKyayT5AtCjx1zsDpe9hTHUrrvAlPv3GEE7OVZr8ImY/kLA7kJ6AYt2\nf4wO\r\n=RY9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"218eacd6961bf740e059146072cd9e6c710dcdc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d3d176ba5.0","@material/tab":"5.0.0-canary.d3d176ba5.0","@material/base":"5.0.0-canary.d3d176ba5.0","@material/animation":"5.0.0-canary.d3d176ba5.0","@material/feature-targeting":"5.0.0-canary.d3d176ba5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d3d176ba5.0_1580232617406_0.9287436946905139","host":"s3://npm-registry-packages"}},"5.0.0-canary.32c1df133.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.32c1df133.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.32c1df133.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":"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":"0b9062bfc7d464e3dffb966d57a50b6aefb41f95","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.32c1df133.0.tgz","fileCount":52,"integrity":"sha512-UdJPIra1IrGpNWhg0ls+pVvpCodKvK998+FbEzsqTvgGIMYZymP4GucUR18mejcq4HTLloXSYlxYsf6cpypLZQ==","signatures":[{"sig":"MEUCIQD5UsGTa8vFLKR3bcKEfhCA+gXWpdyiKnzOXV4qeFwD0wIgGcZ6MqR1wEpqZTsiSp06oJw8wobxv7s7aRX7OZoae8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMI8NCRA9TVsSAnZWagAA+nQP/iN1d11pItFPsAe2g2S0\nHXzARI0eJym0bYAtMvJdU4z+TOurcZivsR/evhv3tuVdkDfKfgLzfuU3PeiD\nqrASyU34iy2v03nIviM6sDRkRBWGBizMAPRqoFRHv9fbnOmXaH6TraAQ0WIY\noTsvIisaPZjSvX8M+JE+JXAdt0hOnIoSs5yJJ+leCgt2/OoIkDjf8T8M6JLi\nPtRuaYU1TYNAGc4bW4XquktzT5P5OCHPfTuUn9xKaseOzYuJpG0JA4QM6qyc\nCuABQhTro3xDnm6yttrlpJf30uq6Ij+H88CaxJ4Gnuzvi1cFqXYayPUNxMlF\nkZ93dqFFLPfv/IKUg17MgxryetPf101rJ6eXLlTn/QOpvV3OATmSuP3DRuJi\nXxjeI3BiW7YxhpOEwcYBWuaL7HutSfsWy3aatKUeWO+VR2fxTTXV1sJJJ3OF\nVyh2IdyRYanNgd7H3Ef3hI1LtWCPaHTBeUZpDpG4mxQ528qTjazJBKZTiVpC\nGzj6q56D8das2uj2aHyIj0ynRetp94r6Q+V0DV1ZNOtyDjXyYSdudDUePela\nZsfOCUPWXVLVXwoKRIOTXSpqtMPRkFxRue40qp5IyN+OtfP7ZvOr0k3jzp4L\nclCvk9FOjW+31fD4Fjk0cfvBmIhYbEJntN4fNiTtm3qXg9Iudz5oEUqc4iQd\n7/L/\r\n=0S63\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1f36bc15da25ecb33aaa27693bbcee65c1d56eaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.32c1df133.0","@material/tab":"5.0.0-canary.32c1df133.0","@material/base":"5.0.0-canary.32c1df133.0","@material/animation":"5.0.0-canary.32c1df133.0","@material/feature-targeting":"5.0.0-canary.32c1df133.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.32c1df133.0_1580240652851_0.9766681903639165","host":"s3://npm-registry-packages"}},"5.0.0-canary.f3adce86f.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.f3adce86f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.f3adce86f.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":"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":"311aa404eb6b85d32b83df8defe3f395066ea908","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.f3adce86f.0.tgz","fileCount":52,"integrity":"sha512-TQU8AjMDd0dcMzRwoT0OYNoHBEc8lsy9ZT43Ek4SOY5me0B30QRZdeWG5dty14kZZHmlsPMFVT0xfvqF+vli4w==","signatures":[{"sig":"MEQCIDohWf0Lkfhr5llV05Xil98HiCBXR47WGu0+3Kbg3+3EAiBabLFhju0+kZNgWtgteUuIbKtOcehgAjGNW+pFFEzgCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMKx8CRA9TVsSAnZWagAAkOYQAIH5zWnROIv28YbNevJI\n3WWCAoTNNqJVhAiKteEDIlnqGkkFl1io1MNvpcdP9nCqNB7Tutu0AQzqxsm5\nnD6FibyLq2A9d/LzuKwwodKaG577EI+o/ZoQEl5j9GLAhvjFlQExtGU18yZ1\nH8QZDRtQsJBescRmw4MJTGFN3v0IfkqZnQ9EOoPQnNAHiF741PDnnjDKc5yO\nCUxiM/qwqx115Ta+xOswsYYYX3AeL7q7M0qMzyb60vW3++4UYYxDdOuzz/lI\nrOIOzj8Eky+bkcGcnqjUjySit9BYuDYH2HddsqVqyWiZQePoaarCmRHHGvy4\nwrKnNOdoJt5sIilZG1BVzSt+NCTYVTEdvX0JDbBfy7a1myP4ESRkaYArqOol\neQ/vdpPFwgV5f0oPNIx9M/9pTVwwbMeOS3VSF8h34qvTwk1IT3dS8KPZ3cUD\n7ki3ybJ7ybrpNWOREQ2WPymGoSVSeve0+gQKDsOPl0HQZdBIzODa3YZWkGHr\nnQUgDLOWk8ZV5Mk9a8438Y7S03FLHNMydsF32wSZccQZT/Y4wmDPg5fyPRkq\n84ws0Ixk2mnVvH50Nr8+13JZ2tUPtiUAiv2IxnAHeNkO9UsPB2HjJtZII2P1\nQZyq2ru4TVLGJ/WUL85OBgjOcYfKDkb7hhltLKbX8j1LHiPxZrgbVvqCfnto\n19T6\r\n=9ncv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c352913b9c3e29f7b404b08db88a506e692187d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.f3adce86f.0","@material/tab":"5.0.0-canary.f3adce86f.0","@material/base":"5.0.0-canary.f3adce86f.0","@material/animation":"5.0.0-canary.f3adce86f.0","@material/feature-targeting":"5.0.0-canary.f3adce86f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.f3adce86f.0_1580248188330_0.9515531649445004","host":"s3://npm-registry-packages"}},"5.0.0-canary.a4423f890.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a4423f890.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a4423f890.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":"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":"5e1f486cdc4d17e3f9e149ade01155425d804a43","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a4423f890.0.tgz","fileCount":52,"integrity":"sha512-oDPT4PezZxc7hy3NFe19g0pGRIPKey6Ja3fzXmBz04rKObEXDUiTIs0JHBdPZ2Sv77ED4vmlU36sW6kgqCNdww==","signatures":[{"sig":"MEQCIDr/89g7C2Uheq6gIHBHXDbD18Z41U2cGHgqyaGgJ91hAiA4h/cIOHzOk1h4IDuk4iNl2YjxfztsK5x4d8sbmd364A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMfTVCRA9TVsSAnZWagAAtloP+gJ86Jw/sJxMirE9bUro\nWQ31IyyZixx4UqvjJcqMEWN1LrmV5MXXkxG05soy4wI8KafCjQ4yaSOh3eMx\ncZyUYXQOIdknqJLOkH1QTI1Ay7/TikMmWTtGlppdzlIPds6k7OXbn/6CdNV6\nATH4SMrMijeJZdYvNmO7kfmi2QOV/xOL2QscU3LXSC0vknjgZO8OgD4z21fS\nfOS3dL9kk/2MtPiv9f+8xJ22VzEEOec+7seVRVdzZUl+Emyr3Q2KgGEV7jLl\n+2nJu6lTOtU8hOE70HvmGgJJIz/D4AZJLPHitrAJ9Ej2udIZhWE1JwfxOrUz\nHHtfHCiXvEVD/+/2owduG3rnEd+nmyd7Aq9nsTgcirqYlUuexyDCVpxv0Ys2\n9kgeR0YPrf7dzZzwX3OxkVttEHt5A1Ut+uAx7jn4UcfboBBqoO3Z9IpGcOQx\nlarJxbYe09NCQ0w5B7aRiHDbnebqm05vfO3E/txcXaP8K4TxNUTd2ORhb9YK\nHzKPRkg8RoZk7BHqWTKrHjWQ5cxwK1TYbwAYLXR9Cr1IHyd3wBaXX+kyiA/W\n78eAJooeoQWI72y/NoduQxdBh7yQHJhuG+RQJcY2+YOkSHWyFkhhbmGlQIBV\nHKB03QlyEtVXTKk7mcMVE7TQz/0u5jf3Tct6MklNytqxGdqpqGR4hSHBZX1k\nshKK\r\n=Xh3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"981df6741191636b0a527b318fe896f47f74cc0d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a4423f890.0","@material/tab":"5.0.0-canary.a4423f890.0","@material/base":"5.0.0-canary.a4423f890.0","@material/animation":"5.0.0-canary.a4423f890.0","@material/feature-targeting":"5.0.0-canary.a4423f890.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a4423f890.0_1580332244791_0.9290182968062226","host":"s3://npm-registry-packages"}},"5.0.0-canary.9351f167d.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.9351f167d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.9351f167d.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":"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":"a3a5c9523662e8bfe529bd0511e321546e79ac25","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.9351f167d.0.tgz","fileCount":52,"integrity":"sha512-2gMWVF8gr57s/V9yzprfzF6TTPiXqPM5A4nv77IVIoynEn2dp4aBGO1HXYvK1fNLXac5+jSbLk8+v9v2kMJjGQ==","signatures":[{"sig":"MEUCIDsyLJiRbstCdj7c9SQjttOXt7gkgaiyX+3VmSNkR0iuAiEA/y/CRKiizCEOBIHEk4o1ewPmMWVscmf5oHrOjeqQAIQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMf+cCRA9TVsSAnZWagAAizgP+gK/a4w4cU3W7iwOleSm\n7CSJJw5F6863TchpudV9Y0ugp+XwF0a281zDPN0GDU9wBPBbRdVP8ICkYUcv\nETvJ8cfi3WtvSLM0zaGmLJp/2huv0U6hKzFZu6BBZwyX44RzGicamF94Vll/\nESLnC/AYD7B/aZwUQ9Aal3/miN0GY6eBfARpfyuOyxglFlxsLrWgcKxBFNaO\njp0FGu638o1QLa4+8xK/7DhM/Alkm8VuZO0XdNRsG0fy1+lLLSod3VRqIqEb\nNQx7XbiT6pnBr+agUqsxvSvIg/l52Jno2lJUwM/sYrZD6LmtOSq8j4G3gFNn\nqUXUUPHHLkE3WMZxkEIeWjXs3zVuRICxsjIcOQ7XUZCiJZzWaeQqY52VP1yd\ntJm19YUeg3Tf4htwCHM1aA+YkyNKu3l9SRzDocHcTJIK5595AowNu6ZPhs5e\nvUmJGyxJetBT1ENVyuRgtjqF0nwQlD7ejWJQAEbga5oh5qvsT7E7pN0ykaN6\n2oeKaVwwGGRnhPWzkLHlHnFAr2hVbvbAgpcMtc4PcaNABQALV4SbF0bMSdvN\nKGjeMEAB1eRCZGplQTlPdTcaIOD04OrCBBCJ8shzksbzMprSS690on5/vFba\nieeyI9lxBvf1/DVZNqRjqSKIjNAgpllpwWtWqY4b+pz4VlEptC+cjAONx4mi\nWSpj\r\n=W0Ac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6c1a50ef6adf8852f326e285227923411e60a63b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.9351f167d.0","@material/tab":"5.0.0-canary.9351f167d.0","@material/base":"5.0.0-canary.9351f167d.0","@material/animation":"5.0.0-canary.9351f167d.0","@material/feature-targeting":"5.0.0-canary.9351f167d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.9351f167d.0_1580335004247_0.9076262005397744","host":"s3://npm-registry-packages"}},"5.0.0-canary.29b89dbc1.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.29b89dbc1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.29b89dbc1.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":"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":"1b465ed41dee98ec699eaea147cc0dcd22a57cb6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.29b89dbc1.0.tgz","fileCount":52,"integrity":"sha512-AkHJmyBdqwaP7omqAWljeBcidnbRqj/IyqzpNB3r/NiI6IM5n4FuheFkYj3jM8nB1u9+ZiNkmm9Yi6TsaXyxeQ==","signatures":[{"sig":"MEQCIF5e2ef0/Cmsy4KOuFVE4ntnHAulLZ3JjUbn5FySr6a6AiBstq7zolfu0hl0dPql0MG01tCL8Xn7jmJsTko3w5bqqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316522,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMgSKCRA9TVsSAnZWagAAojcP/iUJQOrrp4C187GnxVX9\nCFWSInP0K3gaWggGaiyzIxnVKILD0tXB+7qJxwdOW0qwSXlawnnCS7754nay\n8TXYKdurCbqewu3ruS9gaxdJA8wUweRURUEWTRw1jlKU2T/3L2WKdA8uuw1a\nVrIB9XRrf38TyHmTnTywhkv/UUgE716BG3FbiwAsvjLLupW60ueH26y2AGEc\nzaOtYSut24CaQ+GHHZXSmIPaB4bCsws88kfm8No1qtB/l+/eIZK5FG7mi/pq\nrmJ+pmqAWyxcIt1nv9jh5/zCRjxWQj35wIOtPOgULwbEjsIuso8o6yKahDxC\n7kwUl3Y6+xWPMORby8XZW5AdV5ZkCl8/YRly1TY8k1g84iT+Kie3p7EDjB85\nRhtnujI8zOl95qnA7qLCUeD+LOUYTu8eVzm34fqdi02iN5I3LmuARPCpQEzv\naSuOZPiJjDU3XVgrnwQwGR5FqZwENl7QrhHLkxRR7YAo/EPcawwzKBSN/PrC\n326ajWIfPzemoVlYHaeSQL+2xA0BqTy2xMWIRTsEL9gMICv1e6iQwBTHmh1y\nAK3To2cKtkVO287piUe+tc7KBydQFywO807jkI6BlLF1vshc+oLP5fhAL5i2\ntFoY/zPLHBb6Io3IR31UyZX26A6WIWbdQvPS4g9kx/Pd5O5WoGXVEk9yYy7f\n75yQ\r\n=bCek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"662c3c36b5ac6bb47c841a10193f2c717bf9ca86","_npmUser":{"name":"patrickrodee","email":"prodee@google.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.16.3+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.16.3","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.29b89dbc1.0","@material/tab":"5.0.0-canary.29b89dbc1.0","@material/base":"5.0.0-canary.29b89dbc1.0","@material/animation":"5.0.0-canary.29b89dbc1.0","@material/feature-targeting":"5.0.0-canary.29b89dbc1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.29b89dbc1.0_1580336266026_0.5994567877619885","host":"s3://npm-registry-packages"}},"5.0.0-canary.45985457b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.45985457b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.45985457b.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":"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":"e3bb09543dc76ba7cecd8edc02cff7b321288504","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.45985457b.0.tgz","fileCount":52,"integrity":"sha512-FO+vWFq3cR/uxs3ttzCWLzIRgLvS+LH0TujpoKOsK23E8sVnBx2yEKKm96c7gKwwqS0xDaxpQ0z6070oWn3MBg==","signatures":[{"sig":"MEUCIFaztat0V52Cq6LmILaucr6uNnwfrxZ6xFNEw7NrmO/2AiEAwO7d7q/hSNsphEsw+2Nr/H9EWfJO5jr/AQ+jPajoPCs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMhZzCRA9TVsSAnZWagAAo/YP+gLvAlliE0apdvt738D7\n/NqxHMI1w/I39CgDSiwbpjBqZC9OzKDbMIPoy8CBvB4iwhVSINjrpd/+Yz+b\nYkzP+2FKwL3rczI8ApXr5akc3PaUaAlmqFDktKRyMO5xdXd52n4PTnSj/i/a\noyOx+n0RbWO9d5aHBFDgu93+iP33RAPDG9InvaH4y3jCHEMc/sMSXeyGq75U\noPA+j5x56EmlXa3Vh9yuQRV1G7Hbi8BIMNHiK8thTgdLJ7ycQ3J+OCwThJd0\nToB+h/5gvGXncr3Awo0eopZ4WFmzx0hGsF8Xa8QBIZpjuzi6Pk7BVFfpMIto\nKNTLQGGedi6vI2iR5PQr/LrrQ3bcQtAe0/eqUJaHI7SwiQ1uqNjY1nRI0Q83\nJteNhFIa1XIqG6I34t0Vf5YirzdJ0XijO9x+hwjI1wT8Wswyp36QuKri/JIW\nEWdPM2Vy0VeVzUrWsG6MAOuv7L1HJ6XWWciNlvAeoVjVmrfiQG5zepHFDpmf\n6pYHPGOO8Qjl7eqkruBmciTtmQ5vJwwbF8LDXdAnutRgz2JZOfTAqZi1WU3x\nIQjSA7IxmV8E8zGbZCAiG3xIhwqShXPv7VoWrwPhzO0kX1AceFS1/H6GK88I\n90VV4QVYtx2tMUpNFvjOQka/Lz0S3y6L7V6J37vp0RNplWq+XJJPLV8cdFVM\nCpU9\r\n=P4qW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bfd13ab23e42c09d1390ffc6d7cf1caf1a237485","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.45985457b.0","@material/tab":"5.0.0-canary.45985457b.0","@material/base":"5.0.0-canary.45985457b.0","@material/animation":"5.0.0-canary.45985457b.0","@material/feature-targeting":"5.0.0-canary.45985457b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.45985457b.0_1580340851510_0.6545614191859961","host":"s3://npm-registry-packages"}},"5.0.0-canary.a1a0deb3e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.a1a0deb3e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.a1a0deb3e.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":"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":"e55b39f034ab930639cbf95886ddc72678aaea37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.a1a0deb3e.0.tgz","fileCount":52,"integrity":"sha512-NhZOibNzD9zH3E9CACkqt6LXlQ7BDF+xsIBpMvbkUBkhUbIYAljmThM2VEEScKNghFcH2LdHtVT489lxx/aJXg==","signatures":[{"sig":"MEUCIQCiKl7GlGADjEdvYfvaupMd4tJBXbT8u/JEINFY0J18yAIgIm76Jte+ZH0JyJ/6pnNGUcwrcuVdrJksziiQcBT9GFs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":316803,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeMxSHCRA9TVsSAnZWagAAN24P/jqjWXrnjTwPD+rUg+CY\nOlcWj0q8i47eOxONuG6OvBe83nmI3Ve2kIm3cchfnBB6cvFfJOmnj/1M72dl\nL3jg5kTAGrkNaNtQ3qVxNkge7Q4JAraNekDKP464Y5xkYRVFXdTIV1S4MNLY\nlaaf2OIeUBXpTGDcA+gIxesjUTKZ7RKVB5bN592vUG3RZEqODKosHOsUCh7z\naVPClhqRIYPjrHav9M82On6WHIzdt27EKhU2WCIGD6QLh6RcllgMLl8UzZun\nQbCRl53CRi0hrp0PKRpeAQQkKktOUzrGnrxybarcITMATKri9dQVC/Aau3c1\ns39tZmF64SmTgPhBeT3mwHzSBPZQD4ZLZY1uPbecQCvlCvIOv3Qja5hCfrpp\n46bQCAZg3aq7J9JJEOdF8GyL3qbfDELNcTVeTMqH4+UjbZ6Pd1E32TA6Z4V+\nbQHjrxYv3lsmm0UFKlOIKigWOK9D1I773o3PhpR7uONHeOoTlnG4vXRG6KHm\nzrn6rx0f9O6Qzba284cNn9DbZe/m/tUXzqGfpTm+N47qB/axqm4OgUq9mzOM\nlZamjimoHB0hWO0cqicADsoJmetTw38zAl6dc8pSeIVUuYrKo7uuRCSIhC17\n1QZPyiHs1UiS/WO/iRBr5ww1FAaU4KHvgXvasfN3JV74ioueac9cE3ktMYDO\nc2Hp\r\n=htOm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"515cdf56b0195423f7134244b26cd7999b647d68","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.a1a0deb3e.0","@material/tab":"5.0.0-canary.a1a0deb3e.0","@material/base":"5.0.0-canary.a1a0deb3e.0","@material/animation":"5.0.0-canary.a1a0deb3e.0","@material/feature-targeting":"5.0.0-canary.a1a0deb3e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.a1a0deb3e.0_1580405894883_0.3183698085633033","host":"s3://npm-registry-packages"}},"5.0.0-canary.181486643.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.181486643.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.181486643.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":"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":"561002cd9114e36d5ac2ba143ad198b5effd5676","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.181486643.0.tgz","fileCount":53,"integrity":"sha512-qsxASLbXnFns+sHMU2Hx9bjKJUISF+BX4eiAV046cEFWWCKAz+rJtGIpJWVj84o1GE5AoiOlMiTC2SBaq8vQTQ==","signatures":[{"sig":"MEQCIDmVFVOC395Viz7uUeqTVLlDDUz4Vh5BA8FTnNzfQFyuAiAYdEY5n+6qm8AmrdPH2Af6WWwvDuS21EYwiOVXL3+dWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeM0MiCRA9TVsSAnZWagAA3oMQAJlQIzRm5I/nmiJnv877\nFSfH/oNWMqjd9r0ew7My78y+u2PFuIKZGQzjmal6FjZU3pvMl4FqV/oOqnaL\n17Vs2siTCLoBWtKWwHf5A9DBUwN0txQkmf1aeoRoWtYyC6LBC0L0fYyuOZV1\nc8m4aUI7CiEThYBTqMTMtZjm6xKIT6tc0rzNu9QxvoALmp3XGto0USj6+97h\nmV0boZU/1epMh0hWgpWAV3cOpLQvC0h8UCWXsZ9eOvXQqWhMh13wLVImRvtj\nKCFrA28e/7wzrJhSKZDUarX6t7GGBgSnlnr9y8Tg4q+gawRl8YP8cGpiNsSJ\n1oAnjpScl4Oivwbw2zGkQjs/cbVoeRRvtC2ZRHkMUj9fPkKMRIT0u1l5/Er6\nd41RmVZwXaXmr+S0/kpIFU5ZniWe7daomVQOKa1CNFOjsSnhzLyYimNwICgB\nNRpq53QDVPEJti0pdf+10rJV9Vt8q7iD4FjMlvMCX+6U/FP9ZfTTj26wX5AZ\n7XJ4lJBvaOSSIwAqfi1wcdvdJxA50GLcR/3FupY52/oxeNkVdfNnJaymsgQ1\nBN6iQB9g3fsNjlRJSLyEj9q/IVJWkTFE7zRmN8IJ0IF5XATT4fHa4aimhUpS\njGBMWPQfuaqnFvmLGIygct/KhYGHMe+jyeJjloaPFB+UlgAdCGOWVru/sklk\nU5CE\r\n=J5Zw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8f29e2225089ac3fbbbbf9e1a64e9773ce276236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.181486643.0","@material/tab":"5.0.0-canary.181486643.0","@material/base":"5.0.0-canary.181486643.0","@material/animation":"5.0.0-canary.181486643.0","@material/feature-targeting":"5.0.0-canary.181486643.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.181486643.0_1580417825613_0.9186415693820911","host":"s3://npm-registry-packages"}},"5.0.0-canary.3a85313ac.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3a85313ac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3a85313ac.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":"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":"a1720a8196ff2aa4510f00e83e651ea1555118df","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3a85313ac.0.tgz","fileCount":53,"integrity":"sha512-OfeBo1U9PyoFS0+dT7ZD9ArQZ2vtzufzU2KgRNbNQAWcxARZwiY8Na9H65p7caM0ElVh6H4JxqjZwXjbFhnQjA==","signatures":[{"sig":"MEQCIB6Oti0SzWkb2JaHWGuTXzMLQyyEo9xj5I+aosmrSZI9AiBU7wnZy+h+NuNI9xRdYLK+s1U/TdxH2SkjfZ0l8NMDlw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNFSlCRA9TVsSAnZWagAAZ40P/RoFDsFi+7Ms2SCUqWzG\n386b+yYHZ9uI6yMgrQyMcGDyRQkXUkhK47ezyl2O9yqfmVOhAsQoPu88yF6H\ndL38rGf1ChOoJZit5OKh4J/ReUKbQSmYdtcc24UKISD4X6nm7dJCTFCy4ZMC\n2HSn8p3/8ZRSNaV4rK43YQ9C+6PF0Y19gNzCo7Yko2oxmfclOLJbs4Hv+a9c\nkfxkLxe9zbshNKEGLaDlVcbFYCzn7iDIlSnnKZKXj3uh7VhOV6HWC+ZYmXiu\nZ1KJfs+SulKGZXYXVotqe8uBVaSQkiagFSByb6YPx3ZsnLYV/9oknu2siU/z\nHAUBOhAmPti6WLJE/syWeqzxToAd6Nf/AnqvOj098P7RCuDxJsJoih5MnRGE\nDBSgShBMZDvSdA+Jzvw+iX+tb8/fWltmWiUczxPC9dJLcPxCQcdrXdBVP1KZ\n5WwlSX416SR/ZiDEDGpBbB9bzQVlingkNP5qrsVpAq3tTXVvU5QcccFRfIIu\nY1a7fWMMsof9mcWH7ReVkHmpADGVbBVCmGDKJPB5Uc43huLFmTdBYJYNZB8m\nK48EkV8iiifsg7oJTZuheAAx8FLVF1o03//GRveLH7AdkMJRJtP6qQrzlay+\n4PCMRB8flPuakwo781MtxvhjfakwLksf55kpLepYBXxTad2UoHwRC0Rce2uf\nLK9I\r\n=pmQe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a37832202a98646a817d62c20ce70cd38f089d31","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3a85313ac.0","@material/tab":"5.0.0-canary.3a85313ac.0","@material/base":"5.0.0-canary.3a85313ac.0","@material/animation":"5.0.0-canary.3a85313ac.0","@material/feature-targeting":"5.0.0-canary.3a85313ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3a85313ac.0_1580487845010_0.2979167430872012","host":"s3://npm-registry-packages"}},"5.0.0-canary.b6c7f624b.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b6c7f624b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b6c7f624b.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":"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":"3646a06d2b1aff323c829d1035ee03d4d0c085c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b6c7f624b.0.tgz","fileCount":53,"integrity":"sha512-cmKiES/VKobHfJW24q39zrjJfKACmhjfUTf8mrr6bsFMf3ZoV2mZkTprcIOS2HimrSChisz5BkcrZBLqLdYElA==","signatures":[{"sig":"MEQCIFUy8w+lGS/knYxb2Id1F1PzkeS+oHI49yXhlPRE7/mzAiB5TRjfde+uxSn3zwLVRSTVw0aa6/mSwspMuvlP9wsWjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNF34CRA9TVsSAnZWagAAOogP/iD3ANTTSISpzlK8DLEJ\nMPyGM43mju3AyTSiPfNBejmJmm3nO6/zfRheLNBZdN8T84gVXEp3d22r2bXK\nkzUU6zSDm7Cvb//SzeJLGQJokFDn+xPMtilh7qzHnOZCVCVz9MmPdPFjDDG5\na3H8yqnZti6xlvpLYKa3Yl9SsmD6u1PMNFLGzkqZQRqyrLE1usI0YhSI2Zvi\nRoH7d1EsJJiLzSR+THEBx21GmcF2swbltt2neftaz+9ED8/tmDC+Jw9ucLHw\nmYZ5k/uXKMZQKaFuQPARXeqI6QmNnyVlYvOZQW3ELS35kTw4r8Fb1QYjFvN0\nsf7Xm69Mn1KE8XGpFscGHBNh+fdDnihwqrZOqeAgZaD+1MjB1TPnEItJ4wWp\n6U2tlM+wsOL6uxBq206/xJCfiFl1zaCJg3MEREnyxWfVWr8EKKkdmqsuQfh1\nbLvm4gnaH6WXVRBzY1D4DG6mv5jOyDzxTZXiOnAmBpQZldM3yR2qaxsRrDtT\n9RfWHjrlK16gX+yY7RqTuxmilWyYhjCVWGT6m3/he7iLcJAGtapcmhOnGAZ1\nZdbg+fR6MDtbNBhpCBVvyT2IcRBsJ38MfZxy15wX9+/CpwtIc5Fgoncieq0W\nj5HoJ73Wy0Q+acLfkDDByP2GISDeCfh3Un8yqUTSqrjRxkRzXEg3ygIc6Jqk\noRxN\r\n=6dqw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"eb607bfa0326630c63037143dc919ac8ec5c3636","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b6c7f624b.0","@material/tab":"5.0.0-canary.b6c7f624b.0","@material/base":"5.0.0-canary.b6c7f624b.0","@material/animation":"5.0.0-canary.b6c7f624b.0","@material/feature-targeting":"5.0.0-canary.b6c7f624b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b6c7f624b.0_1580490232489_0.16519061442848648","host":"s3://npm-registry-packages"}},"5.0.0-canary.b3f70ebde.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b3f70ebde.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b3f70ebde.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":"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":"3c8aae56bc954e156493540736cb9105e519618e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b3f70ebde.0.tgz","fileCount":53,"integrity":"sha512-9xhUXOOYdjDXwC18pzJcVm47RobO/Ir5mWzsxL90MUGCcIZMeI3diMl4y7MnEwOUebsx8jdyZktWg7oY1gBAzg==","signatures":[{"sig":"MEQCIBWnOAu5hjeStbwfdUfxM5U0rLCVi0w3IRm0JVeyv1p/AiA3hfjugcbEAE/NozYU2GqEKeCaBF8m+HuEC+VFp7f0Qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNInmCRA9TVsSAnZWagAAs7EP/2+q7oInyoGJZdaXEjp9\ne4SxcQNfgeERx7xCZo7gpH2bAvUCO4gw4bCFNQK9KOCw/82ayQ7d73txloUU\niOdgSOxMy+KB6odjDEut79HOtkY6xYeQkvUw2X4ywuyRZVf3bqqtg52OIx/9\nfFQpGU33zY+AH7ZbwQL2nZDZaomUuRY3P+jskY0PuI23wvORID0As31GTg8J\nU6owSE8lMSddXaSeylGq332vK/TO8Hs1vJqIIEQJO/k9yo/3wlYgvDesJqRK\nFlf6NEARMcEmm1Y6LztQ/KUpOTSb0PU7WFw+zUN9Zzv7Uxv7c9paaS+gkLAw\nYXEm3D3cax1OZb209w6kgbAUOqzIsv3z3No5c7vWbOCl9rBb21RJKBi1zzRO\nnm1ioUVyobpfnz6jv32jLH7OgzpH1OotLvC4zOeTweGk3MxY1q27oEcyGp/L\njBnH1dckoVkB40qEJjXX0Hd3Gut7O0LnkSu0re278Hd4LWnZHK5RJiXvedhb\n03qezZ5nKdfNORmyC/822T1phG6vHFdeQjRpAfFPiMEnrLHoXPaxwMf6Puj1\nZc21FsHahvK8IMBacOaTP2mulTUKnGlwxMQGqeAsTCzWfki2kfRyaW+xHvxN\n2nd1UaOBffv0vttqlId8ohGPRr44kAs/dUi1wEqxrS9Ym6azfvk33tGIccFY\nRb4K\r\n=krLM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"00a0473670032b0ea60db83e614385e1e3166dc8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b3f70ebde.0","@material/tab":"5.0.0-canary.b3f70ebde.0","@material/base":"5.0.0-canary.b3f70ebde.0","@material/animation":"5.0.0-canary.b3f70ebde.0","@material/feature-targeting":"5.0.0-canary.b3f70ebde.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b3f70ebde.0_1580501478177_0.7923545005821739","host":"s3://npm-registry-packages"}},"5.0.0-canary.3e782d8f8.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.3e782d8f8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.3e782d8f8.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":"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":"5a2bf227077287a2bb1b1aa9a5d38fb68394021a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.3e782d8f8.0.tgz","fileCount":53,"integrity":"sha512-29piKJ1TvN4VN436bBnCJhXk9ScGDwoSxOagi3aNpFq5Xu2Gg7BAxZ+Qwx2zcMBw/pEXwjCbUuTlo/EvyRNbGg==","signatures":[{"sig":"MEQCICMQKdafN5e5owglDRhQk1ncw7HTNYskVxvaxyjQVmrlAiB+TOWKPDdoQZQ4ewSiQXTIEJm63IspvXGjLtcSninNxA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeNiI8CRA9TVsSAnZWagAAZRwQAJpfObX6oK9MDNHm0UAW\nwLHShyuJSJRJI87zZsyE95x2oLeggzGz96jtDMzZE54JBxoTRUsRLMKcgF1B\n/nAsRYGq12sLuRIZAftNajT8qrN2ricmcn0jKFtJNii5XwRBVF7aNsDDyx7k\nu6NlryLTZRJHSwm1XuwJEBXUzZrnqWQtzjImlQqujF2FXSULoDRf2g6PmnpC\n54SC7GpUAdW4dH6wbkIMdz8uYjLCMAPqMICM8UD8/EbTc4mL1lLmCVkVXtiu\nFptwyOXhmREj1ml6+fKQ0EX2EpvzUQbX4mwHOtWfLV7PYlE0kirtg1PGKCUs\nQKx4GQwSkstPie1R7lnZ9eflKdmBaOvKyOgkVT1r6w2oVzFfsniwQNxgj4Za\nC8WJGyKtKKAvX86gseueb+7v4D3Z4mbOBQmWshjLxr7mOuQ3MDPtPy6dQIBK\nHjFz6N1T91UIuvKsg34TKL2YK1E+cqlRQCL2S+9+f/ZTYKbOZ2Mm8RQpIKXW\nq+zVg9AQNIUlgh4RzB/h8QmbUv76eE7Qxj2MT/I4Q+BalSLqqz7UsgJK7+jC\nmLmAHSoJkPZXO/KpKKqcESpyXB8VWczaqhqV/Bbj05eGi3dPtCgYu+GkEiTo\nvLJ1Y6RRCtktZI1k7hkNFAZoSdRcZfkpnItJvCgxuM9k3WYq1LgsNOMUpkox\notbK\r\n=J8Vb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8aae1fd4299832f77f4d1d51398e5b28ed5af5a1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.3e782d8f8.0","@material/tab":"5.0.0-canary.3e782d8f8.0","@material/base":"5.0.0-canary.3e782d8f8.0","@material/animation":"5.0.0-canary.3e782d8f8.0","@material/feature-targeting":"5.0.0-canary.3e782d8f8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.3e782d8f8.0_1580606012046_0.11336123376519214","host":"s3://npm-registry-packages"}},"5.0.0-canary.535398572.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.535398572.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.535398572.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":"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":"6982358fd779c450b3c989e0d534cf9f8a49903b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.535398572.0.tgz","fileCount":53,"integrity":"sha512-Rg+Riq2lvPFs1AKFw8CvZFIZCLJqU052zKHtipgBgJiGv5oUUAYiK4paP4gC4WBB+QDxDGJbcSxrGf6q2wKjoA==","signatures":[{"sig":"MEYCIQCerbq1EZhuV1muWRwvF/l3pPup6mODTpN60WlSojmacgIhAMPx1E0e5rJRUxbk7mhApmaf/kE5DnaOFQST7aQVFc4q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOGK3CRA9TVsSAnZWagAASv8P/1cOjcePlg5IX+wHwpWs\nuhG2Ok9XuWNzTum28kaSbnR/frb5uvdlVGHms5CNl0d8gGsVYn0y6YoqYzxn\nU2l1iF9YxGWFiWwL/1zoffJLO7XhAxGgT3yvSQHK7/2sP2KfvL2ZhORd125S\nfUDEQ5soJvkCqKzs6LycW+bIV6uyHht96Kj6lBxA09wzQfllUqwgPbB8pExd\ntDRDo+1nJfBJib8B1VeWw1/QQE+61VwsoxP7RcOF2UXXzjyB4qiXRN4qiaDx\nt9LzyoOGO77Pfi7kI4SySAjUfX0K0iMZxOytDJjNH7KchUl/088HuNrHV0NB\nJVqP6KTN5pwlK00IWROmDj1Rh2S9w0AWixRscS5QuX4Hx8gHFcZPXyskprc+\nHmCJXkCHNZpXEvinjr8V0fFW/eFpM/jfVEUcyBsYJ/0Xcp1iPivy3KmLGSqc\nhH+liQg4q0Tn/mHYVIU71b370Vg2Q01gbcsUcAaH0RfLWvyrsdZJL3rR6kZZ\nrxKRCXkwj8cOVSVF8DwIWzrK45UUF2gc3Fgw5D2+gZ6XlqKX98g+ii5oFKwG\n2Gkboxk6Cro2fXi1NcWx5lSkIsqCGLdWt4JOJZ139Gf5GKYbABhVB+R9d5A1\nxhOLTa4m03rd4BbhRM+ve3sbCnYZnDTrFVf1vSWycW+gl0bLdup79IIu9tvR\nX5oR\r\n=2hL1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7f68038e23db60e7b4c44c1b17a6a82329805553","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.535398572.0","@material/tab":"5.0.0-canary.535398572.0","@material/base":"5.0.0-canary.535398572.0","@material/animation":"5.0.0-canary.535398572.0","@material/feature-targeting":"5.0.0-canary.535398572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.535398572.0_1580753591031_0.16970671234939627","host":"s3://npm-registry-packages"}},"5.0.0-canary.5ff33802c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.5ff33802c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.5ff33802c.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":"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":"5542f82f7945f6701402d455db60dc4ca56c0a80","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.5ff33802c.0.tgz","fileCount":53,"integrity":"sha512-KeoOiQv0OSeiNetrwS/wNbrqF5jXge0k9g3KnQ7Cf+9KBL9dZNUtQx6cl8qjtevujMsJ1nx+6jZEtJnCo2jhMA==","signatures":[{"sig":"MEQCIET/+Zx6o+/FkHapZ7ynnnTtwzb2m9AkSO170qyEmIaGAiAj57ovb8BsaLyGQSd9PfWIDvk6tShlEUNN8urg5HY0og==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeObI+CRA9TVsSAnZWagAA1KgP/RWVB1VTZ46se8fMB9O1\n79s6VItLJVhhw55lxqbxiJ6J9D+856HSh54xhLS5fn1DLR/vdKrGD/uGZTAX\n1+BgVrijvkxsdXYWmJ2J7ehlO2eczxuJiquzcmFBE2GXjcp+HHLREH7fHCNK\n01DmjgMPbIX47n0ta7ooizNT6xU8pJTVG3sNgS2G84LjR4ugD30LHoUij4ZH\nqUvX/uKsas8Z8zpOoGm4iOKW/CM058OFJjyEeQMJ+nQiEkJyW2cSBn46s9+2\na8DbV/hu/bSOxdhJs1IkllXLQl3s9Rs4kFTi+EStI1JVYU/NU3rkbbX1xbwJ\nekMTaT+j/rDTR3cA7nQbUYTa4yXQZeE/AR5h2cN4IT/CRn7H05qgrIJ+eeb5\nlYKxTC9utJiSPnVU2F0wAF+u/VREC1xbXRuOEfZ6ocNq/KrdBcNe1BeSqFLo\nx6iNWiFnLCkP7MVAYGHCDD9P8P2yYM9cQAY1x5zkukzcEtamdHSSbAUu8Yd1\nhA7SGABr+43WT9TEEEAeqdYllZcUMrLeja3PRGxPbpzp1BelvIse2ygDcyC5\nvxlE/n+Q2DzEVTwU5JOZdQAB5/iCyUdaKGhVtvoyoJ+Y8gasGBzqJBw2w8fr\n3p0pARbRkqEENSRQj5m7s82gh26H/IIKW1S6/cMDJWVVK3yrCrE01VBnfkGt\nCjHg\r\n=jOFW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"61246014f77c40c0d6594f32e40f4ce98d8f7c8a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.5ff33802c.0","@material/tab":"5.0.0-canary.5ff33802c.0","@material/base":"5.0.0-canary.5ff33802c.0","@material/animation":"5.0.0-canary.5ff33802c.0","@material/feature-targeting":"5.0.0-canary.5ff33802c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.5ff33802c.0_1580839484079_0.3555363981462678","host":"s3://npm-registry-packages"}},"5.0.0-canary.1eb29491c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.1eb29491c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.1eb29491c.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":"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":"f0dc9bbf12d06c9690c4b798f9c2afbf4779e087","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.1eb29491c.0.tgz","fileCount":53,"integrity":"sha512-RM3l0wmWkr8CnCwclnkb5rjvKQfksx3zryqscmxQ6tprzgCqCsCIXOHNqGLFO0vBptAmmw9KSY2oKo0720eZyQ==","signatures":[{"sig":"MEUCIBA6thTWXSI7J+1GplT3WUFACKVWWFYK6LarSX5poURzAiEA/yM+7RfnmTv6usck/q6D4yz8N+57u3lo1ZmvgTmKNXI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOdu9CRA9TVsSAnZWagAA+w4P/jpOJEkHMrpgS93czpS3\n0XXPgRCtBPPCkJfc/MMBJH7ZmbEHm/BMiA/vW/BWHrrEdwiUwzv1syfm13lj\nndI8HiQdZnFoyDbeTXHnD1W+GdKluXPKio0T4BTtcqL+U5r/QYA4w27eedyG\nWzHiQC1ufXGp4IFSFPq/FpIKwElIGrWGbrU8iHNOkPDjgY9bqyjzZ9iTvuP9\nyfNBGA7FxOIUa6weqaIK0hRbXMec8uIKikKRWHT86gz0OpO0ZAFtYH3MR992\ncN3Aqev3D2GUA4rM9v7FcmHmgb9IAjf6HL2wn6n9GG/G86nSSVRNFWKVqXfu\nkYsfeynYwQkNE+WfmRcbsLXp58SFdH1P9kWWI3AeAjsAnL1BF/D30jmrArw7\nIMg7OdAyiuKNDJg/+0oVkd341hakDxZz8k3mxLm91vdDxMzBTdjmDn4X0CpG\nReeCf5h+QjuifNmPZ5IOml7tS/WExp/omWpytLsxGVU/lKbXV8HtmA/Ol64s\nHQ3jMo+7irRyELfRDKfBAGCu81ipwTHbocfwpxKP3CcQ/i/626dEAMGqHvdv\nWAyVf+ggKX/8r8bT+V6UA5XP3MolZhje+SbSdnCukP0o7GoFuIBEdOMnY//y\n12cl9rByfnz9ldmS1QeZp6mVPzrMzbq32HdZbSvymK39/l1YeKGtMF3PCakS\nbgy8\r\n=nIwZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"689b043c66790b1c63b5d2037a1ed800248443d1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.1eb29491c.0","@material/tab":"5.0.0-canary.1eb29491c.0","@material/base":"5.0.0-canary.1eb29491c.0","@material/animation":"5.0.0-canary.1eb29491c.0","@material/feature-targeting":"5.0.0-canary.1eb29491c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.1eb29491c.0_1580850109209_0.4938016428422465","host":"s3://npm-registry-packages"}},"5.0.0-canary.4c7154b26.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.4c7154b26.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.4c7154b26.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":"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":"8a2aa2c9b564402cb0c714f45bd6fe33b06ac5cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.4c7154b26.0.tgz","fileCount":53,"integrity":"sha512-pinSjCfegVBr7g+uTDTO8M8RVYsZWlshZNaRatWR/bP8blHwJVqvdwCvT6QLWKZVR9t7PwQBCeiMdNxMcyqwJA==","signatures":[{"sig":"MEUCIQCgcOeqS4BpqKxCDvjn/62bCWF75fMPon43GJO0bGTuIAIgU6LHwCAoXnaMfK8xA7UxQ02g2jIreq5t1NJDGt7ZiBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeOue+CRA9TVsSAnZWagAArdcP/18D9kQyoQTsrNayTekL\nZRJ+tYjbyDoUeoou3uESj6mRfN5lvCwsMUTongJJbw7AvT+ls3S34TrEzefs\nwOjlICs+cmuwpgR6YHzEXrtyoqrl1HbG/e7GaHcmgxGYI/cD+zmem2SIrwzP\n3lamk4R7GC4ZFLCkfEO1BaEBguVVN7Gie1IS36I59hgxSqCJnBfybv648LJP\nOUmDRa7LiRrQi72rD+suqOg0f1eIND77/7xyU6XMC720v650Cv6ubpdm5J76\nl31LaDF7u4n51pyZYyEZIGM5EtalLtY9xaKc61f1h5xzt7Lj80Al4ntDrnVB\n1UrPgQ1+BQZG2/bwKxBbLRFWPFJ93PbFj1jotHa1cUYx6nvymKyAWepLuqBD\nhOSjHad3J1qtbGX9L1VponplhR3Pe2K6qciVOabogRVxjLdISPwbcrwiqFNL\nupnQrYFeLuVtoKGpm4dF16UxlF13HqYJAQuI8HUhKv7WX5PM6AOFrb/EFegD\noVRxZtp6si1dJzlCQQRzEVThuAingH0se+djIELbpI0GEbTWJhalT/6V9X+v\nbI7/80Vwp46SmcBbUp6yaTcX8GLponrWTrss3s24E5TSh2L3zk7Xn0HjxdXR\nyD9Z5dODP844WrHgDXAj8tcnnZJ/4od1Ro1Quc2KlUL7wMCBMKDb/KZ9dUTg\nA8O1\r\n=YgUn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e15f799c180f6eb07455eb8d644b93db93df5402","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4c7154b26.0","@material/tab":"5.0.0-canary.4c7154b26.0","@material/base":"5.0.0-canary.4c7154b26.0","@material/animation":"5.0.0-canary.4c7154b26.0","@material/feature-targeting":"5.0.0-canary.4c7154b26.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.4c7154b26.0_1580918718002_0.6477224253121145","host":"s3://npm-registry-packages"}},"5.0.0-canary.ab5f49a2c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ab5f49a2c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ab5f49a2c.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":"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":"0019d8948f61e70db0d1b5ae7fff65b0808ca1dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ab5f49a2c.0.tgz","fileCount":53,"integrity":"sha512-ld1t/WnBaT5BfEDuC/MqSEww4ZqEnl/mKtqs9Qz09a/kppGjcPM2/f09s/3rqSrThGS+2vdCox+FZT6QAZxaZg==","signatures":[{"sig":"MEYCIQD8MBruVMbplF3Q5zXvfI03wfYQuEJt/Ssl+qP29n4flwIhAKO2bHpqkwjlagGRLqC62veHpL6q0HCqoTK2/rlPtQoZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeO1D4CRA9TVsSAnZWagAANAkP/RKmOq/9kMZLhLst922b\nI9QHSRPZBW5YvA/Fx8M/cxRau3Xu1wCBZyK1zFumrENdjk3lHvzV6q6HonUU\nXQbBxfpKZ1OCeKqs3NDMgoQ+Mh6lmYnFFJLRyx0m4cHSn5g2uGzESELGycBj\nGYCugJHchs0vaetE2d2H+GkMo9CaFn1sqBfxtca48pdxOjp0ITL2trKyEAeN\nS6/dviOZlv5ynvILxfwFr8oyvXUS8dg5SGOU0Qziggd6TlK7ABfvaNCbqz9a\n9mFuqO6FMte6jdNWLPvC+/Y9hbW4RHDY/rH+ItGIi4j/hQMzok1aefqAXkhl\nw4qpCXONvd7RqYXGjc3SGh6/jF6nCqUmbYlctttc7mmpVTOcNaRcSQKVaUCD\nT4N5/50AJhFgweHMldLr/M2IEfd7KU9GtxUyTIllp6kFvX2D8TsPZaYiuDxr\nJiGlhiwFRUMOb/HMYdS2R1CjkC0HTxfk8FDvVHKUEUEQLjC8LzIHBJDiZdFa\nW8XcydGq6AoMGlJOSdllxAlkmCnM8OvVQJOJF7oxD7GJV+cp0q7zCA+dr00/\nxV6/ARE44v0HWfdDWQHnw1cKdYpLmDq7OpZI+2cwF2vaUSxxXS5CYsv909Gm\nPzVH3iksfcnNonBbuCvb7Xl/CEh6jJV1Y160u67MP7vBE9ke1yc0hBqk7QmL\nzeBd\r\n=hZGc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9e2d33465e4a55862766486d77f187c0bd37883c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.18.1","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ab5f49a2c.0","@material/tab":"5.0.0-canary.ab5f49a2c.0","@material/base":"5.0.0-canary.ab5f49a2c.0","@material/animation":"5.0.0-canary.ab5f49a2c.0","@material/feature-targeting":"5.0.0-canary.ab5f49a2c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ab5f49a2c.0_1580945655707_0.19133783835368723","host":"s3://npm-registry-packages"}},"5.0.0-canary.c541ebe15.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.c541ebe15.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.c541ebe15.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":"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":"85544d993eeda0fd2c02df96ca5d722eb52ac0a4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.c541ebe15.0.tgz","fileCount":53,"integrity":"sha512-jBVC7+ou3n9KQj5mnL8j0bTMk9XPHS2cPO81I7I6ah96IoomKEJbZ7l9xHwRUhG12IB0SrU0YvyVWp36Nur1Yg==","signatures":[{"sig":"MEYCIQDLREFA+3l+R6damzlHWHdycjuWDjpkiLqu+eaSQBoC1gIhANUHcvsvNZIt/sV4Jy95+uuGZCI29xmWohnyr6fwhb2s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322350,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePJOYCRA9TVsSAnZWagAAXaMQAI1KR9n2mWWCy3MGmRRE\nmDXNYht3ndx/DxBkNVFq7J7Lcnpbo6XNLTwTNpxzN6zgNC0wGOHNJsytYP7p\n8ZRY6+cC3DIkRbGKk9vy0tzkEenrjSE2uxnr94tuscOv9iAD+6JcxNNhZk6d\nX7hFvVk/w8CJar4hFw0pWJ2YHkEVxshtENptOYvsUfcOhSE/AB+DS7IgsbAW\nqRYHjiEYK9dpDe8djeDRDYRXuzxxYQIq4SwaPFZBzHDfQ+HytotYcevWsGKV\n+uQ4RYZlylO0htZH0GMwWG3eIZO46KvcDvuqRa49AL//ToqbCVSzYo02rAFT\ns12KRX+RmUOER50KsmzoFjFYl7ee+U19gMFzPCulwwmA/RwAZtwt+M4NH/v+\nbriVDvFOkLs73UFysag+kkgUOVV4jO9y3ZXjlLr1+S8PWN4RNK9XbcWo8j68\nO1UVqQzgUSjdMqk0JrViFt/w4irjT7QpR5Y2cq4liMGtvnJC/mMBikKHZOd5\nK+IghSo6zwV4H3rIPjuCy05ZlVH6BSDdhMQQvG71qDKxtY4LisysW9HajXbg\n1G9n4X9Kvep/AqNIhyBhaCAM/NtmT6C8jqyHIoEDB+D+j4YKObIl7iOrjbiD\nHe6HbHtziGzUqB/QcxkPxi1Wx3xebgDsuCAuyFK3jHgBWf3ZbvPUlgYsdWEe\nf/+0\r\n=LGq8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@import \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`mdc-tab-scroller-transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"87d5a39f72f6a882a8412df86762c91328c6d985","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.c541ebe15.0","@material/tab":"5.0.0-canary.c541ebe15.0","@material/base":"5.0.0-canary.c541ebe15.0","@material/animation":"5.0.0-canary.c541ebe15.0","@material/feature-targeting":"5.0.0-canary.c541ebe15.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.c541ebe15.0_1581028248029_0.5859749409278909","host":"s3://npm-registry-packages"}},"5.0.0-canary.98f7faa05.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.98f7faa05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.98f7faa05.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":"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":"d77a817aacabe06148e4b57bb887972b11dd53b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.98f7faa05.0.tgz","fileCount":53,"integrity":"sha512-AFdpKZUkJbqxx3l2e9A3gXwkFHIOVYYe+Zqz5ZCjJnkkyc6c5KWHHE8f4r3E1stODe1qM+K7j95NmpGABIvmkg==","signatures":[{"sig":"MEYCIQDdshImwfUuYfUml4yesFAr9M/NdopwYFFYPJmaETvfgAIhAMVkjqyM9Zp/17blypa2inSD/UZm+m7gGrMs4D9MBVY3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePbjcCRA9TVsSAnZWagAA2lYQAJoDccbIhCsPXi/9F3Kj\nXN3nGnopEeOOEoh/HaRCZetXRf5r98JVFokoem00IMVzBeIpzVmPptyJ9fCJ\n1jEjhV4HJa5CAJK54GXGkWVruD+iaCu9Mr1XidDCqqgRMY9Sri5n2TR4VJUv\ntacFDWZrNeAwLSeV8iuJ+t6g+TLv+5/CRxefOkB6qjpH7zoeGKvaiSqmLj77\nKREjvgPxEXRHrF94KmAX3UOhfTjnSXnJJpe42qyjUcCl05796IrM68GME/+u\nAHRIdsOGv4rE1/gzVvK8oRur4OrRxnWZuyJgAFiPlXSJq61aOOejRS8CfyZW\nj4xU20w2NivdxeacZAhdpA/tnLD8LCI77xu9pRp8thvqNWgT068MrIr6q376\nr69Uc3K3zfxRNjIHbEmkzTNU5HorlOLMAhS29GYyMkQ7wMnCD7OMmR/pSiXj\nIEgHgqIFuGzvc8jZlnR9TvtQ/l32x1U27d+0ygI4ROIxpPWYeVmteVDO/gdZ\n4dPdgqhBnOw8d5YOKklHfTOiAsRu8rI3ksHY0fWw5iGcXZoKMt1fEQL5Yp+r\n8Ldh7vKMBK8z3gHQVbnpzBad73s06NnMg54132PglnkMEkkUeE4ElJVmG30/\n8TQOepe2uvPTfqheFWIqKZ0saDblGkRrwnJB/18rCIXTGld7KlAiQhteUcDQ\nrBq/\r\n=Wh79\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"698f18ec0e8c9dcdd38beb5ab6b4cfa6218fb288","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.98f7faa05.0","@material/tab":"5.0.0-canary.98f7faa05.0","@material/base":"5.0.0-canary.98f7faa05.0","@material/animation":"5.0.0-canary.98f7faa05.0","@material/feature-targeting":"5.0.0-canary.98f7faa05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.98f7faa05.0_1581103324568_0.4364608525959759","host":"s3://npm-registry-packages"}},"5.0.0-canary.b4727e43a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b4727e43a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b4727e43a.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":"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":"be3c660b7eb280a1442e96bbb91c579e95c3fa47","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b4727e43a.0.tgz","fileCount":53,"integrity":"sha512-KgUiJWzuNvwTKNmgMgAQb3lFrD1jKDCJ0GiasQ67kwakWTjfhvrdKYTeY1/u8nvrgnTHAEHBlkyh32PJ/BGubA==","signatures":[{"sig":"MEYCIQDhHVjDERFHjskKI8tFNOOqnaacpyvdxELtXvU76Gi4rQIhANFPqY6vlFHAyGfXOk9/dpj9HaZishyinQCFmJQbu+Kl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePcDmCRA9TVsSAnZWagAAK5QP/Rz5NUjrMKQzqcEqfDZ/\n7OxK3MFI6STrwfva7OSXzTIdWGA09ftlEI5SdkFCIJoof7gLnYeh5g6tBhCE\nPrCtcw02knEKsI/cIrn9TpRO11CXiaXsQCUvGVQ5P+tHmLb3WkphgoWK87yd\nwBqrQIfbSOsmVv++1AyHZd/JuZ3ZhISA9eGnY2ror2+oFnkw/0KJSQ0GicDf\nHHJ7Sux3jI0ZRHF/Wh4f7193FaP32gN0x+GpiKgzBpT3iXlG0AwqF9DhwFyo\npGfoFwA3fve18IDDAETG8vGXAKz0HuFDpOvOV1it5uU395AhNIYfBmYZeEsx\nn0+mLDXznQITUcZ8bBId39Gsa3iu9rWvxtgVF82zGyUY3m8B57M4wJUVS6Ez\nd6ZUvnJ6Wuw9tt4UtTGhKgn9NrhHcWb8TRNKHNwLjpswwEwf0lUo7kqwunOd\nLRtYNzrdziWGlkwLozkFC/hxIXNSOZD41zgm7zl9wO4frjRdjcmzlo8oYRoU\nEsE+xinrUZ6a+Lkar7BMCUWTXmzqGlIaDQNXq3ZRqUsGIZtcEtKljHccLLFk\nw/EslxrqiB6yrDBovS+2DM3ikLvG33cny7NcqxXWy0TGzMONbxxKXKQdHHBI\nuhEV5mt1TvIL1Vj0/1ONn5ZJ+UqS8QUB57V/XiIgzpK6Wa2DthPaXjPmkeXr\nvjWP\r\n=EfCU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"140a0d7a10f30d8ce4b10dfbe40bc63136e206bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b4727e43a.0","@material/tab":"5.0.0-canary.b4727e43a.0","@material/base":"5.0.0-canary.b4727e43a.0","@material/animation":"5.0.0-canary.b4727e43a.0","@material/feature-targeting":"5.0.0-canary.b4727e43a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b4727e43a.0_1581105382093_0.2975740477460198","host":"s3://npm-registry-packages"}},"5.0.0-canary.91d9d5a65.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.91d9d5a65.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.91d9d5a65.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":"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":"9aa8c721dc560d4195979ade7c2a8679436a8bd0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.91d9d5a65.0.tgz","fileCount":53,"integrity":"sha512-l7P9eemKqMzXydOaFKLLcIX/rmNCb4BXPFyrosPdCMCjHAXEsDNNbK9KXGckY556zG9FDgGUJhsvDHuG3gThlw==","signatures":[{"sig":"MEUCIEOVtY48Cc/ltIadz6MqJvXdBUVFISnu5ZCOs6tefHt+AiEAxq6QlxLb1LR97ojxBAcyIcdT9t04AeMA1qpiRHL8Vr8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJePewHCRA9TVsSAnZWagAAyJkP/A7FEv+5ODOh2wfRSED+\nz5QlHkNHMar/cAEVPwARnEaXCZcXL26wB1kAvm3AJmD9yHYpHRItjZUyesGj\na7Yx9OQEXc5VafWfYBaliAwyIukJ/Tr93yG4lMa/W6WAuQjdUoRM8CfLc2nN\n8Pmg2DFX9/ENUYMaverMsQzd1SMUNzAqOPcgTQSzbQWAr4hqspdR+z5ZiU4K\nnMyzWS4dNdievu92Pco/wzSv1oOt5GGF+MK+4D+8q/6U5oNlFyWssbWvmME1\npU/NlmgWdfhi433/OrTVC96ef/Mjy3DTkQck68Hn8ci9o/Eiwsc+Vhywb+Sl\nybf5px/ss/BJzaza2OWFeGQ3gc2pDCWeU7qXPsB2j0rs0fG7Esq0r/quZ6OU\ndbpu5SNrGazWSg8nQXP0SF9OJoOI96i87S/VIRdwjoq/z4dsX4yr4aoukRPG\n+kbxGV8/J0rjx64JjcgyEmB7Kr77/I0avu02LgTE6cVwwT2Zw2QYntLRKnpM\nPgBGjxmsINPLcToa/6T0CUW9T8jjkMy083BEBw4t98BUkJIojqawNNWlQ2fF\ngU5+pJ5L53bQd7qJMu5vrG6Xh2po9RzkLJOMxuCtF72MFgc3WgD9YkfuYeW8\nMl6KUU9HrGv6Ow4k/box3xWLL0RoJ4FvST4/W4P3Hb4zx6GK7c4uXx9zlSgG\nY3wL\r\n=obBN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f98276c6136d4bd38889e0b4d6354081a3ca941c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.91d9d5a65.0","@material/tab":"5.0.0-canary.91d9d5a65.0","@material/base":"5.0.0-canary.91d9d5a65.0","@material/animation":"5.0.0-canary.91d9d5a65.0","@material/feature-targeting":"5.0.0-canary.91d9d5a65.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.91d9d5a65.0_1581116423272_0.908703609928319","host":"s3://npm-registry-packages"}},"5.0.0-canary.d5c006ed1.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.d5c006ed1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.d5c006ed1.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":"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":"cace2ca86ae84aae8305e24e2a33c1a19ed6a7e2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.d5c006ed1.0.tgz","fileCount":53,"integrity":"sha512-xEBz63kUDzoeYj8G0mrnHxncuA743IKbq165AECnxuW/kR+gUA5W1ZGlwpa/N1zL7MChTjQQBVewOzjR0fqcRw==","signatures":[{"sig":"MEUCIFZUyzJKzIJlEi/yAt8trDK7GM2m4xX+RQb5EEIKH/WfAiEA71yZwTTbrGiuKyTsR0NwKuH98o0+cb8gZd9VfHcRQCI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQYmnCRA9TVsSAnZWagAABRwP/05/fHOnMIq9n9q3FdFN\nFime+26GIcvgEwVTAC8Qmc6fByKssGOTjDPlzbGljfdmbtBftc17UWSv12C9\nPELwKrU2u7nqibEjUJ5VvNhbvR1Co/2IhjSIF7Z8ACj0rOuB3aIQR1lm7XFN\n2t+r5AngAGfRR/bgXTxKT19P8Gw68bxRa8NjxMPA57jKCOspD01f6hTl2HkI\ncmb+iu7VWw2bSPlnVnmf9OFYxk7q4g5W1n41XMXTnEesgibhVE/8zE3Vx+xe\n3xrqPmyuToQWkPGZRxeUyTjlzISgaM+R4gjGXpBbL3VqjKYrPDQiTJXybEwK\n3WmRfwF7XquAMIBEaZdAfa0D7bG9FRt10dT0cmm7XqmZD0R3BdONrnPYzPin\nUmY6CWD/h6VB9Dq0M7QiCQqd6d2odklddrRuJ9dpuL5YbDir3VTLsEL13DOz\niJZvGmPfTetrNqeeU26Zj2DWR2B3Y8mJcuCaD4t91klR9sbTsoWQFOMFDJTG\nCdgrNaASivGLKH/LKPwdQBfaw2ust7eevPBA3YEYdDoZ6XrUZkypz7Vu5qDQ\nyGx+d5+cAo0WC7icZsnAFPRP8VDMvxWJAU3g3EqC0eTskW5B2cLD8W0DoW56\nsjgjENiKjVyDdP73rbBcuYukTIh4vlP+Y7sWCTt9AKqYRF7Oq/EzOkOrd8lz\nf3C1\r\n=JnBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"fe50932259fd2af2b34c60968682a0b94f7fed66","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.d5c006ed1.0","@material/tab":"5.0.0-canary.d5c006ed1.0","@material/base":"5.0.0-canary.d5c006ed1.0","@material/animation":"5.0.0-canary.d5c006ed1.0","@material/feature-targeting":"5.0.0-canary.d5c006ed1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.d5c006ed1.0_1581353383477_0.1404684096482367","host":"s3://npm-registry-packages"}},"5.0.0-canary.559f1a570.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.559f1a570.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.559f1a570.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":"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":"fe8eff5ef1b1bbc4cc4659b3e5d8dc06550a4284","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.559f1a570.0.tgz","fileCount":53,"integrity":"sha512-hqrrhe2mleMxo+1dsZn6z9Zlv9JNx5UsktYu5zRf5nsVIss8Y33wP82i7ejVuW7oZxGyNm24obZA4Wv+7ZQ5Pw==","signatures":[{"sig":"MEYCIQCZKrbBid7HUxRPbsNxWg3yBqPMEr1viP7Xy7RYvuTIhwIhAKgiy1IxU3fyHM20YxNLM3kvo0Y8d0f28jyeg7M0T8bE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQZIzCRA9TVsSAnZWagAA6sgP/1lyUwPI1U9DzHEznKOU\nSPgZ3fUQ6rwrRkoobLFP/bmM7iZkeegQgO46Q0J89EgMtcdPiiUCbbEYuAv1\n/cxo+TSGRfz4vpyJggzSYfP7DHi5TkBfHsT+186fJ7zNUdap6/esYxMshavQ\nT5Ukq0FXjU7IXV8G8yXkJurHjVHdCrRkhIYnLe9E9iLms05fI1RMqEeEelQi\nnDUoK4RDi+j62Al9q7sMz3yPs3nYGVi/TpsQrRWOn5ONUMYZiHQm2NQUMPTa\nJrCI2QIF/bZ/p89eTmfIDv1sFQp71EjXtG9qdm8yIN2bTygonWk1pwgQhXKo\nlmKWriIxbIwY+gD7fI66sfBmoRy8A7He/jJc4K2/gv+U5L3z8osQP7OTPlPM\nXnhoTYjzHmSmCvnw3Oi+OzvH5bYFaGJ/1riYOv8TbPbrwecQpYYyZiXhuyBT\nTrW8DglIyFWZGSBjUKiC/3hPYNWAq4Vnqp3IH3DCoBA8Xc4vl9cER8YxmwH9\nSMQLF7OLV/EjB3+kbHl8echcokhI+hJYWyWLW0qAm7Tkl166tAYEJHl5isNm\nEehqMf/lgfl+LTIlOcyOCPwn4IUFZNUTTIOphbpa4OoxiWKBVaZrE0RXkGU4\ndw2pfowsmAlHKgyuxMgHu7ZjpfmeE4PFizl/34CarJYtvMC13I3U7Fp5382X\nMfsN\r\n=nYdl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a4adc0cb689de4e266e65d90d614fbe1177aa5f1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.559f1a570.0","@material/tab":"5.0.0-canary.559f1a570.0","@material/base":"5.0.0-canary.559f1a570.0","@material/animation":"5.0.0-canary.559f1a570.0","@material/feature-targeting":"5.0.0-canary.559f1a570.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.559f1a570.0_1581355571175_0.6343424031385076","host":"s3://npm-registry-packages"}},"5.0.0-canary.ad3bbf782.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.ad3bbf782.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.ad3bbf782.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":"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":"74c67f3b8c9a600f356feff40eeef8363e04634d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.ad3bbf782.0.tgz","fileCount":53,"integrity":"sha512-P+vDpX9e8I3h/3rZgXCue9e320A2sYwFiNkoaeDaU7UhW3QdM/NYVTf9DRmobASmlQLYsck0Et8tkSVYLYSnzQ==","signatures":[{"sig":"MEUCIQCfLZakFZG8fbfjjNptVsCKoHTOQGFcmksKUD+R6+dv9AIgMlCgGKy5dQ8XJbIA64k29um2w07pjm8EavN0KvspvKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQasoCRA9TVsSAnZWagAAP50P/2YWcq1zaQZtnojfIBSs\n9GYdXCPQRaAfYzO8lYsCIuZqRdXMhRjKH4yK780dK1s9fo55A0qVREHIFs/3\nYR5r7AqWPR+H3B+gWDBXALiM32JoEsxaTNWe8L2VNkdJk5CkUtcLruM93q/m\naaHuIAb4kDt+yiKSEEPhorouACQ7ZuWhOzx72YG27KTrUl+iv1Fey98mLG0c\nriJSuAY6RwFJ+v7+NZ4i/jR8vJSw8Il0OXAnMVn18YVmijAVeti/uahfWfST\nrXtJGKit548uhcUMS+0inqnBZK2QP1clthkkvytVwpWUJDWkRsn5FT1KmAjF\nAwC2EWDWU8jmIRkrNomhKk2mHMRVkVhF/XpZjDjS5A2bzwMb2LI9rq+/eGDF\n7Ky2vpVEqK7Teq6bxrWBCpbSyCcye1M3vDbLloQGtDyVshLG5nAD1hGs8Lq7\nw4f3s1sTaNhmVeC9X9EMxcoAWlQh5JhkI0t07v9m7tnT1tMKff2lS9LwpvcL\nmrTrTrOOZ7fjLyxibE9muTS26ucgeVeX4P0fKrjmlFBs7S74b7ywnpVDGrWa\nyWDXlS2DmGUZXDPQ9K8po36tpBOReVHXLKvVPhZ3k/PEvxfvcp9wnmGEMZcP\n3os1xZEdJn9Xk90/dPaGcBFs5zdROJGovub0JKsxjTr5MECwpO4xjad/7OKx\nhb9M\r\n=qG/y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"48e565307134ef2e860fdfd1a8ce59613a783ba7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.ad3bbf782.0","@material/tab":"5.0.0-canary.ad3bbf782.0","@material/base":"5.0.0-canary.ad3bbf782.0","@material/animation":"5.0.0-canary.ad3bbf782.0","@material/feature-targeting":"5.0.0-canary.ad3bbf782.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.ad3bbf782.0_1581361959633_0.6765740236716777","host":"s3://npm-registry-packages"}},"5.0.0-canary.570d8e49c.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.570d8e49c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.570d8e49c.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":"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":"daa47f8a6f1164bd869bbe5ee03a2352e6a9a0b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.570d8e49c.0.tgz","fileCount":53,"integrity":"sha512-4ow8FTrv9T1a9Jc3i2Ly1ibOZpPIB3FnfeNx+5k5LoBslOZLMwlVN1dhTjgvQ92wJkTGO3ZWxLN6FmHfyzioVA==","signatures":[{"sig":"MEUCIH2qJ5/+4Xv/MhwfRYSE5g3nO/qI2TY7rbHjhHdjnBG8AiEA48pw6vXNt2H0c3heI3YVfO81nPEYjjfQAXx4C2Gu5us=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQcCgCRA9TVsSAnZWagAAB0oQAJzPJmLhYwoVgWgLF7B6\nhgF8yS3lIrH3a9e4lob2UYCtWaKpAy91Ah9lVyGkRDOh8m334Dk+7femIsYm\nuEa1njttR3bDq2Zbap7qLKggS/dvOy6oUPEBQgbNP0dM90kYSFWwYxAqgjKS\nik6pT+FPTEjA7+Fs6L+Jc/el8S9xa6xtPx+LAfJ+mWMKzA3AzmusILuEnt6o\nL0zKgywqXNL4E7SPFvsw6XPN1RnsuVJZ1zW04LGYEycVjVg1IXVfFCHb2OkG\nftW8jBbsj4REMQobUaQWJaZaSszfiYLnTxJA4g7ZFO8vSelq7g+vsZN24zza\nRp3fdC4fh7Z/lxuguuDGb2yr8dhq3nA9o0WhsBjjLAshhjN1IpJLm4tdhcVz\nYJ/iW8lvr/sJZ8YNcPxOd2vXPSQFOM2bYqMVksY0SzDwxHXel8gb6tCguIv5\n6/iw2mm54lppMl5nMzV2FVnPNZ6YD+oqrOU+sYyvgG05v1K7IogLPUAC3C5o\nXg57Tb1iTtKGt/gRn3SLBLduiI7LDPwcmNNKm4+9E6ZvrxGOfRXqC3iwscFS\nIn4jQJEBhLWglGfN3AJDv+cQCYgkzu85xykdIuQ+OtveeigVI6lbtUl8xSs/\nvovbbWXBAIXXwjOntUsET/mOf7BdCt+89gbHf4mVtQ2/dC220vlEn9LxIjZ5\nGZHb\r\n=ZJBD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b6857e33db49c411cf5f55873a45f72841824fb7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.570d8e49c.0","@material/tab":"5.0.0-canary.570d8e49c.0","@material/base":"5.0.0-canary.570d8e49c.0","@material/animation":"5.0.0-canary.570d8e49c.0","@material/feature-targeting":"5.0.0-canary.570d8e49c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.570d8e49c.0_1581367455514_0.453494218999108","host":"s3://npm-registry-packages"}},"5.0.0-canary.48b06b89a.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.48b06b89a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.48b06b89a.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":"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":"20db4da3d9d9ff8e5e85c7c1f41d0a89d6d38ab0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.48b06b89a.0.tgz","fileCount":53,"integrity":"sha512-GhdZS3A1lf9RQeHlBVUGhOh+/aoiahZhzgcHbUwZErEg0b7JVqrCcNgP5BloV+OtoDzenLvs5iPvT5buYuqsgQ==","signatures":[{"sig":"MEYCIQCpqUBdUlZw3OVEPn7wUf9Byh8SWwhpq47Rm2GFToJu5wIhAOdMyB+BczC1c5CNajFzUoZx/xiM3NjRAsPAvxsi+Jz9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQvX0CRA9TVsSAnZWagAAi6gP/35fHy5voExvtcRRuUC2\nMyvDOokaWrPRlZEpbpKBQK/YvRgX9M1KJED3RFuZOB0ejyfGc5X0Of7HeQL/\nzjzeW3+XppmJhccRwSL4jsFzRRO4T36Qc3FpTnYpq53dU8uTLX2q48M5f6Oe\nS44hqbu1q6zIy8ja1dmIznQuq5nBTFj3zLM7yLMRZJLnltw8e8rDfqdgcL7P\nRkA8CsrafBfD52iLfvaqDs0wUCTqhyAw3UHgbY0ARZA4ffOnNdyqA0K8GLTN\nUHlmpAuEuCYoK05MsduCQPvwq7SjjCeRowAxkJ8/rrYEMYaPETH9V0ux2tcm\nPowJ5mfPwAuhfI3IT/Jaxb76Fj0jt7AMEAlJTzU6yhMdNNwO/cX3OGvdGzZc\nvEiCn/HxspbJbUcSg8YbV5G/sviccu5erjiP0gu3zHajvPi1NXXclCRFpXNZ\nfZ/cALKMDjOLvaqajRgYTxeDeUWgwWzSjIdYRyHMketDqnRLEz7NOpX2MdIm\n7QVTlIVliCQ80dGSmUKOXPKjUN7VEw4nrQf4HRKXibL730sTaaGrbQ8Zi8rM\niRMV54SO7kc/xfAAFsyyV2ncd/76r2ueLmYL780GGQF8D3M5zJCIPtM5jTMY\n3Sbt6/uyAlUU0KqxlHev145np8E6qX8JXi4LxNbL+MQaByz+dkbydNADPLrN\nrIup\r\n=vVJ0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"540a576f2286061b02bebceda7cbf10554255781","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.48b06b89a.0","@material/tab":"5.0.0-canary.48b06b89a.0","@material/base":"5.0.0-canary.48b06b89a.0","@material/animation":"5.0.0-canary.48b06b89a.0","@material/feature-targeting":"5.0.0-canary.48b06b89a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.48b06b89a.0_1581446644002_0.020420452771919617","host":"s3://npm-registry-packages"}},"5.0.0-canary.8c11ea2a3.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.8c11ea2a3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.8c11ea2a3.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":"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":"cfd9bd4cbd5d6b735d32ec55d4c08ec42c5d1556","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.8c11ea2a3.0.tgz","fileCount":53,"integrity":"sha512-plPt+cBThQVtvpIHmfHFPsq3j9bIgH+cQ3vAFktBBJ5k09+yMoWpK45MVOB3nAZwZ3OHhUTx1G5hhVBDEr1T1A==","signatures":[{"sig":"MEUCIBhckBMXqcm9BuGt8FdoGWGvhL8Sl+LRJwzmiTNmOTtDAiEAhBIwoMZb+x2yEuTJfO+iL92Q5hmTEdtpvxC9I0v3ECc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322330,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeQ7zJCRA9TVsSAnZWagAAmhsP+gLZ8DED77EcOCdau81k\nsk69CMHfqtWM3ArcvJ+aWwyAzog/GvpQhABVCET3hcXwsJZg20ayGHv6oIL8\nWzlO0KZOZgz3LNiZSsUHOHhua52MsVRriDnmoWn5Cca607isKY2OmkxKzbEm\n439bCII9mv2TvsuQachnPDMIS+cW9hioUugqni86LsRWAScpMA+7hlt3Srjg\nVaJKjfBQ746F+K2F354gEkJSTnMDBwrFAP5sbwy9iwdLIBxvhSv7CpiMqAOH\nxYeKDL6xpj/fRq12h4kJ2iJuzXUq7ZoVh2Did20/Yis2tOJs1mZPPfEwe2rH\nlAQxOVPB9Mrdud59mz/YZsXRTJswvFhpgzYAIgYXeKzfvvdN2TK5rpsySpVh\nBvcakNxi5rC4nh+8cUS3nF+9yZEUxLmBeI6XaBwfl0w0ku7xs/ayQKxx2AAu\nyRt7H3tuPUd7vSXyuNMV3wT9SrS79jNaNvopZ79Tv5/UbDgN0s+1vgl0/n5t\noe9EGEJYrYzOwrNI6IUQZ8+ruN6g+WjWXs27pKpLzIKUR9csF0jVxMSemCHP\nQeQPLdkXS/h70f7q4udVsonTeBjeQPCsYUTUsf7CGtKWqfvo2edhMf5Hb+Oe\nYK431QrRmLfDquKJrVZqcN2p/XHdKz+7UCBOD0xYYOxlCPWOjBNGDsj/8VXz\n39GE\r\n=A0Dq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"47068a39cd18bd1e384c83a2ca5c3d53ef8bbbb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.8c11ea2a3.0","@material/tab":"5.0.0-canary.8c11ea2a3.0","@material/base":"5.0.0-canary.8c11ea2a3.0","@material/animation":"5.0.0-canary.8c11ea2a3.0","@material/feature-targeting":"5.0.0-canary.8c11ea2a3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.8c11ea2a3.0_1581497545349_0.03314046579645824","host":"s3://npm-registry-packages"}},"5.0.0-canary.b2f3d311e.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.b2f3d311e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.b2f3d311e.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":"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":"17321a90d775e24ea0f8dbb403d1fb913ce64c2e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.b2f3d311e.0.tgz","fileCount":52,"integrity":"sha512-wIk+dGbXO0Vj0JGxzFPk9tBTatGjgAxTMLZGCF7/BzUDv3MoMp+96RCHBnZk+4TsZjf74LwFVXcFwdNt1rxL9g==","signatures":[{"sig":"MEYCIQDjlMyOnSrc1XFscA3E4/9f04BL4ZLBIv6LB28gmJR/8QIhAMjr9loOD3J3Jq5S3NuQbnXa2GpQ1fBdDIoL7ZbtNGoh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRcNfCRA9TVsSAnZWagAAeW8P/i8QQj2hAhKPLLXWooX3\nt0PO2QaQqqkDr9zYk77W+A1Yn7DsIvy6rf+dy5FwYiFyfm5iprKb3z5McRPq\n8LXr/QChAmm2efSxSFERv57zVP3A9KeDi65xyDktaYfiltbw4E7UNhpW2tz/\nCt+rbI8EWwWVBg4HntINzwcAeut4Q0qB6LnRMoHQBpfJBQmXXiuCihRnHy9l\nyMS0CCWBCH3MO6Of82TquuMJOhUOC+5J5qCUeq0ufxG6GabcVY3jCOYuYnsG\nzp9KOKuDrUCYREn2od9xbqEFKYSj8OjdCoMgPfWPiPRKAeV4CZMWd+tcp84A\nKZDerQiSbFCXnziMDDf55gLhCOCHuz5gEuNegZicxZbz65IwlJQtqkOMyI7h\nPFhUk0FpzeEXvyH8zAA8YOVsxlsAGmUXxlFN+r9T9zSnJBK77Wwkh0fK/uKA\nHnH3GeK9m3Jv3yqdMuBn+gODfrAuv+ubpNOMDem6EyykW6lgpJcqC3HibVHF\nKC6L9WiqzVB9OQYaaEgWVj0gYSP0LPv7fwtlVh3r+52bBO0WdKI7rEPKGT7i\nGmMWBflnjq/d7+7IHteRCkV5inyFn3EjlXjoEN0MzcBymxos3HCY3A4LOEoy\nDgjGXGXahV7yjaF9bWjwmldA6dsJ5NI5iZBJu7jB2wUsejOoDh/rmbnigfDl\nxv8Z\r\n=suSJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e8b88d39be927e40deb73ae78a049ece8c80b9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.b2f3d311e.0","@material/tab":"5.0.0-canary.b2f3d311e.0","@material/base":"5.0.0-canary.b2f3d311e.0","@material/animation":"5.0.0-canary.b2f3d311e.0","@material/feature-targeting":"5.0.0-canary.b2f3d311e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.b2f3d311e.0_1581630302825_0.28159860032735295","host":"s3://npm-registry-packages"}},"5.0.0-canary.4f488d0ee.0":{"name":"@material/tab-scroller","version":"5.0.0-canary.4f488d0ee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.0-canary.4f488d0ee.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":"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":"427aa8501c259e0d7723c62f3867d99671b80d7d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0-canary.4f488d0ee.0.tgz","fileCount":52,"integrity":"sha512-6rnxg84qIpxkCqqKPHTD8jupB7qduKrqh0iFk8MMymKVi6NGavBTfG+hECiF+lXl5VAwvIbiwG9BcCH9lTudsQ==","signatures":[{"sig":"MEQCICALHJttO0q9wWcItuMVkfPHYRorPbLAC420jx8MR5HuAiBrGVf/tpis6vNpknxzyX6Q5AtwLUXEN0a6+OMhJo6h1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdadCRA9TVsSAnZWagAAh3AP/0WLNySJKduVK4wvPdF7\nRa4Ui/37+zuP3Gs12Z3qtqRwze/w+2Xjn+gir7tin2zuR5P/q4JOW1jeCtf7\nCCN7O2zVNlzVSeELEDkMOTUSmFS1S5opeB/vbcr7cBxiZbiyHL3VK+kWQgEQ\nwvtiN3a1UXUuZAVnz3A88IdgVy1yJJSg17j8SzupcQhV+ZbQ5TQ8ENHEApa3\nwlpQLuZj/uGzUJHFe0Cz3VdPvc+XB4lnJ0UqJaDeYoemQKh/x3c+ShzH9hUR\ndywyWwfuA/OVOJ1MmwmiznO04vsbQLu8WKzhRRLKbnadJVeCM6UyMazv1hBZ\nnW9PKAtCgTfXF1ophN6EW35USyFghQDDS9gbyz6ZOWHy5mSEAmuArEAiqKAJ\nUfTT32yPJ2x07zgYaOQImaGlUOy6S83Q0AsTekvi8mF2G81L6SUBzb3FGefQ\npQFrQ8o32XK7Xq1WXF3PpUPk06bIKOJL+V58CcBtfjvbQwH6nMkMjkcG9txZ\nUmC3EzxOd6G8K9b1MtRAI2HeO812JRZlxZFa9VleOZl391Tl1aRko4jhjWvO\nHuXYASC8gowiM45Q5IzBwKJj6ca5vKAC5gBtzajFlGHKTdD2ABSjXJMiJXq2\n/m/MuyPz+3tM6EbdYZBmHRtXqb6rtcwD6zbGpk4Ev9yRASEr4BpM7fVSPsia\ny4+w\r\n=KKgU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e3b2ff94a1a6e30260b88a9da6e55d6ed122c399","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"5.0.0-canary.4f488d0ee.0","@material/tab":"5.0.0-canary.4f488d0ee.0","@material/base":"5.0.0-canary.4f488d0ee.0","@material/animation":"5.0.0-canary.4f488d0ee.0","@material/feature-targeting":"5.0.0-canary.4f488d0ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0-canary.4f488d0ee.0_1581635228749_0.36505057698358256","host":"s3://npm-registry-packages"}},"6.0.0-canary.fe79de07d.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.fe79de07d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.fe79de07d.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":"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":"6217085e2dd6b3e5a513b64108c4c638e51ac222","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.fe79de07d.0.tgz","fileCount":52,"integrity":"sha512-ZQcUeWFoG5QoYx8khYUeicyjsSO7aBkKxQZyQk8IuRF9EgpMMQxfjJL8n8/vyUNITRPcmcIzFuVCH56qxVrP/Q==","signatures":[{"sig":"MEUCIQCIvPzBhIHVficltVduiCTRwYTfj/rxpWUXOzBZAi0LpgIgbUnoP1i+5bZZers74jOfLtoqo5zLqIPRbB9AmSZmZr4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRdqzCRA9TVsSAnZWagAAeb0P/ihlEsNl0cm97Li7KiTX\nbd+w0uGWsXFQkNjSlJyIwMjQUNDCifr7k3mj7mL5IZBEdWV7vO2R6+RAWxH1\nOJZE4xfQX+z5okWHN3PF/nmBg627WHY/PxqL4/Aq5D0q9S3DLW8BGEx8zO0w\nHY/RrmT41aqeBmZPpqCYLAM9fng3QqCzTHeD8KNogeyCg2pEeoSSIXQZrCoa\nxxrUHaTLIoDjw9bbTvp+sw6KwJ9ZWt698gPGi68Hig/NUgbvwg5OHiWE6VpV\nwANBo9DCjcd42zFBSviInGjD5E2RHIHew9KzYTci0PngzyIiVds2JlVsaRNe\nNyMLYdtWdqjGrBeeO978SrCO8E2F2tIR1q43J79Ht6PxMZHyhzp2OqL7xAUN\n7JQqoRGjjx7nv5AfWPeMw8upwPP2fpOFfFSXqbZskxPpb7+7XVZjBmL/3RHO\nGDZPwL4Qjz7vUdZ+Rdzr6Z3VPt+lTuAdEfKTH3PMrtd6xJpsrBbJ5g9VmNJs\nHYQBV11sAhRXT8s/Peot23EtA5NzwHKZnlhciziWLQBOcUh3MnnRWPYNPwQ8\nZ8ND60U/Fhcjo1kJnILupgvdvj4rmalRsUgB72zktEXfmv2bekrF9JRd4grq\n461Sj2lZ1TFmL/wKZft4IHAoE4Ou1FgRIS5XWA1r8NhBinEtNAPrZpxIZsK+\n0yfd\r\n=hsbZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e2b4b3810f62a16846d719ee7439bcbbac266d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.fe79de07d.0","@material/tab":"6.0.0-canary.fe79de07d.0","@material/base":"6.0.0-canary.fe79de07d.0","@material/animation":"6.0.0-canary.fe79de07d.0","@material/feature-targeting":"6.0.0-canary.fe79de07d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.fe79de07d.0_1581636274884_0.3750920246375753","host":"s3://npm-registry-packages"}},"5.0.0":{"name":"@material/tab-scroller","version":"5.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.0.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":"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":"923e52363ebb96642128d755361c7562bab8af0f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.0.0.tgz","fileCount":51,"integrity":"sha512-ZqXJFDRZAiYsXr58NawJZmsIGAmkzQz+da4w8kRCCSnYFv502SlLKHsUQIMU8rKaYSxzzAnY93byZGb0XhARJg==","signatures":[{"sig":"MEUCIQCXVNwyaX3ADq0uKZt8zSWds+NHsIQ9q4QEANMaIkaFcwIgaxNSIx2CWVyjO+HDPsxcT1wPaOOefeLf49KhRBjRcew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeReVICRA9TVsSAnZWagAANu4P/R7+zz4sU9QjbunGHssY\nKZk285rVxCfzuk4oAPICxcJICaSmfKD6eMMUPgIlcYGfW2agSpe6QFckZeF6\nDnpRj3E9vOQUpEv6+XQ5/D2Lcq9KSJc99JLsecNytD8Ty69h8jV+1QWC98cS\nuD1Ghr/azEhkGuTwIh7vow7td+ddNaPbdEJNOUGS2P6QYPpDjkG4vOBO5lXx\nVNN9QmgkjK4VPmoR6qLcXAN+FqCMkaAXbw+cvRo7FydHO9MMkDCpMFEL/VXk\ngaTT6QMjf6gklksDtBrjfDPyEGwSRXvvteLyJx/Bd9GEzXIXkNmUbN89LMFI\nJuX5yFWVYNsIV+nivg+yUNfOvTXmdbb1r9QngILlmjSOY+aO1poBp0n+vR0V\n5pWXe7J0s83Rm9OoaqoJpzUfLjftD+BgQ8tVGLtdSh3RYzZHg9OQ4Hc572SK\n0NpXr1kYkCy2TacCP6EtNSEmPpRhYjWI3pzF9NYRDYwwyFKQJsmErD8iISx9\n/R8BOlyZoorgw6lW1hI5OC7zI1UobXk7XYMfKWz8CWfPXGDgUok5PJad1RVH\n5ersyIabdghmET8VL8Sy/RE+6BEkbuU2+dOHLop712ZJAUygsdaryH8WNmX3\nf3CqHrq1AYOyNx8cn2mItuaEEsvvPsCR8ywa4p0e4KOqaKhd5zrrTuHkuSVk\n6DER\r\n=i+TQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"47845087df2f88107786b4577b1be4422b14404d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.0.0","@material/tab":"^5.0.0","@material/base":"^5.0.0","@material/animation":"^5.0.0","@material/feature-targeting":"^5.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.0.0_1581638983986_0.4773526661496943","host":"s3://npm-registry-packages"}},"6.0.0-canary.5e313b1f2.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.5e313b1f2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.5e313b1f2.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":"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":"b5600581a7a5a7763fb48a629a1cf1f5d1dfa2e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.5e313b1f2.0.tgz","fileCount":52,"integrity":"sha512-v9h8yMsy1AqbMGsGnQpRPDXwylMzh107NEFWQKclWky/iG7MOeQuL+giWA2XZghSGQ1YMgxkfKSNVuBZbHYqzg==","signatures":[{"sig":"MEUCIQD7N9SxM47gB0rqhsDD193KuiUYae7c3pRZ+4WJmegNfAIgRps+Ksbkr3oa3cpvbklSZF383JQY/hqjCBbMi4xornI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeRzHyCRA9TVsSAnZWagAArXEP/3zpHBfqA2eaHKL+NctR\n1cL9qZG6AuoGDf8Vs83FXaVZliWGnTV8X+Tch4oa73p2SK322YirFp06APY2\nfQmUzQYdMFCge09dFRhbAceDr3DuMfHoVAZeu268MNOXUnD3pDviUQ1NpxwU\nIzFqppcDlMm02RWtYjCnFYQnnt4z9tDcdS8WXWKjjIAh3KSfVDlzyqALc+f/\n9p5t7I3HQ21eRzCRIpsPK4avkgsSvHhN6qlyblMoWi4upt4nz9T9iVM45w04\nSgU50cj7N8twuaFdjhyWGQ7CRRb/LGxSDz89lLDmGG8Oa0jtP0nVjKVJdsMS\nI/zXW7+YtGlUJPvz2nmLMIFkEW03qfTd1ELSuZKpnK5G+/JkOAU7WuS3e7wi\npbqmehpAJzw6hqpq+LY177X4hFVvvNrY2isLKHwV9EKQEmx6Lmai9RKwzUTn\n8eYw60AswKUkeebR1s8/GMfCWDwIyjS1XUAPr+AdzeDrR2CD9lbRt5ccwF/J\nS1AAA6l2wr+qglyDjP5iHSH3O9Jblglr/zrzsGwWcfvs8xcpepVm18eBkKyX\nYhpG5tC6Bs0sKv3/2/I+Gs5Y+i0aguoy07PHSQuL2xmUbvwL7Pa7pYh92EzU\nwZWio8UgVUiyqFI9WNYo2dkv+e1WdH55zBOoPOPF513p7oeI430mligHZ/mX\nIC1+\r\n=s4FM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c7787e7880c79b0baaafb2af1123bbc383025b20","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5e313b1f2.0","@material/tab":"6.0.0-canary.5e313b1f2.0","@material/base":"6.0.0-canary.5e313b1f2.0","@material/animation":"6.0.0-canary.5e313b1f2.0","@material/feature-targeting":"6.0.0-canary.5e313b1f2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.5e313b1f2.0_1581724145531_0.21921870736591065","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a56f387c.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6a56f387c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6a56f387c.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":"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":"23ee476eeee98661687c68e7ad4af4508f8ae94b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6a56f387c.0.tgz","fileCount":52,"integrity":"sha512-A2XgJX5yKRhGrl0kBSY0oK15oUF7M1x2ipGlGHY84GCcOzpZ8U76fzWnu7gPxt0zzfZcL/YfGKf7kw9O6d750A==","signatures":[{"sig":"MEYCIQCSs8xIIshrHACqNd2gXe9I4fIOuCBkNcJN4YLt9vXs/wIhANFPNUcQwvrFU1REY1cZF6wgh9p2Wqay7+vjw36DEeGX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTD6rCRA9TVsSAnZWagAAyFgP/2HtoAFFD3pZaIHe7YbG\njlX3Vu2VANW5oZ6TGG4dUoQg5Z4KCtxTgFc6ONqHTZgqC7FIwfiaEx0IUdAh\n2qKksK6f1DaXm18N0K3s4YJxY7SLeuN8CfEePbcHyr9N1+4sMOGoQRFBhKVj\n+OZYq3QVn+Edzlq7FnXIbC9rYeq0mq1GJyryj0OwvZA0tKnnZ/0W8fnyG/gp\nkzUBnoGmd42BkLKA2rO/CBePigsHdaO4lcmKerGfGEpXr8nDUNWTrjoU5cEA\nXbUm55BRIIYlulvx6Q3uR7YAd/JWEbJSc3mQZBdBiQxmHmYOwQ/LOXa4vMcz\naJdLqND0ZjtEy7IlqRcrwrNM7GTxjFLlo64ekENhbJuEJYYd8kVFWl57JpsP\nsDYBcpfDdsm6RPHL36tERtLYTaaupta2jI9vyWz3kiVQfLFkCaqFpDXsOiyi\n7TmiMJa0nmGezNhL9QFyiXSDVXX4ImhG2MnYEnSzkzhScgJ6cOA8Jfxycqw4\nD89yw2nS073j9+kzrz0EhIsN7PgpzM4tUH0aouYy+vVyMJMI5XWH684mW6DR\nl1o5f4lfTR/qGxkwwomEMoZSVxav/Uh4SPYZGWQRT+QBteHsC2vHcAKtF/ll\n4pe36q3v66+GB3zAeoeHrd/U8itGhqeL5urVsWY5518cXr/nfAFHoU1ihfRP\nV90G\r\n=RyBR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1e3f916aaa994ac19a65c62b461edb01c08e95d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a56f387c.0","@material/tab":"6.0.0-canary.6a56f387c.0","@material/base":"6.0.0-canary.6a56f387c.0","@material/animation":"6.0.0-canary.6a56f387c.0","@material/feature-targeting":"6.0.0-canary.6a56f387c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6a56f387c.0_1582055082570_0.962825276120961","host":"s3://npm-registry-packages"}},"6.0.0-canary.bdfd52632.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.bdfd52632.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.bdfd52632.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":"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":"78deffe17c33b9895527a333ec30af8a1e451085","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.bdfd52632.0.tgz","fileCount":52,"integrity":"sha512-xDlUMSXolSE5AOwXXqHJDZJo1lVzKLPlmu5Q6gOMemI7D3tRGjl0OCO3z6Ers/kynSdNhP643Qj4opusNhyYHw==","signatures":[{"sig":"MEUCIDv00vVORPAJkRttKBCyTAbinHZ6lHI7UkiFFLz3qL7RAiEAiZD0PA46C+CkawElpCp0MzZgFInejPWit30YHsqcR7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTZlECRA9TVsSAnZWagAAMLYQAJpvL0OVq8lDZ3B7vHQu\nG4Joam0coctx0ZAkbvbePWhz6+tZQbstE7qXrVbVKZAFqzLAHnqmTVf1PAkn\nAcPu4jMynMggsu3lwwd0/j+ImNVXtd2sl5d9f3uXTCJshr+p9oYi3BOfE6xm\n6dzuERaPX9PeyiMYhOaVV5XQ5oCMgI+Pd0KqvE8I4onmfh2VC9ekiDvDQ/ln\nrRJOMM3EMFZ6EcZecNnbpFJMCpN9LdvF+ZBQjvmtR2S+8sTaMKr/taY0ew2W\ndXXaF7r26qH2FlJcxDKHEy7FThQM7QyFGuzu2BpBVKeur8If6XOTUtDZOaYa\nC10C+1KkjInbcTkDcFr9oqO9lGc0jV8lzPtsYQrH9w3mLYhnUciM1ENqceCY\npyq7vv/3fvKn+xADYaoer0D9PJENEGWZppWuAamuPSqB6sPVinC9kYRP9Y/6\n+H5RindB/iuH0FeCcQh4pnApTQRHcv2M9Ql68CUjBaB5Q9PN+d+nrGiR6apP\nGrBMu7GHzVcUB/AUwIrLXDEAxu61xX+w3c25o9BbMI5ayuALysTXi5l6B/Ax\n3rI0v5j/bGmhx3P0pWCmR8y131eUfbyeIvCgPPhpzXpI0Y6c0GdDKXMaghze\nruK/jA74Fb/6avbdEombUc3T/NjEyGNiAhEd05+wNMY+yccnyF/CaJjsBXuv\nDlR2\r\n=4Gpv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"533f28d31ceee3f93d9c7695d4f394323e37af4e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bdfd52632.0","@material/tab":"6.0.0-canary.bdfd52632.0","@material/base":"6.0.0-canary.bdfd52632.0","@material/animation":"6.0.0-canary.bdfd52632.0","@material/feature-targeting":"6.0.0-canary.bdfd52632.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.bdfd52632.0_1582143811705_0.34745162256727835","host":"s3://npm-registry-packages"}},"6.0.0-canary.ad2e4376a.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.ad2e4376a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.ad2e4376a.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":"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":"519fb3e17ca3f486ee1d0c9026a8fe29d6f324af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.ad2e4376a.0.tgz","fileCount":52,"integrity":"sha512-XZnnBc6nMv9oXOiotDbJFxqRsfMT8LZ12mNKa7WbNX8pbhCWj92FPREB2o8d+uSSOett0xncTAqvoIl36ePM9g==","signatures":[{"sig":"MEUCIB+XgYggYe5iBuzuz7CbVDSNduO6R0R4rRyKEyxSkQirAiEApaLYkuMaICo87YlIlOTHG+gM9Q/xamom2R1WH1cVELE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeTxNrCRA9TVsSAnZWagAALaYQAKF1D55aU9ICtCeY4a3c\nxLDrOLGi7o4YlZmWuJw2k3FjSl6ozCEhkTl8G/+yetien9/BLoLaCx9ZUyy3\nKxRGMaTmRqYrNfsAawcM7c5EfG63pWvJw6ZBZVUIB7pz+lh5UW7UC9TBYn3C\n/y5E4SbfAoG8sbCyuLE0jRFWIEcr3zJxxEKX/UZ8X4ZTkDmQKXkTdAmTHzLs\n2HsPqRMLQ3xGEV/CQe3gGiW53N7cfAsuyNpN9A6srKyUfEAXOA4wWJrA/iOc\n/cgWVriH6W0/Y76sfqxH2HYRPmXjS01ui84K9AguMXDVLB1XpWQj8KjOrwQ1\nUf80DL8TYGa48TzM5HEabKHwcdYLyTNnvHEOrEVlgbFBMGiI0FsRKwZHFfNz\nskg2fE/VYtlxaJoGgVQEFK2i2gFdRcv8rMbP3xFERmQrTq7BfahgdHSoWAQh\nvdEmpo12D1UclVACNHXilhnUWsGND2LngyPbpc3rugWPwh9bI5DJ/VRf3kmo\nBm9dgKYVO7lvyIz2J8FSz33AdOurLO5cRou2L+RTVX+9PYrqpU1/sge/710B\nkkpPMz4WYyIO7qyUDwWk8qPUByRZCE8esuPt3bKp7U0g7Oxu4jDhgVhObaZ2\nE278tYOoGmYBZTm8wB+6Z62hti6qfBXMVpvF7XA4nfOAjTIj0aysGYps6zkY\ns9Vg\r\n=V+ss\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a91629ff788e0ccd5049a85d588ddf65efe5899d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ad2e4376a.0","@material/tab":"6.0.0-canary.ad2e4376a.0","@material/base":"6.0.0-canary.ad2e4376a.0","@material/animation":"6.0.0-canary.ad2e4376a.0","@material/feature-targeting":"6.0.0-canary.ad2e4376a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.ad2e4376a.0_1582240618710_0.43224674676650565","host":"s3://npm-registry-packages"}},"6.0.0-canary.765caef18.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.765caef18.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.765caef18.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":"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":"3b83c675cb8d1734e74eec994b3b5ebab7335d50","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.765caef18.0.tgz","fileCount":52,"integrity":"sha512-mMuQ/0yC44FPg79gw11+yx2U2j2mOUfJNiSVwIYtfrSWSzhBY4v3KqWuqFsMGNhzR6UHI3Rzg7sPJVGrwib2LA==","signatures":[{"sig":"MEUCIQD8O4fHeMoHskVYehhiSIV9+44wOyy7aXOjeGC7T5bFsAIgcY3XcCcDHDlvx7Y8jOTja40Rw5bIV++pKxjh843ZEWI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUBR+CRA9TVsSAnZWagAA8EAP+QFli0IX8R82ilQlyTui\nJhjXvdwIi8yBxZE2Vp42hDIJ8SilncD3spMqrTelkXsSu+PsARLdLVD7e3np\nive9oS0mVAEvTvLdqlc6J4EE+f6ctmtFcqg1lRM3Do+mZCjwIQwp63nOkevR\n6ShaJ3l79QpNrS+oxvaOP364+Nv0nMmnOUgWudRWchBODFewmsdWlUGE4CRV\nM8KHGpedwqw1AXBit5IIM8hkN6uIGfjioKohzebzOoJ/6ZsEPHz5ih3HKyJF\nmvJP6yCahpx4BVs6PJg4lrdteT6UGCCmGPUrdDecTx3k0bhEzTeA+5VU2GK/\n97fy5T3qB6Unu60jy10aHzhUVmP7ztMbWbJL+MxtqEOgHAvkJSzy6BmLrs3+\nicFQsgYFTXaeUT8gMn/NLEp115G12gQ1+ujMH5bpQjL9VNteQcFZ405yOkwU\nCooHzks35IFRAh7oErsEqlHOQhgxTusd5MSgreMNuKYaIa10Pvyr0DS1jpwT\nUGkB0wz26G8owdBjIKPmPEniXOoZRKOyi5/v8MiR/DBPW74kI6jI+T1Wlr7F\nE4RjAFMd37KbGyICxs35Yrm/bWawePGpNus5CfScx8YjzhpIihxr/cbZj8pn\niZDbBELgrTSuyN7D0vsqeX1qenWEAnw45LsUau52aw+L2Mkb0oXObOdx2KGY\nM3Pu\r\n=Q9Xb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e18ae69dc972686bd9fa70c34bbdda38c5caaf0a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.765caef18.0","@material/tab":"6.0.0-canary.765caef18.0","@material/base":"6.0.0-canary.765caef18.0","@material/animation":"6.0.0-canary.765caef18.0","@material/feature-targeting":"6.0.0-canary.765caef18.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.765caef18.0_1582306429561_0.7904544159475921","host":"s3://npm-registry-packages"}},"6.0.0-canary.949562303.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.949562303.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.949562303.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":"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":"c07ccfe8de44c9d5f8065b99d5b6dac532d01ed7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.949562303.0.tgz","fileCount":52,"integrity":"sha512-guQMpwkogqzGKYXSAEzKKZcJMGVUBTdf1EpYrKt7yfyo988pwbkMmWelAiZIGoxUBHbInTqEp8N5MC5ZgiUh1Q==","signatures":[{"sig":"MEQCIB+e5pMo3HcM/0tFrIuQg4eglnpukz1L8Qoxt7m6sNJCAiBoPT2YzpvXgQQKKlZSMjekvmJOLEURr/9pgTZYJFXJbQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeUD/RCRA9TVsSAnZWagAAVlMQAIvaml0lLEfD7zvYalCQ\nqXfKLj8ag5uBIPrc6BGWe2c0kEXqUYRAfbnY1kkzWx4wKbFIrUknGYlxjiJ9\nuHgQXtF1oI+oVsY1CgHDcLmEeKhpkvFvkeHVC6ztKEp3OdaPZWCpk6G9VEO2\nwAyet8QQpK8lHhNd1+Om7Tu+sZt9QpYyVJCUo1zpl3AmmAKQ7cxYZCVCOB0X\n0yNo/gcv7psODkoSfTQ+FJZg7bwKfJv87HLL8s4BtNi4pqdPJxnzelq2pW3/\nDyLEsAPu1I9TMfaRviZLkYDaCCcZPDXbML3QwhmKaVuZb5nBFlSaNQ9fXkEm\nVCK3k6qsyc0gYTcB1hpZgA6vhM+2+3D6WFYExPWGomF87T42hiqEL5n+NwMV\n1TWNzIgw6pA+f9CZ6OU0hVGQ9XfocOUpVd7AaJJMbiWtPvXl4BvEsJ7sBHXb\ni2JBYAS5mQ3VhWENfAaydEdP5BpiOSld2Z/KzWmPZwwRZcPHRLuOAfK8Y6Tm\nwjjuG9V4ZfP6IG+RqmvoOvJscFM950lsDnEghNc+LzPiczOcuGUD0f/n3P9H\na9UD8ww+hh09SpospPei4dUvQJIGpteEJm5WrzJlZmfEZG0CKwpNnCtFB9lt\nB19eQ7ORqXHdMVXFrc62fPiVBDigqCKzjOFTCnWxPjmXle4ja+fzzTV3qP7p\nV93k\r\n=WfIW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b23ce78ac58e49e4a566fa22d5a4001cffa160f9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.949562303.0","@material/tab":"6.0.0-canary.949562303.0","@material/base":"6.0.0-canary.949562303.0","@material/animation":"6.0.0-canary.949562303.0","@material/feature-targeting":"6.0.0-canary.949562303.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.949562303.0_1582317520537_0.9400765937462479","host":"s3://npm-registry-packages"}},"6.0.0-canary.7ec96974e.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.7ec96974e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.7ec96974e.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":"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":"2b2a089a8dd73d06a5e664f4355be87fb0a28aef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.7ec96974e.0.tgz","fileCount":52,"integrity":"sha512-4lEC70Ssw7mxGubxfCSrgbxEC4BaFEn2J5d/Up50CP3fjrgTgwaKIGUd71ux6YqLcAGoRWHTM9HG+D17F0lh4Q==","signatures":[{"sig":"MEUCIQDf0wxy1mkRqSfTswnsvla+btoPGTIcCBisdYk6BD0l7wIgFz89efcD82opmO02S0IVGVlq//4pTnDHVjiGK2bcsYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVBzuCRA9TVsSAnZWagAAzfYP/3LtOzwzOYDfxSfP01lM\nWQjqOfw7CY6Exb+g7BuSj0XnbSgSOpSF4gqelyv81ydMUQ1HSvA01UmLoW3x\nAXXtgM94YCgzMAEBWc2PTl8NU9anZJq7SFm6l8MBBUz1CkhlSJ+rYOxRaus1\nQmFzytstc0/WFU6WsjDFMPEWUZ3SNTAg0fd+VLjhIGZGPCFONQjQ4BgaPtMg\nI9pHyInJzvW5WmGD2pJAiFeZGbG64FbDnMTXhiuAk5cRZ15s4ObflXfoNAiT\nNp6yqbmiLeL5/rZSk8pweLjbuJeOMyJ9te3r5ja/3h3FDt2cMuYWz2D/9nuG\nL/Jv5T6hNHOI+aGAZOOEi2Su0MtQxi57/jgMrRecP+E9QUyLe2Ii1Odl4SYn\n2s+rrMxsQP2J1KgZq2KrvHyD+1eKa4xD03jcL/LZwumu9yr2E73AB+OmtkSE\nfnvCpi/K4dId89epuYyQQOA68VBKF56CoOYb+2+8UYypCiYU3Bo1Q0y3c1qb\nz3Mh+TrCAXpJPWHs+//iDiqJzkx/WhR5lrNOQWGkMtsz+sF5NRCvLBDtShJZ\n1qo5il6AoyRKfnZJq4mVpKMltpe33XnlFMkQgh5Gn2JosgT6e2qBCkyzJIE5\nGghqsiiIa4Ef1KBUs8nugEKRRcYc5EGDzAO2eyUVjaUbKjlrcgLYM+T/4Xaf\ni1Gc\r\n=tDPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"79d3bd54f6272eb54a09e4cbd6a0e62f64e30a98","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7ec96974e.0","@material/tab":"6.0.0-canary.7ec96974e.0","@material/base":"6.0.0-canary.7ec96974e.0","@material/animation":"6.0.0-canary.7ec96974e.0","@material/feature-targeting":"6.0.0-canary.7ec96974e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.7ec96974e.0_1582570733769_0.35269254044247034","host":"s3://npm-registry-packages"}},"6.0.0-canary.265ecbad5.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.265ecbad5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.265ecbad5.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":"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":"16cdb86ec05de8c36e618e80f9719857de4a6173","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.265ecbad5.0.tgz","fileCount":52,"integrity":"sha512-coTuH1npKBdvUhg0SNmOWvxztNN9vm2oo2yIQQ9oVOfzLz/YQulCpaOmsnvfgGsqOo/55oLXwI/bRqoJOu65Hw==","signatures":[{"sig":"MEYCIQDCrG/63wFLl5Cg13ENkIZsZv2PyNw8mbxxgddhLkOIAQIhAJdSS2B7FULkzSHXhR9qFraVOBaZiYcM6DtU5WFw9lMc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVYs1CRA9TVsSAnZWagAAckIP/i0X1a6GUyo/4LXUY8pv\n3iv/+Mj45kph4Fi8Zbgx1IJ/qczadsGf5NxjmPaMBAy9ZCzL8cywPiUW8sHF\n4Hlk7EZ3VSFfNSjzShulusuvAoWYKq6msfstVAMOKw/QL9vg3qpaHa9F5MA4\n4GS5+qIksEOxnDNd9giaUqenWhYUtJVpr+Pw4gQMX+c5dh5MNTQISp9veP8R\nM4af78FP7zXdgRYSUp/TKq06SxLQTzqw2IuaIsPsTCJLmkVXrLoqV376zHm/\nYHYKS26otVMX5Lh5x8gj5yQfEk0nU9KwsWYuMX9Di7dWynxnM0pWhkUYTGtb\nVRx/SqUkrV6K8DwC/U7Kv7VlaeOcdg2tvO0DyWx9CxxQFVyqf/872/thtNa5\n6X/gi4UExZ1Js/ugpAlWP+H+0csYH1chXH7uXdqNxO/WRem4bUjSqFiw2zQS\nrm2zpb4dt74ajsIRd7kglCzpy0U/+filw1pIyYptW+fCc6s/ZbHVlfXNhPee\nLdRsK5ezqOBJzU+C+h2/5AdWJhdVc618FKy5twm3Y8864VApojsQZtgMaGr0\nmgENkY3OL5ddMKmVj88O1tiLsnsPD6FHC3DdBkUaEZGd9QRqIszd7SOlCxZJ\nZ1lO+wh6LYKVbpo4jCVTnsuBbvD2FIEXwv1CEI9YpcBv2D90qfEHzBZeH+iz\nyPP6\r\n=yqxc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1600f4154da0a0943fa8aaa13dfa15c79b0ef89f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.265ecbad5.0","@material/tab":"6.0.0-canary.265ecbad5.0","@material/base":"6.0.0-canary.265ecbad5.0","@material/animation":"6.0.0-canary.265ecbad5.0","@material/feature-targeting":"6.0.0-canary.265ecbad5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.265ecbad5.0_1582664500921_0.5102300659202772","host":"s3://npm-registry-packages"}},"5.1.0":{"name":"@material/tab-scroller","version":"5.1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@5.1.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":"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":"7698b873526bc4a4a2baba415cbcf46db76fe996","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-5.1.0.tgz","fileCount":51,"integrity":"sha512-7b1Ea5tLc0A0iQEWYHXj8jfdJgYFMaaWjs9BOJyPBw7m2PyDnVwPGngPC5RqmxjDdyEeXbtDHsnMLZmjdT5g6A==","signatures":[{"sig":"MEQCIHetoh7ALJIlQkXkIS2W1COmz0lUyo5YMIpgysBn2PDwAiBzcZWM9LYcYxw8esEyysUV2PtPMKa+M5J/hRX1ecIe3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320951,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZP2CRA9TVsSAnZWagAAju8P/0O7rDsUYXOzboOsb1Ch\nSdugetyuoA65655Iuo6m0n6ewcicOyDjc4mvbiFf0a+Hk+hOULTwDeWrljH3\nLbsNWenptyN3Ug6c3nI1WOv7hOwPhTcwNvbc3FhGnjq9WopzQ38q1thOX9kf\nTQi8tMcTZ8R5lxvPaDYZW3wUR4OwIxW7fQI8kr5/5fNTlNyz4uiWmzeWQ7SI\nWnAVPHbA5wt7Y6DfUMcYalgxHcjBO75T7rr50mJMVJUGO0NGkBHIvXmXH8mW\n6CADz5URoSxehTcg3+p0Vd6U1vmLzKYCl865bIALgPi0MyvtP4Weium7psZO\nNos03h3S0LXiaeqtBBptQwK/Ckn/hUGa5hsjt4rovdJG42s8IAZ+Q3Q833jI\nZIe+NY655P+n6RPfpR4Dl8dN7jRG+VCodEzHvvrByvxGvPbQh4/90JcaL9SY\nFLWX+hDwuflr8QcW6BJSmVW6ZkpdgHodOxn+MBP96vruI0WYXtuZEhWLmFxl\nm4QQ2Tv9nXDH5eAMjwbLqktJYRFkWGNXEMm18gKfRfj5cZLOcEmyfJbgnAh9\nJjK5KqDrf6p34IaWM62lhPS4M1lgyA1FohZ1eQdQzJtpRbV/ikZKto3sFaBx\nn+rOAYfQYCpsEOHWNyIUEJCoRPf89Z3QZKKGcRXxI8Au7WS2P/M4zYQIs2AT\nognY\r\n=1pOs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"2cf87456f7b6bb4803ed5f1b18a06320c301a1b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^5.1.0","@material/tab":"^5.1.0","@material/base":"^5.1.0","@material/animation":"^5.1.0","@material/feature-targeting":"^5.1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_5.1.0_1582666741830_0.019557554623891305","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cf87456f.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.2cf87456f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.2cf87456f.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":"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":"49ae4cd200e8c9207cd413f45aaa335552a1a8a4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.2cf87456f.0.tgz","fileCount":52,"integrity":"sha512-Eggmmz+Xwf7uf27RhrWDEsz9rpUxxQitOhhkCJL1p5kKGphDrKoHVOaDCfqWQpDZ/C+sJk/b0VVx/fV1M+uGeA==","signatures":[{"sig":"MEQCICZO15wTJlYMYOZOhkGb7EEa5reo0dW90WuyZqtCL1pWAiBsiwcBHE9NYd0Ac/M/1t0/nOSU/nFDhTJgzocFPy+KiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVZRsCRA9TVsSAnZWagAAao4P/if3GY7nG7P/J9q7r9Ey\na+3hzOas+deXyTYanVf2J90EjiWHkl2wjroOoHkldz0RI7pr1zbl/NBHXs2V\nLP/wyJJrk8zGuds0X4J6u+PgCZPVU6/nMDcuHnQc/+N9SppQDje9UJWg9SWb\nX8DBFeKkRvIiv+rF1TGvvjA7iPvp55UfDHR+5AxKpZlgziHPySAA0GVzZQKM\nnkj9khtUe8ckPqrFV4puDqK3gMdVimAqQVnXCtmDbBvNZcwigGqSFKqIMwyf\nsBzN/lohAxO6u62qGg8MZ6WrlFMZ5kAGtWqzzruiIbnu+V7FfcSn6iQFH0JN\nZxdtw8MKRNP2YX1WC7RFyyLSTJ4OWeoqGvy79iFvbU0Ybv0Dby2gD94EuNgi\nsbFWN73+L3QUJUoQwEwt6ZoLjnUjoI8mWSA1i0Qdlpu34k8z8IMUNIVQ+8Gl\nAmiayRUFKuxRkm7mPvu7xE3nE9SuuZLhia+r3orcUgu9T9rcqQz1YsIWDwLv\nrYig93FH71gcrHZm0WoGcX2Z09nl5FfyBE2K2CaUnYK0PrP1fptNRL3H7dRT\nlXSzN7QPywh7LM5xPcX1EIoqVu/0YydlU6gq85ldpqowP0pU1mICqNX+Jqt2\nUe1zOvjZjJku6rXXn52WDUVxaflIBjnvUzkYz2Kbca3v5L4d3cJWTn1h/iD/\nY96Z\r\n=Gmir\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f8e328b58b1986d1b2e248ebeef472088137ffa9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cf87456f.0","@material/tab":"6.0.0-canary.2cf87456f.0","@material/base":"6.0.0-canary.2cf87456f.0","@material/animation":"6.0.0-canary.2cf87456f.0","@material/feature-targeting":"6.0.0-canary.2cf87456f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.2cf87456f.0_1582666859996_0.6572485415255824","host":"s3://npm-registry-packages"}},"6.0.0-canary.781434a92.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.781434a92.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.781434a92.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":"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":"6064ab8c426112c54845a0fdb88ccd515fa821cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.781434a92.0.tgz","fileCount":52,"integrity":"sha512-cJkNeRZqZwLRUdoPQgcN9Uwlrd/htlhiYFFEP7rHmbn5oO++f1iMkaBva0jbd5STE4QHyVtsFUNu6oobWNGTgA==","signatures":[{"sig":"MEYCIQCOFI8yrTsKjP6T9vAyYQ8PL/BXst3yxuj5IftIMMwAiQIhALWtH3b7FkN5/sQfSOrf3SrSLvI6dbRkwZHSYbuXpidT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeVa2zCRA9TVsSAnZWagAAbDcQAJfo9kk4GDFulNWGLFWM\nqTw+WRR4SwQJlAbTFiqBA4/VKAelfuR1FkK5X3w/s28yu6H8wopvKhgQAM/3\n143QjCoqrwDUzyMqs685gW1mHd+40JrNO6Bon2NVCJ19+nx42ATfcBDFoXwa\nWxi4u7UFWZFgRbUUO+yGQak+KsX8FfAnm/XQTDhzWg96LPiSul0NGpy0aF0m\nEkMKfwKPlSXNMMDzu/oRWzW66Cniz6xuXN5T12/uwL3VubnBDv1t1hIVWSBr\nBIKhFgO6YKrQne7LOygwlvRkzf1sAASHemyA58smru40decKpH0JG18nByOH\ntM/6blGdJ4U29PejukcRrZbALIvSlVf7DwHxj+l9kN4ybF1Z4778SnUnzW0Y\nWdymp09v381SVoW4MwpmCz83WWyaOXZrDImcQcXDuMDORw28CXUSj0HiPi2A\na1eUEWdLv9bCh1EKLVLemwapOW6mfIeX5RAnsTiZNpml/KheUlzituwILgZx\nPCGm8gBuugN04FpT8FCTlZmG7ozeufWVmIr4QxiwUw3MozIGcDENWvITsz1r\nFl8xXBUgcsS1gP79/KDnbEQg0MwqU+iiSPEiPHcEEKmy36BplfY7jnYWoCws\nf3UnadSxdslXlMP4nKBbXthOA2KGwlIurHv8/iZSTzno07fC8npgJUb7ZEMB\nJjan\r\n=WtXj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"550f1e0ff50e94ece83c72bc45536fa64683d7fc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.781434a92.0","@material/tab":"6.0.0-canary.781434a92.0","@material/base":"6.0.0-canary.781434a92.0","@material/animation":"6.0.0-canary.781434a92.0","@material/feature-targeting":"6.0.0-canary.781434a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.781434a92.0_1582673331406_0.16482723073033223","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6f60c98b.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.d6f60c98b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.d6f60c98b.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":"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":"0c80f8611cbcd37d999a1d21fb911b71d8f5d558","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.d6f60c98b.0.tgz","fileCount":52,"integrity":"sha512-fFsyB4RpwmhBN1o3dPAbYF+DSNlcRpi/iHZlN0dRS3kHsZZopKMHssj9o/fK0MvIt04AKbxl88r810awqcy+Ow==","signatures":[{"sig":"MEQCIBsOnlMIjpQouTpM6GLoNRTWPeKk9GrZm6pJoFNQdz4WAiB4iqFWDq/kBSsCvRsj0XSxuvCHrwjZNBg/dE43yeAPtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWY6LCRA9TVsSAnZWagAA/oUP/3JBEjOChcLkO+B3U4kj\nD0qeSftw+Y8TZYGTyyUKxiw6ncO7iWWRs+jFR8lvi/a5D0w4lwYXyxtSu7HQ\nhz8fm1J5M60+NlZsAWB6XFZMz84Twu8srgbfJ9Hd/9HBirTQVwQpV785JnVG\nE/VNH+CfG9jOqJmPZwJNG7u3qS1HNc1rN8AqDLFpwF/nvz7MCqoMIYdNSJFF\nMNTqUaLsvayqh6vw+jP4e0pDColt/CWkNKmSjcGncz/g69SPlOeoZzlKJp66\nHxzOCInFDbIyPC7w9sFe1ZNSfhz6VOIcDDTAVefX2IM1QLGyQRTUo2wjbuOB\n2HIH9ue52wgdctShiakJi/pO9BL9FGDtyHkXZanDnnj7L0D93AJTrXlm9RCP\nfMZ7KT4QUVaY1XPCrwK4UtnOfLLpRSvTe3GM4S18eXoSonjwukP5gXtfD1Zj\ndDdjIvDpT9lnIXK1h9th0Df7T+2p7o7Q+PilAe4TmbhTt+/srOsQ22X/YqMm\n2CnwG0rkToXitqaYdbgFN5StJt5Kh6WX3VERbWroXagFR8YwQt5aNPGzoTiP\nKlgeP9dgS2Q4wTCLYMdAaYov8F3/ICiJk6m93syM6rQYdsTfwAN54tb6uwIj\n48zkek3JiLq6Ggxy2v0i65p5SQvlQTvjdGI1MIfUdoQF+UX4RWEskDGQ8h/J\ndB7a\r\n=Dbv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"51319f628dc2d5447017b393bcdda8ea48a93896","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6f60c98b.0","@material/tab":"6.0.0-canary.d6f60c98b.0","@material/base":"6.0.0-canary.d6f60c98b.0","@material/animation":"6.0.0-canary.d6f60c98b.0","@material/feature-targeting":"6.0.0-canary.d6f60c98b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.d6f60c98b.0_1582927499059_0.650923994257087","host":"s3://npm-registry-packages"}},"6.0.0-canary.69edc6e28.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.69edc6e28.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.69edc6e28.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":"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":"b3cb7ef10f687452d046c35331e6d12bcedb5e4d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.69edc6e28.0.tgz","fileCount":52,"integrity":"sha512-UAKopz3Ys9J6UST/aQHyTcsJVEnBwJ2n6vYJShjqRANUcFHoH0pnsD4CeMCzz25McYcpqtap3NKO4jc3lxchbw==","signatures":[{"sig":"MEUCIQD/FyFz4W1CLpMdhH5MjcAodD4yO6KmaBtizs9+yUvdfQIgXBBkSG4+NHY1xrfeRweGIgux9QOpuv+9cqe7FeKCjrM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeWZBuCRA9TVsSAnZWagAAbbsP/1aRiNTSQJu+x2BxJPzd\ngFxebY0AVFoxVxjsp4Rhj8W96NyxeQ4VcNw31CdlybbE/9W7UG+D2wgPOK1B\nllK50prbapNKX96YIN19DP3AQKdHY8ZEhhlv4err2WML9xlEU/MZVGF8qiF7\n0nDKj8HprsRlQEnXl2V/cNPbMWdXbpSk52fZSe+1PzRZssliXm71n2vHdViY\nHFzx/2Vs9Kdkzj314G/dAe1cTMz1oxRNX48SuNFdXSTe7/6zmYoswMiQS5Cn\nBsSs063i01X+EUIFB8H4SDmWwhdiGICaPcgnySQk026vw3VF0zgGflf5fSSS\nYIGN1grVvE18n6WutXjmSAuDYzOqOtEkNbf1cX94laukLWWgDeKKi+QKBh2c\nOFkw5el1UgdIRcv16v3d7P/q/XcuLeZmc+/OXTlgfY0G/abhpMDe4rBAsX6d\nETRIruu0r0lHeL/F4/50coqtV8EnpASdyocuUiIB5o/Mxk4gf4T+7OZ/u8KV\n4pm/2GDpryhfAN5oDQwp4glo0xh5L2XYmdZY0ULwi4otjUGheDhG7tolNO9C\nF/9HSmKwz4RPSAJWf8UYMvtjaKKfl/xOyGT7ha9iJTeYlhLBWk2xHGIPAjXO\n4X/N5oOmRYBdaJ73SGvSlUGREv+4CmH4tSYPuTgR35W85oCBtUoOFtPm/N7l\nF7cn\r\n=KMrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7394312b46cecfacb3ac97cf147ed16fcc42e538","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.69edc6e28.0","@material/tab":"6.0.0-canary.69edc6e28.0","@material/base":"6.0.0-canary.69edc6e28.0","@material/animation":"6.0.0-canary.69edc6e28.0","@material/feature-targeting":"6.0.0-canary.69edc6e28.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.69edc6e28.0_1582927981715_0.10325358728800538","host":"s3://npm-registry-packages"}},"6.0.0-canary.9372e4939.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.9372e4939.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.9372e4939.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":"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":"888a99f568197527826c4ea6132333a25bdeaf38","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.9372e4939.0.tgz","fileCount":52,"integrity":"sha512-RiyOrU+/NuyFRJ9C33cH+eWkTs06XY/pN93rFk9IdIkH0i3AXfa3YX5T1WcMO9Om/wvrtg/bsTkRO6RwFZRxVA==","signatures":[{"sig":"MEQCIGRAAgAs1xioDg05luB0Wa4cgBu0zB219xgKyM76ddLrAiB4eQUyaJv91WfvpxTpNDw5EKOqqjY15tRFjm5YO+6c8Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXqviCRA9TVsSAnZWagAAMPYP/2oIOE9IIMdRxSpcaSbX\nfCTFSOGmH+EeCw/GoXRUSUgl1FOhbFRPbq7jsMUxoiEIOADoLRz0t+R1g9Uj\n008XDdJ4Osgc7IIRRWO7wbqSyQ9Y41JYBSvHJ5KZdyi1aCSOw0C2g3cWbcxG\naJz1qREHkQL70orREULNrTSadKEqTGEuF8vIdNvdFi4pH15OaXdx+BAjn+ux\nuP+0tIaLOSHCWDSpoL1N9cB9P7Mnws6si/UK6sDr6ET/9Sn8PPyrdGQQ9qLJ\nutwU1vHmgAmapQ5L9J8VReyZyfinQWN1ChEc/Zy3d8C7e7nZOTBwBi276/ku\nfGqqLmCUYKS9hinz/eigkZEZPQszih8fxh/9lDoe8hlklHsCSHpXZ0qU9Vdz\nFLpvbtdNej6l7KLXEmYcQJT/CfT1ngjOiYrDrTTepwzvN2ftifq1TLbQDGdW\nOkToNo5W25GUDNvdQfC8oNTg2n4tscc8k5feC64SSJIaVmIMhsMjmkSOn6qk\nzZyQqCnY3crm6FjQ7xXxMdObDA70KDb2DZWr+gWwtj7ppI65TYJzOuXo5bqX\n7fDeBaQOZrBCqzN1UOZ60d6QpnEskNzzy3MT0aqFnNw7za0NQHNZ7fA5TGv9\n/b8uSf5wGV+DL9h/otrNPK6zEDsJ0Sj4lhScDxeTntc8yWOM+ESd0fbCIqds\nG83G\r\n=iusX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e54df7e88218f93cffe81e63d7e28371126d5611","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9372e4939.0","@material/tab":"6.0.0-canary.9372e4939.0","@material/base":"6.0.0-canary.9372e4939.0","@material/animation":"6.0.0-canary.9372e4939.0","@material/feature-targeting":"6.0.0-canary.9372e4939.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.9372e4939.0_1583262690440_0.7747872992585332","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cf5e9842.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.9cf5e9842.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.9cf5e9842.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":"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":"54a54e8e1360e54f765705ae06916960db6ce9d5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.9cf5e9842.0.tgz","fileCount":52,"integrity":"sha512-LhnyDdkiF4LDWrUzME1A+hhoohu71J9CaX7NjMupItGliuue0uZg1XEnR4nxsBGyRd2E6yxjgT6wARW/q06nDg==","signatures":[{"sig":"MEQCIA0l8rx9wkJnMIRYM89Gfdr5trfQE0TW5Vz0KXh/oCZ1AiBd9BXAD6XLfaxJSGKCIJBL3y/+R4EQWytO2/n1pUE6zg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeXufQCRA9TVsSAnZWagAAucAP/iWKzqnPPzKYrF21/K4x\nl05HXFcbrUzSuvN/yPFKUnopmBmGD5qYbUmb/wa3492C0NwVsQl5qSQsAaur\nIcx3g1YHeTEHWlBlSU8SgeJhJwFWVSGbRV5ipaorrZKBNuUbH5qoBMfsBwtW\ntP8sXYb21kKuCcJRfKh++mImxQXp+LSr+B52bdK/zyoaEDbB9v0GgeFXmjYd\nOB6oAe3qSJU7P9BiTC+XsO8pyZdXzP5ga0QhvsyBUM3AOs62dthTiygMfxFL\n1BFVuC8kz6vcopJyBBzW9irKQMdb5CHupTuNuIiZtXcQ8UEitni+T1ghUomo\nJP5f6EOG4zPtq932LPS/Tn2uhulqT8+qW0uqKdkdS2Qtg2OsthY8kRQ5ijwD\nRYnVEgYYurYmIXTbiKsTY1bQpABHO2CU7SrPAHEK2Ca/s9LKaY0zKNm4tYNg\nco8G6utHH4mwo9dzLQ0AxOf0Q/mNuiHn6+CKxNObHzn5w6W5sEQvZ+JjJxhc\nriPq/PJV5P1eSZqFILB5dCFhq6s4vh8GL80r/0XcMpxfxRcT9oNYhtXJ1rTd\nVCyX/Oh8zovwRwHVWifKDThpU5evDcV+T7rO9bn/yPLQ75/L5iYJ7ACghiaG\n282DzBC305FRFW3SABnb4hipt6QvkNRMcBQFwNL7aFiV6E4LIhd24I1bYPV3\nZ9CL\r\n=UHwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9ae3d1faf8362261d4cadb5f9386265501b7f143","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cf5e9842.0","@material/tab":"6.0.0-canary.9cf5e9842.0","@material/base":"6.0.0-canary.9cf5e9842.0","@material/animation":"6.0.0-canary.9cf5e9842.0","@material/feature-targeting":"6.0.0-canary.9cf5e9842.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.9cf5e9842.0_1583278032079_0.24573479520247754","host":"s3://npm-registry-packages"}},"6.0.0-canary.3657f8863.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.3657f8863.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.3657f8863.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":"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":"8592a542a0813bff24c832fb5a00da9c995740af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.3657f8863.0.tgz","fileCount":52,"integrity":"sha512-1Jf8+D7OYF3mBeiqtZDfuy64SuxdUIM3n/rKpQbStvKtg9O46ict6gIwAcJ9yfVH5jClCrDxsCQZuQfn1UyzrQ==","signatures":[{"sig":"MEUCIQCe2hK68bcUdTpmhRVvFAU0F0SNjFtrZmmxdIjP60MLrgIgVShjJKYF1RsbN1H8IyHPz/SKD9ffiTKSsxqtfqQ7lKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeX+kbCRA9TVsSAnZWagAA+dsP/2enO4+LnY6G2v1lkuWp\naUN92PtRBl0DMEK4mv3/6gbhp9sCVaxk8nU4eacAzw/i+4l8NQiwnZ+SuJjJ\nJF9WnU9+FCBU83zR3bcWAISaanij6JqVbOB8KBHdH+1WE360qQvIQvfmxVKB\nPu9eo/MzkR3C87KEzHCc/Rv2DwWggIfREa5N2RBNWtR3rp+J//0UtCOP1iOp\nXXDJ3L3iNzfnXyfkvuxqI2fy1kH4gpAkUNMzo2f2F3wGiVf5ZpGSZzw9D8Im\nbPGqUI80OUVlnEtbA6muu0RZE1JPiSVAVf4JqJ6sV+ADtJgXs6b6jXaazmp3\nifV58s1gUamR/nVlDsp9W23TaTtkyk8yz2IQWrgqzE1Tm0/TI53/hhVdYbRz\nKW8ciRwAtCJJkte1UlT+cMy7PsLHn8Y4IlexWzd2PYoqgF2Eu/U6+KmYzb0J\nU51FnSZRjQCYu2qkQwr6kG5K97jM6xjNxvPe+eN09D/h+JERnpSrMiQ2j0gc\ni+ceSYd+dVwmtMw02OCw3v8OTVsX/xlb2nZoAqLOpeONALnhp19DeRHP4pHP\nc53oP9Q1omvOcUpZZMy7JQO/eZB5raz/6XTe7y+b2cc7OsHiVCBJtwHY0Fn9\nKVlgooBrXl4v60cWrsluUjzXT8dIHLbCDnecpQhfEEEvOSuQbLh+TsZ5LYCI\nXRYg\r\n=17+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4075a5619b546f352f6366e5e90c61777ee28f5d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.3657f8863.0","@material/tab":"6.0.0-canary.3657f8863.0","@material/base":"6.0.0-canary.3657f8863.0","@material/animation":"6.0.0-canary.3657f8863.0","@material/feature-targeting":"6.0.0-canary.3657f8863.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.3657f8863.0_1583343899600_0.7003234168507495","host":"s3://npm-registry-packages"}},"6.0.0-canary.98b843417.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.98b843417.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.98b843417.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":"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":"55fa3e3cc5705bcc20bcd9f3e48ae4de6c8477e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.98b843417.0.tgz","fileCount":52,"integrity":"sha512-jq0pjkR8OHjxRkXmhrIPTQQnaM8cHgHk464nKe8wPVVquLFDDqmswsfPX2hEXoSIMOej/CmydbaftiI8wmtBqg==","signatures":[{"sig":"MEUCICfGaAKSpQA5KrlRYc9NpZniQZRUiuuCdk9GM1UIIKewAiEA3MtvSxQ6j6A0d7D7MVwEtXAjxTvqN5rpMWCDB+jPFLI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYUWYCRA9TVsSAnZWagAANh4P/2giWn5tQ50jV2a/77SB\ne+Sl9nFIEvABwGf80bR1Bi/BK89Qj0N7PsEcW+GaOlIve38ThLUVqEawHaMs\n7+Pp4IY09HEZ6xNbn1wmR5rPfyWqKyZlGhry3W45/8MGWNW2R2HS+k9TsFOv\nQtSM2WdmGEtOM9U5Jx4ZEnCqDaTj275vFFYrELvQdsUyFdomrjSbV/P0PnpE\nSkinpJXRUmum6AuZbc439UCWTzwzddBDR7qgGKA1imNKu6RSMnSM6I9/GCrY\nP0Pve2p9lyxVwfAG1hAQhkKNdvC72GSky2cUPSy2U9aen6dpJTG/i4SvV0Bd\nXX/gvoaV7WuuMbPlRhmgo+oNMoN8aED7TaQ6VRmWTcW7OlrQo7I5HGPIn5Pj\nmMTmsqU0siTHxat54pWYNc11H1tMwqCHXR73tmKrwRgHoo24LCWF38XER5pH\nmr9zO7/W61diKXzuN2FeX84lBqd24+Lg4S+M5CcY1SNPudOA188vx8qYZpol\nIgndquve1GSh7aRmNwedhT2xHFNiZGsADAZXJf0UGQK88Ar1j6M+/Pd3ZRQS\nnSP1OJyRJPcgIeXkD89An0Q09ZhlpNrdqks6dc2S1FdbJjvUhkER98cKa4Qf\n8A9whe0ogGdLIXdT2C2P+SHKh1O0Rn4YpeC/obW40mkAVGwRo7h8n4tcAo3h\n2jxo\r\n=6grF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"68f2aa7dce5bfe926cedccaedf1c0c98166d0bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.98b843417.0","@material/tab":"6.0.0-canary.98b843417.0","@material/base":"6.0.0-canary.98b843417.0","@material/animation":"6.0.0-canary.98b843417.0","@material/feature-targeting":"6.0.0-canary.98b843417.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.98b843417.0_1583433111655_0.26378887263178763","host":"s3://npm-registry-packages"}},"6.0.0-canary.17b9699c4.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.17b9699c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.17b9699c4.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":"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":"3fd0f73267f7b98cc5b44d0c9946f70aab51bfb7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.17b9699c4.0.tgz","fileCount":52,"integrity":"sha512-zeesVim+sWikJnu033vXP8hik4sniZ4sCndojSNbuxtaMY0eu+aG0Ihjq30tp7IL9B/xkMy1FPnAgFfWKl2eLQ==","signatures":[{"sig":"MEYCIQD6jaSgMqUkejDI2cJlUN6NF2ywQ2uqrJPZHakCrWQ7sgIhANuKJe5u1wmoIdnda/9EuP+VNcYpT6LuHyaVIsgRT5qF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeYVGmCRA9TVsSAnZWagAALXwP/3mlD6r2/0/u58Vep+Vn\nQ9+xIsJChi+Y8pAUQuq+Fy5KNcnfus3FZ4DB0Zo4nKYGMVFh/XufeTGXhyFS\no3d7VLOPX5Th0tJf5SjKanjWgcbkXtmI6k2qq3BBBBGSlhjpM6Y+ACQWvRXu\n5+jag5RTMK29yQUpf7dd1Yuen1Y4X0OnWLYNGEuC42E/UQ0YYsdKJTFvU2mq\nRJbKyBzTC9d+5tTqoO+D6no67greFc8YAFVHPsvprdalh7ZSpdBPWO9V7Ydp\nJdt/l6YBTarXgYUyjcUHX1ZkV2rn/pFgvm4Z+YwRyQwdfGP1/D0rOjGg+xN9\nmfnQB4FHQTGI++aTFCQSoQWL8bzGv71/7fGdq99+EbhoSrIYFedn+t1JYCf6\nlDNHmoDJwz5lI3Flx30KsiRB6BqfXkpGISwH3I/1LPAOtBTBou/dRVc3BO9x\nuBQsxkilOLZh/oKlKV4Ew5eA1rTKLiqMGxGip1d4WK4o/ImnpSyV0kDrN1Gb\nF1grSe164EI/kCo0Q8t04XY4cufJfG8mVCUrOfUFJh2eg3Evd6HnofIiWgmo\nXG4sNBTer99z/eTO/ohMy6upYBA4gci9tufGL6pqvYJDyfg0oaMhe5KXrKLl\nvy40aaFSbe7Xrn8ki8lN6jl+BiUvRet/KKij2wpJOLzwjFDRakD3qNnhHDlx\nUbhM\r\n=owkt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5cc71188279f7fb4c0eb3b0b6b98b59815539374","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.17b9699c4.0","@material/tab":"6.0.0-canary.17b9699c4.0","@material/base":"6.0.0-canary.17b9699c4.0","@material/animation":"6.0.0-canary.17b9699c4.0","@material/feature-targeting":"6.0.0-canary.17b9699c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.17b9699c4.0_1583436197830_0.9883474714959781","host":"s3://npm-registry-packages"}},"6.0.0-canary.6ee035572.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6ee035572.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6ee035572.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":"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":"fe435f9ba1f33dbf8d03baaed26f2ca0997f7077","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6ee035572.0.tgz","fileCount":52,"integrity":"sha512-HLbQISSMVg3ojcX70NMHRnprjirBDh080AVj+IKUYUtVGX3B4MKuQXWxM7eOGV2sreVsrHk4S6HQ7xcAf5QEAA==","signatures":[{"sig":"MEUCIQCiW/ogfoDOs1+GD0v0EMfbUKVVhYXkLipFANWXcNV3TAIgMXY7mfZGZLw1SQfFe9xRMXwTFOaIl6fnZptN9j7gzJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnNLCRA9TVsSAnZWagAAB6cP/RS/fFIrhJ19yAvYnzUa\nIb0UR0IbtL1ArcDJNQc79vEUn8ZwVSJvnsLHdAr7w4/U7eenpp9Vq+F8jMSy\nyj9472J7hBnm8V8Os7KHzWjSqPYsdGrV+cmQlyYLPSLSSkXov2llkO0w6EA/\nei8uQm0t+BfZ5nMGYimanNcrBbmKSpomdIo++/060KDaQH3iik26yfaGLxGe\nLtBT9DflCBF+3sytI4rY7gCjHAuM1ZhRItG8+FWmaTr+RQ+6/4K1QO52YOU/\nTNkoNAB8dsLVyAwgXF3RJTlpV+ubLofdfKoWEDFj4/5xcO0ZVT+r7Zpd63oV\ntGMNGA7roCXmeMyAv1wEF6qMliBU8Fhas/ZPAVzldWMbsxWkYOiNGvCDWrk/\nbAwtnKj0eurQ/5WuDvxS+HNnxD3LYFSqgokjEHFGKo0NdnVN1sfdKVcR0u9N\nZxiBd7vK8RXCwLbFnTUzVz0GRWItgPYHQTgYRecKcqsAFZqQhFMaDwVh1LSv\nMujisboVPzVwPARpn+gO1qyFKC+HF1NWt1NnFSQMvxz60y686o8T0k8/riTc\n1NpCduMAYIot10jQIVPcDBugg2h+vMPQrcbTPFlyg8G4N01lZN2cxk+WngCS\nM8urW/y6U+TSBKvXXI3nNMuC6PRpKaMHZ2wsBefFIVd0yMH9wJSdmAw3jZW/\nokeU\r\n=6SwF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f7d234455251ae34ac1d568b4654bba0bcadc57d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6ee035572.0","@material/tab":"6.0.0-canary.6ee035572.0","@material/base":"6.0.0-canary.6ee035572.0","@material/animation":"6.0.0-canary.6ee035572.0","@material/feature-targeting":"6.0.0-canary.6ee035572.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6ee035572.0_1583772491082_0.8623548013289133","host":"s3://npm-registry-packages"}},"6.0.0-canary.bd33cb56b.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.bd33cb56b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.bd33cb56b.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":"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":"d1c4f6ba9adbae880c6a52987c5afb0bce016d17","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.bd33cb56b.0.tgz","fileCount":52,"integrity":"sha512-y5eOafVPLrnEy6PDi8VVVd6znZHoz7qeqfcTK6BBDF2O/vnGB2HYkjZZdcFpWgEnHlEKvFdcraThawrebaXU5Q==","signatures":[{"sig":"MEYCIQD5VNwnw/miffyGcpWtYLE+qew8hbhcxi5jKgwmC1Z8xwIhAMq4KkVWYrPD8euqxzAyerkIBhzlVNexK+PFbK3yzCfe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZnuICRA9TVsSAnZWagAA/vcP/A/8oZSIBUIcFObYjRNk\nWx9HsnVOqP3G/c91NihYhDojvb1jua05wMpKeXXg4EQZ44tcDrTEP09mf3la\nau15dm4dHP9LkXQw7izyUsARFtIn2I/Lwa/ok9OzIVKpPfFVequtqh51yhbI\n7RU580vQ1BNsB35ia8fbpHC+NrYOJuztxUUKylLry79U7eUiLUTNCVYR3GY/\nDrAn0lM4oL7AAscFNsrkSGs5TkQITZOzpKAW/8b2jk5meh/MS1dZy7TKXIw7\nY061+rhIcKwvcxSNvU41alg+hj+jjMmok2BbRkCakCGTtj69R1ZOkvEqv5hU\nORmr2RL9wnF3h5R+6EdbCrnIUj4muqgjtzxW7IqoCk3zSKvZQ2stT0wfWuQ7\nqW+gybjDIp70MeMYzWCpW9D1Sbmpx41ZCR0PNdMnxDJ3Q801d0CJiHm1ec1b\n1owte8t6Fs3Fgtl8n3+4KJO1Kq8J651+5bIWRuY0EeNVkmCy963Vn6M2jTlD\n8/VPQ9K6RMNp68LPx5vLAXO0Ii76NyI6NJIegj6OwI/AtJYep6KLdGI6s2FZ\n9ABhLRaze8mv/QdtVafEqzH5B1dVvd8hi+/1ApoTGGCkFOPtvzIg0iVMv7mW\nuHl8o5Ih0mA3xI4+jCX3wVKkcftxBrgZAlD/s8yyLjXrOj4xuD+QoB7aTQDA\nF7OE\r\n=ARaU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8829857459a9b7c92653d2bed2a8ad63b58b672d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bd33cb56b.0","@material/tab":"6.0.0-canary.bd33cb56b.0","@material/base":"6.0.0-canary.bd33cb56b.0","@material/animation":"6.0.0-canary.bd33cb56b.0","@material/feature-targeting":"6.0.0-canary.bd33cb56b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.bd33cb56b.0_1583774600200_0.5156547657006771","host":"s3://npm-registry-packages"}},"6.0.0-canary.26c049afa.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.26c049afa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.26c049afa.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":"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":"e422bd9f0f41ef43b138c429081498ffdba1b4fd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.26c049afa.0.tgz","fileCount":52,"integrity":"sha512-c/e/UjyeoS23Rp3pYXf+2lqklI69U3EVfirDv8fpBJbMXIOEuC2nCpfZWQi9S6tUv+IMgY5YzD8wq8SwbaIkOg==","signatures":[{"sig":"MEUCIQDhBiqtKYOYYaSlEOL41gVEnrnmTIPipca4oSsoL3GHGwIgQwLCCAORLKcktiDFQJqZWLftUaF5nVZcC349EMMSz2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ8hnCRA9TVsSAnZWagAAcqYP/1+xzipZ7T6hGHX5lTJQ\nmVnffS1nuVXyx//5y/GwRr2Dy8VNaET81Qw5Z8629M4j0x+y3DoD+zqOyjwJ\nVSWNsQ19Yl5uNzKtpUutaEN8QJjdJsVmuZaSP7RTupCyOrV3BnZBTyhoNSK9\nIiTh1D2A56G8vn3DF6xRYoZndxMEnhtlgW5GXqqqhzDballbT3Yfp7Ymptp7\nICZ/AU/X+hHqpZIiZmA1OPTcJCfQXKMP3673Wr0DCC8cNKeEi20I1XU2i3ES\nLsdtBxnhAc+zhcxfVfP8YqmRDrfW2HYTVn+tzrvI21neJZ5sSbz0npW7Dt/Q\nHn0pAX4UxQr9PBQ7nJj4Hb6usKpOAxZnQWxqw20gRPhQ/MXIqa12caDxxJ9o\nH8+M/dNyQzQUVS0AozEPi9DCIu1VKvKWxyz3GJo9N5U/9jXXJ5RO74iTrB2q\nkVmoVbpakEvwdui/KLb46fWAZ4hi8T/sjq7sb7CNkv0jrqJo7Q0CJj8DhMOc\nOXqOgujHASasiotnwyYl2I0xAPnMWu6rRTBFpx8crZIvq/EaRSnZx3WuYoS7\nnwBdMBpNl/iGuHLXccoo/lpHFo8d1J+949YJqUjFBMH7yYifsU73wx4aHOYC\n9uTO3XvjRQDioy2Oxd6qkLEhkbK3qFm/IZYJVhqpXe97lEXp2IEVgP253Lnk\nHZpc\r\n=x20a\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"042ad06994baa2c42398713e57185e4bafc82a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.26c049afa.0","@material/tab":"6.0.0-canary.26c049afa.0","@material/base":"6.0.0-canary.26c049afa.0","@material/animation":"6.0.0-canary.26c049afa.0","@material/feature-targeting":"6.0.0-canary.26c049afa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.26c049afa.0_1583859815527_0.7070321837135354","host":"s3://npm-registry-packages"}},"6.0.0-canary.1db5c9fc8.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.1db5c9fc8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.1db5c9fc8.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":"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":"feddc98dddb474b56fe1412cbf5eaa916f492e4c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.1db5c9fc8.0.tgz","fileCount":52,"integrity":"sha512-95j0iCDpv91AkPAUBGL7PETH1L6NdPBe6DW4D9/YY1xeJcL/l46XdJezsZT9KJq45RTQw+yYiffsrBRDLjTFKQ==","signatures":[{"sig":"MEQCIDBmtSJ6DuiL7WPolhQUqEI4RQ5OL43RFLbzXg5H6U2pAiB1sejxjBEIVGwMq0Jw98S2XAN2jYsEFmsh4tVYXLm+4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeZ/qtCRA9TVsSAnZWagAAwd4P/05fqmY/5cFIOhmRr2aU\nXPkQDJ9HHAgShbsmcviBx9vQeUxN18TnMG/VDijpKgfpvjyuqEUOL7Oy3lpZ\n2Idj5H22O4tH3a1nF9ThP+7NcePDXxrXFsOm56DL5jieCSX01RSfu3hHl8GX\nhheGiRz2FVZ/LE+e3RVEnDIeKA2/BLqCPiDeZca9hju4dMVYQCGmCvTNPK0x\nbIXF3SWnXG//wEbz8vpdF/mhoqoBYSiWpZ4Ab6V5Nm1zDS9Jf7tFUTLvQSan\n+jcM/D6jqDHvSPoXdwU4TqEnJ8/gvkcROHc4pLKGrZMxQqihzR9TUKdSNHZD\nPcqJ38m+XEaO8R0MJAtDJFCDjpPt71wb/KVwQE/rcVKPwDJE7dbgZOUv4/Ia\nfKt3Ac0W/DXnconV2qNWUxVWeNOy2Ma16ONyE9tQZr+AkA/IGsrRADUnGLnB\nBccEOLyYKuYAwTZVZpxM8jDiUD1JXXTNgSXyaT+0oQfd6Kd2yFB+TzJAFCVX\nK1sqszCSe2xr4v5nk3NJyeCwNYaOMlW7lzjuBaTTp+SD7mgMiEIhlT4Onigl\nuLuU+Zv2C4UsT8cbnewyicel9adQDq4J5IGaOp3uBN8t+pX//HlpyopOKTMw\nLfyWxDAFjofvZLUrdj51eU+2np7N0fbgyaGCoHeOjvmFn9u1Aa3FSMNMLKEU\nZLvT\r\n=T5+X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cc90b13bf23ae60f937a981d548d55e3641c74ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1db5c9fc8.0","@material/tab":"6.0.0-canary.1db5c9fc8.0","@material/base":"6.0.0-canary.1db5c9fc8.0","@material/animation":"6.0.0-canary.1db5c9fc8.0","@material/feature-targeting":"6.0.0-canary.1db5c9fc8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.1db5c9fc8.0_1583872685424_0.3518372230693092","host":"s3://npm-registry-packages"}},"6.0.0-canary.4971637f4.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.4971637f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.4971637f4.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":"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":"2621dc3c216b738f331bd7c2a8d6c31e6149fbbf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.4971637f4.0.tgz","fileCount":52,"integrity":"sha512-nvP1S6cPwC/M4b2EzJlEYNOMP3xQw+5SeBSAgpoX/qHY9o1GwKdfaZ0DlxkLpD+5JyTrE0G5V9N5GIsrmOgGDA==","signatures":[{"sig":"MEQCID3V2MhD6GClaBzm2vHxSQxeQUX+BujrjTPJh9JvKs3wAiAZsALIdjulRSm48DDVue2mTmNz9T5m70C05DdRMymCGQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaBvRCRA9TVsSAnZWagAAkKEP/i+TQZxR6xbdgA08rarC\nvD1ACqJg3Q1ReCDgjDcmqI96NxiWSSeJM9RYmkdcR8aR8rLBHplYJP9+keYg\n9xW5GDzBuQL04s9F5JmPMSv7g1zY+DZo+euF+2uxtIt0JzTBqJQimFNnZLDP\nsgJ9udB+k2juxUpIFJjoxoOM6v5Oi3hz52pQObEbowN3T5gfvlnDpCfFGPIb\nQd+jhgV4O/V9bgW88vATDOLehJyLgnlfb2FF26cwLy8qANh96/RvmdB7Z7HR\nN8WuDsiCdtThfq2aFxpHhE5QI90yjknDMbm75NXAhXNEsJ/OoQ512roEpc7c\nJ767eayZPfs7UFGEwrfhLh9ryhUdMo/fpG6FnB28X6qJp8kQGjC4XuJvjf6j\nILjBeeamKXo+ng0VCLt41FsT1VafDC4N0TTpq7lgSD4rUrD7NcNwwJdBeV2g\naGgBK0FcplQCh++FaVBOAW0ZQsD44yUdzHZsA4OjmBWz5z3d6nULB5rsEnDC\nwNs1YLp2NF7fIYyH1PTtJ1POTEDaPdgkGs7c3MAujUVzZsTbpdYXJ38Yavi8\nISb0+D8sTh1BtQUKsJRnJVukck4athV2pi9cXEd4rgk+Evg8GfCXuCcdS6Lk\n7yThNVpIR2Cc3jLLjSBnj1A0gkS2iILC7PKShP+oNBx19/XVxIMjKqrmQaSP\nmyIC\r\n=4tjH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4a67187585998b5863a9eb407a3ac0a7e550061d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4971637f4.0","@material/tab":"6.0.0-canary.4971637f4.0","@material/base":"6.0.0-canary.4971637f4.0","@material/animation":"6.0.0-canary.4971637f4.0","@material/feature-targeting":"6.0.0-canary.4971637f4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.4971637f4.0_1583881169023_0.08913170266342019","host":"s3://npm-registry-packages"}},"6.0.0-canary.1ae8130ce.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.1ae8130ce.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.1ae8130ce.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":"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":"aae56281647f069ded395581614933bff5ee8c06","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.1ae8130ce.0.tgz","fileCount":52,"integrity":"sha512-l1I3lIoq99athS/GQw5GMqPqA7bKyNubAmszlyAb4FWYaGaoOHsxKFn/ReyH9pk65ip5pW5IwVABYEKDe2I4PA==","signatures":[{"sig":"MEYCIQCp3Ow1WLH6aD7gQFruGW98TMxbUSzAQCDOEQUiH1wN3wIhAJ7cT4AYjqy32ViGNLjSdoP1FJH1RV2JN+yJn5TFIlHX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaB1oCRA9TVsSAnZWagAAqYwP/2ejEPey5E402NQCfSe0\nTXzD0/x7gyX/Ssh9UC5JRypQ7VxHUAnfJEy04LKBU35VicymqcU/GhaSP8W7\ninKxBupe4ArIoe/PSgAV/nxZmeqF2UvkfosM3b7d6eB0OVbil/a4bYCUdpSi\nMxCPVOYEzsPsVMp/hUBGVWfHaOT3q2n2pvuPcYtiH3x31JbL+XqYigHHajws\nCRbjbNqoc76yYRXlTpsE0iXJfzCGwet84/IORxtN6+Q1vN9FnzL3Xl2734C5\ntRBbqMLJ9NR8fQ1BX/buRj3lS4slObemk/XEOawnmM0V7EtLKQjwtVc2TC+O\nvOF1WSVG1NlIqNuwzahZ4B1H2ODvLFLQ8lGwUDKe2/bht3qSAAbrGl7PAxyG\neqSYdwHED9RAIO/jmbSja7W2HUyWoYgzASTyJ/9hPJbztCTwFkZIsdKsUvUN\nA7CkMTQC5OzvJtGwNsgxUs+YbZmsiZICkrNR+IAWyP+GSYOrwJUD7ON6bMcU\n0WzhuAd6t4XACPRrdqEwVDZB6kPykDG/rmFSc72oRYQEtDS024YNI2ES+h+X\n0pW/lt6yNO6nnBolYfVqZdnB1RObbogwbLiDFcwplzal2kpCF+kK39yPZrXU\nNealxr8fN+W0lbYJKUjN0Atd6cz/cFFCjNo+h8NmlIBqTTd3QVv7ZhD/TmuA\nqMMw\r\n=84Us\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e5b4831aec2400bcd99b87f3537adb62cf047dc2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1ae8130ce.0","@material/tab":"6.0.0-canary.1ae8130ce.0","@material/base":"6.0.0-canary.1ae8130ce.0","@material/animation":"6.0.0-canary.1ae8130ce.0","@material/feature-targeting":"6.0.0-canary.1ae8130ce.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.1ae8130ce.0_1583881576469_0.3746877698280344","host":"s3://npm-registry-packages"}},"6.0.0-canary.8639c2690.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.8639c2690.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.8639c2690.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":"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":"e6fd10695c56ebdd9049a03fee0e97a380bd691a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.8639c2690.0.tgz","fileCount":52,"integrity":"sha512-KcasEF/NSqEHrJyqjSFSYxfyEiMq2msDWtOBW/FvD+mutap71fdSrV1tF7bzuv2K1wBeRCei4j3/T0sDifP1Nw==","signatures":[{"sig":"MEYCIQC69Jy8XWzShi1pwOCKZN32n4CaZnqEiWQyuo2VdmtHTwIhAMveB2s9N7PWd40SiC2pEubYA4e+1Iuw7mA31PFsFqkH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaIZjCRA9TVsSAnZWagAAv0UQAJ1IEMYq2oaBIp+uEO8o\nh1l2moMEyjS7zVXjwN0YjEhXhSpFjqX3OQrHYHLNIVw3QsnhDC8+8tL6Dca9\n/g5TLbAtiApFcirY9nZmcH9qmRQBfsBdVMMdACVqSZj1bAj/OR/0ZvhMq/VI\ngzmhxI4fjeM3puWg07jBY+sCHxShBpcCvaff9BtwDDrYoLdF4CnrK1ZENUG/\naLsf2QFT50D0fhT3OY1m83xwp2vQCqZnaQ/FQ1jwF1hmLYyxlRkq33ijkJKU\nNXaVGS+6ztzAYfIrG44GNJHG+Bz09KV2C0IzA+8DzmVdGbitmZuHjQttt854\nujqIVl4hSNiBA3JvGQUG1FC7jCo/e66G0AAfTIvHWjJAYeCyWiIjlrBD3ZP0\nigynoQFk8uZyBAvgYUtRsdq6o6H2dpYzQ8fCMexjEZQt2+0AbSZJLSAC/PDw\nugle9N9gIErz1Soydwe4AYHz0oiLY82PEo7ON9vVkg4UZRsbDw+9j3J4Flzq\nbeCZwpEaTuTP34bG7jGwNBMHw8bXXx2XnKUTJtJVrbg3ieL/23rd/OQERxu/\nkSBiABODjFzU5Wwp+nQmzYU8dG/IfPbzBcxnxV//dBgsKW6l421h2dUlvmys\nse9b1oV/829b692AOFi1MO/bcYCtv/Vw/DiXa2R2wy4Q9G5ykClIalkaJW4A\nWqxQ\r\n=nrfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3834dd0603f05e8710f74b00560d4aeb887e5b82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8639c2690.0","@material/tab":"6.0.0-canary.8639c2690.0","@material/base":"6.0.0-canary.8639c2690.0","@material/animation":"6.0.0-canary.8639c2690.0","@material/feature-targeting":"6.0.0-canary.8639c2690.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.8639c2690.0_1583908451186_0.46050032633972693","host":"s3://npm-registry-packages"}},"6.0.0-canary.d5808057f.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.d5808057f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.d5808057f.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":"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":"21afdac10713fbbc2211d29fb9908a0a861f1a6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.d5808057f.0.tgz","fileCount":52,"integrity":"sha512-2NLOviDbQk+SR0w+P10AHp7RPYMsCMy6UQyMnqrud92noocE0wpNoVy9t0/zN5z3DVvV2b/R8gaQzOHdPbrHgw==","signatures":[{"sig":"MEUCIQDHQWxeR3PiNS1ElZyHj9A8MFYiHU7wB7xKtVpe3nOUoQIgXlb8LTpC+cDVqrUzr4m2Z67sy3/DET5qxD7RA0kFvoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaRE5CRA9TVsSAnZWagAAUeUP/jJNEVpVPUeuAJC6630L\n8M+V3bJb6d1gWHA/xbyYTJQ49RtMxdf42MzgFJzgLgBROjrLf63UrzTHzZ1+\neZ+DfSJFVO9dxKkHhAnhq18sa12QdmeJZQdGPVrRyqKNaTyqPnuJH1xhNt2E\nMH+plEmkMxUaGhAv9cNTmOIvIsROvPoE7iLiBRtnxpq6zZmEwsDLv/YdUHxn\nlKafBpUyoe3+LegYK1xlWOM9f1Hq6gQk1ch/OU+guejAMkzMWpeZEX+t9VRX\neKkGTWqdskHzWADkxfqXNaL8+KhbRV6nsWGWhYElNWh8T4em8MhdyX9g41vZ\n0u1BaujN0a3ktQFTpGFs4egkoAzge3146eh3BDCL+fUHYi6BkVi+NXJoafyD\nH+xgLG/n8D7XQ4QR4L4j3VDY87rZWZuiFZ9kuKpZrua3irdXaSL7XQQqHB+D\nb0iXfxrW8Nz0HcmciSvpZt/65UyUlWrkd+bbUKt0AFxgg5w2xwunbeT7KvI+\nMX/dP0qMOnqMiHhwuO4RCvhfAEHDL7fqkf9jLrFQV/GeUi1jY7yx4PQHbu5O\nJ/k3qqpyN5PsmY6of0YjA43GStyBJlSejNDVTJVu+an6LQcCcap8bfGCfK2p\nJcmu75X3r/lZX4KtZA/hxJ9+9vMhO9pVdgRTcHg7D/BDXxoQa9iGNZmD/KfC\nWxlC\r\n=aQ01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"00a6ffbbceea71ed3f3126dbce724119ddc06379","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d5808057f.0","@material/tab":"6.0.0-canary.d5808057f.0","@material/base":"6.0.0-canary.d5808057f.0","@material/animation":"6.0.0-canary.d5808057f.0","@material/feature-targeting":"6.0.0-canary.d5808057f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.d5808057f.0_1583943992962_0.12921335549468194","host":"s3://npm-registry-packages"}},"6.0.0-canary.b3f58203d.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.b3f58203d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.b3f58203d.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":"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":"b756ebe02396fb325f4e08f6f521cab26c29342b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.b3f58203d.0.tgz","fileCount":52,"integrity":"sha512-Q0jkDN36Df11H/T7eR4XG/HvPW8hFXIdLhAFaCT+9YSA7DrjRaO7/UffI/eaX4zNTKyozfPi4AFEH72cGMUyiQ==","signatures":[{"sig":"MEQCIFDlVpkToH8YnD8MvzYEtM1w053Q4Mm+0qNXuagzMvzQAiAXg3JnZZbNcJp580SJ3+BoAJCU60svIZS2zlqg/y4pQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeaT5UCRA9TVsSAnZWagAAWNkP/RctpwMcRYqQcn90A0ft\n5onb2f8eVkVfA0bWLGD4N6yN2BskE4XW5ka8HdErf0UBBVDyM6qiUF42vcD5\nlAGz2AZo3SZGBOa4RM0m9CcVwckJFrIGgaxNsWoUDNKw9/BEnhNhULiWXUMu\n8Gpav4xzmwJgjMpoPnGHSaJwq+XakQWZtkBTt/h2S6yzR/3svxL/vcSsaVRw\nUyA+HeTOGE+gmzmAbvJ7DUC1YpKrHpTgDe+igmM96w1g8TcyjrYC4daBNY7M\nG7zh3idY/qge+UMqXxzb6mIcJlzhPg1kcRIgkMr9RBH1TL7smetEjQ6V+QQ3\nryGDbTBy67H70827PbgS4TrqOr8WUrS1CT86l6sBS+LSRNPdyUfaPblXJ9tQ\nWL8Snxkw4XGiBvoVYFnuC9ac/kMLU+WGW7BFTblILw8UZCSdGkq8D/PdMAq8\nt8yWJzqlippNjk1dWPZvH+5bU0zsXLIxLv8IoUtEW3exzJ0YxxmNcj6gP+XL\n44sLO4i3q4BSVDIoE4ijcPtbBXmFcd1Zko8GtrcrjuyNjFCDBQa6WdX5iK+0\nk2vM4O+gc7JVshJo5wVdJMP3D54ehEDFQtSsdnclyAEUQwf2drxhNBwPQEqs\n9XjIkD/fO3mYz23ZvZRK3UjupQOHSzUlpYjxtZ+zaXNPKWJEw9YxegQXoeIi\neG/9\r\n=YIHY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b9ad376b2ebba49982e9b605c903e752e4fb28cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b3f58203d.0","@material/tab":"6.0.0-canary.b3f58203d.0","@material/base":"6.0.0-canary.b3f58203d.0","@material/animation":"6.0.0-canary.b3f58203d.0","@material/feature-targeting":"6.0.0-canary.b3f58203d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.b3f58203d.0_1583955539835_0.29644160312371093","host":"s3://npm-registry-packages"}},"6.0.0-canary.bec065920.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.bec065920.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.bec065920.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":"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":"beea5531d851f22159aae9f8151cfa3afecca98c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.bec065920.0.tgz","fileCount":52,"integrity":"sha512-YHx6aNA51iLPXO7PcNZX6UkJ7PR4r1LMU+l2H5hsqwP/tdQm35YNkpDohaqkxebSoy6n+y9KVBn8zhukqbq64A==","signatures":[{"sig":"MEQCIAUk4mKQyIv7T5XoO0A1SlsN3An9frtc8v5usXvSNqq9AiBGFfKeiOvy4jhWSyKO4Z7UQK8yUMvtVofvLwC8Tnfw5Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeapm1CRA9TVsSAnZWagAA+FoP/jHkxA90kAYf3Av3hm1S\nvrQLjy1YjQmikyuXMTwct47tTx4cGW230xdCHeqXZ/ukGjFRIg3xGoc74zDu\n7qrXubL4GNm2VQBN6UXEoezSFAfllsou/A4yGgI4rz0CNj8hYX5k3Hb90Dk/\nBfo7Y90/fCJo+otz4Xrstm/NJxPgtF4YkJk+7ArJUHCGky+fcrarPjgVldKx\nX6uzhLkZD1EdbhykBw6Z0RlPWVvdK3WiupyS+1FGyTWDcIvQdbFvGoo5dBYH\ngTFtnNCOZ/qdyKBrqiPykFvryLljLZ8hLPcAsjkOlpxNW1zRk95Mm+RPMVsu\nIQEY/b/1wRaFz2TL0LwrCzNx6nonXvAIldpfXgH8+/gd79ugFmOgrQiEZYSq\nw749psv3zVVmXMOatyJBbvfrmCdFSLIGxXCtQekbGvHNYnd3oYv2l57DMDmO\nRoQXDb47XXL7vt3usNOEQRN8dORY18Psq9VW3SLY0aogIyuFjMkcsPUuZrIw\nhKbUC589iuJtoTOZyjPe5t40zJJndrcFC4JI4WGBShw+KbWmcv02kduHc9lL\nf/gupvS8vg7JXoNLLE2Fz1tw5JsjBuBOvQAR0uBOGfRAjbZzrUywUpw0A5yk\npS9FQEFdiMOag6Z3FY0ID03bYGX6tf0EnY39VZ25aMqmu6Q4u8+aOBrdYMu5\naQtp\r\n=AXdc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ff203cc1a864067909d369c1408fa7ce64954660","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bec065920.0","@material/tab":"6.0.0-canary.bec065920.0","@material/base":"6.0.0-canary.bec065920.0","@material/animation":"6.0.0-canary.bec065920.0","@material/feature-targeting":"6.0.0-canary.bec065920.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.bec065920.0_1584044469401_0.1743460440415454","host":"s3://npm-registry-packages"}},"6.0.0-canary.776291ef0.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.776291ef0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.776291ef0.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":"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":"009feaaaf9cf836b0d3e89cce60312da941ad7ab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.776291ef0.0.tgz","fileCount":52,"integrity":"sha512-A5ytdPA8ByIf1nReKlu1budWP0EwxNCWaDg09Ot42mwVKK7sDnh7e0r1Xb3wgCzU5FGhDZvN5K6vrHxjeweD3g==","signatures":[{"sig":"MEUCIQCnMSy79YIL647TnatLYeEwlZ+dWDBgTbU74MT1SGcGfQIgXKkr23AMx64zai+8E+PFbIS6ZldTlNIR/PG2f6NIbpw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecSNNCRA9TVsSAnZWagAA2e4QAKMZixgicL1UQ6P+zypf\ngw4+QuqXUarsQ0JSg3WYJTlYxst5e4gB5nyw8E/5uEvTbVgPfd2HdVkWgewf\nVy3wlz6X5xG6UWHoRNEO7P8kv8w8VgEndex8yS0BtxOPcVhQ1nnJUS6ag5mp\nI4tOt9/cmazLT9wBva7kr32jWyQ3cDkwYxnGSKfTga+dyPDJ/acTAvGbPxgo\n3LnDwoDYlC5jo6b4SX/b4bciGKeKOBUwwOpi7rafe7pZfC90a8mRZYcXu+MB\nlb0i5WzR0F1up3G4Td0uMB00ljdRXXpwD7A7ie8iqzOPU9h24idkSTZ6uvme\nPtNaKBQc2g7xpHMRVPSZiuACAS9T4bHatSiLiN9BwiGVgzQ/wA80ixFXWC3u\nkfOlv5lyziSzUja8PcA2gZ+woWaVLM+QKgkKENzLM1Zeap3CdNabriYToBBu\n4H2Q4Rp/50Zk2LO4aLgPZwfLmnwzma4rthA9eXU1gcsz7hHTt20KiwkSQON9\noXZ3Vo617Vb8sx1z2eR6ky+EBkXzxxmLhLuyAZ8oZLiTHVkr5YVWEtAy12wd\n08UYnNVaC01VjPAQGRpWqk6RXO3mUdoLixNoASg9+2QvzU8NMgeXqAJnMFJZ\n9pFbztZkBeVbCxMtuMwSpfQpJRl5HWlIt1whsJQgTLtemwAesf9YaPL8SCef\n0fdr\r\n=M3we\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"32f95102d2dd047c662697060685989ec64bb05a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.776291ef0.0","@material/tab":"6.0.0-canary.776291ef0.0","@material/base":"6.0.0-canary.776291ef0.0","@material/animation":"6.0.0-canary.776291ef0.0","@material/feature-targeting":"6.0.0-canary.776291ef0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.776291ef0.0_1584472909105_0.3961063702007386","host":"s3://npm-registry-packages"}},"6.0.0-canary.ece19f3dd.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.ece19f3dd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.ece19f3dd.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":"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":"5fb04fe15468ace6b756e500615bf0b6e7073dfb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.ece19f3dd.0.tgz","fileCount":52,"integrity":"sha512-6/KIbjp10Wob//09wi854vUAcbr7Sm8UtTFCuccbAixkpS2sr3uPOIgfHCvcfZskvWJE0BSJcAReGTq8qJDHGw==","signatures":[{"sig":"MEUCIQCfrCSAQK5sGBJbP055uKHaTiF0tkpiAZymDP0FnRlRHAIgKd+zMNzIhp/Gbb7UIOAjLDAJp4GSVvU/GSkG8o0eyGw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecUjaCRA9TVsSAnZWagAAstgQAJh9TL4a5+npJC+ZykCl\nf59f7N4glfcIG3HIJ+Tno2ahgBrnWeyVsAY5kmAs1Z9Gzzrevw3nVramSvfo\nf8v3z5cXQZfa9yW7/rMOONCigPUjkqG1qQZL4wyE9nwMlbb8jwHsgMpnDnJh\nMg1T342bdOtgY+MeJJkDMkqNvt3YNpjMeo3VIK7AmpqZ4zzloRt39a07nNLN\nbxR/6uCel8oB4dFiJX683R4kZWZTQVNKaZb5fajgcwR6VGhpHv8MXZIoCINH\nyzbQ3/OMW28VXz2dJTGTWF3KSpnQXNFttMHdV1T46dA+tPS+KV8gPCWLrxAH\n1q2Z3ZkO+Uw2Dm1/krdqIgnnnixllkZzlu2OHH+0Stym+gZkpsBaAm40Qvkz\n6xgzOkU1vjVgYVzwD36hj1LXQnKMq7rqT/UD2cOU5kodLMFhCgivumrvN20A\nENKqU1Qn02APsZs5jEsWUgRr5XVyZBWV3KSD/sE76ZdYmkdCaX3b8e8Q1eXs\n3xsvGgxyUt0wIfGoVLboEun8ayI53D4BJStWzw26YGJJqhjrdsZEAL8yUTcZ\nidjNMKvai8aFSa8y7X46bt3//FOKM+dHHX1+jo0RsnomZlDPojzciWSrRxKt\nksNqIO8OfbURlxwTcJIjvtvQIYZq7C4Ahqg/jAI7TYDgASs2j7Hds6K56UFF\nRlE/\r\n=GqGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"41a07e9906ac09ddaefa5cbf8327260df4eacd59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ece19f3dd.0","@material/tab":"6.0.0-canary.ece19f3dd.0","@material/base":"6.0.0-canary.ece19f3dd.0","@material/animation":"6.0.0-canary.ece19f3dd.0","@material/feature-targeting":"6.0.0-canary.ece19f3dd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.ece19f3dd.0_1584482521660_0.25872909208587025","host":"s3://npm-registry-packages"}},"6.0.0-canary.4dc45af6c.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.4dc45af6c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.4dc45af6c.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":"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":"09a075e354addbdbb12da4c5107a03b0f6e6d70f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.4dc45af6c.0.tgz","fileCount":52,"integrity":"sha512-1hAYm0hkxvPXuRRhw7URDGPXZGn+kjYhFxstZugSswhG15iZgoG9UotTuXo/afeo22W08z93CXKqKSrW/zbE3Q==","signatures":[{"sig":"MEUCIDUi2clKtm9Gtbx1AHMYRW+paHh3f7VOQEOe9Zpf51DjAiEAqBCfx/uEEQlzNybChifRL8qGPaMhfqsq31n2rxr/hNk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecX4BCRA9TVsSAnZWagAAX0IQAJnnAiGQFhnV9BsuFqjD\n/PbKPilVm4HJJ4HjvmTxzNtQRGPXjMCTCeD4ANANfu/k/GkUrUpTs8IB8wH4\nV5rJOXfnmWlj4Rxxj1kSfxac4lkCZDY2frD6IhvXu4no9LzZQLT8m4RtFuyz\ns/TyvlyXRwGCtEWfQKS7+n/NI96B6/+wDH3/tBaVA94C7vCqtJ830hq7u8qO\nzZOmHYoKaUek2/XHCJJalzGosyACxiCPnFvM9F3pqpfkFwlOTvmDBCqPejRV\njZRPr09Efs3+iHuG3vx9gwQ12+4iLNnJlukvkus/Vdagn6EBBFZ5mm6Tg3zh\niHjpOwJUSZaNDSvDbs6qQ1diqbXprTgnKAOicrs6RhuAPQPmzD4sURJPXXv6\npW10d0DkHE9SzyX/l2yoc8JkbyXmHSBFfv24WEtaSCHO9xPFfOgzx7A618fx\nhVGe1nZJJqB0vW7guYY0kItuRDlGcIHBVDOctlInZXPO5EzBD+CYpeSFiz/I\noQdCf8z6YWH45eIABzisoHYOKrvPAMhFJcMPQg27vd0m3d2iEdlMp/M7ZTBT\nFtdtjI23Ftw6inqy+O/lwWTw3FwffHLnNA9cjWAP/TtKuegwRAnHHYa7GqsQ\nWJTH21YB4/4oCRQsivdxNB9mMjFxyrMCPtT4NehpYNAvsgcLPnyLGbo5A9oA\nwXpc\r\n=Xg7e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a2b97fbd4b046de86f7e8aac6b54c5a6d31583b0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4dc45af6c.0","@material/tab":"6.0.0-canary.4dc45af6c.0","@material/base":"6.0.0-canary.4dc45af6c.0","@material/animation":"6.0.0-canary.4dc45af6c.0","@material/feature-targeting":"6.0.0-canary.4dc45af6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.4dc45af6c.0_1584496129122_0.8111712174420016","host":"s3://npm-registry-packages"}},"6.0.0-canary.6b48781bf.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6b48781bf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6b48781bf.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":"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":"9cfedb824632d3c2c8ddd6c5e2b3652f96824297","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6b48781bf.0.tgz","fileCount":52,"integrity":"sha512-7EyFFdqR9nA4hPQ18RQo7koehFhvldCCRK0WJcUB8qAwIF6sDlM5N3pDmfDt1LXhXSTYj+8H3RUhFsplLhQVzQ==","signatures":[{"sig":"MEYCIQDZ1qjAWeAkj1VtzmLo66/ubzn9LhRsOvvILkLzaadmNQIhAK0aJAe1zHWPw04XCCea80PzlP/sFQoQ04uDIcQ2JCKG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJecj/XCRA9TVsSAnZWagAALbsQAJRWDQWXdXoepSyl6eVu\nr+Ns+tj25PjOi+fw7LoBZL2X/fmuIo+55SfEDU2B4JGcsa8ICZEZp6/8OOck\nuyZI126T4S4gIDGjNlawr2OIGybFKmrNkT+FKbMVty0ELq74sf6bHJW5YYpz\nvM95ZAOLkiTdK0rcL5023akL5eCrm1EgaZH0RoqLNE6tv6y/sSvuI5s5EXGe\nqeolQGDfXnEGutrhwxL/ZTdcLiWhd3yZMrAbNUKaWEifoKduoGHD/Io84xEC\noFn9M8k37VRmmBJEOr5P0aYTMZpQmf+eKS7klHIMPhlzolKYFGmCMdyJouv1\ngsOcxMeVOnDe/fYJbBG56Y/B7aKPRYs1/FPiSGja21JhHQmusj3ESAV5r27+\nUmN8F2J5ho0wZxPXl/xfOcau3L26fEbLQEfFeOuu2jlDdtHG22bfC9zNAnGv\nqGtR31nWAWGtkx27hsIoarRvt/cw8gGUVduEdiQJkwQBCDh+nYk94BIwZxuI\nC7EuSas5mRre2Z4YoexCKRgzw4ge7XXA8Iq5UpzJuxitXnw1JrSuz4HAR26c\ncb3INkZC9VKx0NxZzRV8S8/W4PBiNRjLzfUBMsl8seQ5gKMAnueP20kYiAUL\ncirOJU8cbVul6fV5JlYOvnpcaBC5havaF4VQWfGlPwAuTxBiP/lQIlwG9U5J\nCEnN\r\n=5UkD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1da9fc619190678090689bcdcd73eb5885c8a35b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6b48781bf.0","@material/tab":"6.0.0-canary.6b48781bf.0","@material/base":"6.0.0-canary.6b48781bf.0","@material/animation":"6.0.0-canary.6b48781bf.0","@material/feature-targeting":"6.0.0-canary.6b48781bf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6b48781bf.0_1584545751015_0.15608658494109307","host":"s3://npm-registry-packages"}},"6.0.0-canary.a88c8e4dc.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.a88c8e4dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.a88c8e4dc.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":"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":"32a4316edd6d08b410a9ba8d04ec4a53d28b0fe5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.a88c8e4dc.0.tgz","fileCount":52,"integrity":"sha512-UvGNeGYk0j13QFJOLEZtT5eMXBS1Pp8Mp4b1hR91uyGEH7qhEOjUrUB08Dkl4BrzDyPrCZ7Cfd9U4GvMEdFung==","signatures":[{"sig":"MEQCIE1Yl1GLueUFz5IgmWxpYM9c5KuRPTuXyxJwvAfW/SisAiArjyFznTk1Aruuzp1cf++q1X9ILKTFGFXloCmk+bzvKg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJec62qCRA9TVsSAnZWagAAtAEP/jfoPvYJA9JRS/njuqXM\nu4EGa4dV17i7hiCEnwAdR02AYVHtBfuS7nsEFlQYbr/gUhi+yzpYmYcn6UlS\nuo1tQXMbn2sZqHzSz3nRsD22I6Q1X+kMIgtmcuqDl9eH1BuRz3eH4IHsl+Aw\n17eJYKTnQZyV5Mis+cZgJ2A/Vb0e3FSYIX+tD0E/5bkAqfFfGDJmg0ZgXJPs\nhtONwU1ajTE6dVcDesRL0a0pOT5uuhESyltpmHZhyzox0P774ksICis3cFvJ\nhnhwud1lo2aQuWpsVqaacLpXqHSvWocr3AFGFddKWMmFRF1D0dr0ta3eaaIQ\nQ5AWg3U2uYVKrJlZYx2BbHBK2YJ9a2DH5g+r4wzjOzi1K4cYzxM5nZenp6oI\nqPKpvRSrUdTBOjNQInvlQ5HjeKaT/HUE/dTOAK3IsjQJInWA1w9xJNeRObwd\npmqrwcz/KLT4j5npJEjgE3DcwfH78Y4OnCCa38InoWtNlC8qkTvGXO5X4G2v\nInGpRz1hJIjosXrYk6T31Ntxb8yh21ZZyRcdA3G6F+A9AfHFc9QFuUTimeh/\nF1jX1aH3gt6z6Jxz85JrOTaueBCH1kE10n5EdmQpEVDW1m5ahJJXxIUS5IHw\nG0dOlL5Ew48K5VqSAm9zHlupMHbZ0S5swLLu/X/acSUodPqBxjISt7iCvzN8\n52G7\r\n=aIIq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3d8bc73a5f46456d2ada622785f02cbd3b81c6a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.14.1/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a88c8e4dc.0","@material/tab":"6.0.0-canary.a88c8e4dc.0","@material/base":"6.0.0-canary.a88c8e4dc.0","@material/animation":"6.0.0-canary.a88c8e4dc.0","@material/feature-targeting":"6.0.0-canary.a88c8e4dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.a88c8e4dc.0_1584639402317_0.36684441416367575","host":"s3://npm-registry-packages"}},"6.0.0-canary.cafe18860.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.cafe18860.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.cafe18860.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":"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":"f442def3aa249f0e379c97edf34eafa3d2d88b1d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.cafe18860.0.tgz","fileCount":52,"integrity":"sha512-DcuDiBEP7AfZDtQ8uRE2yicmSIJ5kz3EF+S6J3h3gsLxod7voF2+kKmvOQR4/2UWeqijRh1VPE6DDgzIjoSztQ==","signatures":[{"sig":"MEYCIQDN+UsmeQcdS1TuVkAMI3lSMk/W5UC7dzS4tPI/pYuLOgIhANCb33TJMHyshHRwgHL+Ij+ZA+qDxa3C98CNdS+G6qlq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedNkqCRA9TVsSAnZWagAAtgMP/2DQ387R8ClKnWLOtUVU\nBgNzH9HuPjglcqLRWUyIt+xwLLtuSIxyJ+nMa1ieqgNaYaF1hvFSUFmYOLKq\nrQ1ZagrQ+AhrhPyhypHtCI0w64SZqshGE3LihoRW1p5rNRr9YLR7x4GgKIja\nBJbQ5pXRcNA/3SSwdKmn+uX6NewhkbBxFj72uSpomgn0zb8djL2fghIC30Ah\nEKQwPkjPfhhps0yq4ZH03enzxuSZordNm44WaX470nG0IZpGRmMTOwhRNJfa\nPBd7nX6LFqGkOBxtqNa0HEhjOsKLXlZlrmKxTjbGVhbwKbskdpIdG0HCtN2x\nMw2sWdxQLrnUA8fk2ulaxaDLV+cafLWUsFIzw8+Ccg7Xkw72F76jMukXCUEh\nIfhQ+W3zy3UPJsSOx1mZgnIF9hENWZ7wOYaf2ofZBDkIKVpnnQNIRbuA0yp8\nAMQqpQzpwcgGWi/4zBiNQh4J/qjVQe2VhvnEfgHI2piNaPdUNb4AJGJGyCtX\nIFtdWEOJSxohp7p3l7d31Oy7YRRNXGrc2IfVeVXFe4/18x2SlSb60b2qhWZk\nBnyWdbIOS4ge7BEeg05Mlc7j6svOTLMnGbUQnMbzgyjqPQozT5jeN8J1IChD\ndiSd/uAvxKdZr1riS3vLqRbzZWXSWhDNeyKiO9xGAVLB/xBJ1loOnYASZBpO\nyLbI\r\n=dlke\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"51706b933143947baefab6db8cd069a22ed080ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cafe18860.0","@material/tab":"6.0.0-canary.cafe18860.0","@material/base":"6.0.0-canary.cafe18860.0","@material/animation":"6.0.0-canary.cafe18860.0","@material/feature-targeting":"6.0.0-canary.cafe18860.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.cafe18860.0_1584716073623_0.0014734478388944705","host":"s3://npm-registry-packages"}},"6.0.0-canary.35a32aaea.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.35a32aaea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.35a32aaea.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":"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":"563e0a71549e549bf82e4ffff954e2fedc1e03aa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.35a32aaea.0.tgz","fileCount":52,"integrity":"sha512-eQrLo63rniwzdRLRDoGnfDUuzJAt9VF7tV5DsWMDRuDrsqutYFv8MQeiNGk4KihRpbywDJZD+oEWLQ20WUOx1g==","signatures":[{"sig":"MEUCIQDLy6hGEtxuMnFECS6WtkTiySFsYmriyKZznfEDyTPgDQIgLNBZHg9Md566JZvsJ+XN070MpWVyOyoVHdW0crQ4sqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedSDFCRA9TVsSAnZWagAA8cIQAKQ86lMTRzyNf1tS6Qph\nljT1u2VzKBXzAd9DYBxBE9lzGK7yFalQrtep1xXfSl2iqHpVT5OmOsYHnGlo\ndyehSjnTukTz16o5tGP9toeBJYR9UV5QhxKbmaIIBBX5RhQZRAmq2t3ulldD\nd8k0+5TZRgDQqPKj32UNLa9InrWnhiqmP3p9c6dRHCoWDHTvFTPGkC931mJb\nEdWgSiRdspCxmzWzdgvOHfIdE4Odwzi3C8Xcy+SdH1SFKomtKOquoddy4oDi\nOBaBG/hiVvA+ZGtcwNi9Bl9MLiRADRkDzPgvpfYDypDwIXCj3b5OKfnwdK0C\nbeYx/qxkHIswb6PvFUqXnsWspUVnOG3DCrH7EopTkik7zpcEOM1TMnVo4YmS\nJxI7k3bsbCvZukwVEpdkeEJcwnI/bfb7BrW+DpUItAOpPcgxI2zghe4fFW++\nvcpUOQZhVyvsoGIbsJSS2D60iluj6TVNu6Fdxqk05iOWpU3Vi2XHRik3fFyH\nYqzcjavfr4SpZ0e6NYAFwHJy61MJJJUJ36ciGDVJqxFr/y7cP+IY+xNn/Ueb\nrgYkRMlYdZKHIo8K6fuBnkM++mAIgJ0zRMRh9sj+20tf+Q148EInu0wrTLp9\nW3FKoMxbYNERCumuA2xZuczyb8PtWhTWUYhsVVNQylnvIX1OFIAqsHfM1vss\n41Of\r\n=hAdi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"09df3d66223ea8f4d4a6ee61b9e34bfe08387774","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.35a32aaea.0","@material/tab":"6.0.0-canary.35a32aaea.0","@material/base":"6.0.0-canary.35a32aaea.0","@material/animation":"6.0.0-canary.35a32aaea.0","@material/feature-targeting":"6.0.0-canary.35a32aaea.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.35a32aaea.0_1584734404873_0.5791322725692132","host":"s3://npm-registry-packages"}},"6.0.0-canary.e75deb854.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.e75deb854.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.e75deb854.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":"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":"1e92f722ea8a4485966e2a6ed222e14c3ef8b68c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.e75deb854.0.tgz","fileCount":52,"integrity":"sha512-BEn+Lzw35oFuAFkkvRjxgfgDegqPedk/kkxAjWUGGwHM1TWph5Qz4MRGD7QVlhsppeC2DG3BaIG2L8My4IxcyQ==","signatures":[{"sig":"MEQCIGi+IyRH5KK0mXasZotF8njpyLtYV65aqZyb2b6faDEZAiBXIM/7e4+wYk+g1zgfsrb6VHkMQ9p8YKK//anuEEfwBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJedUCmCRA9TVsSAnZWagAAhVQQAKAKLyEXmnLoinMzF4nF\nnUIjYUuWMHGNUN7RBbuFJD3SKU29beHQ0/8A4XdTR2SQui0VbGiVkwfmjdDb\nEJcyxd47EJgwcuXp0oRcs0byJWbAYkQ5/XWDolTVfd9+C/pDvCGK6iXmaclO\nNjsus9JGyyKFxNv85ChhH94BU0r7u3PeHGXT4Slrbyo7/Ok76yq8czQH933/\n3BjI6lPPVzw/qqH14OIOKI7G1dtYKuly5UxTRZ/i9oPBwVchwVAjrV808Fw1\nxE9Rp3VPsfIzm8sHU5udNcLulmzDxX0ldtbuRN7licyoKeFDObZAz+NeVTWe\ntlHix37IWCPPS8WB1rYb3VRJ7NdolVb2+OtwSsye3vRbQb+nGu0PGqDv+BIL\nBXs64MwnQ+ebft8Gb2GqgneIf7LAWSWmz57pErza2mvjH1Ij9q9kVU0fECva\nDlMSnpo+y5FHwekW/5dZK/SVX4CG9GJd+jgElLhn7gdu4Sc7IAhhFYNF00ku\nwORmry1hS6Sk/GJyqzZyWxOY5RGkaP1f8bsoHHWMlp0rBeDm26pMFu5swpN8\npxAN7LlWA1POKwI8dR4GcrZGJHlHq/UrzKItgKWfPr2yFsD84MjmnccxMSQ8\n2GPzq4IW4LhorqDxyqa83WV5AxMfTeASYEzbymvH8sdZ6sXCJOUuHQ+x8hc5\nafYg\r\n=empm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a461f6b9120827a65ed980dcaae3ff77d0581d82","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e75deb854.0","@material/tab":"6.0.0-canary.e75deb854.0","@material/base":"6.0.0-canary.e75deb854.0","@material/animation":"6.0.0-canary.e75deb854.0","@material/feature-targeting":"6.0.0-canary.e75deb854.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.e75deb854.0_1584742565586_0.8521394289341679","host":"s3://npm-registry-packages"}},"6.0.0-canary.2cc6966f6.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.2cc6966f6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.2cc6966f6.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":"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":"4bd5bd15e2569a8200cb26de76a3649cd0a0bf9e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.2cc6966f6.0.tgz","fileCount":52,"integrity":"sha512-UB8fKvV90RpZzwN11kHgGzv/fChyufMXV107JW/jYl+8yhAcVV4detNWvtsUR1hhGNbuNZGunj50VAo9KV8NrA==","signatures":[{"sig":"MEQCIEC0oSezglfpUbEunYu+/jycsGYUCpBiQWKTNtMrnGOjAiACBcOYBjux5ezWuNEfZE/m3wAY22Ylsmq/wjqEJmOA+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321440,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelUUCRA9TVsSAnZWagAAxh4P/1xHsdmyDIQ3UDZlT8Zt\nQuBgmf8zvFcbehu0L1vXGexvdt9U6oJKKaLzFSQtG92WLnTnILrvKOYn9stH\nkgq45sW0x7TZnDZTNIdTeKD4817wCRsTHc9aCgCcxTFDZ5+LCpckrQgxzdbG\nWgdKwz56M7488reXVPvrMjQddDk4ksYKzHXl/JLMJWs+WYVLL0rVXZFE565G\nKYMnPnMAxvLY129ZXxNrdVk8nGoTduuu5H3ZxOr0WiTvyMpaSZyw7AF9Ex2P\nI3WJZd8CNuFN2nkLPskoKWn5G1dg36TipxF1nDmnQpkwHN9I5x62H2JphoGo\nm2yP8i6xMoXK+0SGTFhEnSUg4xSZpF9Q9OR86pKlQveb+QRN4Xzbtm8S5zdi\nSKM6vei/UHvrXL7yYjHUCKlHOczuWtPH4XY6olxX2ybPtvs2QVMQsuAWhr5T\nVfVWAR7RArY6DjHqi1JL2LOnhE2nUB/UoDdJm8Ax32xjO41qbzsRkHzGOpMN\npWjC191vfp8DL0TPMezotbfn6XDAsbVsH7qaN7R7dBHkfMfH359Lb5HUN1EG\nzeKOo5wcBwYDbffgPJWxEzJCQ4Sxe73n0rY/S0/Ic0SgKUOdKdxt/Malm/8z\nJ3EHUqEw808mGtz3sQ4eRKSmqt6ndTMt/nwC918lUDDWtTHnR04D/8s1xGcP\nwD9i\r\n=4jto\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4af7a6e31c561afa46ba7b74cb35de52099583ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.2cc6966f6.0","@material/tab":"6.0.0-canary.2cc6966f6.0","@material/base":"6.0.0-canary.2cc6966f6.0","@material/animation":"6.0.0-canary.2cc6966f6.0","@material/feature-targeting":"6.0.0-canary.2cc6966f6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.2cc6966f6.0_1585075475735_0.1642352291538709","host":"s3://npm-registry-packages"}},"6.0.0-canary.8707953b6.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.8707953b6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.8707953b6.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":"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":"1c2b7fb01c24d3b5188355abc7a6634bf9f03f4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.8707953b6.0.tgz","fileCount":52,"integrity":"sha512-BBMnvdMuNXUtYHh0L/K9M7Pzvhs7yQPmYYYzIr3QfLmysBVIb6FoWZTW6LVOBa9rilVVtaBUO6Gu7hAqH7nR8Q==","signatures":[{"sig":"MEUCIHupww3xFeKLN6rphaC3Bt04TiKIIIi7xLNH49g7W0QBAiEAm0PVKRB3bg8mgINAvqOwDWatRX3LQcgsiIbtWzEJe14=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeelXpCRA9TVsSAnZWagAAm7EP/Rk4EjNgRN7tyVTv/Fru\nyc7DtTpzfyeWUTbb2YRbVP7BrGKHdNXkLYxCNqOPDLfwqx17ml5s5ojcBb1N\nwTr4tZk4LZVCluapdoOLLwiCCYhXfVUkT/wPzf2Jq81pSfD3YS7eKzWYrhSR\nFexYEFCeuNwzIgje5CnH+g6Dj150BoZHAEyv+hpG7RbcYgHln4856sapn4y0\nFt+Z2dC09zQQDXDralI20Euws5tjED/wy4ktN9P8g+7ZIWSDhZ8p1667h59o\nZS5lzx4Hxjr4Wd+EfJb/1mc3M7n7m77bookh1rSQ48OUBtvPGMxECl2xPRVj\nnb0cXz9xxynCD+UBmpw9An/7ZqazSlpbvMEMX7ZGgkgGeakqM86j5e4SDHVV\npOLFoif17fPHnBbEJCZScNB8/pTyhnz5Uk/DBdbFmANuC4urr74uhxF+qGy/\n7XhQBAGsBvHQfQTze42w3s+9EdW8Bpqb//TQNHuSyr4ihFzf9G7xY9OArx1n\negroPseUiFwZ6ayQKrqa8WYS+H16dpmzRD6/LbXNTInjVrwy5Re7w9YWvlKJ\nuy0eiWuftxyGCM2b3uSEBcrjV6o3O2TPAHfkFXgzS83c8IDheTzw1mrjrSUc\nXuen59EdIgcYMUguC9ApFVKY2pS6rtbebHVUrMTK24Cyw/VMvxA3xcuWi5JZ\nRuT0\r\n=rt/V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"595709807214943e737834107d12d3318e69112f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8707953b6.0","@material/tab":"6.0.0-canary.8707953b6.0","@material/base":"6.0.0-canary.8707953b6.0","@material/animation":"6.0.0-canary.8707953b6.0","@material/feature-targeting":"6.0.0-canary.8707953b6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.8707953b6.0_1585075688598_0.3227519206500331","host":"s3://npm-registry-packages"}},"6.0.0-canary.10af6cf39.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.10af6cf39.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.10af6cf39.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":"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":"3fe56dbfcb69dd9e80fec1d97c51db9acba47b11","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.10af6cf39.0.tgz","fileCount":52,"integrity":"sha512-8DlsfKYLNVvVEjK7X6BWKl891RKF8fFDWnyi3kIVrhboz4RtwSnV7RuqNhVohoLtgE99bJb7QC/4+mDnlh06Eg==","signatures":[{"sig":"MEUCIECDWyKocynXL8lJkqCG7rDyyrTDlrui927DETlLgVs7AiEAocsIWe7EwV9RGRewe88nZpVv96ubqqj7saHyxnWAu4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJee6CjCRA9TVsSAnZWagAAAAkP+wT5J2503TkMMoF26x6C\n7aKaOLLnRHEUUevrhgCt4pjaSLJ5U0RRkh/jdHaF5UpEOf8kGw8wCZHgqG+n\nGVTPcOpUY++g4GV/CvJdDUm8u2dnVgc0Fc9spYhPT5FYJxZZEGakTzweI5VA\neOmkLHAQRUHkd8iQ7vs0+AwyZgq0RQhx1W4AeBQR0W+V0O1PxVMEtiAWj7AD\nhq+TxXc5RQoAXJ3v16d7csWYvfe9u1w9KVVjqrxNPD2s0Z2LnzuRv82FjVet\n6moyco1BzFcwKbA4A2WraDE7/Rnpm7Fw19eZnDXdez8HBoqTQGYGlRNKdqUP\n6RywJEfKFnPvAHHCCF7du5z0qQJ27bKL5SvGRPU069OtVebv/UcrKEJ3wi2e\nL0boMo1ILzy3QYjafq/0+/cNSmFFEquHZw2X0PU/wjXG1G4ushb9/aQm9i+A\n90L5a88C7V2qYIv4wUoYKFkmwc+5ZOTC1EUC9LVCzT/GgCckzVhaI5EcSeW3\nz+hfYscJVwWpjsxGQ1VlJiaNyYBiXpAsovtzvlGZgvEMGpiFJzhwr4LTgIJH\nF4OVYl94tHYSpgXT3pjm7i2wMfwCw9LNA1POsJiE2zmVC6TWa8fbpkmoLMH6\nw9D6q/N0YgA+EOQdOYE/7+UNGkPn7IAvS/FMq6XxMTBWxCr7mfxsSMaHzSaQ\nQG5d\r\n=DCx4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d618b0c9ce2ac312ce4b887450bb947ed367e100","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.10af6cf39.0","@material/tab":"6.0.0-canary.10af6cf39.0","@material/base":"6.0.0-canary.10af6cf39.0","@material/animation":"6.0.0-canary.10af6cf39.0","@material/feature-targeting":"6.0.0-canary.10af6cf39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.10af6cf39.0_1585160355312_0.08028260968355982","host":"s3://npm-registry-packages"}},"6.0.0-canary.7d8f9c8d7.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.7d8f9c8d7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.7d8f9c8d7.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":"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":"07a13e7c942673fda6f09b550c6471414fb84356","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.7d8f9c8d7.0.tgz","fileCount":52,"integrity":"sha512-P+2+H4ym7l0rLgGCSl7OXIADuwllEv1PVkqntLRrIq/QajtTEO+ivbTMlbpyuusku1HntQcwDWMToLEHjhVX3w==","signatures":[{"sig":"MEUCIQDZQutjYFxCsVtUDOFJDSxATyveT6cLORyZH/kAGDB7QgIgQmeUQL5S+bfOy28uH66LlYiDQ38NQ6RUStCvv+1rYa4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefkCCCRA9TVsSAnZWagAA0uoP/0qj/m/8lX96xrAinudQ\ntTJCBs1/vXybSdED6CQT/1PNDWF6jH80Afh92xyFbiZ5VF2iJEapzSr078/E\nT99wxGFCgVP5SpCU9qCo6SEl+Cp5exzDAbA6wfQFkZOK3thNigCo0yLqyu07\n9i5C9vGymIi50caczL5v5So1ZtIceYT1U+NqKLZXq3XfSkm7SD1s0visEDlj\n4t1+v9f+923vdy0Dtp1ASL6zqNUAwMTd2C0FstNIQZNZnQNYBz+UnMDeX+Pb\nKiltohcw3Ch+55Nf7yz/tykSXz58QxgYHLxy1G/bjvwk9XCTX/c3nDFjGgeD\n5ywNtnTqNbQzcSE6OT9ePi5VxPmwci8KvbGXm+3rJXU1Ro1UPBoVfsR9aOeA\nkqKrxkMumvpXPCb0N5xwzl+7Brvy+B9gv5p7LhY/Y2wwMc/vsYh8DYsu6puT\n/YYtJdq5s7kRyEopKBAseIIc650xDj++p/geX2vFPrGWc3iQ2XYbr3qSem79\ncVmYfFPV5GPDYKhe9ZL+To3nYgKyWsKLtOtikf43zZGU8qux1WgLSuWPutFr\nidVboF+jMzlA7C1D++j7okoizpkc+d12zmFGbnXhsrgZl6raTwDtT6PLE844\nbVXoWCVhZQPkxpxO06pgr0833Ee/lolYy9BvDou+kMDmnQadlqGRIsnisFvZ\nloF5\r\n=qXcS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"764519b823414bee993cab6845b42f5b60f03c1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7d8f9c8d7.0","@material/tab":"6.0.0-canary.7d8f9c8d7.0","@material/base":"6.0.0-canary.7d8f9c8d7.0","@material/animation":"6.0.0-canary.7d8f9c8d7.0","@material/feature-targeting":"6.0.0-canary.7d8f9c8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.7d8f9c8d7.0_1585332353669_0.3260781578479217","host":"s3://npm-registry-packages"}},"6.0.0-canary.d6315efe2.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.d6315efe2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.d6315efe2.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":"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":"ebfba73fca087c612a26d791b058f2b85bb9967f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.d6315efe2.0.tgz","fileCount":52,"integrity":"sha512-YwpGxD98zxzkZ0h7krN4uv1jfaEC1lcjg5ZIgNYdx3uFeorpqJLhBXzBLad4GMK2xhSadXlGejXwzSZ1RgRpxg==","signatures":[{"sig":"MEQCIFbw6xVWp3IqkUWn386Y1QqIsJW7RaIvGulm1uN46Pa9AiAEt2msWJ/oXlpj5KRVernr/TIUP862E/uHx+CZqLA1FA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeflqeCRA9TVsSAnZWagAALMsP/1+Mk0iroJkV2UA4svL5\nB2A8rD1DJt5C4jJtR0buvLrVvC2hB2bG0mId9IvkpfyUCSqvxrve270I5DoS\nZjerZJEl3ERqureNwVG0MZGf+9hcNOVfzItUpGEzPP3PHUNZ6qMMXlQqiE3R\ndmScienHfbU+aMIX782+NQBJqwCuWGUdWjkxkdrbMs6LvTk/NqiDKJ39XsOn\n5z/2zBVBoHOSYRVbdr9J3ssGHDmvsKRZhqFmCft2lppgdMaDcmdsXNiQ6DMb\n7FmvI/GUgZuQvt9+U//7MuSZl4PwU0+GupMJ//IVrRQCN98oys3vtlaUvIgk\nIVGzCQi3razNrAzRVDVGESZxDnz3gyQ2gIVu+tKthgR2sf0RvwsFCxb0GAKb\nbdBCYTvqMQeDzdCeqhSoRN2m5GpxwnkaursaKOmZUXyDftdOVoNhqFfG/se6\n6cd4c0VnuTPVCe1LUI1RPLF+DvedaluM7Z5X1AsfLN3CTgmoZvlI9s2ZP5Qi\npuHv8Ki/mkDC+8CqCT64zaAQ6vwb7FLCrOu+5AzvOfw0PjRZmcSWiYpJA+bV\ni2mAfLtJ4rOKVWQja3sULnggTHx+fkwVGwvVYAKm6aVZqPwpK2D37pmajMNI\njokzDtNl9EWGoXsdqZBpKWLzetMZyZJlcaX/NoGdvvG3q0uPhYnetJPRpbbN\n6X7T\r\n=7BSF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"87fcfa262498dee051bef9a0a8e8b8f39869e6a0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d6315efe2.0","@material/tab":"6.0.0-canary.d6315efe2.0","@material/base":"6.0.0-canary.d6315efe2.0","@material/animation":"6.0.0-canary.d6315efe2.0","@material/feature-targeting":"6.0.0-canary.d6315efe2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.d6315efe2.0_1585339038321_0.24994616564213712","host":"s3://npm-registry-packages"}},"6.0.0-canary.a3016368d.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.a3016368d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.a3016368d.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":"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":"446fe669bf460575df7baf3792985b806cec65be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.a3016368d.0.tgz","fileCount":52,"integrity":"sha512-Zfonw393R9g52hX3bMO7NMzkn0HS3Zah//73y+5WkXyzqx6OO/3QaV+UbBNCWL0CmhAug1Nx0pjnbTTIA3nlrQ==","signatures":[{"sig":"MEQCICRlQZM5MFTAak/JHCViABFm7KDscbF/NBxPnaRZ1c16AiB6JUBxI/kYlScbZBAv36IynoPPNnqQmqL32zSNVeSjeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJefm4YCRA9TVsSAnZWagAAQPsP/1GgaeE4d76PbdNKnKEW\nSM/If73X8Dub4oyWdjEMbt4vg3HEyUcO9spAxiT5bgc8gS2Sb1HiP57FfL8G\nB6G+PsKnYxEteAdKXLJ1X3xSHaaSB0MG6tHby/oZXW8Nc2u+4plvCmJmsmnw\nD+c68rGJyEY8UgoA3gNlQtUPptacgcAr2WpohsUxERYuRySmfuxC/K/RaWK2\nSQ+KKHP3+x258Sy0ygSmMKQEdvkpbGhFVTKEZoIcMrkFEd7VkDaeaXDLiTib\n6pVU7PjY5u4zyjviQQWQRhCkJbEWRVL2LFacvXNyJjR++mBrpCGzUv1vtkmj\n6Gc3ZkfumRDJOYRU4G9ukDe9TUOkwZTpymrmFIeSvmklP1prs46dwkw64/7b\nwypu3Xrxu6jgea0V1W+xTpQ2OD+N0c6FzGZb5WGx22TzY1iHbtFl5/1BmK2U\nZANRHtAIbQU9gL4fCbLuk+ADy2lTVqypqJnDIx/dXPR/rzm35GAmG1XkDZ5s\nY8tOvoLDPpBoKD9jWhToIMQtEXg2/ST47WWWlmxqYuahOpBg4Lx8H/wloI45\nbPpbm/VufzjGmqYkPU5brYHAkYKHJ6jLkXYeVEQEJzQRWipdspge95Kmk/Br\nA+rKrFCaPscR0WNmjLL+696/FviJq6HMM8NjUYWLS/oOBmFlxUFAHNKRujA+\nnDrb\r\n=Cr9U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e41b28d8c25aa5e36e88910a1404e7a0730c5d2d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.a3016368d.0","@material/tab":"6.0.0-canary.a3016368d.0","@material/base":"6.0.0-canary.a3016368d.0","@material/animation":"6.0.0-canary.a3016368d.0","@material/feature-targeting":"6.0.0-canary.a3016368d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.a3016368d.0_1585344023733_0.17441436722652837","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b45b6620.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.4b45b6620.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.4b45b6620.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":"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":"dde42866e76c5272b28a80e6920903eda17d6068","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.4b45b6620.0.tgz","fileCount":52,"integrity":"sha512-3Bq2Yvz5WbykEmoAFaeKfOtXtf5W+p22WcVdMwH38oPyzyKfiQXHwTmS8Ok/vWTVH7VEWy/+NPGbW247v52aFQ==","signatures":[{"sig":"MEYCIQDs3Ahe4LAnpIURk5/elH/+CeXztlOTt/ljgZdAZMLOnwIhAMIfAQcYgoX6Md/ytP4E+5Aj8A9gZwDXUazQxkfkJ9Sx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeg2hYCRA9TVsSAnZWagAAZkMP/0HMkRaXAeLYh11+iUbi\n/SOfOUcAffXmXjeyqTYpKxpReRvZ9YPjFmzIzah5NdiMW7wQvh1NyqotU5fL\nwnQ7CgGJzmrYNBsyGGOGoJTgFlytsoFyhhhJ5FH6HKj05kKaw1s5tDA2nkCm\npci/792V1tAzgB/iLQQjXye66w63MoeX0nU2PpeGQckZ+m8rJV4a0EAdKOZA\nNtmHn38pXF6kSNMC8g0YeqU4KWxyBS+nNjrCJqt4C/zCq9VbY3clIpekaFUN\nZIgA1UWPXNTUIB4kKO2OTeNqgB2+4fGRRc72tPnIw4frOi1DQV5Icn354Nm4\nPWOpBBnT7/AWgwaCogTcEqx29iZdGUZqbcSnh4dlUl3UuphGErZQPbS6MriO\nA4XRCwHOI59fJPyCJ1mOH3Bpeb0N8AaIoP3OobNRfJrd8U8OAVbeXBnialYq\nS+1PFVSMAgObkZS6FREtzLfUTpv+Aq02WvdF3vLrBEuuXV+X09ZU1QW4GyLa\ncCGoSSlUDseTLIXuuSKDsCrWGXECv/ldiufuXb3v0dcyitiPuwwB+JdGPC44\nE2Tk21Nebh/95mojbSt2wTlCvTvifem7csOWiAXD/mBjfqKkZKUGsO6xXxfG\nnDJVjLtvGBfLXotFW9kpHAWV9lmXlxOKx9wTrjEtfZDt8g2HdtvhQvcAk9MP\nyhBR\r\n=pa5P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9d49d0fd4e563f312e9b2a25d111cf5753591eac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b45b6620.0","@material/tab":"6.0.0-canary.4b45b6620.0","@material/base":"6.0.0-canary.4b45b6620.0","@material/animation":"6.0.0-canary.4b45b6620.0","@material/feature-targeting":"6.0.0-canary.4b45b6620.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.4b45b6620.0_1585670232134_0.015545213426148674","host":"s3://npm-registry-packages"}},"6.0.0-canary.e84b9c8.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.e84b9c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.e84b9c8.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":"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":"3b3a9d3547889d7bccf64e784d1b601bfdb6a44a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.e84b9c8.0.tgz","fileCount":52,"integrity":"sha512-6dv1DcW51XczNb5foH8yPodvFOQO2edo/xDDBgumq8ytZVo1OO7c+7ke6gW6Nglb8N6h0HvgZ4Isk+tCZVKpsA==","signatures":[{"sig":"MEUCIQDDIOpq/EQ6ecXOv4lbAZQP0xYWu0qljlKM5kFsdYJCrAIgAZbCXdsPqwMw9j6yTxza7AA+21uINQN/m0tAzUc20Rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321505,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehMfYCRA9TVsSAnZWagAA4XgP/0q/KPDNsbZUl/mMCCIW\ngAPwlmpuoNPyqsjW25fueDv8tqrb2CUFop7b8MELNwGEdfPFwMcAhxgE4grP\nY33ndcQXvw/BmlLqyfhJT1/q69cMsbQXmcsuOHiXK1tfA81lc2N7E0WOikya\nYASYTdvlM3IXfcPXd2n/ouYPLg1yYK46N3lWikcN2d0mQccmv1j8+eStZmvR\nctRGmxlrolcBcabqjCa7HuzCcy9dusMuswdJ538EBP0IH87i5Kj+tHMBHJ3c\nXHUaVVrPbtff8qtBS/s63SyAHTE7UAl4KbbCrLTe/ZrqtOuIGzCjk8qU/rLI\nImdHhN5wCSUGCSaXNcgmFq1Gm0jAomJaz+FOxI1hpHF0y+IjfcmMbOK7t59k\nTgazP0QzfwQk/yShWNt67qupImsvhayJ5iQ05aHQB4xDo6yE9RRCtTODBQDo\nncGl1DlZJSaLyP1N5vC/s1+ZQh0XdlHkN31JbCd4wga/T5Y30oNzAB8qkjN9\na7hY8Ccr4riAyodgZhvkrSLrEUm9xWgqV8XjwvOX8G6bwWGaeYTsRDwTemus\ns//X3MWn4cjfO4X+PP+0oiZYFlq3koIy5Ww9yZT7NWgWLKvriFn7l9GhwVIS\nFm6fKaKtcqG0MoSBl8L439nK+54+P9wE+Ep9I2o7YCYMhwFV9dsZDmjbwBs2\nefkz\r\n=TYfj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8c119e9b02d2718e7b4df7fb72c1724650583b0c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e84b9c8.0","@material/tab":"6.0.0-canary.e84b9c8.0","@material/base":"6.0.0-canary.e84b9c8.0","@material/animation":"6.0.0-canary.e84b9c8.0","@material/feature-targeting":"6.0.0-canary.e84b9c8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.e84b9c8.0_1585760216204_0.836934009668596","host":"s3://npm-registry-packages"}},"6.0.0-canary.e33c49e.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.e33c49e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.e33c49e.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":"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":"abe2b972a1f9ab5264b5340fa4ef753ac2f03ab7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.e33c49e.0.tgz","fileCount":52,"integrity":"sha512-ururtJLAYpnHCIkJdopy9Pt3SGhZZz6qPph5KvT1CIYD7iHDGnvsy0bV9HQcop1lRC/1n6XqjATY7bUTrTqqBQ==","signatures":[{"sig":"MEUCIBN1X6/hHgLwWqVcSwdy6vwkrbXpKprvULEpTJ4eyKxrAiEAnqo3Xs2LrktWRRyixMlgYgdjkwrjG1983F1XjacTeK8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321444,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehS1zCRA9TVsSAnZWagAAlo0P/2T11kk6Rq2vgRU/hN9y\n8E1cV/n8L2iim+ePnpH6x5Gfk6v07zB1XtOMq9avwRjEnNjOnSzonV3sh/zo\n+u2do+bbKx/sxC645+zsC8B7+29wOJGgLAAU5cXGhBtkZ9wNBDMKmBjTIfC1\n6UtbFS7GJUg2VPB4JUSLX2QG2cpMeo/X8M91B76zjGdEb3Y7369TAvajgO42\nBq2EtNLqGwsGa7/SMG3QU357nvvJPWEbokR0Kf3eCoHcSuHNrJPbhDhAy9hl\noLsqRv7aanX+eA3yQy+JavuMs6m0rGStg8kTEUReRnVhcjYR5px7ubs5AGXW\nkcjH4I7Wbym5rJ/uXKwW4NTpQRd7aD6dpq+eHTUNLsb+9ul6ME1MSjQw5Lzk\nif85p+rRiaJUB2HOjvqd31+NmzU18nTT26cydyd2mo7Yi1okS9/rdE3u27S2\nXWIa/fr1JBCmU5FqMoLiH3BqEo7UQkYVGX5SVl4sI8CZgLTtg0nXvXG1oiJ2\n1RSkNca3z3KeDw20/W0UlpB88HcoVD8rmwyjLXr/PIY6S52jgmoX9NBDXNog\nlAkFXag/JAGIu2UMg2T+LSbH/hp7LjZEH2W6KQDFIZfZP3kybWkrhCmdKOFY\n5etQbPjvIFtp8GAnDfp9l2UklEbUUiddN49WxxvT0OdQFTX3kKHZPclZysE+\nLjNz\r\n=8zro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e369357845cadf1687509d31fac95d3131a90718","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.e33c49e.0","@material/tab":"6.0.0-canary.e33c49e.0","@material/base":"6.0.0-canary.e33c49e.0","@material/animation":"6.0.0-canary.e33c49e.0","@material/feature-targeting":"6.0.0-canary.e33c49e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.e33c49e.0_1585786226535_0.19924878127197165","host":"s3://npm-registry-packages"}},"6.0.0-canary.f1f8e60.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.f1f8e60.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.f1f8e60.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":"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":"cdb87685639ce59d136f7d3c1d77574845cb2941","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.f1f8e60.0.tgz","fileCount":52,"integrity":"sha512-0aWXw0o9J/4GPVyVyJYHf99y6ejEFcrGo1tvlyBXMLrSEPFsGBUkC6xvAUzMjZKdFCS8jQY2HLlqF/SjCcdFig==","signatures":[{"sig":"MEUCIC1wdW6jNu5mXeNYX3130vpJOz5En4Q/Q3cTgRrrQtsLAiEAnYG4ElZ8Ul1UGG2DVv06qDUGGDy0so1UmEvfYnbp3E0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321289,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJehjm1CRA9TVsSAnZWagAAuVMP/jTy0kH6B2MzvdnJQSUc\nBHJB6MkBjoPoYKzjVUpPYKC85yU5N+InjZdGsovALB+8T7SGlYjLYNuQrfuO\nHXnbI1QmyFUxc5QYGA/2moJn65hocuvxEt+V5bzRNdM4Ux68B0v9LS2vh3By\n8UnFYie3iwP2NPJOXq/ar8VTm70gASLQqwmmjS/az7h+tHGv7eMcYU+VP0RV\n+dKk5XRRQ2C5vtrFyq21F9tP6JRhFk4v2ErNnVxbqW7uTITJKYmk9Wbqnb2X\nQQDTPP1nf9P2/5ljdHklaHoUbU14VGqDERRSGauhsUeB556IaYb7VZHdxUIb\n7fyAj4yzcspZgIxthOQw8y8c2lVwHrgRfKcYgGaQcx6h7lRutGNMJBRCEN1e\nvt0//3VK8ZysDvtM2fepeukgnjSz0OFZCgi/TsjKN3wJZzrXctGchnumNeCN\n8lO7Oed2LEOnI8JKZqMxthoCpgY31ecW7pUUT6ZILYHwqsBv4crTwRp+TLEG\n39oDKbomRLkuOEM3Ix/V3C7ALcKkJQ0tz+uV3fDdVC/ssGWzo4J+hROZBZ48\njzGlLDw59Zb0ttiDsnfGw3xHoUlcIWi4gDCmSH3x114kaBrT2FROVsC/md7U\nQM4O6Qm23vIvCfeEGVrUYwZsdqmYMGCWh4EKWr09ijpQIZkeUqPuYEzRMX/m\nsbcN\r\n=rpaV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"aa365c532331b10b868579dbf1fa4335e9499185","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f1f8e60.0","@material/tab":"6.0.0-canary.f1f8e60.0","@material/base":"6.0.0-canary.f1f8e60.0","@material/animation":"6.0.0-canary.f1f8e60.0","@material/feature-targeting":"6.0.0-canary.f1f8e60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.f1f8e60.0_1585854901140_0.10636172639874863","host":"s3://npm-registry-packages"}},"6.0.0-canary.1e17c49b3.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.1e17c49b3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.1e17c49b3.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":"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":"0644311167faa50ca8dd3c6b3db86186b0035222","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.1e17c49b3.0.tgz","fileCount":52,"integrity":"sha512-FHwxVtyGYVOsyIo9+KDIb8+4x/9hocfgzRPFhgIgXVbFLfi+83LlJvU3KODx+CgJjEWt0Len2uhdUQ3Lf9s+Ag==","signatures":[{"sig":"MEQCIBxFEgB83wOMZ3m27YVIKk6dz87tFlkNdZjyEtKrQTSFAiByKgjjdeNDByyzSCfl1gXHZuMVpvTTYhf03F09VwoOqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh3rMCRA9TVsSAnZWagAAUnQQAIj41qFJpPXBDQAhM5Be\nZNzeE/UXSCYoUUsONaUxJIgQJ2rMAqUezlr9pGwhUofnYCECJwPbspUHKPkA\n0PkJc1Z5zqkkiXll6rZZM7raeT4/m/2GTQJ0AvFAnAkPxF5oHbgd9ALZGXEy\nd5Rb9KlNF4O8A/gMHUCDX2wGMUrPnUIghz9exaNaMDZAYmtJ3dh+yDcmhGKL\n+kw5/m6tfcCqI1+yR1c+lBIqx0qyko+L46Hwcu917D3sF0cuHhJGUyscvVj+\n87YOKThtzQOC/jjSWqLb7zmG/uWd3QTTVsmmHNdWeHdHiGZUYsMRnIGojFnB\nICfYzaZRYWQmsnabk3VB4cuhypnYqxGkbILscOlF34Dsg1hclRk4Pz65Lu1n\nwQDN6KcimN5/jUvOEmPQdK5ZHTNHQHd6QC1uWE1G4dQ1dDuCHZPOXFzkIAc2\n3dcAjewvx63CwwFyxKX84odh9SWFuxAZZxfdtQGwMSk2vUImlsAmuqkAgH+l\nXz3EUU55bB1t24mA8M9dgA1nTwZFpudKjLrB3GCVlHLC8wk9URDX1qpjuhdm\nHpzV3rBtfo5isz1LziXKsPhsustc8QcEvZKddISzULzTIRAmcQ2qrrfGPGCx\nBPMDYBMuzyY4dR8Oezk7YS/OHdVL3C4WCR73kq5aJUwI8iUB417wHpexLF67\nBjbe\r\n=mwor\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"08bf363eac26d705e8c4b0bcda91042b9c73f82e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.1e17c49b3.0","@material/tab":"6.0.0-canary.1e17c49b3.0","@material/base":"6.0.0-canary.1e17c49b3.0","@material/animation":"6.0.0-canary.1e17c49b3.0","@material/feature-targeting":"6.0.0-canary.1e17c49b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.1e17c49b3.0_1585937100208_0.3573454129329532","host":"s3://npm-registry-packages"}},"6.0.0-canary.6a40ef217.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6a40ef217.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6a40ef217.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":"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":"8d51d9a07dd3b33525aa405320b032e913c0a629","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6a40ef217.0.tgz","fileCount":52,"integrity":"sha512-eOxSp/VIg0cLg83RDjX8QpewDCMP7IkA5+JSgCNDfyXweQOGvWYmKoQma8xBG0tCiDuM7pVeVOl5mgv2xzqKmQ==","signatures":[{"sig":"MEYCIQDC6q0cNjtCnkqmGLGTH8QnDZJS4rQ4ENtKUzPvfjtsggIhAJw7dpi4b/tmEwMNl8Nlufukq2PS5l935rTKBSoigJjj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeh422CRA9TVsSAnZWagAAtw8P/3LcgTAWHJTOphs2MyLe\nW+0+q5ih3ds7FnlcuHnRYDRu7qfqJizJYmYzhsYq1oFJWPIBCg2T5X09CrPJ\nKHbDGBe2rSaKWcreFE1b0goG6oATRNCzi172cDHi9djU0fwEoWeJTCMuN0FN\ndii/lpqCgz6qMdKJKhjFVEdVIoJ2wJ0TnNZ3Q5O5W335iqW4a6Xl1RMqN5K4\nvdzv+3+TLcwKVGPsL8f0fcjBNV6f1KmOd/h5lYAYjSEVe0KSb/qa3t2NuBmu\nnKnbd1Po0D4SrBT/Mjr66e1glt5T4hI/JzTBI2zfHv0y84BrmIxd1fYQk5Yz\ne/p8HI5svrRfKMIfbbpXjyJWmvE8Y3P8UgnrsMkInTNJ6ScJZR2yGjBQET2v\n9GDpMkN8D6EwbFEbXSraUjVI7s9D4v5WA/XXJZ/FAAbmFlRNErq2kmheloiS\nr+5o7XtFUEG8e8s4Lb/TNlRKxQB7+aEnRKTycZviqvFrFWvNONsSAbmGC0w7\n11UJ85jddyIM6Kyyd4/n3MeFOyQ+N/qbvdJ98YWDNlTjDIlUQEz/UWtqvak/\nZmyFrd72FcM7GzBTzk2QpXbKbi7O/Nk/OgkTXo01TkUYGflySc0d6xxV/4w+\nYpNN2dBEWh55uNNaGsz/BtrksBzo1iD/0cMVsnsEFGuyigmuafjKqM+fTtRP\nI56Y\r\n=OOyh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"94e553cfa7e3fa8977ae7bd2ff7df4021f815787","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6a40ef217.0","@material/tab":"6.0.0-canary.6a40ef217.0","@material/base":"6.0.0-canary.6a40ef217.0","@material/animation":"6.0.0-canary.6a40ef217.0","@material/feature-targeting":"6.0.0-canary.6a40ef217.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6a40ef217.0_1585941941452_0.40509726348589203","host":"s3://npm-registry-packages"}},"6.0.0-canary.5f24faacb.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.5f24faacb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.5f24faacb.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":"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":"2bcdf39342c6ba0926565ad962c4a35c9609cdfe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.5f24faacb.0.tgz","fileCount":52,"integrity":"sha512-TN02dg7U7RAa6JU8aIwn1ZFP9m+sqLcfKHgyaZt2ltcMUnwOt2Vmch/wEuJlNzi9t+NybwA/coW03LzR7eJnPw==","signatures":[{"sig":"MEUCIDZq8tR80dORMCwkV2a5SjV7kfzslZyS8QkmCUieRDYUAiEAokhTkNFuaPnwOUz80NBbtL+1GeAbOjExyuvEkgUwbbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeje/MCRA9TVsSAnZWagAAKbUQAJaoaSqMRdc6kxwQLJCp\n1dCMN8PD1qf2jUGwAgv86ELr1nPPrRbzizcit0kHMlQQWcO/nPPyKkC0ybZI\nWV5F7tpjnn7XIyHSictaoBzG1zwiRpppkktAh5QINvlLw8QMhVhFrPQXpw5Y\nmJwUqLvSWl5+ibT1b4ptdNc74T2t2b/5/sLgBbUiJF2AOfukX/4c9DnLR7ML\nn0bYG8dx9ylr5DSfN92eNzO5e2b17T6Sgxi+oSSlnKhYjmFL5HNCIIbrlPj0\ndu9krv7bsfEeZATcgzhyGZAhd+IgM0Hq5zEuQh4jLHQzcHihRJ6emYkaa63R\nIdreDvfX6Jc5sO2dZx8X7d/uBDe8E1ROgM+/rTLEnTJSJ4ImHwjJlNyB4hM6\n4J+MxREfD0WTfSafta+V4xiFodonXbexJm9X9qHoLcnGW5/ehNp1rQKQ05ub\nnsn2aw/rIT02V+nrhPmFOrtesBweVuiN973TfooJoLThFHwz46/PMeGVkhPt\naDtMmtZ2xAV+PuRXOPaTt1XAK3z1QDlbMKVOVDnGhhClP4LL8/3FGc31AKqX\ntRvZhu2g4VIv9BgePglOxEdMP4V83cqsbdmuarJbjzimjWIzWwjuDDEcRlxo\ng/29+nMJ8jh4jiLmefRh+huG5hfRDvmqjkFaYUicKkysPvOVyElVlukWYX5v\nAtDT\r\n=MMCg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2c7c3d8feb6b7bb5281c1144c43a06f3ca963316","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.5f24faacb.0","@material/tab":"6.0.0-canary.5f24faacb.0","@material/base":"6.0.0-canary.5f24faacb.0","@material/animation":"6.0.0-canary.5f24faacb.0","@material/feature-targeting":"6.0.0-canary.5f24faacb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.5f24faacb.0_1586360267492_0.6020336043688601","host":"s3://npm-registry-packages"}},"6.0.0-canary.82fa986b9.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.82fa986b9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.82fa986b9.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":"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":"46705cf28bea8392d482df3329ed6fa0ca3ac513","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.82fa986b9.0.tgz","fileCount":52,"integrity":"sha512-Ceo6pvbZMhyFjecBtCd2vHYvfxx4l0XeCsYpB9EWxjGIMma4pKgrCj+QqjKCsLg9T9/yztaaVvYxAbtg8ksw/Q==","signatures":[{"sig":"MEUCIQDkYpstSgaaI2kSxi2mq6VPSshb8D5AL8trBj7DKNOkwQIgCkcPf5il1f1wkK2tD7yA0B07F1mVpN8kCW8jVLlUqwk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejfD2CRA9TVsSAnZWagAAU1cQAIHwsHhmukSkfgwupLri\nA7iYA4UsZTd09cFNY06yJOR1kzKeeV4CvX++PQAsLxFiGXab/Xgzufr9POOb\nT/S0z3sxuoyz7gLYa26+dhOfM2gvi9KjFRNF6wA8pLf2a0gDzIHBvhDLW51v\nT2MdguJmKTux0woyPk9iq++mzczHUkRSkX1D6cxtNQ/zSfKCZepbwDZqKa1b\n1v5sqcHnrkRB4J2Wbaau/hsr7gWeVAhg48W5NaANSmebYt6MlbKtINXtnmSD\n0gXigEWoQGverwXsoc3h/qZA1slwgmSsWk4yLt4mXfVsLTTuhzS77TL+TzhE\nn61oGNUwGQiWmlfnCtnCrf9t2BrvNmnccr3uwfwMD86Y6oM3q3ytjZxjIRZo\nQNLMtg7oryvUE5CvvNOVOcpWQkKc2PQomIh09UwCRroFcKMQULESUegfarrR\ncRieWplBpcF3OH3XaGSsfaMN1u5NwU3R6HZXbaF/eXq/1iWMq9/yl0l3IyNA\nLjxvj2Ox6ynFaQX2EVf8DRMZG2l3p2rfCHcnjYSHYWmt33RlyYMnA/bd15na\nw9xcgq04ot445vh94JelWchm1A2FKqmrYwng0HjGU/wHVjLfJDABonhqxByO\nbSl7krToAt69XnWChZMfqIpvxzQq1lpi6TwdOVljEf16vA1GigwYtAddUb4h\nk3t9\r\n=5E6P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4fd9bd21072735eb447e594a5fade5eb1e846831","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.19.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.82fa986b9.0","@material/tab":"6.0.0-canary.82fa986b9.0","@material/base":"6.0.0-canary.82fa986b9.0","@material/animation":"6.0.0-canary.82fa986b9.0","@material/feature-targeting":"6.0.0-canary.82fa986b9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.82fa986b9.0_1586360566479_0.32541555303022474","host":"s3://npm-registry-packages"}},"6.0.0-canary.9930d9cc5.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.9930d9cc5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.9930d9cc5.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":"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":"2312f08d5517a308f016aaa6f2668732d6a19659","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.9930d9cc5.0.tgz","fileCount":52,"integrity":"sha512-F0NpyDe/OM8IyAKSBDozXPXjopvI383rXN9ieUBjVAlpx7cDyzc+sCJYolmUW0c2U5C8KBxHcAsxHi3RC0XREg==","signatures":[{"sig":"MEYCIQCBqf9JRoqtP+18nJwc3UDq+vbsvIHeUZtTdjhEnETslAIhAKvrkHH83OJ//ML2NBOdoo4CURX3X4qZcWHnQTnyMarg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejicECRA9TVsSAnZWagAAyMoP/2WSXGfRal7DQtkzMNki\nQtNRKJKeCNZs5SD6ILwdizP8jPLLq2Vp30/tsvV0KdE/hHSsavMcSXADv4jp\nnc1kgknIjJJRMWh1zP8b4EtOSwJmZ0EUTFeE6DDL6H503jBSGMiVixtZWV7m\n4O/wZmVtiizboHg1w1eQN/BJHy36uC2vcXVNIzPdJSPWY/k2ZZ/83ifziKmF\nX+k2PhpeFBNzLXSWSk2MRsg/8diSUn79RTZfOlOya9XwGUO9BW2kSSJm/E16\nFbGoMUWQXY457H5+WG2cAZJG9OE/DvJN7oSQEl3DkCQaVa8wlwiR+c0kgMqE\nQfCMso/UAa++XqzE6wc5MHTJgEyjJ4OjjO0FKX9mEOnF+Fm7CbR1TEmU3BCw\nhO9IABdEAigcDD6EedKN3POESmMekuQ6HFlReercv4LZMwF5AXg4aDqLstXc\n3oqwMJrAwoQcO5ic54hXPfvE0lTWz88DOJx1b4Dk9om+YbEev0JatL52pMHD\nTLEP0VRMb8szQEHL/kViriqjgYzpyAaz2WL1uqBI1APznx+oBEPdjtYqboP4\nNAbO/jfcBduVGbsYvX/hrj6NIEAfDHulVkZVQEkcZQyuOBW+o+gUQ199sVxz\nhXVGcaovhKf8vlOfxoLD51lFl9ZbPTAZJqhLq1IzCz583Q2Aj6YtFqj3jSpw\ntCwS\r\n=k6Ml\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a0382987a27373aa348015a5e2529f301f638d57","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9930d9cc5.0","@material/tab":"6.0.0-canary.9930d9cc5.0","@material/base":"6.0.0-canary.9930d9cc5.0","@material/animation":"6.0.0-canary.9930d9cc5.0","@material/feature-targeting":"6.0.0-canary.9930d9cc5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.9930d9cc5.0_1586374404258_0.2564436680410067","host":"s3://npm-registry-packages"}},"6.0.0-canary.6601d24af.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6601d24af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6601d24af.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":"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":"3b0471bb521b58c92105a7821e473881f53b12f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6601d24af.0.tgz","fileCount":52,"integrity":"sha512-78nqOdwDQvFNs5/td0zfG437JW55/wEV3EWyNAK3c0H4VP04Bd3exmxrhl9N8DA4OGyVe+x0vX4bTMgGW2hgMg==","signatures":[{"sig":"MEQCICb6uSb21fjWiHpswZh/EZaaAKC6XnwVqXyHmiqHNh68AiBGWnHqTuEKGNsdGcAIXjr+Sl8IRXfka9KLlka3i09Amg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejmy7CRA9TVsSAnZWagAAj6MP/RR9MJtr2vaBzRGEnV2H\nFX9QV+inrybx5xNqeBoSJ76pM0lxeL5c0r9b74p9FPSRl+4ehDE6Yxr9+nnS\nYcyGYYUFLn9l9wvxiCr7rfMfH5dz7XcsmTymc8M6bc2wZ/1FVHhK2lGdcwTY\nNTkW0xf27LFxcrxi/N2Pfs0TmvZzUBZQTGyrzF2gj/BGcW4eKwaSKWanH/CN\n669QRYXSY+CamDMqUOTXMw8ZXYdIIPLsvK1x/zdAfx+2TkWRtEob/vWKLJGV\nBpMbhqHjM8CD5kheKhG2F3jnDDLaTC5K7arsXV6zkJGohoLdnrhkCJ2TmIxn\nn5N5GILhxZZvDC2YBF6dV71pXX/dV8vRBPr4viIn6QTO/0opsq0EAUq6tn1h\nYM/BPOxtvSqHavWKkxjBO4yddW49sGIIhw6insxJ1ohpryuC+/0OjWvGTJBr\n4aVSISQuU0AEdc4TH5M0kQONEwg/NJfcgi0ONtSavfHc8xA21HlQVtEBohoC\nqnjux9/wmURmeeNyG1PGBcuvcOFqaSiOROre7l1ry2fj/p9tNARL7l4pJnPA\nPNr2xUz8+BMSGAuLz06rTdPpm8GLUa/jOOI+f3IHvP6RmFhhXfJzFcVZsK41\na6LGsQRTsVoZSbyCG5uilVzC+BlyvlguSLCxwum7O+Pk1CF7ULlHTpAl6T7e\n0fZN\r\n=eDhK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f22a45db8a22981a17395184998a94e6a32944c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6601d24af.0","@material/tab":"6.0.0-canary.6601d24af.0","@material/base":"6.0.0-canary.6601d24af.0","@material/animation":"6.0.0-canary.6601d24af.0","@material/feature-targeting":"6.0.0-canary.6601d24af.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6601d24af.0_1586392250490_0.8557363579650525","host":"s3://npm-registry-packages"}},"6.0.0-canary.05f5e1583.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.05f5e1583.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.05f5e1583.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":"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":"aa1f33f2ef5f3aa28f61dbe16c3fd665a66ac02a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.05f5e1583.0.tgz","fileCount":52,"integrity":"sha512-IHu3VAweCtcD0i9HeSUh9og8Dp7tmKQVmBP2tpjZZNDYprDnmbYJyHFaY4wZsNDHxDuKLVhRJKUSoWZ2BYwmLw==","signatures":[{"sig":"MEUCIQDO3e3Mey96bb2hXWsHKcXdIf/kfb6+/9Vszc2PWun9GwIgeZcjTq88dqN6qGA1uxWAYbHcSGYJY3P4Vf4RheXwy+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejnDOCRA9TVsSAnZWagAAsvwP/Rj1IEfOAaEvdwPNWqkM\naAhLKpZLswnm3tb7LLbImPmVvCkV7ccF4huucbLajRL1muTA+qO6bipKyn/Q\ntKF8A5Z5tMd8UDxbRphwxMGaLeIek8/GS81mrxAt9dX7Qn8C9JW4gVwMV58G\nLoOVfoP2XeYyXjkTVc7fNqHEfv/8kR3EM3kPUsScu1dxGHQ3swDUFbdcDYzZ\n9RoYT4/j17TOk+Q8ORNtlkukDtMKCdIpQgh0aOuw429KZN893cvHfyBARHhj\naB47IT+quEtg5cMcz3rXH38ZUiEjWJPdP/11zep5KGze4aYlpwTzD1oYmEOa\nrcNPtvw/nRrizQtrrBtQxK9Vb7R5k6URhnLG2HC2GXR1/f7pWGgMSGTzfQs4\n/agxnSRAw21Qu9qcKAlZblSITZSBOZQP+UXUEfz2KvTXXatS1XqEPzmzocgr\nuuYv1AgxsIfj574LQJtSFhjNRQ2evg42fxCKyPbMjb8uHf38jTbVErpZAmaV\ntzUMLgZtfDi6sqCC2lTKR5HHaPaw29h4nwQzc27y8U3g0UPhyhQJuUk8Kqr0\nrLZIq6cLF5imt0JwoOBpf5HWnDY4ypm+ORU+jcbYSY3/a186Gl1/CPRid1Gw\n7on7J52cKIwzgG/GF7GV0/2C2og6niQw74TCF6f0R0l1W0TLUpefqaYg5HtW\nbk6d\r\n=2PVN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"413c1908165c032ac95dc5456e70978d3994b6d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.05f5e1583.0","@material/tab":"6.0.0-canary.05f5e1583.0","@material/base":"6.0.0-canary.05f5e1583.0","@material/animation":"6.0.0-canary.05f5e1583.0","@material/feature-targeting":"6.0.0-canary.05f5e1583.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.05f5e1583.0_1586393293344_0.7340887123241391","host":"s3://npm-registry-packages"}},"6.0.0-canary.bce00e186.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.bce00e186.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.bce00e186.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":"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":"0dd74ad2d9c5ac87a7423c1fdc664be4750ed9c7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.bce00e186.0.tgz","fileCount":52,"integrity":"sha512-gk4G1IPN2E8I3hcd8jKJwgWmj/K9VTKw9+8KltoLZjKwe2Edr/DbIxAeYOmjd40CMhQjjN4kCu28D5QFYmAqBQ==","signatures":[{"sig":"MEQCIAC8KSMsg2ofEu8Wjo6e4broCTLQR2Ic45LgCujg2xZLAiAVQmMFIniURY7arLYunyzsRUZuW9F9txwrG2ZWVgT0EQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJejz4bCRA9TVsSAnZWagAAQPwP+QDzq1QNvDIuTM0lSToG\nCjaM/nSodL+8UXzfPryV+1pnXA2eD6K7e9kjSq+eV7aMn+2Bn+ZlXHT23TPG\nyltkeHuzDwBG1Lun5vj4JMbt9YDWzaPnPdcy55F9YxZJLJAy+EN9eqfKyHRw\n8kEar3RMmwX/Vsr0lq8RTna56jo9YCkg48Q+tAQ5wtAuMo7ws8QG6jEI8rZj\nK9TwANu5ahuy/iTkxcuWY/SaUwG4wZWKP/xeKTOTCKtn0SYSrU4F6C4ksjWv\nXR0fVbDCa/w8QNnku99Kt8Dlxb27F5wCX+zbzeeeg3gH2pTz/FsMRajcRcj+\n9B3UPefUFNU6Sdjs6QEh49FpTyT4w+AxeoKtQVQzwL5BcJfqt/1m56nx3V6c\n1ltiI4Qm80ezkrCnArX3HGdI6flYj4MCQ00IuAGXaNbx32GWi238aYls6228\ngpitggB3i5Dqqzc7uGoR+Jeshy5hyiJXV8H0F13R8DIuWrI71IrQ5FstglD5\nNJX/ei0z0lexXdG6wtC/E//qzf6EeefLF109PlHFu+5R57m8mLLnTHu53qTC\nxpO7dcBT7jKmTZpbKbuPHLzM/P+/q1UqSc3oklmd0ksMViVRWR91Lco79C5q\nmgpIcBYI9jaAMOiQ4/JHe0dgGZobPl/3nTrQPdOA+qXI89jtYKrgV8Csvfpe\nT4qg\r\n=OfrV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"36e6ce5271637d131432d915870da208d16bef74","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.bce00e186.0","@material/tab":"6.0.0-canary.bce00e186.0","@material/base":"6.0.0-canary.bce00e186.0","@material/animation":"6.0.0-canary.bce00e186.0","@material/feature-targeting":"6.0.0-canary.bce00e186.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.bce00e186.0_1586445850678_0.5191145159445498","host":"s3://npm-registry-packages"}},"6.0.0-canary.927fa902c.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.927fa902c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.927fa902c.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":"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":"7a1175d7e80bede41f8397be137674ec4335dee3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.927fa902c.0.tgz","fileCount":52,"integrity":"sha512-a9sIK07zymL9w3hJyNAEGhbBWB2OTeDqaTA5stJlxJpKZzXQr+2jDCzh0GgCJKQeUq+/TWW+oUsXrkJiMQzh6A==","signatures":[{"sig":"MEUCIA1a0UxDnmTy/ynO1cmmtuly+UZ5aPuyfdPH08HXeHLVAiEA7dhc2b6BD7R92XIya7ZjbnpeoSlWS5um3pwRKtMz3J4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJej23CCRA9TVsSAnZWagAAzwQP/jd0KJpOFCttvN141inn\nlM9TSAre+bguutwij/Vxlv/vLCq5Tdz2pDfO/nWl5Ttdrde32zr9DqoYSo95\nIgUxGH596fFyU3wbvGzMrM42IlNg3hgW8fwhowJdWEYvNXB1SRyRfe0Wf/0k\npTe+Sbrwfmkay+PhQFoz+LxTeN83hg3zC4udN/5jeU7cRSBnR6+om5Qj9edN\nKCqfWco4PC8pBPfx6UtopHSlzZv6dE/pIgIgH3KB9QV2/7mb35jlwJ6cqM9Q\ns0JUclsfW0rx2iZqdMJT4pzKeT3upIUsmoeQOUD5xSKPj72KIoCsNBQXyXyO\nMiZYqHz0HBkh5FfQ/9y4YfiAfCf7Vfd+qUN2mlfIudWuYTAbfSFrEPOdhFRs\nC5k8s+a4l77R7i8tgn7bQIgKWlh2f417qAPLNZIMlLQulSt1heDBke4+a/Mi\nKituC7adLd3K9FLhynGtTHN+t39mUOyDffPpqvsFJSf+TvEOJz29WpSMI368\nVX5wmJFbXM4liSoCiS9AQYBG7eSZHtxJO+PYZO68fC+vkvddqJltAiY0GvoH\nuanMoSXclWegRfph8NKljKOWJ9vw+5AT7eaKAQYSaoGD2tNr7ACFPncu+2DG\nqXGn474uFOibAMBBLoyFURRRcyY4Plvn95+gf+ojumsrE5MBGduVrXQXhobr\ntvb6\r\n=UQVJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6993aa2a4786dba507ed6b641b4c059925b7ddfc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.927fa902c.0","@material/tab":"6.0.0-canary.927fa902c.0","@material/base":"6.0.0-canary.927fa902c.0","@material/animation":"6.0.0-canary.927fa902c.0","@material/feature-targeting":"6.0.0-canary.927fa902c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.927fa902c.0_1586458050173_0.6309509754327247","host":"s3://npm-registry-packages"}},"6.0.0-canary.eb28b6ecc.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.eb28b6ecc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.eb28b6ecc.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":"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":"46e7fe561e95ef3aaa755aea5f896c3a9baad52d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.eb28b6ecc.0.tgz","fileCount":52,"integrity":"sha512-gQDhcrUv65xH0nDc5oKCPR20RfVPn6HrYqM/5ajhiiTHCYbotyErwScd7nMNQIKIVfcFjxuwZuC0B5hzdefoRA==","signatures":[{"sig":"MEQCIF21sZdStMXIy/q/jplVqipS6ziEE4MhJrhTMU6o+DeNAiA/gWBjws8x9X6jb+dJ7MbdQVF21q0fPMpVN5v80Tr/0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekMm6CRA9TVsSAnZWagAAvfEP/0+z5mw8LcJF2WuytVDo\nLfgyEKgz8UqyJ0+/ZBqxqd5PFLmuLR7gEVdlWTUB/WDMAaQxqBxKPutV0UNi\n1y3to1I6QcbfzIXm+UJThcUyMtWBAe36lwtxy/Y0zaS3OygymbhQIgktQmdl\nhi1/1J2ZC/PORDbqRK5wG0JodS25jNOgAlIDXpAwrLfpMuBGhuoJ4Y2GyLtr\ni8LzK4lIoq2xCfkIj2TA9sugH9HgyH62W6WnF/YqprBptmc8hiXErtpa772+\nqwL1yGwFpKYoSPtzjPllzXvIv5DOut0WT8mCov3vTs1pgbo0VPs0vZqD6qdX\nBXRIGmzCgTodL6ZF60V21WHToiEl1okk6iesiYMCN/Mfxuo7/LtqLZaqawZO\nm1rjxrPpsAXpyiXm/cCSq31F9+RRGJ+UvU8018hHv9ZgKbHXHWx+o74OhU8A\nqfFX1S87ny6I8AMXEJ1sMxcki+HOvnmLAh+UyEKs5NgCS7xhM0jBqFIq1ZxA\nZ8OgbKqAW6AgZO28JOumXyvi1muXT5wZBUL+H5SgE2J0W7dtQTR86utagkBB\nMcUVVNZwlWR+t8h2or7CoMhSpFr+JDdVML+ZqbVIlrJXMX2jYrlh00c6hsJX\nwJMU1wZK+6gLoq24IFI3LzgcDwmBruR008FWPw8zuMy1Y+pP3KOyY5f6MslL\nP5a5\r\n=RNPy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"14b97cf99132f4a85a978c1799a668eae031d75e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.eb28b6ecc.0","@material/tab":"6.0.0-canary.eb28b6ecc.0","@material/base":"6.0.0-canary.eb28b6ecc.0","@material/animation":"6.0.0-canary.eb28b6ecc.0","@material/feature-targeting":"6.0.0-canary.eb28b6ecc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.eb28b6ecc.0_1586547130271_0.6398305785245555","host":"s3://npm-registry-packages"}},"6.0.0-canary.816a43b42.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.816a43b42.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.816a43b42.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":"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":"31a120e1b423d49f88001e9888e241d6db314569","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.816a43b42.0.tgz","fileCount":52,"integrity":"sha512-hmW7OGQbn1z6KfDZnYnM77OXF/axVhR0r6Oh6XvH5K411t6R/H0Dv5KKcylTOufV3D0Z+UKKzPA0CV6LGPfomg==","signatures":[{"sig":"MEUCIDBeQDyEj3lSYOeP8NToCHnGxG2sL2EuCqDzf7Mi5y6yAiEAs9HSdN3w4uG4/MMmn2mN8bZ1iW49z/T/YON+8YqSzog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJekNzVCRA9TVsSAnZWagAAbEoP/A5uU1D3bu5u78bTnMNI\n7kbc3BvpT+ErMIhPl5D2s0wzz0zgJ0EiMdaG5wO+q4MnNw+rc1iSQ5g1DOwI\ntjw8lp6beEN9OiSAzKbH2XdCdYjaL3BDpIfyjDqaO0zd4R71MJCMDJsqzZBv\nMkhCCcNHGlJsq46JgI3I6YvCV1xckc70d9rZL9XWkRFrX7mf6kVSqIJ0hhse\n8K+lG9r9tP8Xf8gZEGlVs0n6+XEgWfpcqXhmJXMdQqAySqJoKphylNyuW8jf\nfVLofuDGmABSo6dTiqKqI+Mil/R1hT0yAJQZEnta04uYMoGe99WCK25kAWlD\nnZcCxeq6Wh8XSR4HxtOy9xKCkTloUv7IqYpo1ducJF0/DBo2SQbCZRp4B01N\nHg9PUOIY/ABvXOhjQgHzWNZDzBKNTzZUhwyFAnlOysRgJ8+S4Zw7jQtIlV5J\nEkDFDH23rSoOv+oDvpuCy/V558fhTWohsLw6ZvrUjG/+Wb1xYJI2T7tS60og\nIV/rYdXZIlg/W/+DnbHbkoRXxXN4HcE77jciR3wDyG8u5kiOMXDbrMBG7MbF\nSNEpus42OvwjoFPu1uq6IN/Vpw7maxE+J1UM+MBN+vjxXhYr2ZIJN6SxTtI5\n/MIJiQB3JLpajp45NJHNFL5rIaOkvPkaaOzi55fK5YHs660BLpBT9fGT3Ahd\nwd3P\r\n=poc1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"55d118d08a4432484dfc732189dae38773d1f437","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.0","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.816a43b42.0","@material/tab":"6.0.0-canary.816a43b42.0","@material/base":"6.0.0-canary.816a43b42.0","@material/animation":"6.0.0-canary.816a43b42.0","@material/feature-targeting":"6.0.0-canary.816a43b42.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.816a43b42.0_1586552020846_0.20252360148533932","host":"s3://npm-registry-packages"}},"6.0.0-canary.008c4d319.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.008c4d319.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.008c4d319.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":"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":"bae35127959a575cc8b2716384ad83f0439dcba2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.008c4d319.0.tgz","fileCount":52,"integrity":"sha512-8OEiKZ4gcUCw1EmWYjyiBzixUAEjHH4J1DE9cDufyISrScYT4nwBJWH37GgFfMkdh1R0UZNWFdQMTPIjNXWvlA==","signatures":[{"sig":"MEQCIB9vKPdleqkMhdtbKajxpT0i8+KJskjKto5etcWvS34uAiAebbGr9sreNJCo4X5MQZajEXmODjag6jfUy9NzuyuiPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelJS8CRA9TVsSAnZWagAAF9EP/R3b/e8ebxw7f4b76PCH\njqa28OlGoPaOfPmMkewa7WqxEciLc9aHb/hNJLBIjtuHLugDjYNffO2LH5iu\nlAVSiDUpfswkWW/CvyuZ0Dls99lXHJzKQwKDf11lKE7PqZn1tFEzN9RP8Nn5\n9Bp1VNeEfdO/dVqC6dfclZNEkdKn1yDKAzHs9PFN6z5uezZcKzZ9KA2wgbtu\nZ9OPr95vAF93l9R1bJy6K+EOLT32zdnSgyokOCJFAonsgEdCAuTj7kMfKQvg\nECPQKrgMmvJq+uTkYXwCzUGf9WabDPo53nhj7WJgYb4lBn5VQsNEB/2njxJC\nOrn5M8kr/b8h6Z9TwyfQBoadkEmkswTN5AGCgSinbF4odUWyYF4Bq50S19Pl\nIcxiLJ6dBVVg6NbZi+zKwzh2lYqFrKcKiYRM3q+/LJy1+7F/e16FAIstvVW8\n5KaTCDpqSDJXOA5NlEMrjCgnM8Lx300a5Qv8hKfLCOZEGHlyhjjGJ50fRI0U\nVTX2tz334tlBV8oNexKgi5J184D5TmHlTwDE1yFTdtkklQaawvtovycBpNVD\nLk954GzYMJrXP6NM5+AglsdgV0ZSTnSbT60Qw1q4AG0J+mkzSLyJwYM2aZlU\nIFcbrUciGBRkU/v1RAd6zb81/BCLDSkAd4O7i+28TKCwkJL/ZSd0HYHMC6HR\nE1xe\r\n=ja3y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cf7ff62c921da3167d96b5f7cc7f07ac2af41a19","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.008c4d319.0","@material/tab":"6.0.0-canary.008c4d319.0","@material/base":"6.0.0-canary.008c4d319.0","@material/animation":"6.0.0-canary.008c4d319.0","@material/feature-targeting":"6.0.0-canary.008c4d319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.008c4d319.0_1586795707765_0.4721353767907024","host":"s3://npm-registry-packages"}},"6.0.0-canary.cbb3f28ca.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.cbb3f28ca.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.cbb3f28ca.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":"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":"e2eb5ae9955cdeac45403542c5e2962711c95c53","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.cbb3f28ca.0.tgz","fileCount":52,"integrity":"sha512-Q7N71XzLO6dIrY/R6HWfnALtDiJgI0TOzcpuYua+Q0jIPNtSPTEYeAd8ptxGnhKSveqh+oWJUfe1ilHAYf2NQQ==","signatures":[{"sig":"MEUCIQCyUU11D9zp6qVXEapw8aakDxVw9+SpaWeN70RBKcZUugIgflqn0s+kB+7GqNva1zJz6MQfeoqSGpQIR0nj1eY1M5o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelUTzCRA9TVsSAnZWagAAp+kQAKKMMLk2aWar6fq3784u\nvq+RIcHoCwHqvbcQvAbkWF537Hmn/p04rY2RgSo86ExwCcsyHMaVjSXgW+g9\nM6IMuiTU5Td5f/fbX5BYoEVls5Nqi7n4sbsy8tnxgolFUHJ+O/3B+xw5sFmz\nWwxOdZ7GLGpT+2QnCDDCP1KERH76BNbF4308BixlBeHtF8JqnpPLYPfs0j/l\nwxs4LLQpCz15l84Kix8+el9e72LugYgBgctpKiuLZrMMDTL9ahcoEvoSMoe8\neoThS9JUQQSqh6v9VWajn/ACo0MDzdKg260qZLsJXbI26d1T1a6/UkK+nScD\nmLln2qr4DTCBqruzpiHtSigYKJflEunPUmbPhIrwv7L0aBjhxV8ijBIcoV9h\nL7b0fqSaBiYr97BJc7pt20HDdA5W59+Ai8X4+wjjgs1jJMhh4SWxqXy2V/hG\nMGtPLIjvwKx+1U6Y2Q04ctHaz/AM9+k7eOxoUdSVM/bDySizmZNriUVDGQS+\niLXgs0d9lMrficFaY8s4giQjvOa+qrDrcrFuAvtMsgxgW24qnIOVHjFjb0HJ\npVQm6ZWSIqNu7UgFI6UY/KoM+pHWEhSsgebNsMlm5d8rx5mgdcghAH/xw2Tr\nexNiANp1i6dQxra2Xrh5rwtJxnCCRW34LMX92+hwnAY3QZ7f8XtZDg6Q0ChG\no7mB\r\n=w6zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b6cb89b18de9f28799535d82c5ebc759433a5307","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.cbb3f28ca.0","@material/tab":"6.0.0-canary.cbb3f28ca.0","@material/base":"6.0.0-canary.cbb3f28ca.0","@material/animation":"6.0.0-canary.cbb3f28ca.0","@material/feature-targeting":"6.0.0-canary.cbb3f28ca.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.cbb3f28ca.0_1586840819344_0.9072566405527243","host":"s3://npm-registry-packages"}},"6.0.0-canary.f172b0f90.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.f172b0f90.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.f172b0f90.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":"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":"4902a5a663c792b68b7f36c7a02523a70307e5fd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.f172b0f90.0.tgz","fileCount":52,"integrity":"sha512-HEekAfaRsE08I7GilfFEBZVDSFcmAsZa9Gnyghcn+NRgen72r6cpeUlYfmASpav+y6n69/KEbTf2kek3WcP3qg==","signatures":[{"sig":"MEYCIQDvcCL98RHwAGujkY0VPvtnZWScyiQEZn0ySJyQeJdDHQIhAMYeRkCs9yQkAIxIl7XcS1j3CWXbCqlsjgQsqdXf3mjl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelkMVCRA9TVsSAnZWagAABzMP/0aQ2hK6+eLxk+/i6IUy\n45IPJIb1cJ/TWlXjsuczsRxNYCDWem4MNH2NmG90UfzGM5/Jx4thbP/dCcve\nILwiNMUT3gb/l3LCKU35a85u3ABW/mH7GJnzeufYEEKoVCXehU8dloPwenAO\nqpxFrG8qH6dSUejL2AeNxmWhusAgYyNMJm6/d6k9R3DOSzK1Z4xeuzpZW/Mt\nkS2s6KDK9T8zDrB1VBfRHaTvgn6hUT18wUDux/GrnM3FOlRa6RvilFPLYMyo\nIDM+kDrpOXx5J20CTTGlzVApLMXQyAsm6q/E4nCSkPjhaMtFyeFhSWUVJcVU\nfu6D81zygrfDMYz1AXUbJGeH9r4dl0ogfCmMHDYtJjyaGFmoSpW6L/Zl/NLE\ny8IUnY0Euv36CKnvcB6//ZaA79UNKe/xAc8sGyBUxg8i6XsZf74kSh3AXEGk\nEsyXagSqW5TVAykgpXN5F5IOhChEas/+GBS3QLDwdNKYhhqgNasVvXqDp1u3\nB+2yWLSMhebUZNzaAgJ8yKrIcjcHOcagVabutMVzV8++xmUWyFnyENkZN8Xu\nvMnpRvDQOhA6g91S3JP6GIJfUAp1sBOALw1i90PM5TPRh7rQJjsIVuNw4wza\nuVfP7vRMzIxfovuofiuAeCbo89IUgNEM4a2Q6mui5MlJlDRwDyw1XKUrxMor\nDNyx\r\n=OzaG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"eaad6fe33949c536d515e1177cbadf504619cfda","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f172b0f90.0","@material/tab":"6.0.0-canary.f172b0f90.0","@material/base":"6.0.0-canary.f172b0f90.0","@material/animation":"6.0.0-canary.f172b0f90.0","@material/feature-targeting":"6.0.0-canary.f172b0f90.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.f172b0f90.0_1586905877214_0.07135778992448927","host":"s3://npm-registry-packages"}},"6.0.0-canary.c02642273.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.c02642273.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.c02642273.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":"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":"d8110811c25fa02a7c3456ba07f71da193316bb5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.c02642273.0.tgz","fileCount":52,"integrity":"sha512-s0eQeIlHv+6SXjVZziO5I/aRzAZNdeYN5BGBCRoMjrFsCHndVXDZ/4CmnGAyw9Y8+uh2UklfrSzv4gVYRKpV+A==","signatures":[{"sig":"MEYCIQDdvpngSqoNl72mAqlvrP+bi7+YCFLAnk4wvM93RWaIiwIhAIjwSeTlSHNGdj/fkGJCuJyJYJkmtTbj5lUIxoXohqJO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJelzPXCRA9TVsSAnZWagAApFQP/iQqVHRxO3cjtkIHUsYo\nSMm4wjgpnYZJYiRQtXtAJurm2HlhPo1uyLB9bUm/Y2iSMlX3HCSqgef5WP58\nsZLgIHuiYfdDaMb+yRdXB9h5lKgkc12WIiWrszHaoKihiODcWL9vBHsZzjDI\ng++F9IIREvzC+OOWM1Al05LRlEYBC/omK2wDW78hHUEDsnN8RT+E2NxEXspD\nF1raPMpuh5MCJ5PwyposCSdkWgUKZ5mU0pRceV7bDW1A70DmSzdxatQcS26m\nY+OSd6K5uASMP3gXBQQqkC1aSZppO5AOHzThsu00suXdAfCDXJq9G/mWBA+n\nsMiLME0LxKz+Re469SZmgUoTHle9XnSco5sWwmAsxgH4PNT15alWyfykIcCQ\n++53eG1sZtndqY/piz9MO+Rqt1wDT2RBBqJZH+UsbcSEnmb2vSNkK0zK/cdq\nS2C9YpDFF0tACTLeyBBBjbv7HBtdCVGhFsbjYQcptWrMOLBgZ+Z1kAamkyVN\nJWbOYt5apEkORRtqj16lEDMby1byjxKkrWhKo4wdqKofp7EU277EqtR3rnlb\nIpMSV3wHZCU3x9XBfowq8FxBpm3XP+MmnIeqm8xH/BS8UEI4uaoYhx4iFw4z\nQsv1wCD/zxcsl34ezlz34ElZQicT/Ns1VAzcCSOEkHuDzIz0Y53cKiZtD+GU\njlgU\r\n=7w35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b648ba2f886a5d6cb78a9dbdb435d18b5f600bf5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c02642273.0","@material/tab":"6.0.0-canary.c02642273.0","@material/base":"6.0.0-canary.c02642273.0","@material/animation":"6.0.0-canary.c02642273.0","@material/feature-targeting":"6.0.0-canary.c02642273.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.c02642273.0_1586967511462_0.5448882826022778","host":"s3://npm-registry-packages"}},"6.0.0-canary.8a299b568.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.8a299b568.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.8a299b568.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":"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":"1e2c7b749656cceec449bcf043ab0ac7a9f4ae25","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.8a299b568.0.tgz","fileCount":52,"integrity":"sha512-ncyrMtHVlQWN3+uLp66UwVOcOzwXvBsH2V2zk+YGPWwyD2zo3aKrB8T0SICi2DYXzbr+qyvK1jIZ1IACbwql5A==","signatures":[{"sig":"MEYCIQDNlbsa5GpXzBlC/P7mWpG6BaJCbBxHB/9PsxCKY9XrwwIhAIZqExiWldQKOAb3KIHniPKA0cU3mBXB6NCTUC+fbV3s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel44/CRA9TVsSAnZWagAAiHgQAKKZRtkBO7tVzIdLtoqU\nmo/x+Y2WnhZ5oV2eToBo9k0fKQQWgV6orUwkmpKF/D/1VbK86Q6GKRLhTugs\niRRdtwOSZk8an/VTkIpQpO+/tqG4w3lIo+tlsS3l2fBLyIvbfmnmVz0JKsYM\nnBj9x46jPsYaNMxQdyt0YRSh2bqptP8acIr8Oab/jPRVwZv4SU+hBDeQvkWl\n7QyD+DKH+lv8NbsJrfUQd3r7PgN0nTMZgBCnLWh8FhmO/KQlZoI3a8MNlfQD\nFAh8/zlXnXx1gTKvLl/uhn+dPM3p5sny1OtiOtmkutVAdspTkD2KdEHShsxy\nHjklaJ1nhsMTRDev7seaKIbrLhb6SVbU6dC2BonoDQSOyO9LIZIDgGUwOA3M\ndI/vxlSktoUxPvKXQUsx33/vg9+Zy3wQsJvEEMPO8+sHkF0nnxFYGlmpZyxp\nMhGrfaz9SiwkAMv5vE8UGGe9em+5nJ8z+1yA/ISh7x9yZVGXrJudZRQgTRUL\nKXmV0wgpBwsfh1jf9Ot+llFzOWu5WxgH1IPVqrsJ0RMdIuRDmLKARGD/gRcc\nvxm3NOyKDWO6I11FGfDw+I2qsyX0FSxG+ndKtoheo3GS9PBP4bo8WCKjZxul\n/zx16xr1ERXG9SI2ChwMnSCk8AwhsnPeynODNS6JDj/6irdpfodGjXeuzSBx\n9LUe\r\n=nOwj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1cce57afe783f6d0ee960b6d55080fccc7424cb6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.8a299b568.0","@material/tab":"6.0.0-canary.8a299b568.0","@material/base":"6.0.0-canary.8a299b568.0","@material/animation":"6.0.0-canary.8a299b568.0","@material/feature-targeting":"6.0.0-canary.8a299b568.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.8a299b568.0_1586990654966_0.9722384817188059","host":"s3://npm-registry-packages"}},"6.0.0-canary.490fbdc09.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.490fbdc09.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.490fbdc09.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":"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":"a20ef26242b72e8dbc074e9083c598ce28e5d118","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.490fbdc09.0.tgz","fileCount":52,"integrity":"sha512-8sKk33aaPQ5ZON5mSHJbzdQxADU96/+OchNU9XN559abKoChYC6FrA2tvfBPHFh1itm3lNv87ksPSs3TpQr63g==","signatures":[{"sig":"MEYCIQDf+x4TsGWkhP93XSWnBJ2Oq6PTjnyMgJUzoI4I38/FyQIhALROtKvy5/XnSPScnggGPoRbyy2dGAYqywDAjx0bRkat","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJel/SICRA9TVsSAnZWagAAk9YP/0w/flL4AJ6KKQT+8XYM\nlW9xsARaN8g2SowQm9wpGQXjSG8tQ8Ni1Ccd8/cKlpxuCGgpLVx6ZY8UM5L3\narVMfJgQLoIOwYSTrBK9ZhhL/qA+fpxogqvTdAf25NztD8PFw4gxzppDyIK8\n0ii5sGDf2KvsOUbAkpgsItuSZae7vT3Qi0FbxVZ87P2bVr+4sIpnlIl0Gr3N\nztY2Rqig5DCvx/JlF8j4FY9efYTUntQs5XEnLN5o+9+3/CIhLGr99ltARjr4\nyn3n5r2COnggj9tULM0lCUST4Rcw6VH/xCBUXvc9qQk0imeg/+UYa1R7LCL8\nUYBQT0mI/D4U1Hed4emiB/XDrM0M6yVd59bjOg0QWfioXlC0yUx3GMoNSU+u\nOyt5NM8S7lC0B42/q/TkFVz0aZpJMHN/oTo3IxRdGmkQ/tWTzN4fXAg7uVBL\nkLZntgc9wHOnhylBu7ae5DM30vl+xorcAg4EkBmRK2FL3Lfy3S7/kHmSZS9z\nP7ckXCx5ZZ+McLbHcOki1Zvaga4w9IqycX87YZIQENTzcSeBKAGTwMVX/qRg\nNHHKLzFTqsXTEov3S95B8TPED1c5UQvje1rdbYVp3OlkI03UOQxTsKojV5IE\n8hDLkkQoidNCFoQvx5cJGqvE4Lu+7XV8NBNFcY1Xdx+ozSzepJnA7cC0p+Sh\nIesb\r\n=8ar8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"20bba7dcc3290528bf225184ac976a3b486ccc00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.490fbdc09.0","@material/tab":"6.0.0-canary.490fbdc09.0","@material/base":"6.0.0-canary.490fbdc09.0","@material/animation":"6.0.0-canary.490fbdc09.0","@material/feature-targeting":"6.0.0-canary.490fbdc09.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.490fbdc09.0_1587016839807_0.5837277571004307","host":"s3://npm-registry-packages"}},"6.0.0-canary.f838c6e55.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.f838c6e55.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.f838c6e55.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":"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":"15c838f6f103f515650ed563f506b02d200bcf54","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.f838c6e55.0.tgz","fileCount":52,"integrity":"sha512-IIKeOv4Ophb5bcTW+nWoqjDTwNawBjrIkFNQBJLzUTGH4nraxNVSnixwP8DiCHYxgiJiJyYuwxpkOcVvWNXGoQ==","signatures":[{"sig":"MEUCIAHJ45CreIlxEteco8OxnHcOiHHmlCh01bcLN9mmexwLAiEAsfrVHbDb+qvotmbHbOUCWLgymaGsgteW+y/yX0hGbnA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemGtoCRA9TVsSAnZWagAAUV8P/0Uo5Uyq4oDfiay9Qlel\n0y+hz4rsAapSsKx8y4OU1YLRtTisShTcGxyQ2d2L+Aq2bcMyykLw1GZ2MTTx\nO2AHmNFcOT05ks6GW3/QuffJ07gynq+GhzNWU4SowA6jFkTJ0plnfa55waLr\njhzi5yKCtnqtAmg/ng6kGxT7CHdr7L3tY1/mXjHU33DaEBedNqA6B19zx934\nBk5w4UEPOWVhlzblLQ8arJuxKcZWqP6SZPml25gjUP2AWRHUbcKK5OTFclBS\nXBjM6vAl0YacJo0BLpzl2qFJpliecAj55+JAUyf4VLND4gtZkoo129kTHyao\namz4Hv6xISCMSPpekw0eGc1r3ggwnq0/38keDvnrYad6yG1PESII/w9dUWjC\nMIv5EANhSoLwLtj6sNUjiLv/XzWdQNkXi6k102XffZk7GUTLD27/TR6evg5/\n7YcFlRPaP9lyuloc5A6HC5o/EB8sZ+XSfpAYumFIm35fGMoZJQiGLp0cFyxt\nr+OUOFN+gj2301yG3lcVifKJAuuechKnkAG5O4/CO02yekBUKzNtauktEmCz\nXYRqckm2YpMat2FAB5o/aXP45FV0+tZgy+QDxe/Af4DvktRotbQdnBF8kgUE\nEeQnCcFPyMHWdyj2XGSPrCv6Wrg7roaXd2OBJQjDIVGfva33jox5xbNaUawT\n6Doc\r\n=TwQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4088837a2a2d0b4af544090557a8266202e13a8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.f838c6e55.0","@material/tab":"6.0.0-canary.f838c6e55.0","@material/base":"6.0.0-canary.f838c6e55.0","@material/animation":"6.0.0-canary.f838c6e55.0","@material/feature-targeting":"6.0.0-canary.f838c6e55.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.f838c6e55.0_1587047272240_0.6630087447196431","host":"s3://npm-registry-packages"}},"6.0.0-canary.ce6cb7024.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.ce6cb7024.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.ce6cb7024.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":"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":"8f107bff2a52e26125f153cecf24938875c583e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.ce6cb7024.0.tgz","fileCount":52,"integrity":"sha512-c8Xo+i3uS+ptGbmAvuuBZqYna93kBD2VhYaXkA0u4fM3Oo02EwhQ5lzM2b88JMw30dEGVf7K0xM/6XT+AHpcfQ==","signatures":[{"sig":"MEQCIGt8t+F8mgaC5Qmduqx7nuekQ4aNqKY0x/WjKQ0TOqM2AiBxyeCNbpf1ys7MkjLguvrYXRXbGN2kiE3m49HybFzTGg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemJPLCRA9TVsSAnZWagAAXu4P/R4AUKZGHu6hxDVfWyrQ\nsnvqYS0i+21T3cl/kXHFi6Uy4Xdc9ai+7NrK0CuFefCl39A4m6C/g+CYBnxx\nPa0zbJ8qIF1+Bdr43PfUqsmyn+IgUxqV+L+UFoRfjQk9NvAWCnSPwTTZU8yG\n+5t0deUijTtNOW9vdzuY7tuq67jS86EPqT8T9zpV85jtEx6jQTANgF6SVLQw\nrGp83siUe7UPPAaXVUxhMfUxen2xWGlZ42KWMlKFywVhKE/Vub8wzQRTBLBi\nxTyPTmuPl/swEMivXqVbxrfvezWLMBnXeyCtukKAL+Swl0v28GrPKFuLSoCG\n6+/P4hhYOaO3LdCwJY1BM/VDXtdOI4vnx+5t8dXWwuxoMqNT/qts3De+nW6C\nQjPMbMKKUKuTfF/2biFdgICr0HMxHfkVbqhSp2CW+oTOZfx23wRsjOheXoZD\nFUmtyxUIYKqG2csguLUeEkCE0yVztzGA4TS5imKdiciyfuQ5vE1UMnScpWiK\nYse85zadBQaSyBdfCIoxi0WgG9A0n86WC6KUl7Pu+qdaZTG7Clcfl7pp3wV/\nY+E8+mcapU1cadk+8zz8eRUYBxvfP7k7TNZEeNgCfvOKDX+0ER/iALHCrJzb\noQgVsmEVw2QSsWYY/ZXOL/ZIbo+p4RLCONt3Cvfc3sO8NTDcuEjR0r04sWxS\nxu9e\r\n=Pf1M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"50c11d42dccdf93592bf97e9211f34d95983996a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ce6cb7024.0","@material/tab":"6.0.0-canary.ce6cb7024.0","@material/base":"6.0.0-canary.ce6cb7024.0","@material/animation":"6.0.0-canary.ce6cb7024.0","@material/feature-targeting":"6.0.0-canary.ce6cb7024.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.ce6cb7024.0_1587057611484_0.4182508342237492","host":"s3://npm-registry-packages"}},"6.0.0-canary.0ab62a65b.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.0ab62a65b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.0ab62a65b.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":"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":"8716d4b6f82537327ba7fdc6baff6762de1a185c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.0ab62a65b.0.tgz","fileCount":52,"integrity":"sha512-uDMyYS0IUNg4eh96ljl51htxNt/MC7JnPOlNnJzsV/zsRhLdTV5TpXHNoMs2DleSa6h+YrIA3PwPZkesFHhVaw==","signatures":[{"sig":"MEQCICebiZRrVUh8FbtzUsn1SOMyspKqYE4rrm9DbujLjpXMAiBgduumpr7PKNSCFC7+TcwH0ZcLnwSVcAetqbUL0FEpsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemKofCRA9TVsSAnZWagAAE78P/2QhBjmB2ljTxbLXqUlC\nujS6x9umPCXKTMSL07n2IOQpKaOqeqbckb1e5T/E/91NoPdwqUwzMG5A5+xH\nGHOPUaZl24RdxwFsrwmHydquoxP+Rood8HGB0NgdxKHy4OWF4kbe6GKBySC7\nEamEtHTwWVn3J/Abn6h/IZxhuWM+fjWEIXJAWPPDQzKXPWQMUkuocfyatapY\nLlVOTs7dxRpZO5XaGmEycyhQgmCUhVE9S5zGKHoSvLrdXQuWZqb3Ih2v1pna\nH2j0n8XWuqmNc8hI9Tz4MaMcExVxHinmDmLdRBVH5v/k4NmJRx3U2aao9YyQ\nxN7GS5T3bx+Nu9QT7ym0RmncMBAemwqKAWtwUteMnf7Tg7PDJ3pzSF2H2i3/\nza9RVjg+llbnjbsKl0RMpZoELUl7nippuh8SUZmkLKNryZ1jnNt5QhoXU1/M\nJtaWEpRS4OcUran3WahgPsmWKebEwYVb0y/Io9mTfO4QQPXOyjMtBWPegJsm\nGQzLus+Zuqkc3ZX7eV/8e/mg42K/mtdIQOQN2b8ke2UFQBFnYmLdIh5ITV86\nvnFDne4iRXO7vwVcyxybQt3HJXhLgpKwn+1MIevvA1I9vTpHnL5iVy9CPii1\ndkewPzTVUGafVx0LrAmSoiR3shhIYH//QJJ8FrAIckL6HhiVu4HB045u3fv4\npSJF\r\n=JkdC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f8890ca1119e1fc3b197f172b8273c05b5fba35d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.0ab62a65b.0","@material/tab":"6.0.0-canary.0ab62a65b.0","@material/base":"6.0.0-canary.0ab62a65b.0","@material/animation":"6.0.0-canary.0ab62a65b.0","@material/feature-targeting":"6.0.0-canary.0ab62a65b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.0ab62a65b.0_1587063326580_0.2532215969833782","host":"s3://npm-registry-packages"}},"6.0.0-canary.ca61b656f.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.ca61b656f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.ca61b656f.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":"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":"008cc8a9825a407e25701a9b5318e3d6c1d53357","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.ca61b656f.0.tgz","fileCount":52,"integrity":"sha512-Tvy21YQ27hUwhsxWH0uLr17Fsx9Ktx4xkv3hqTlNW4Eo2LxlxXFe7+Z1w2lZ2Abq6Vp7OeN/x7Hx20+fID+3+g==","signatures":[{"sig":"MEUCIQDwER/phvt0uhw+JWioWZxpE1iovDHl4IRaU6gAI50gMgIgYw68/kq2j1KenGqpHMCJgir+7a/gwcQ2BxA+Vz6b1nA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemLmGCRA9TVsSAnZWagAAdxAP/RhOBYvbkCimyUUVBVnJ\nq9931AlQe8pCDFClsmq1/FFZ2y18Oizx2k2HiGvmBon/AnIvjiGjRn4NLUc8\n6XmEDC0ZBl8VZRZvs4l2KjDFIzyty+x8o1MhKwJB+BZ/Znaz8rZWBje0AURl\nGNQs/9k7nQWP9lsF4yyHjW0sxOz3ni+MNhjMoV6Sbqe6L5Jv/7OnEQQNTln3\nKN7aiPqC528xoZRyIyhl3xIHTtGXCKj1wCH3zPBmTEOokJwiOe5fkK/2nG0H\nvy7DVV9WMX9wvcDv/NQnNXNtFN9BIk37Wxd7Tmbfh2Bkw5wLXItiAXcOE60Q\nQoKjx+zILtDn64U2cujDUPfIcoVXYvyHcVAIZ60xQUJQZ+l228h8g3jX78Xl\nXZzV7daRh5Hi350afwwExwDSqeb2SKg1UjeejqFDkJP5JxyZxHAy7fcG36wS\nuRG8U+DRO5+I1RrvxMkfIjLC5AzdLaxxmYRAxWo0IjhTD30WESrD+qC80eOe\nMtGdnh5VKrZSjQIRc+yeQqkSQpERA+XJb8cuUUguFNQ3X/wBqa+2pMpdcv7h\ndB4j+8RAMXW48njzca21b1e8Ao8ZKsXahqB5uUzUxdSqAw184LbsZmUfMp0z\nwoPR4lHFpcWxYgm4gPCjVNxAtYGPFgRKbyHqkOJBKe1T9RR4DrTgVtxGrp7Q\nfTEn\r\n=an3o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"967c93bd4843f43b3821bebc6113ab9c73533ac0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.ca61b656f.0","@material/tab":"6.0.0-canary.ca61b656f.0","@material/base":"6.0.0-canary.ca61b656f.0","@material/animation":"6.0.0-canary.ca61b656f.0","@material/feature-targeting":"6.0.0-canary.ca61b656f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.ca61b656f.0_1587067269652_0.4660618405050072","host":"s3://npm-registry-packages"}},"6.0.0-canary.45a6615e3.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.45a6615e3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.45a6615e3.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":"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":"6d8619752bd7128d4c83f8081c66bb67fd77f59d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.45a6615e3.0.tgz","fileCount":52,"integrity":"sha512-VL1GgE+SJPmC9TKUULDfaksNZ6nWYk6xjkgVOG2nfkKk7P++TJmLXfqJPVQIMRFExAZGxfNCvW+lEr/WOj9Umg==","signatures":[{"sig":"MEQCIE3PZIIsmJzWCEIWjk5ghv86iEkSJLYqr+h9h1nev4gIAiA7f9uWpllWtXgymeFVip+JqfTouVGf3PWZdQRCrhFADg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemMEwCRA9TVsSAnZWagAA55QP/3zJRjMLGXJQJhiax3uW\nu+m3Bt+/fVTcbwx+duFAGEdP7bio/5MLdJ9ykfvJeKntpYzQ9AV4zdzeV7Zd\nPB6CNPKQS0aX3UdEk8WwJqG4XCDTw+uTeJ/CfI/ihUbJuND44lLjfxiGLbQU\n7i5E6JTE0X1l3uPmtmqXACMDjZfbTrhbcVDYUdE0B+ZHcRDJAEZi/PiulBdR\nOrTIgGLdzh8VCQfMsR9Ke/1JjBfVlEkltjIXUabwaaE/4mzN5wGIpUcWuuX0\nf+g9T5JpyBOUBcpCsO0Mr9/FpK48l5lGWBChhyHJ0v4xvSCZZueMd+mCUbGq\n4+s2XEDJO+vAd6Icm1IR9Li7jNIsbE1iKJhcoaBsI10Mf0J8Q37bUMeqfgV0\nfPmvsb6elngj7civIcgDKNOfXQnWldeds5vIRKs+oxhKr91hw+LOf423Fryy\nj9IgYr7RCf7HjyIvR+07XjgFUK2xgv6kfPvZpffqOm6pK24lIivtRvEi7Yqn\n3yGdCpN23/tEk5EFwR/FvhUjgqZuj+ceCtLRt2F6ZIsCTOUR5fgzGyIjDiD0\nPe9G66Zh++H5IxUh+hoQetSxP4S4tv4q637MEs21NB6ERGoMZ5zMxfvqwjJf\nS6/kmaKb/eT32TiCGt4XGtQ5lZkSBMLtqAUOt5CaYMeQCsZf3G94Uc90PacW\nxmxC\r\n=XU37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0ad3ae693731b43b2c055b2fd649a42e03abd2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.45a6615e3.0","@material/tab":"6.0.0-canary.45a6615e3.0","@material/base":"6.0.0-canary.45a6615e3.0","@material/animation":"6.0.0-canary.45a6615e3.0","@material/feature-targeting":"6.0.0-canary.45a6615e3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.45a6615e3.0_1587069232444_0.5581872615515562","host":"s3://npm-registry-packages"}},"6.0.0-canary.4b04cdb0f.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.4b04cdb0f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.4b04cdb0f.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":"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":"067592697fd2a59402ca105208293f96707e9eca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.4b04cdb0f.0.tgz","fileCount":52,"integrity":"sha512-jcmxzlspqIkqaSHesyV+0EQp/Euzvx0YfqPRaY5jq6eFAfdsOikzht2GSIiIpsyWL0d9brmB8ZCEd2Jh4ZWUmA==","signatures":[{"sig":"MEYCIQCyOqn7pQrgHj05F53hx5RSfzcfO+Ao1mnM4KikRV5EswIhAKTkqToAlBEErOyLaKkcFZKK10heHk3y7BW6QVQ9VxFB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemep8CRA9TVsSAnZWagAAtLgP+QHuc0k/zW5QEsTsCTv+\ne0PTZLgd7XG/gyWKCnhpIUTGeF6NogsJuEZx3MQgfqc9wXL6RAiFAkm2Su62\nUUdBkBGU8riKOo1O4ebPS989kYuM9619/Dax4H1LsiwVmzAkwzTCgtSioga/\nmsH6P9mMSCeaB0GxkeBhyBSRFvsaFsGwLx5CqB2VsNd34pzUk3Yjo4Sr2eg8\n4g+N+NFNITjU3cZA9mD/BQgKaJOgRYpVS/4j6JJ1pG7EJ5vZM58M9X6YB0o0\nDjg410qkGB6PPCWM9aag1GIJ1eqsfXWq7kokOer0WJsX7fB7JLSgM86o0TFb\nswdGmPqRXfrALaoVxd3A1wY9nINC+2yQ5b4KSeNzCPgHTMDyu4DkISUKaOQH\neOuHzAVG7nwjvgBU6RryTle1i2u1BYwe54Z0lJm4ky009WoFphiV6kbN9ox8\neYh4jygXMPH1U8qjc363lbonV1+uWBZtgD6C/nTrk9puYOwWO4wi8K5sGQbh\nr1z+QtqLrYHDMHkYcqvNNfPZPjzi3ZgPrZmoeI9Gw45JPe5/2189wnBtgKgG\npiP8IUUNZUHwcdC2PHc38KH6Z/Umt6OpD7EX6BHxIpkhochElFW1H4/XSBfq\ngWl233tVoY6qrjkSXq1AjQ1PeNBzn0fCn5wkEyOCRNzWdVCGzKgf3LGwGi/b\ngJAF\r\n=Ub3v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bedcd48d2eb94c37211fc93847852f5261655559","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.4b04cdb0f.0","@material/tab":"6.0.0-canary.4b04cdb0f.0","@material/base":"6.0.0-canary.4b04cdb0f.0","@material/animation":"6.0.0-canary.4b04cdb0f.0","@material/feature-targeting":"6.0.0-canary.4b04cdb0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.4b04cdb0f.0_1587145339656_0.19633239497050914","host":"s3://npm-registry-packages"}},"6.0.0-canary.b273afa93.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.b273afa93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.b273afa93.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":"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":"23d12df986717d1537c799df0cf518375bb77802","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.b273afa93.0.tgz","fileCount":52,"integrity":"sha512-mF9ZObEduD2twsTJxuOnvN1C09BrfkUE2eL8y0wuVO1iYm5Z754MFM/D6Ho3WDd4cCCrUgEPZ4+/+aGZy85sug==","signatures":[{"sig":"MEYCIQCpbzWFcSyMYyofAoDluY9SSk2qCaUMllmY97LDlnXm9QIhAPFOBkOiEciLT1oyd6VI8QydhmevULV5uCAalfh6rGrP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjXaCRA9TVsSAnZWagAAjPYQAKA5Yr8hOr2ixJA+wke3\n0PbeEBAsWX1abNa78ZOWM+lIlS5yEy496oiuIFu1Zh7wwu9+7HtyBjZgTJaT\n2JNEx1c9E4K3TfnWPd2S5qaMX5iSnII38dJx3xpWLsoLMS5oquLMm2b6gcNl\nZjvm6cUKkwlKm2p3I6KvIXb/AYdiwB80uUP1rnG2H4IiygvOQgDo3h/ehM9I\n+mIOG3/Rwa18NA7+RwLPcSzM1QHFO5Ul6xwCCfXbnbfw/97S8ok/k4E7sE7N\nDNTI1gtc7SgDv7M8aJFLTo+Jo5foWVUCAKe4ruPx5mz+C9MI/6O1K+tbppJ8\n4JxFFQ3s/RsrWZ5Ejwra8mik3UdzZs6QlAexl15MWj3ENbEcXCT5uR7oBiVX\nLxL4DnNoaLU3+lp0EaMS7AoK50p8kKtykv6VJy7pfN1q4RpuhVH1jZFSS+QO\n4JQRmZNCTNMN7e273wtDAhGertHGSk2V2GQ6bBh+fEy6JWBlJ/c3vH2oJ3Xe\nwvVGjMiOCrLkeHapYm+PvD2oFEU8gzx4yCIZq+huv3h2NcDbsD6Wq/sLElrF\n7WZVIaEPa1YWZyEwfuJI0rYPj54MzUmHrWozq85GqzqT5Ow7m1focwCEGSJF\nl/+RP8FNLpENgnn8At5Ss0onfm5MmtyZnUbdVpg7ZNRp/QGOF/v7KRWLKnOj\nIxHD\r\n=nLSQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"446d7bb0e65fdc3259b7b9025c6c058731ff02c6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b273afa93.0","@material/tab":"6.0.0-canary.b273afa93.0","@material/base":"6.0.0-canary.b273afa93.0","@material/animation":"6.0.0-canary.b273afa93.0","@material/feature-targeting":"6.0.0-canary.b273afa93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.b273afa93.0_1587164634340_0.21736762754977157","host":"s3://npm-registry-packages"}},"6.0.0-canary.b70bc601e.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.b70bc601e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.b70bc601e.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":"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":"3596a2705e2a460f569bd55bbc6d339b66112469","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.b70bc601e.0.tgz","fileCount":52,"integrity":"sha512-XMwF211GD3SX6q5Fcw83BbrXFTDPsWjQOITwUnQ6HjZFcij5DuUmGqW/ti4D25BVF9BhQDY90NG8eE5sONqMbw==","signatures":[{"sig":"MEYCIQDune6Ti1SqNDgYXxPBpX8B+pJSXtxsK06wJsO+gyAjwQIhAI1Bgiw2IXJCCZgtpi6pikcyBa6Hx08uoJ2/qrzSyWg9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemjo5CRA9TVsSAnZWagAAyhcP+gOg8+lrTKAT9iZyNBwV\n1BsVtN1sfIZNPcud98cQK/E5oasNzuPkJPf+nq0OljBbALCoMs9MLHG5O0LO\nZcds/Xhu2ndBe2PGM1LesUXeE6NzYbr5/x5gNqmZadPpYi4UsVUgUsO1lzlE\ngo1DX3Vs9OsnHyUCsvWmgtAFKnMNPez95msoqp3hKJEPxhd7zFMiSrt091UZ\nROOzARhCLQqWrh9ledu/L7ckYXeCD6ubOWGagKbtdSGzq20gNIpito7bE/MI\n+b6HrWqe8E/2dGoF/8PS/P+ayhyEZLYFOsYJjikiRUC6JFFeZ5wChU5zWJzH\nnrm76oLZCiY90C3zQkzSyLXeJ+UgOw6T6Y+2rdieY2bShCTxAb/M2BrC1AE9\nafLFTegwSQZ2cBylyiv4y64Kb3DsfGDrZXQvYb379KeNXZdNEGa67AvQt9rB\nyhTukakZHF8n/yaFqHdil9pd6K51WZLP7PVqeFAZAgFjXeImGJpS69rg7XVg\nM8LWSnF6ksd1w1Vx/7Sj0zYNK0yzw6mlxDRS13JRox1ws6fbvIfSZtsSarmM\nw1PSU8EUj4VULtzNgheUxS6avsB2UO8v7WRZCJMpcIaAt/3AAvibL9d9cwjK\ngjhwHdxfQ759R/NhOW9RjMfooMqRvEVk3VQ71pPxmebFZzI243kx8JJkPhfB\n380c\r\n=mnUG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"90c3468e59a65aab424bb59d4e91a4d522fca3d3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.b70bc601e.0","@material/tab":"6.0.0-canary.b70bc601e.0","@material/base":"6.0.0-canary.b70bc601e.0","@material/animation":"6.0.0-canary.b70bc601e.0","@material/feature-targeting":"6.0.0-canary.b70bc601e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.b70bc601e.0_1587165752507_0.9529921680939069","host":"s3://npm-registry-packages"}},"6.0.0-canary.c4b4bba96.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.c4b4bba96.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.c4b4bba96.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":"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":"b6481ec8f6bb8358f3d068c3d66504e2ecc741b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.c4b4bba96.0.tgz","fileCount":52,"integrity":"sha512-jo5NzsjUxjn6cO+y+4cHx870011KGhDrkWza5iFNUteKPGr9ulBcJMjFGEIOuvPSlrKxFORAFMjwnrbBKNZKyw==","signatures":[{"sig":"MEUCIElxn80rJdusaIlsbmKoJhpcZFsrtL1g1XZ70aTK4L/1AiEA2iz6bhAevCRdH4flPk/4usEsRNyMBMy0S6MOYGJ36tg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJemkdwCRA9TVsSAnZWagAA77UQAJpAtrD6sCs2yZlT7jq3\nj4VfKcROPehM/CUJmJTEqTYLnYVtAmRqYyF+1fot+UUO4KKYftS7obFl0RAI\nMZ134kZjrSoFVvY9ACwC5np51fYNhxTIGy0t5bYizksPR9R0hAQiPljm9v1n\nBXsDyrTggX0AdNZdy/X7dTY1IaAFT5W2oyG1UoYK7yKmW42HQGWLkPr3vZ33\n/cO8Ex5JoUei1T2U5oHfNsjGshXqwyUDur/BJ8MJgXXosVIoFlR12DCmHkMG\n/DSy1TFbJfKqqzL/YTSLWBhvK2TBMx3BJ4xamIrvVB0nezrjVadVInwRGpVu\nhXlyt5ym8q7mlSQTnT/5eSSKb6O7yDPCnCpKRMSHhtO2LKpyHoK1GzpidiNJ\n+PgT2L4lVbXrqaVXCDxlH87IuywkKwWp9pQnYXXjb8g1nm/qiIltcQywLRn2\nIlZhAA4zNl9V5/91H1WApbPHmOX23st0Ao4T4uAu5xGF5hZsx7kydEoMGaee\nMLR0N6LFkhV1wWpEz/WzWZuEk++a9N/qP7zFZnWGkNT44z/WLJ5ESGDVAvk1\nut4nHbSA/KHRA2ByeC8FPtXmHEKe7/KT/AZ3jjjIMVTou4fVMrP65OYyZTWo\n+FsjCaw6FHrHVnyykhgCCJQkCHdbMi3C6Il/vw2ys8BhS4k6jGvw5E8tQyJT\nNLnS\r\n=503q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ee02a718dbd2e86f9ea056b6199c1664c5abe70c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c4b4bba96.0","@material/tab":"6.0.0-canary.c4b4bba96.0","@material/base":"6.0.0-canary.c4b4bba96.0","@material/animation":"6.0.0-canary.c4b4bba96.0","@material/feature-targeting":"6.0.0-canary.c4b4bba96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.c4b4bba96.0_1587169135883_0.264855426235717","host":"s3://npm-registry-packages"}},"6.0.0-canary.6c1ebc721.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.6c1ebc721.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.6c1ebc721.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":"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":"78497744aa692af0355903f60ffc1bf0bf2f189c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.6c1ebc721.0.tgz","fileCount":52,"integrity":"sha512-KEaeOxNovL8+YPwo+zSTtFCTUqsrz1Fremk8A54wSRofockWCVNU+ICAQMkrt3VR4gwk4Ft8smuQQe70pvLRqg==","signatures":[{"sig":"MEUCICQuiexpDDaVnWkZuMRKgiygSUia/XH64R7sCjIcrDRGAiEAtmgOn8ixYrXorui2dP+kk/98UplswoEa40ByZIIaWvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenf8dCRA9TVsSAnZWagAA99QP/jqTb6kEJeHuO87xLEio\nu2UuqYIAmlKEKwRPTaa8EU1TApBnTLMwVEuDeERBGjX0bVvJoqkPtn7YrK8C\nTQB9uU7X3YIq5QlZw+LMhLgOVqnTvPk2HFmobVNG3K+Uo8W6HWTqXg5Bs3Hb\nCvbmb8xL/s99xofJeE7ebVxiUyrglqW+oL1zQoiLi0P2xMXUxynA/h3UBmXi\nafCv3HTeX79oirsvXlhR3r+x3kggNxEUKEMC8hOTc39Fx35FlvJFqB6Svhue\nsuhtxbKht49M1jz6aOgJsTqWeyrCO25r2biPzK0ttjig/cgWkFpq5vZ/mcvO\nzx0rzPvuxC/ui4jmlD91eMyVy2wdPwr50L7TZQz/SOr6o7sKqBkCbI5YLfE7\nce/tWdu1UVtTANU11gVhEPq3+WpG2d6iHIe8zrdJWL5bNbdutpPrH08Xd99Z\nN8Eay8HAlozgQTU5YZZR1dgbKqwdbkzw8fet24WmOo/R67zHnezdncgS/BSn\nJh4mEbmfQRm9rxPKQTpzh0+ZI93yXHUxetpSds7KTNJavDgWp8mpdLy8KB/S\nmM9wHVdStU/UGZ3k6dUFSB3rQ3KVg3anLbMuDRESw9OyalkWdw2TgHbZJ+qB\nxHYAO3rXxLWguawZWAmxnFYvDqPMp+EW9xkGxCD8wj8rSavBRdMOlnzLSU2X\nXM/z\r\n=Sk87\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b1a71b1e525edb460d6fa48e392b09267db9d2a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.6c1ebc721.0","@material/tab":"6.0.0-canary.6c1ebc721.0","@material/base":"6.0.0-canary.6c1ebc721.0","@material/animation":"6.0.0-canary.6c1ebc721.0","@material/feature-targeting":"6.0.0-canary.6c1ebc721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.6c1ebc721.0_1587412765040_0.9425249562738232","host":"s3://npm-registry-packages"}},"6.0.0-canary.9cff4318f.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.9cff4318f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.9cff4318f.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":"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":"ad54273e6611e2abb3cb0a40cc6482916bf77568","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.9cff4318f.0.tgz","fileCount":52,"integrity":"sha512-Gxv6HWXERgZpI2Jx0qnWnlVfxXzzC9yCBoIY+/i8dHkea6x+8pGdDNmaGWQlxsID/QTjfxHyiocFGQlDUvL2Aw==","signatures":[{"sig":"MEYCIQC0lk96QyN7xyYrOL16U83eWrtdi+Qd9ih7wyanLxL5eAIhAOVX5LUItAh/yUYI6xzXTM2PdCveMK8Pz7IGYSUJ1aC0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJengyfCRA9TVsSAnZWagAAiusP/0G3soxb8VJNmQZx5Mqu\nHW704YwEB78l83siBGbbkT2X7TdGjeHTGMRh/H8DicEddNftIOkOuVB8FzHd\nKCnBiM9NzPQaOpnaImITI5SudYH29/L4WmNeK2H3QfSjORchY8BRl6fyb2k1\n19Di6ub+V7f4BuJ1hB+cYZqCeff8Kz8wTteCb8Cgzg2XwzOOq2NYNPfB45gW\nqi+uOeXJM8bWnJ3+rXszNPFTQ8x02ecOaFvk4sI+OvFaTH0x5vYDBS6ySVte\ni3Gv5kcxF44i4OJSdSl+mofD0MjoqeAH/cOLoQeyFD1Yt3t7Z46gaMA+yeui\n0dk6MAuhDpU3ZpHGQcspvtEV8jH4AEQyBBd6FzYJORbAsA5l7WfwcPHLAZji\naD965lOMKMkZoH3S3YxAlTmw8uFsOG1Ckp4yZVCbe0jp9Swmr6lg+jWd7xts\nDXX1bRy1WJQUN+RWnPR7bR0xQBYRtNvjsp+yYGNEyUTLYU+FUI3xD40vGZUi\nfScqp72O8kgDuwv6ELvePThnX7ju3UCo/qKu+rLsdxTaqwxelmg/QrlnyXn8\nkzAg1dehPHW/rT9oKaJpoiV6ko7BhKb580FmyZXucJU2/YOJEvJ3VltWBn1r\nZLSFO5Trcce932QdOaAtiyL0oQ3q8nfoa2qbaVUe0j7GWr4JXtQgqWK0h2v1\nAnAy\r\n=ZUqO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0ff1f177754c259b5b0021494616e96f7b6e0d8d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.9cff4318f.0","@material/tab":"6.0.0-canary.9cff4318f.0","@material/base":"6.0.0-canary.9cff4318f.0","@material/animation":"6.0.0-canary.9cff4318f.0","@material/feature-targeting":"6.0.0-canary.9cff4318f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.9cff4318f.0_1587416222827_0.7800006586238752","host":"s3://npm-registry-packages"}},"6.0.0-canary.7b4482402.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.7b4482402.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.7b4482402.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":"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":"dbe820c6eefd539cac95afe348d54f5b2dc8cfea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.7b4482402.0.tgz","fileCount":52,"integrity":"sha512-Olnrm1nAuB7eZGXKkDzoCNAaXUlLXOW2LIF9yUbtF6fDj57yRnxGxfpu6seIO02uN1WWBNOikZ3K3GShDJVvgA==","signatures":[{"sig":"MEQCIAmsdtd3R7Ha5VMA28UxidzEw0QTV2LhGGeXBUcnuZg9AiAUdpFzrDhqoGlc7OrD+YqNES2fS7MvM+/JaH9mLYKMQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeniBfCRA9TVsSAnZWagAAtZ0QAI3MQ/z9UYJjoFAT9EDy\n1SMVXYmkf6+8Idy8PVVECSpSKgxg+o5FrXnUx6xPNRsQEgU9l2cCssGDL1So\nGdn+mq2PribV0ZvR4/oL+tKQDlf2GmYfnUBPeFMTyYB2Es7HJtvlz8LTUZqy\nj0VmEQxPAnh1GVo7QKa7JuMIQoZRSJ5uBq6bUjrnplrG9FavKEc+pWK2k9FA\nesNth4O9BFC6MxrS6eO23GZkwgmuKvLV6x89QjZhFZSPGzGQLGE+rY0gZQyB\nTKoPzbig7IHfAeNlozqRjaL/8lsu/lzjksDDpYb6DSD5AR0tpAEBmZHxuc1x\nA4YZiwBXH2PPfx6AJNJ/Pjv0vxrbAnQuNDO1kgruPcMKPT5vkxEVvnLkslRo\nikHhGtnfak65Gu8T5lhAtgusSydt8UNnWSP4IHrrWa6XWMKzwn8rjA3SFcaR\njx5M2B4jdXBjXyz2OV6JmDR+GnmMebIBLMTNqRZJACuV4RWw4R/6Pi+0BAS3\nDC7pJgtvl5upllMCgxxVMNfqn2al87eqN6mAKX7PeKKVBb3UxMzFG7+505Ca\n/eXxI9eOxrb5UfkdfkXfzblkf9wtTJEddMEpX7NBo4l3CVWbTGSJXbu4NwhU\nR++vyl0877ptk1eidS3gCSMscxKCMz7JLfXONhVVM82SEZPu6+bDUKoVs6Ml\nHXke\r\n=IPRe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c25f7586d29e2c5a6d3c289197d47b826d499cdf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.7b4482402.0","@material/tab":"6.0.0-canary.7b4482402.0","@material/base":"6.0.0-canary.7b4482402.0","@material/animation":"6.0.0-canary.7b4482402.0","@material/feature-targeting":"6.0.0-canary.7b4482402.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.7b4482402.0_1587421279444_0.3920763102648339","host":"s3://npm-registry-packages"}},"6.0.0-canary.deda86d8c.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.deda86d8c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.deda86d8c.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":"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":"8aa6fd1fc92bd917bec23d3f15889dd11fecfe31","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.deda86d8c.0.tgz","fileCount":52,"integrity":"sha512-AT8aDuoq2PGShkD9Qxz+fxcmWtczx0k5wmd8RjO4HctzInIz+jB0iV8nVNGTrcIxeQ/kaMypRBqxPtHRQXCWJg==","signatures":[{"sig":"MEQCIE9JRwEOj3YpYGv3zgv8bJbjaiPCBqRv1fFm5bTnnU7bAiAPQg9y5zRmHKPxuyk5WCrmxlm92PKxCBjmsouaY1W5CA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenklPCRA9TVsSAnZWagAA1wwP/3zr21HR74ZYS92i5jKw\nhtBTDNeRGandn/0+UKcDI2l7mWtlNCYNOfoulXSn0y9fS2k/u0m0WXyAG+p4\nMw7VjuYmbr/H0HP1UhMmdHTZqAb59FEPgg8aexot0YYqncZcMIGBJwGcMKrc\nw1IeNYDkoYD29NTg9/pYHvCif6BkxgaU4TkrZLflXQQ9jaZIVfT4ca/zo8fS\nq0ydH33Qz9UP7IJe/y61L6Lso8ziq2PpLoLuAYqQyD9rBu4cA6KsbSxCuhWp\nEWl0lrZeFIVcLr1gKEkX405g8dJ8BfA/WTzuJrsW3wpqoEQZ35rKigEnkqrG\nrIg6tkoDOyKhCS745AslyAi30APS5hcvhaRnL1Cs4HjF8EozC2bkYBdJDBhD\nksJO2OX7EQzMQt7DNSWfX9wBqQT6MFD0B7qpPj9PWPX9p+zXbYyhTiuA4A50\nPQ8qA6RolH9a2lm7IzmS0B//3PhRda+/lbjhbMjXGYAm+BjyKYfTsvGSEB5d\naNKFzNwjVIC+pfDlhQ2GVthqgsCg3TfIkDuRfWbGHGqmvkkrMtdTufSjxApK\nMf5ZBdEiwiTrP4VXiSFuDrxkzkIBN86zkbArHgNChZxAGd1TI8fMwgf/FdpX\nUmV+TLAh2rRU7c6pt+T1o5ChQGZAT1V4DCx8Zbf3O6kJkgG1XAyvcpijMYF2\nEdvm\r\n=iBrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7bea6ac56136246274e77c281cf8c66e2ef3e6ca","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.deda86d8c.0","@material/tab":"6.0.0-canary.deda86d8c.0","@material/base":"6.0.0-canary.deda86d8c.0","@material/animation":"6.0.0-canary.deda86d8c.0","@material/feature-targeting":"6.0.0-canary.deda86d8c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.deda86d8c.0_1587431758746_0.6035644993335292","host":"s3://npm-registry-packages"}},"6.0.0-canary.d10412cb2.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.d10412cb2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.d10412cb2.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":"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":"02a626af07b2d765a9f176c21ab3653cf98a7a27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.d10412cb2.0.tgz","fileCount":52,"integrity":"sha512-/3s3S5v2rR8yeCONynCASuugqNhCOdAXqmmPAsYbrSNr4ERJm7RakY9ELdkYX4MxVadRbxvs9R9AFo3T1NT1bg==","signatures":[{"sig":"MEYCIQCLrUf92ZbpGnOCnlqOn72EylfPVYVuc+o3+DHAYVtYsAIhAMCgz2fnsaWOmNVpzKxkqp8kmsuDP4pqIHGButhoV3ub","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJenzk5CRA9TVsSAnZWagAAYEoP/0/V9QPu6L2j6N0Sl2tO\nd8F+FuPnTL2hz+6li0mNl8bOCYFR99P8TKYhdFThEmdHMEe557N6h/jtbe6j\nuDrTRJPYg2sUemsN0oIDMB/g/bzE/KFnGipUG4esAchyyfVaQxQqhV43CX5/\nuJD59as3yn1hd3IYMF9rOEadX62Kf+wREhzc9OqZEhPQBqkh9zFoG7Qpw5oV\n3bcy+4Mm5MwiJAH8Vjlg0pP39dVw5MI720sD25PHALTjgsbzK78VJm0RtTEz\n8Ghvizhx2Bty02M3UlVsEe9KiXHpxCApeRB7GSZ3sjbZZzN0YKUcnjGRL7aB\ny+KiaYI5uciFWL/A80KoLr3bzYFFHeUb9FueCWsqDb2Kd0mYaacrVZECHNzb\nv964mLajUOb0Kte8l2vbUoy8ixka1XbsIn5gKRdDVoqymmbAGEPl+HTdTxpE\n6im0PcJotReelB5UVjwKL+HsqopStdT1EMZwoORbXvijY7OKQInWYxfzCiVj\nbIEoDEY/dY0a5dIb2VQIg7bEiZZoWrA4JS6eKYX6SOmgdBSV7dgMrmf8QrpL\n9vAmhakHzmZJIGjeVWN2lvVAf4v44fldGQEVhEe6M01LTzVYLdP4Nyhsi4SC\nCd+zO+Pg7GNUOETsXkruekVLbSEXuxKZCpOLDAzcvnQ340Qotft/PrqI7aaf\nVFwg\r\n=8964\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a2946b5762e597bce2d8e4e72f321bf4934e4543","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.d10412cb2.0","@material/tab":"6.0.0-canary.d10412cb2.0","@material/base":"6.0.0-canary.d10412cb2.0","@material/animation":"6.0.0-canary.d10412cb2.0","@material/feature-targeting":"6.0.0-canary.d10412cb2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.d10412cb2.0_1587493177410_0.8823221566077517","host":"s3://npm-registry-packages"}},"6.0.0-canary.c141801d5.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.c141801d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.c141801d5.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":"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":"27f66de9cfb0a55fc2561cee3a86fc1320c295e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.c141801d5.0.tgz","fileCount":52,"integrity":"sha512-/p/zWS28cxgu2zz+tHjMnIIfLShVEQbG1s/KgPoa7BCmvxoMkQmnvT2cTJBTSmUluxLjfAn1otyE65TSwsbSxQ==","signatures":[{"sig":"MEUCIE4n7nmEs527HvCxpQZIPop/GItodR0Yfw+dKDJWt+4iAiEAmVV15AbmUgx8qOmTVHs/R8ycc8eOTiiHzfoyYnsBCOk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJen0zWCRA9TVsSAnZWagAAO3oQAIJDmCRsAjTSDzqbJd9F\nf4rjH/J4xK5sz8/ZWRgBemAFwXtjXc5l4U2my6YEFP8g2pFzROfvxqOyYRms\nBM7Iz/KEyusgvcOtPDPwWMISusxsGJeqduIF2YI6ropkfR8LnSZdgJhXqQUj\no7L6HhOpSYpwPSnTRQw1CAaumRrnAwv65vUbx8JUycoEuZiIwSuInUhBxCV2\n4E/RTbnKROYom5VesbtZxrXWnxVuN06d1Vr86bjSk2+usxdNjxx1MgYLtTKI\nXOZpodYiAmjNJuihAPsi0hynPxgNCVnhZBfMMeKF9qhejWUmeGkvHuNwNVzN\nZXjWS/VsiFN5r+Ym22fU1GkaUqkP0xonhjYU/kgp/R6gpc/45Il/o45gBH4I\nG+w5AdcUkQBD0G0xqMg8u9zIu7BF9hoaxdTKPtra9x5pdBfp1zorGANasH+y\n2W8oZpx1z91Vn3VeRIh8rXiTege6xNjoh4rH+D5+r5Q5eKkM04wIu26X2ILb\na/VRIS3M7lGWs8Jk+tWyUwYXlhmlwHhQPXWngebgXheeusPq0pSdJaUTxFBO\nsoah0M6hEdtRiWRgXZb505vOGeY8HRMDyNBJEjPlLwGGf2M+X5qLi1D9YuE5\nID60tVAD9MvU43yHdOzgZEJTQi+rMlIavTLPMzuloxHFpAhTwKme48To4V2r\ntLhn\r\n=7wqc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d026173e9bf7440b69f1e3e7e4c1bd60dc5ce6b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.c141801d5.0","@material/tab":"6.0.0-canary.c141801d5.0","@material/base":"6.0.0-canary.c141801d5.0","@material/animation":"6.0.0-canary.c141801d5.0","@material/feature-targeting":"6.0.0-canary.c141801d5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.c141801d5.0_1587498197857_0.3956440718046943","host":"s3://npm-registry-packages"}},"6.0.0-canary.28d10a96e.0":{"name":"@material/tab-scroller","version":"6.0.0-canary.28d10a96e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.0-canary.28d10a96e.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":"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":"b16a9225cf992f9a3ea3094768a4f4a8e4a8d00c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0-canary.28d10a96e.0.tgz","fileCount":52,"integrity":"sha512-KFe+hYzqWIt4zyqJiHN+5jkpIOSeWGdfBXe5gzvEaaomCURnq0yVWalQYngZszWMF5tesbS4CwLkNziEpphNmA==","signatures":[{"sig":"MEUCIQDKtP5dm2bOjIlrsskZcMQFNDWB+njABuZ5EB/XLXOI6AIgayA5e67chU5P6gxIqlUJcIht2dWWUgNR3dfG0NLtmX8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoMBXCRA9TVsSAnZWagAAm9kP/3Eva3EdncODIuW7OJL+\nDQjznpxoXRpY7NNUjkgXg/Uan6qpNCbpBLvD1k8CsK1y8HYn8h0/dRamaZ6D\nz5FZcBv6y/EAfsfCo40qv0/NznlvOLrUQQKK3YXdNjl3Y42rtcJ0wrCoStR4\nVv3WJub8QRG3wnX6vrMJjXvlrb1dEo73OMgVnr656f9Iy09/m/2s18LjCOGX\n1c5eI+ESIODnylp5Tn8Xyqt2WWnp/GeVufx33iACImF2THFPYGASDUTvV3GJ\nq3lTZda4mrTiD+iXoMCOfwQ8/2NfA6PiIXJz/8tqZgWsXm3ERJmYc4owaUQg\nhZWd3x7IM+8uJHX9roETr5mx69ny+T94J55wYeEpGCH10BVnVOBQGEgGXt7T\neor4hHI+sfOPNagzo3zhbRq4nuWswWnUWRUYIpn+29GnAIhbQoQ8BvP9Vfc/\nmBIzFVr/1bdB6b0RPGLFkTxFiakrIe5hSWAvMaBuSY5CY3oNDk3Y0n6rjEhM\nhFBu2qkx9jnYI28Y70cEs0t9yN+r+55Mw9kMKa8gUQZmgDZuXdh20sQ3nFds\nYeW9BMtly4jQMT4INBCt9k03rtBX4Ct89eWrdLkipHrBzRQSJhx+3o9+GL/h\ngh35LXtSHfSEeVUAnxvCcths2hKnDEg50iuBzTQw7JpHxNlO3o0PRxEvox+0\nz3RK\r\n=lvhs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"20feb77e4dc8d7c73f3549e0dfea4b381106b061","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"6.0.0-canary.28d10a96e.0","@material/tab":"6.0.0-canary.28d10a96e.0","@material/base":"6.0.0-canary.28d10a96e.0","@material/animation":"6.0.0-canary.28d10a96e.0","@material/feature-targeting":"6.0.0-canary.28d10a96e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0-canary.28d10a96e.0_1587593302950_0.5969768404688804","host":"s3://npm-registry-packages"}},"7.0.0-canary.8540808be.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8540808be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8540808be.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":"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":"2d3e46df58c1a5549dbc9cfc81a01a11026eefe1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8540808be.0.tgz","fileCount":52,"integrity":"sha512-vHPBOPEEa3o9EZNGQTnPB3RzTSz+cHdoks2LQ2HJD+R693BlR6OZDD//KBMdpRTIpc1vbnELFFdckCnHcFmXyA==","signatures":[{"sig":"MEUCIQDYCZWM3AT3CWDQcwRF/31jcyDDc5bwbAqVHxErclH9hQIgEJgVuaa4LErAsDm4RKy7acvOophkdpEmIT0dHEd+b2g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeoc/yCRA9TVsSAnZWagAAIuMP/j8HN2XgggtkF6QaTtsT\ns6pGFuRybjTTHT2WCld7+jxKRu/eFrEcxPqQ3/Ih+9ST5MkRRXIFuvRgwRuP\nrkchI0QLnp3sGwFtdTwv9LEsnARB8tpjkTrNG2RFbbxVDxuuJGhhbFs7+5hK\nYAMvZ8jUvfNwIRnbcL/WQEhVuTlxpVM0NTH8BCELEZG+fQCeoPpN8Q5n7cv4\ndK954NQAAi0aG8EWhtsgnAjcr0U1X4ROT84bQd0h6Lx1Ps7vmiOLtX8piUq7\nHkJ7F+AXTVHTJRUVlftsgOqKOGr4nLWZS4q+FYrPxD7NHl4VaEjZo/JblXmK\nqTWpCHYDGh1kuwzjafOG9An2fA0feqIuShSlFqsVfn3us8DnoMC6Sbof8unH\nkHKW8e0bhaaaJDP6dWlgBq/rFxt06F/nO1z/ivYdYNUni70vPcJKX+RTsHkA\nOmKXf33RVLal0m+NbQTHV2JEAyRc2m4SEcUr437gg/iL1lFUQG++S3ms0NLj\nkGxlecfxzm0oZT3i/G+EMIH+/g6WIbgPtt4Lu9jeuMcl1SJfv+/w3vGd4TJG\ngDwG9UeH4ZLqrh0r2MNTpOv3z/I1RXsBK7gSvheNkuzIuem1QjYS67hpTBWr\nfCr84G2D4qgGZC1Gy9tBlC0HWLoPzz+lRQ7tAW1dMlWFPrj5ZVL0qrfqtOGS\nsCg8\r\n=YQfk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a99320a8e5b4b718dbbcaeee1ec4fc8feb72b592","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8540808be.0","@material/tab":"7.0.0-canary.8540808be.0","@material/base":"7.0.0-canary.8540808be.0","@material/animation":"7.0.0-canary.8540808be.0","@material/feature-targeting":"7.0.0-canary.8540808be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8540808be.0_1587662834548_0.8914561159622243","host":"s3://npm-registry-packages"}},"6.0.0":{"name":"@material/tab-scroller","version":"6.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@6.0.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":"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":"52ccd9172fb4c73e8cc520dd83685e15647dfffc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-6.0.0.tgz","fileCount":51,"integrity":"sha512-v788wUc0rf4i4ebM9bYw3RTz6vNartE3Ko8CiYeh5GAjXgcaM25/VnEKkwXeSah0CSC7Xj0PfouWD/qfIYt63A==","signatures":[{"sig":"MEQCIHfmB+zSwZyms4H6uVlRoAPFRpBzYbzmO8lgZawtE2W0AiBGV4lGg7z1RmeIRiH/5l2e62NiHCoUua4JtYnJ73vM5g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320923,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeodAXCRA9TVsSAnZWagAACSgP/iLA62PSrn/nBjTuGt27\nhmJs2JKPCDS8I5BOSTTmEaxbYWwgVoGibG6MW1Ys4zHQPrWvmkQUnN493wbJ\nPuwkXZ5g/fqxw6S0SC5AqWLDvFJcgzXUVe3vRdb/pDs/m3LWCmW8mnbSf+2e\n92yXqcstOKSXpbdMGWbD60AdHgr7hq6fV2bC9u4L/YKBiFTxZR85lir2nTOU\nv+TciJfQQ980wyjQVtkHd4vUbAMrhYXnfi17x0yt8DPj4Mn8K2mj/Ho6hd7I\nWnht0RKo1hpJYR4p7bALBpVBlMrrmHlZ2CYC19qX2rIOMRwIcWa4KRQB/4NH\ngLcoFV0D5121VlJS0ohzYzi4thGqt2dm4VcS7DyiaD94RdaaMZvpRQLzN4TH\nsbycM0hoYllk5uG4n8eSeGqc3+KDKVG4+Hnxt81CbOJ3Z8yEG5IezZTWxqrW\nse7fxCW3H3ZBz05yN0sht7WFOx967zsNVmVibl5h/bWIJFcEgFEEiknHXD3l\nxEeM4qInubiwI8QzLRr/nB0Wxz9EX9SQ95wUVExm42KYZpphhV6KLrXYVqTY\ntWH2mzaPDbXQ3iQ9OH7AsCXMgePn3QGp5FEFxUWQLYiI6YyoJaTRWXO2xZ6B\n5QdTpfEoN69T2I4g2pTTOWUzzRShSuBItT2q1cQOju2vOoebWKHu119iP9vx\nkEXJ\r\n=ZeSB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"8540808be4296e60f1c1d3a637413e433ca7efaa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^6.0.0","@material/tab":"^6.0.0","@material/base":"^6.0.0","@material/animation":"^6.0.0","@material/feature-targeting":"^6.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_6.0.0_1587662869993_0.3743350403674828","host":"s3://npm-registry-packages"}},"7.0.0-canary.2673adb74.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2673adb74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2673adb74.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":"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":"c9c22d015079052d7f46e4d4a4f9b582c5343c8a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2673adb74.0.tgz","fileCount":52,"integrity":"sha512-gMHz6MSCrztU/6EfYVaWnRKFWsvGa40IM0iV3zHbLXGza9Z9ZQrPf5WV+tni8qLwBwQBYhn6Qw3eak3fHzgmwg==","signatures":[{"sig":"MEUCIEBjnDmt8pncYCPEPZupimDWJpRqcFBfKSHZqZn9ymUYAiEAvhg7Ye+hkiEj0CfW3Qmt+773o9HXaPUd9vQ85yuxuDk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeohrWCRA9TVsSAnZWagAAj/0P/1KFg7L6ATRY0UirVV52\nMbMQ+IeGgzztrO03DJmVlppxaJbH6XCXyTCLrZxwa+WxyQ6h7sGN9zWleCjD\nNUPAQrlV/UbdjMAnXj+EmE5XSN08uLd0F1Q4Bqa0YwsOE1sQnGcal4TwGg5w\n/2ikV2UdZ29SYnmiohwsOO/PgKeXlS/gUqVYyWQrAVtm657Evij1X0Vzsp93\nAkVDm60HOfQzARG2QL4S3ArmVtk9+xb98Hksh1ZKOC6Ld/qm23hNPShiNvW7\nsT/zNfCde1WclDFQw05o9pgtJerHp6/sJm9SdNv9noT5WMrX08elzskDfjR5\nFSHfB6kru+CygLa2vxibwVk07pX34LFRofmiosqDIqySNHeClXfg9h/YUcwE\nNqFEZORfYaWz5LnKEIf0lK5RwuxjQonINHBgkoqkSSCxNkkrxLT8Mf1un0Uw\ngox8DFDL1dadx/UeuBna3PLo/G6iL/yehKvmKjh7ziP63O446yufG1kvpzCY\nVQuCEJS3YGB1YD2FAiuptanv+umIipcEIxO3NDd9tzgiAQYRgXypNuj1eZxq\nVYXTBmho2rq0tkD9Ea2hKxDbxJ5IRHq9CA/fEnjIF8JHN/DrFGqL4S6TUT6m\nUAI+TwO5138bO/Ft5wBBbj60P/PxF92f5Q6UpopPHf1W8gLi8iLHNNwdjuRC\nqz/8\r\n=4QvS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9cedd1d83d1c7d125a3ed38281072b6e50b57e9a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2673adb74.0","@material/tab":"7.0.0-canary.2673adb74.0","@material/base":"7.0.0-canary.2673adb74.0","@material/animation":"7.0.0-canary.2673adb74.0","@material/feature-targeting":"7.0.0-canary.2673adb74.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2673adb74.0_1587682003379_0.35236164994350205","host":"s3://npm-registry-packages"}},"7.0.0-canary.b10d0d7f1.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b10d0d7f1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b10d0d7f1.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":"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":"6bed673e8a1c6797f288e85059102a8d5c81a1c6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b10d0d7f1.0.tgz","fileCount":52,"integrity":"sha512-14MjNg79KTOlVX4NUSBFkNkYGodhmHCCWtNig8cP43Ny4NOaHrwhPzbwyUU1nC3Y9D/eBYzazJ25+x8HWMFAFw==","signatures":[{"sig":"MEQCIAHV3xHabDGqgnkZPFDfvPHvuo5orMyY0QivtzmebHtOAiBDdT+IFkJZzYHv0gfQCMierNtOscwoxUZqm3tnWH1mkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeojE1CRA9TVsSAnZWagAAXTAP/is1gVbavQKCa04Pn+qv\nzZ+35AV4KVJVb8cHLj7afQ1GhUXfH1DPGRhoGg5uF1A2vw18b+64bwDVieWc\naqdCkPy4ccVPSaC6yNHuCqaDYw0vCeTiWBWyZImx1qiatIuhHtCdBcHuQ2cN\nL0BzedbnZ6+ZO4maVwCzVyii6NUiqK0cP0bczQbdAAvFy6QUS1mEVR7iH9nh\nrmfCDQcApt231ijP7C8lIWY33QISfld7N2MgT4J/va8P95x3DKctpzUo3cdR\n1yXZUIA2UWKztR+bH2MscJFNVJCo8ir9hk6Z3CGv+yelTXD6Z+6WrXhJaRdA\nJq8IUsorMqiFzH2nFM/yVFwh4K00A8hySvdnbBSE2iE0Q6h409ltHPWz10UH\nRnY0SPmMo5Nd00XpatRWfLb3xbvakNn2LOQ25fy2i3E1Z66yEhDfTwa/p3pb\nn5GHuWT6iLDlpG7Chh03/7t2KDkEBDCRYrhs2qDzMg6QdqLLA0H0TI8/9zlV\nVqrZ2wi1TgTmymQLwHheQUvelG3CFlX03gQf56i14l+E2X5ARHaJJPXcjXAH\n4BzzFAxwsc5uCXCe+vL8zL+Ul1EYDl5cfl4s16K6ZQgJ1c2bSM0RSb4sFULp\nGF9lxIDHXn0//enJZvXTlUu1hKPrMpyeCVKjyq/9bkrO3P0l5Cf5N4SrEAGN\nJ7Ju\r\n=P9AJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"83fc566b3c065e01bf601ac65cd6d17b634b7872","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b10d0d7f1.0","@material/tab":"7.0.0-canary.b10d0d7f1.0","@material/base":"7.0.0-canary.b10d0d7f1.0","@material/animation":"7.0.0-canary.b10d0d7f1.0","@material/feature-targeting":"7.0.0-canary.b10d0d7f1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b10d0d7f1.0_1587687733237_0.23648248680499906","host":"s3://npm-registry-packages"}},"7.0.0-canary.3bd8c1bac.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.3bd8c1bac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.3bd8c1bac.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":"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":"786b0fa33ec98c841695237a27bd498c7dabc318","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.3bd8c1bac.0.tgz","fileCount":52,"integrity":"sha512-HbDUrsXomg20BKT1kN3Ebz1q5KwAY5WuRJ+X9ZdHaLcW4G/s4hnel929pe986PKJRun/gftG2odhGVep64eMVw==","signatures":[{"sig":"MEQCIF3wyNFKlvovjnQdfuOZheCh29sIZ+RzENsuIQltCWLXAiAuiOW6fiXiCcNtcnZiGF6cdhedgliOYooMm9GGW7WIpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1T4CRA9TVsSAnZWagAAULkP/RZwBeWgeYYXjZEzmiIk\nZQggBPUf9E/KnfUv9EhxKRzV5FOYxokUsna93VwMlaQ5FfVlDJoNQcLWtaes\n1YIRu9zMmo1uFf40iOoHSXkawDGcgKwywSxQSvTBl5WZ7PodtyQyHDmdROUm\nPOg8sM7o7uXf5rnyzhJEXtTi5rKiSYYPXFcOcw9FJjTdVwwvr2+Bh87CWoqF\nNig/p6owh3nrKzVBH2ZnRp9huxhSub+U/Oscq9khGWE3LANtVlPxAz2WhxoH\nNVjDGuMKvebjHb/ZMNWboH1O/Z1vMN8dHVIJBtf6yufuzsiPVyhwlz1dVlbh\nbPILBSIe3YLUPC4p7T5OeToVc6FLX9cWfNYlbHOObXwuyqWwgDdG9IA0uvnC\nPPMT7Q0SOAKBgsMOvg9oV1fqk/ncx2hyDTUbfuy08T6+cXscJnXkG33ZD86e\nJcvv4EsMY9JR3JOVg2WhGLcSKvqGjD1oyMgQN7ZCaoYlgZpM2tzQH267S/9R\nOZ/RW9CFG8AHtXQCkln5ZqSZfa5Nui84GbapGPdYCm5n+1FybcEqcGtVMsZc\nom/7LQMAKelEt4Ryqr8An5ElNqgzwZJpd9gHZ+nwof8mr2xSLnJdQAXt2gpB\ne4Z+KvQVSabV8ynxG+BmN4otaeJQTlJz5t17DtcpV5FfPAbLCiHjeTUSpigG\n2hbi\r\n=3/zr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c6f324d1b107431694d9112a3e94b90e82718ccb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3bd8c1bac.0","@material/tab":"7.0.0-canary.3bd8c1bac.0","@material/base":"7.0.0-canary.3bd8c1bac.0","@material/animation":"7.0.0-canary.3bd8c1bac.0","@material/feature-targeting":"7.0.0-canary.3bd8c1bac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.3bd8c1bac.0_1587762423894_0.916915028627576","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83c8dc22.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b83c8dc22.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b83c8dc22.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":"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":"64126af7f256ff3b579699573acd5b9dc1df1095","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b83c8dc22.0.tgz","fileCount":52,"integrity":"sha512-Muv8NdG15P6hMCHnriDgqjPrT2Gg1/7j3z4GGxV+XCEnBt3OCR+D3EnCtZHTZcHPdSZYUkfmCdIcmHslEl+qDg==","signatures":[{"sig":"MEQCIApda9vDnWHKYrL2Tjr8ym1Azx5dK5MUW1O6LVaKNHulAiBdu9/X43ieaUsu4ZnPZrNwoCxHgHyrsA0EKvbUZwBMBA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo1f0CRA9TVsSAnZWagAAa54P/3QxIG4rxGyw0ZqDuB3n\njqAmimG52r8YDMFiTEKpEG1Yag1YpZwCb7OXN8sGwPj7W29X7nIty6G3YmSE\nwH7eC28s1x+WFr2BcA9+HwEKtBAYRw5UQsbGAhEqshzxBVH7/4kTF92HWzpY\n0M03W97CzYCqaXV1zyRrkl+695m5YHncnJWtUtakTnrhLcKjk7RDMFleoZcw\nx3DHuZQE6JwgZ8MNfMACf6ZK72X6dVnNKH0osNP5/fprRDEhpKlygqPQms/A\ncX5grpJZoY1REmmADu7H0J8ix/ktxETHmdT3VCtPHYIsZJ7obFpd2lBoI2J7\ngaN7UL39I+EogDPpMMfbUeJIb0lfLSmdNxnDxDh1q4zxET5lzFlJrM4O0FRg\nJYTZcMksj/zBh1zI40pxRNQBAyoQbVb1aaWGDE/8TtvS1Elqc2C3Bt8X+X5k\nEFEt3xoq1uPjSuIPDQKKnruBFBn37OtRLb1BAR1UtqVAabRPGZyLTkJf27Sm\nld4xQ3PCId9syznPN9an2bku8J2XDJsCqPemMHFszRGjO1s50zTU/Fc/WFkv\nt+Xh5hQYdfHoaVD8Qj9CJ8bAVOnCVnWk+/0JPG282V+rJjvAIs1b1rOA/kKa\nc2SezLA5nzAl9vRKHMQwe+g3Ape7/I7MS/qkiJMPXXYFZRyJb9r9qv3itAIE\nLx+4\r\n=VInT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"92cfe3e927d76c82fa2d8a864bb852b8d19f30e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83c8dc22.0","@material/tab":"7.0.0-canary.b83c8dc22.0","@material/base":"7.0.0-canary.b83c8dc22.0","@material/animation":"7.0.0-canary.b83c8dc22.0","@material/feature-targeting":"7.0.0-canary.b83c8dc22.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b83c8dc22.0_1587763187610_0.691146426246823","host":"s3://npm-registry-packages"}},"7.0.0-canary.1b3dd846d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.1b3dd846d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.1b3dd846d.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":"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":"d2609310dcc803e09559481d2549c433167cbc85","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.1b3dd846d.0.tgz","fileCount":52,"integrity":"sha512-5xd7iDVv+UVbyRCYbrlDFNhrgmDxE1uABkDyXvUiSZ7URI8szwheVsngZHwjAaNjd9PNaXEPskDPmHkLcBiDQw==","signatures":[{"sig":"MEUCIQCQY+id0xuEDDeU4iNFbbp2vEa9jpS4REzuZZWiIJtoOAIgXY4dwYWJnTFk4PK9lWKCRygLyAow/JZzGpYfcexkSic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeo4gDCRA9TVsSAnZWagAA/fMP/34C+Ms1rcsf65nlrzW8\nzklcKsLBhurFe+pg6dXlfiO9FLgVcRYPUBcEQQjXc0iGAgUPteq84k5bE8jJ\n4SBJeKjEOnApnb0vWgGo9l+HZqhNbKod0HDhYTI+bWlsJdevCtRxL+K8XPtI\nGE5FGjsuGMb3jKKwHR4/8EKJFV7rLPhhSd5eGyeBIGmuwmbT47xewAHEUHp1\n2TIPdyzQGG8gzJUbira+I4PklDnreQQDoYRKaao4nLXBglTtO5/hRmNZZSzz\nUIct8F5+PfQK2Y1WfuTr8fSHdLTDh+k9VtNOG4cAEHkOM/3RZXDH4huAdZv8\n6TCmjwx85abwNZYSE9kKMOF2jNTLx8K2Hs5CRbbPdAgSXhfxnXQO07jXWng8\nLrfavyYDi5AdxmJd5jsJNXHg7s+Y9NVKMD4u4CAPFqa4+e/0Qf51uLt72+v7\nymEdTp1kWLTC4U3GurdzyieV4ynDryucoTAmStMG9mNGMehiYtMRFRFjKmz9\n1soMocz5wg2hEjUWwWKpjH3U2qhZafLAICzyMHZ8lZmlRAL0oAGpOllgNkuu\nGp3a3FSgDWWKluPz4eMm3CC9mGZYtMt3z+0SG0MCxyrSXe2/JYkVWYsLNH8o\nFRw3Bc+c17IMmXMeE2Ppev4lDzSHwLB7KHK14op6cfD/TQxCgKGyHPq5xO1Q\nUSaq\r\n=GQmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"370fec5aeb98791d923dc357e46611e61cf6eb0e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1b3dd846d.0","@material/tab":"7.0.0-canary.1b3dd846d.0","@material/base":"7.0.0-canary.1b3dd846d.0","@material/animation":"7.0.0-canary.1b3dd846d.0","@material/feature-targeting":"7.0.0-canary.1b3dd846d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.1b3dd846d.0_1587775491174_0.1268889901509771","host":"s3://npm-registry-packages"}},"7.0.0-canary.29debfea7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.29debfea7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.29debfea7.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":"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":"1f38e822e0f088c3f2dd35ce74734d3b54d44adb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.29debfea7.0.tgz","fileCount":52,"integrity":"sha512-s28OSKF6fkI/c30DmqWLjR4J84d9UWRe72Iu7N+I9GMw3Vn7bwxM08y2TCtG7V6+a/gFkMXE0eU4Dpffdaj9bg==","signatures":[{"sig":"MEQCIEc74unCnCInA3n97Vl+cMfeeNN3/pVKf1zMF3V84t6mAiADT56AaBO9ERud2sqNzvP8bNjpgNPL4EzY0F9R2S7IhQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeptESCRA9TVsSAnZWagAAploQAIEXeTna4wxTzz+mMjwK\nhicRY0QBB5A85EpYUTQPCi06ucX9ReDBTSvSkF/Zfr2b8u9hLEKDaZNLVwvc\nu4ldzROx2re/4AwPgW9MY45YzjzTpIfz5GmW53SavRtU95eR+UMNcdSvDThC\nrcUZ3t3q6WuVucIB5avC13c7mQIMFWUhjgPEM7XHgkl4EDAabRFC4fa7czi5\nOgOyydGmA575k4oieLKKOpMs5DzkvaYhGpuhJMWDo/7scN6XZ313RCgH2q/v\n7w6FQbElbkNDS7pS4oYkl2SFY4AuGdN2BJueKKKVWl+aHNTeufL1ZRvdgdXJ\nH3rLolfO3LdqIfTDYPrxMr+rLFPmIBTQ5G0euGzsWExQJ6rIWsrEWaoJBNH0\nOE6TO1FAcsDYkdBa9dB7B2740B5uEs2+CipQUjwDPkhejP/uz48SQf90IAtW\n/Zfr54w8C2NlVsLjlmir0s0YS5VfnU9mZkaw8BajrAWwNZg5q6bonEe++fqY\nGvgKd+ZAKVlmtrw9Tlp2iH64y1jieTgYiuzP4Jd7avyCrH9yLCzX+I6osOC1\n4/BKkAVBXcfqBd1MWkhfyRW+3kaLFpH76b0oaYLFl2KMa0IhDwBzMcSPkKXr\nBq6im/0pXRDSEaihx7/U8wLR1aGyEArd6T7XYmq4opdYIhtCo3EjDVFsGV2X\n7Yx3\r\n=5xog\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f121c350e2a52fc59191d5e843358aa3e3926ca2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.29debfea7.0","@material/tab":"7.0.0-canary.29debfea7.0","@material/base":"7.0.0-canary.29debfea7.0","@material/animation":"7.0.0-canary.29debfea7.0","@material/feature-targeting":"7.0.0-canary.29debfea7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.29debfea7.0_1587990801964_0.06380722970561803","host":"s3://npm-registry-packages"}},"7.0.0-canary.28d32f8e0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.28d32f8e0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.28d32f8e0.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":"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":"ee599af9841680209ef9424f2d6ef992d9502d72","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.28d32f8e0.0.tgz","fileCount":52,"integrity":"sha512-XtAi91Qji5zNqJgpnnA2V2ZOw/nY7qimb1/SYck8H2JSzLuFfHvgHH1ojTd/ThTR8hBBcLgPaxEwfyMjUag0Qg==","signatures":[{"sig":"MEUCIQDO2e40GRFZIt7ZXthFW/++c6mlewtUi4SR84y8YN4tGwIgMY8piYu1zYxaokNawhvJsHiLf0Lw16ke57AC4VEtxRg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJepudWCRA9TVsSAnZWagAAIUcP/1jPE2WE+X7FvTiFpEvk\nMG0RKLgJ5gvFJKGdknA/udMyz0cs+pDw+s664dd2L9+gemd8tmo5qwnSiI4u\nA2iKe2Vanm3mIxMzSXMUlyS1Cx08mO7kpWSUPgTMp23zY++91G58DlG7PFcZ\ncPTjcHVDZTtD82jFK0pmsMwUVUFoX62WdSTiYSZ3nQgyFCl85TnCUhldWvTR\nxLzyY+7NXFMwMw+FHYR49W7dZwsvmM2Os8jCDI/6toSXU75ADYSxfm4b7aDk\nZ7iFqYWSyrhe0VJ6dtzk7jACpwXB+PJfKHxofIunnppAfLHqrlB1ZrsNnDKY\njddZf3lGTuUgq2CCCcm72Uk30ht2+eZ+cpK6v6fnCOodwAdVf6OIHX3UQHdQ\nbGAhJnH28fD4yBkVCQky7wqU+3onccKwu6X7AvMWCLoRi9EDsT7ZeAJn4GVa\n1g0+8zrIfNFhdlm2qQNjLgz0vFuhY6W9bY/XoEQ4lu7MAPJpuuUctF8ny7HE\nxJ5FiFlHoizXrNguoiIPyZU+aii1KLQmLwUIJYHxYNLLscSGlowWIzFS0jNx\nL4gXvltW0ldWmgACgW3697jX503DX6qUwotluxcyeywlVzfTQnatzkrg+Iok\nb1Iac6tKfcBIsyErjRlmXTer9aPwZurGz/5COiMIsyqYVqNX3S6XgyWI71l2\npnC+\r\n=WYZd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5e2a5c88bb5127200d9f70d65964a419ffe2b123","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.28d32f8e0.0","@material/tab":"7.0.0-canary.28d32f8e0.0","@material/base":"7.0.0-canary.28d32f8e0.0","@material/animation":"7.0.0-canary.28d32f8e0.0","@material/feature-targeting":"7.0.0-canary.28d32f8e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.28d32f8e0.0_1587996502223_0.6496848233346444","host":"s3://npm-registry-packages"}},"7.0.0-canary.af71cfdd6.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.af71cfdd6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.af71cfdd6.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":"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":"aaa1251347d1fdfe5ae3db78ff5bdfabbf63749d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.af71cfdd6.0.tgz","fileCount":52,"integrity":"sha512-GMTdsL46twWRIKRzYm0igjfiL4X9zeMPDkQbYA9UjV4PXI0xqYKfTqaXUUC/QCewwwhuiVXCh1r5U6YIBYDZGQ==","signatures":[{"sig":"MEUCIDV+11HeuS0iyn3QW50Wx7w/ctLh6I02wJgaXQaScEJAAiEAlgf8ihuHmX//Z/67oJM9kmIMbaKX5yya9edovFi3cSI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqLnACRA9TVsSAnZWagAAvO8P/3B0EygKU3Rdy+Shmn0q\nS11Lv+PZjEtQdzniHD1CUPfLr7zrnwdCSKLXO25URkJBUKZcu1lF95+lz9D9\nf0CwXFXHRzK93q5CdfINGrL9Y2joo5CDWdk15ohff9/DWwinMgS59sdXBDmA\nxAj6DUowbj8IUm9aYJ5RJtx0Cg/A10QtnjkyAnBpmfmbeHcTEL+ZoxsZHv4N\nRF61SKTEfiCze0Mev0j78BfnFGo7cyL5oo/eoIHRf14LFcEZM8pdc2v9uG6q\nnAytXjfZwyu5yhMnY1MDD5Ih20TonuXwWdO/xWrK6O+48B5pPnxWWtV5iII0\nKF+tqKqC/B3qS8i8LD+s4EVdyUoFHD1TJ5XRqa4q6t9Uq6EFIGNAWsjOeVpn\nlBo2veWluSlCm52evxIF5vY8eiI87Xhe/M4rojd2FZb5kD/ZMvIM1hhyHgiY\nhjlXzRmPSCWMkM5GYW2BlHyMtDX/aXQf668VtHd8sqHcHTHlg5+UT+nRSkNS\nDSYXsW3fy2/GCrsyse4ph5xzmKsOkMShdrNa+cC9DLcCpI5rXbaDRwvVEoW+\n3DtFjO+kUyLeej3VT2ObOURdslENhDMjgEAiaSUwQ77aNzEaNnQsF4CKwhSK\n+JJqE+iVTziqUKi29Jm4OKv7Ee4CEJYfTlK1aPTZa7YeeSczGvn7VcoTAsCc\nfGLM\r\n=VpUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8ab654dfd65440046211cfc73468f20a57d7fb4c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.af71cfdd6.0","@material/tab":"7.0.0-canary.af71cfdd6.0","@material/base":"7.0.0-canary.af71cfdd6.0","@material/animation":"7.0.0-canary.af71cfdd6.0","@material/feature-targeting":"7.0.0-canary.af71cfdd6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.af71cfdd6.0_1588115904063_0.7979449904402269","host":"s3://npm-registry-packages"}},"7.0.0-canary.99d2fc961.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.99d2fc961.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.99d2fc961.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":"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":"cea927a90bfe2dc404ad25b88d951e7ea625d26c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.99d2fc961.0.tgz","fileCount":52,"integrity":"sha512-2WnnFtf9By9TsGVuBQsQ6Qgz4QB5kwibwRRtiW5iemQLnyZuG3Nq3p12V7OHtWiIpJGXqA2gufAShtML1HiKvA==","signatures":[{"sig":"MEUCIE2GYiOKMRs3/6H5qsZZ4DBGdpuX2HnxcIuZmuqJqiCeAiEAuI7YbPQybqAdjoN5StuCe1EJI3fk93F7dVkwsu6WA4E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqVqyCRA9TVsSAnZWagAAJbkP/iH9xWrwiJK63nVQI3Qh\nX34zUcn2px/gMDghANqFYKhExHhbvNJWnJzTGYETkP/uxpU4317jQvItS7X+\nFgJr3uSaEmDKt22gUIHJ2CuWlTJdU/7NcfRu7dEE0uwq45CYOFz1y0Fd6Iqh\njoGNcX9X6sbEVLncV5UqO7uwSwtv1xFyIuQ67VFFbi0xyLYLCNGBT6cHQEJY\nAp02Qg5iKN1Ns3ZYBmrfJ+MFXIXV9C7xLUJuduAFuDcvYCl/+Q14avWBS6t6\ndeHW/AqQiG3VHaPV5vrV94qyBNmbVzhYsBhHgLJYxOm5vroSC/D+ZHQ19JMk\nEF9Q0zSI8PEAk+pk3u/Q2jr1tu8Sgy/CsB5rVtcRVdIRl8A+r0ytM17y1wbB\nhWLEoVWXWSG3tRY3TVyYMn9GKJokhfEHtyvxU8d6jOT8ak7b5hPeCnzInK0U\nmT50q4kEC2n3KOYehiTg/g+jcfjWyxVcUrpk7tJ4eLqBIGg8PbyzFmQO3Xi9\nQlWFjj5OblIQyWmVWnqnSDtPOOXTh2RurXWRJkdnNa7kNsM1OsqNN3FJ00cz\nKbHI7c2JZrq6ffqBpmNur1R6RNFIu2R1tL3WHAySr6riniZybZ497yyxooYF\nMZR8GbJKeV/BF35B8lEHTr2MXPyix+HQQe1cgdKMsBSGQ5ukUr1CTa7tmwZV\n8SR3\r\n=m/Hh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9b1ef36f20c436f96aa47dc90c983832edc5985c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.99d2fc961.0","@material/tab":"7.0.0-canary.99d2fc961.0","@material/base":"7.0.0-canary.99d2fc961.0","@material/animation":"7.0.0-canary.99d2fc961.0","@material/feature-targeting":"7.0.0-canary.99d2fc961.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.99d2fc961.0_1588157105734_0.899581614065321","host":"s3://npm-registry-packages"}},"7.0.0-canary.0e052b24f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.0e052b24f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.0e052b24f.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":"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":"d7c413aae8ccfab9e90dd469ec577ca2353ecf14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.0e052b24f.0.tgz","fileCount":52,"integrity":"sha512-oGoDHXSo1um7+CglvGi8Mp21yzfiWsEFs/oSjGrYBw8c6sdIAXwKE6nzI/0P2xc8JgTCVZx4ReSxfaV0aj0CqQ==","signatures":[{"sig":"MEYCIQDAQYlggrI3GGFSmzlqgpJOm9yVEuwZ2wiTAwl91N+YIQIhANsRcY66pWQ07eDa+6+4XJ8UwfYHRwlHkFq8Tv0mdQlI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqipDCRA9TVsSAnZWagAAmE8P/jzSP9xtD8rv8SPhLKKR\nBtd04vtGt2+UjUs2w/V0fJLcMUFT2A18m1jepT9egW488ST1pQoceJD7R7aI\ndgj+XfM1i6CZaYhM8RvzF+RM1e/8ppwNZN0Jgr5Y/gOHI++Sw38aORt6QvXh\nenAqq4ZkwwLJtnDPtdjgTw9/n4RG3IZhnvhmlDu/IMMRjYEKXoVeTmF/UDpF\nudc4Mn3uQ53H/KIbQ0ouP/mvAAKXSuOroBVtGwEqPb3gJr+1255F5xV7zxUF\nGhM08F9hbVOVMzPfnXYPyrd5lIKXM/jge/E6/a1mgMKEfuEtK8eOXXzavGpm\n3dW6Sn5nDdQJuVjdReedUlnZpFkUy/B9KggNxui101wGYPZEuJsGbsTmNVqj\nmEi+t/hTDNJxtC1NuAiFR7eROqLMba//Rr3h/dEg9sWsVSKvlscKJtNtwJ35\n9QPm50DFRKWAl7gGpherCrG0u3Xvo00h+vkhtd50Yp6YE9ohk6yznZY8DRof\nco0fwiTnI9QGGWaREUZIwjTooZxaChVAxHVRg4obtRtjOjUoMUPnN2XakSyE\n+MjggJN6FS1WamJHDsbjALqplscUMch4CRvnbcbGBFHERgrzcRElZWnB7Kog\nLFGV6J5bHGozYELGggIJfKKlAcNxCQ0m3vkraKxTFWYcrjEPMabFJzoEe2YX\nLdQc\r\n=K6mb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"69929564b970323734d16e9588636ff8a645f2ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0e052b24f.0","@material/tab":"7.0.0-canary.0e052b24f.0","@material/base":"7.0.0-canary.0e052b24f.0","@material/animation":"7.0.0-canary.0e052b24f.0","@material/feature-targeting":"7.0.0-canary.0e052b24f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.0e052b24f.0_1588210243323_0.03224098297325573","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff4bc632a.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ff4bc632a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ff4bc632a.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":"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":"1a447a531b94cb7516f5318ba692b2c8b5e96dfd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ff4bc632a.0.tgz","fileCount":52,"integrity":"sha512-ixImkviN5oENK3jjg+ycz05ms2YthNmjTbC4rlMtrI9CoXveaC/DGjLGVZz40A7kUXYdrk2Um6T59JnqroEBJA==","signatures":[{"sig":"MEUCIQC4KmyLs47KoQ5vYenj167jWvpmjVARX3UQToz2ax4idQIgTsAjfRk9PSK7k2Z/Ti8s6+qAp+qR1HEjuUUhDepUN+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeqoxICRA9TVsSAnZWagAASaIP/1e4iNSnKu+9tD7q3etl\nle6EltIEdHK3AZtIflWuZ/1bWQuBJXxcWRL4e8qsmohog5hSH2wfS9WkwN4w\nHqfi5JfnOx2bh0kQzfBw/+Tr+hnROvcf7dZiEIV76eLrOGBG57svh5TxHZOa\n2oMjnxCiPS2M34Mty7XrRsgCa3ucDrszo2d+5yiKVZM5AriQmVEw1yntLLl8\nlTIlSXhCHA4R6B3fI4w4cy1vx8RUQq7vXr2wd3ZqIezBrhPSvThmvr7Us70Z\nwtcaTYuACw3zXZf1vdLFHZ0W0182a0AQ059x5uc0FQA94pRnCk4FSNzGRLXf\noUHyEP9oHjtFpTcCSM5u1g729tqviHhAmaRUlUGeKtAxgNpXRVtsX1K1QpzO\nZhC/hZ/2qWbjDYxe4qB6f60KPt23AuFHurRmuNtDnaWUcmTu4UbzsMnwtoxn\n571BU+xOJ7F6D7lOScr/Gm4LTwtfe8qryh+JmFSWoYNAGhUiQAWi9IpTU+H1\nS+RQLo49+w6qALNErFgCNWTRda6Q0KVUiaecZKGWToN8y05mgj4wCUScUIpP\noXXZJvYsHEUspOsyL05MTVkzy+0rc/Rc3eQBbvLhSdhL60JWPzXT/GvaZ0Eg\nkFRTvLBUDUPuRRXtQTBNPMsCgkFn0ZpvuVOFshzbHn9d+dC7biJS3XFxT/1D\nk8Ze\r\n=sDxP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bf4456b9aa6b24c3dd166ee7bbf96a700054183e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff4bc632a.0","@material/tab":"7.0.0-canary.ff4bc632a.0","@material/base":"7.0.0-canary.ff4bc632a.0","@material/animation":"7.0.0-canary.ff4bc632a.0","@material/feature-targeting":"7.0.0-canary.ff4bc632a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ff4bc632a.0_1588235335441_0.3380599299221225","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0f83d2fd.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b0f83d2fd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b0f83d2fd.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":"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":"a5dd171f532be43a9b8148a1ff3d620b02db1d92","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b0f83d2fd.0.tgz","fileCount":52,"integrity":"sha512-DvPwkIFWAcj5STf3AfOBRQ1k96jcX3wFhu6+QQhP6WQ9OxubAOIaJNLNp9srkt1XTt/7D79+1lfQme0nHn+yOA==","signatures":[{"sig":"MEQCIFGjfyQaukyfsydG1YXakyL+PWO9SJ6z0QnDglfB/q2uAiA+GbsvNP5IQBDeTAcqfDKSpblEfFbK6LD0efLXR2znDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJequHdCRA9TVsSAnZWagAAB48P/1yeI6UfnsjKAXmpj/dL\neb1el2YKQH18cx3NJwbmxf8H9L6Cqs3+m3P82uKXNDZy2AIQXON0Y/VvWcJ8\nE+ZnPUUb2siehMA5D2icqTEhBB2IR+1tSwcxvFrIHzrBg/fPCygx70lXO9RT\naMBjJ76XcuH6uTQL7m0V3e4dbWCLSHXi7uPSElDRye8JU5oaVbEsOvVXKsZZ\n3vUbIxFroLLvan/Eh7GpiE0Au2isOZ1pRGoMXzdQqq/KXT0CCmrnfYpF/Ude\nvYjGbcpnk6Zrk0QlCIgXsqg7lgFXAhHDNiGdBySkqu+i2NetLuxiAl1pS3NB\nNLzEEkLZ52seyOVSOYlWILpIjdQT/kKMnNALudbbAHxnxYDj9ryVXoTT7kBG\n5B0nsfXVjW4cStF9P1jFRn1cuNxNYAwFEPpRRT4NsE7RBI69zXzWyP8/ySJY\nfusuktG6pzYGFBt7COeBLw0aMoOL32+8OHftBVsaYxH/WrMDCDnw1ccRjohm\nXE72E+G+nVI9o5qO4S+YloE3u6T9JerTmyLWaNjS9/r5kDuRzTBKHotQsUPn\n+E+/bCH+Rpgxdva15pdQPWf4pEGaUcJwjZCrT3w6OqiH3UE/vKXQ2YwD3yWd\ntGGaNGu/zL/Gg2ktYYnYYljKVHe0o3qLBDGIE86tXmBbbAo43OpV7R8DvELt\n6LZW\r\n=q/6b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a1500073e25d06ecb6fe752169f836de2cc6ba13","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0f83d2fd.0","@material/tab":"7.0.0-canary.b0f83d2fd.0","@material/base":"7.0.0-canary.b0f83d2fd.0","@material/animation":"7.0.0-canary.b0f83d2fd.0","@material/feature-targeting":"7.0.0-canary.b0f83d2fd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b0f83d2fd.0_1588257245403_0.586894844163633","host":"s3://npm-registry-packages"}},"7.0.0-canary.e59906a57.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.e59906a57.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.e59906a57.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":"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":"898e2183912ef14fa9ba0fb2751e803974e1d4f5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.e59906a57.0.tgz","fileCount":52,"integrity":"sha512-s/d1k9UeFR8W09cGT/lbvpf7RJF2+ikTFhPTqbpaJksyQMlUV4ILKK65l5oGbyEKMAIqtXWDLbKeI0tTomJnbw==","signatures":[{"sig":"MEUCIGCyjBrgkIFLGJTDNcnAlSOH3OiGCH1At5QMQhfwBvnMAiEA0PEhrpryEjUe9H1T71LKNSzrEeMB9+z+LIuEFt00Ff8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerEOqCRA9TVsSAnZWagAAfosP/Rfd5YXlTNBeslDpFJTS\n+JnMUPmuxG9f4wK6oqKcS5ECNuXWd7fvlidVRYk4eRihlcwGjLQz2nmAYqUV\n2g6EC/aVV6Z9sUnKvoE7MPFG5iJQSehW7RWsyFABgOc3nRDBHA+UiQ4H9rvH\nMGKIdhcWVYxiGVB8f2DIWinmALKs/CwpgwJCmWZLyyMdyQPdktl8zDLSOJnw\nrD2tTh2kYLDYG3A5YlhTve5CWaLm4PFJ33M5hQI7eTajJ72ECRmW5u8k4mU0\nKkXJNOSId6Bp/3bdCREPE6hK7M3ebpoJSbQUJrKWZU5vHEUN90kfti6/0odi\n6ntKPYeMdFHiXUmgJryMn059VSuGLs/BVhMRCJZtwjwgOwuHefSo/3PT/rdK\n0iZyuH5+1o0tOMijgVStfki3An4HdmueIvlrMb51NdLHPLJ9pgQkDUrdRrKV\n3KZnrp3XXN537hN1txaEy/TEfvl+bUHnsPjejShZwD5rD3EZvc65dEAL8PCa\n0YRbzBzfR5xE8sNYEYj/FUa/cJaO0P1V/tJ7sEnBGyko5btftzGs9ngwQahx\nrsoe6odml4Ot4s4Kclco+ZUjSwvM4eAQyLogsxY9LcZ0vs69/HsmMD9q8kdj\nNCpVncyysSCHwjOVBRX/irRO7YxkBb23J2paR0Q666pKOqliySTk6ESuFGUs\nFeOp\r\n=YfC1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"fc7a5c94d345c5fcd76d4957427c551ed759a1f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e59906a57.0","@material/tab":"7.0.0-canary.e59906a57.0","@material/base":"7.0.0-canary.e59906a57.0","@material/animation":"7.0.0-canary.e59906a57.0","@material/feature-targeting":"7.0.0-canary.e59906a57.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.e59906a57.0_1588347817635_0.1878272491450057","host":"s3://npm-registry-packages"}},"7.0.0-canary.c02712b59.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.c02712b59.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.c02712b59.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":"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":"2acb8df4143a58b99fd08db9e08ba1b43fc82a7e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.c02712b59.0.tgz","fileCount":52,"integrity":"sha512-Xhz+/DAZ4EmN90Wx/GPIXc2bC37/s/WzzhiBPKbF7bVSawPRzUIpkq2GEmW9bG8SP2vN86BQCxlIxwt+HpifLQ==","signatures":[{"sig":"MEUCIFsthIew1yGMTQaY1U5heX3j6+M7RMIelkCgcNE4ozXjAiEAg5B80EV2HqK9B7THbKpxfBLE8Nl1NyJYz6Azjz8IGiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerGnvCRA9TVsSAnZWagAAvPUQAKLNpMEkTm1higueausF\nTLfFv16HGl/LpjbrUr0vDY/C0wfQMbdpaG8MSz7AVnxSrVeCGNwH79yxn0Td\n5WleMWtyB/zIL1mJxqwtRa2Ed7huXC8KFoTRcX6jeJofG+di3T4IdUHqTG0B\nLGSy9/qWBOmj5VLJlbblgm2/YhSkCxvDtURvhIME7Rc8fiVQrAxB9vKNmKvh\nuJuxBgXfBvzujJ4hB6jyNkSzFxhnHP35ZXfntOKIugIPCRa8S3mtiv5z1TIP\nhmlaNA3iXgXiE7PdpDA0u1QLRyj9bOnPr0VGqyr7elje3zgABfC/wJBkcSXw\n5gAczJ5Ia324wlakuS31PHTP8R3bRroscKq6cAeinRu9baeXEQU4IhwZLOF/\nRufcjKf2QqJheEwbLZc+mAApH8JISchf+QiRP8IAWSyBvd4lMtAWqOPjfc9e\nUvC1b5TKRFUkeFT+OSB149REnyOq8ScXq69344Vu14Yi06wf9MZPvIaB9tbS\nH2FBq+YB9YV+FpJXK+FKLnlMDyMMxL5dMrAKoYZQ/dg+TnfwwkGOgMlSuFtx\nRy0HN4KC2Q7w+4F/nCMFdhI3Np2VXyR5H/9+/eAtJ/FiZzw2PgyTt+JezOiA\nEqtbVwkNTCILmDJYfqbj4geIVDsv9gVlVgZBiLJFnNXv5wkhVVYJHECdwpef\nhL2g\r\n=ZILC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ed5da0cff8ae5197cbaf84af0bc924c207d3998f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c02712b59.0","@material/tab":"7.0.0-canary.c02712b59.0","@material/base":"7.0.0-canary.c02712b59.0","@material/animation":"7.0.0-canary.c02712b59.0","@material/feature-targeting":"7.0.0-canary.c02712b59.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.c02712b59.0_1588357614775_0.8182185104824895","host":"s3://npm-registry-packages"}},"7.0.0-canary.15d65448e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.15d65448e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.15d65448e.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":"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":"a5edb7d4ca9e7f7b9548ca6c1fa02d6da32244f7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.15d65448e.0.tgz","fileCount":52,"integrity":"sha512-rL+alFu2LtHLmyteK+amyudwKrEXMuDOF9iBWeDrHFcOMkgmp613Sz7ZmZagAefhRDliRdBZc146jfNTrOpqXQ==","signatures":[{"sig":"MEUCIQD/YsO2+VBco94GsuUko5zIwCsCGyy90d4xVCZBS5+4BwIgbKyNPJMgAc2n0SpGGquJbg90hZeNts5CqjK3I7ZmuDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerHdBCRA9TVsSAnZWagAAcUkP/A0JOWfc4AyrQMUH69PP\nElw/i5uM1zpTcWJKzHOIBajOofm/pvzKbCRvkDndDxdAldp72YdTDzB5JRrT\n7ZYPqqc4niA9uX19Q5AUJt8gc2/AEkbS340KvyKIW7nP3rsiOgliKb8jnOwx\nadCl00mlVLObNB4yzI0xQWffOoKKYfkM41ZXpF2+Si1n8idiSAHX5Ma0zzH1\nxNA2ycTI7TzKU5bmr2Yxc+ANHoCsHbYjUaWmgIKMOY8720BIt7PMmuPASdhP\nNhITYbPSqJowbojMMl7pZMh6peon579m8tHc1I/hzxoMP9QTAD0PoSzsZPwA\n73v5ur5YqMmBQZ+pRWEHN0NUdZDeMnv4xXYppdGhikjyOr75biuLRu3RZ1sp\nm3yLEnFAEQWiF57NK26Hq6KEfX+XAh4LFg08fj7aAUQhLknc8XsPw+CNU9r9\nr7bglQZPd1//CqeR7CvWrf9eroU1SRtI4ek05LjthYBusKC6l8RZ3VH7P6nC\nMHTpE5NqcpbctyPf6O/zwzeUgjMzcDICjLk9heXeWk7j9pxX/0Zy7MBdwWV6\n+VvXWArEiJvJv1x073BALMfUeQEIkReUL/rShFVpQkIFSCrSMBX0RMLLKtvU\nIPbyWov8Tca1NBraXLBHJ/LPGYSSiPbGOAzxzfTWPu0M40c2nTYWiAmqecrs\nnrS5\r\n=nv/4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b2e16d6a45e857fdec3838c3c09ee0a1c61d1858","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.15d65448e.0","@material/tab":"7.0.0-canary.15d65448e.0","@material/base":"7.0.0-canary.15d65448e.0","@material/animation":"7.0.0-canary.15d65448e.0","@material/feature-targeting":"7.0.0-canary.15d65448e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.15d65448e.0_1588361025101_0.06482202374800328","host":"s3://npm-registry-packages"}},"7.0.0-canary.142b1549e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.142b1549e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.142b1549e.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":"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":"34c786b3ef70bb9c148dfb4d0a580c1777db6e6a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.142b1549e.0.tgz","fileCount":52,"integrity":"sha512-16VN/rvzDWMRJVqt7TTcix22eyLvoB1z9v8HZ54tVqQRZuAvdy4+y9N2F2tI5H3AaT7vINONx1b6bE3xNsWpZg==","signatures":[{"sig":"MEUCIQCBsALriRyhHj1URmqBmf5zENevDMQ/B92dgET/GIdVHAIgSm+CAW1lcFhW40uO9ouNRzm//MMa01E+JI2OgHus6rc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJerKSBCRA9TVsSAnZWagAAp/AP/jR4Od1VRJzr+pYrxSSv\nNfU0YZ/H9y1XJ+Xi+eSReGz4WdJsnWKpP6iPZAtcbKCGy1LRTudKck7A0jH9\nXMqWB45Ir7/o2RtqHGD3Sxrt9VcUedpmO2XAbr2nv3sKUJp9+8qT3cix6EyK\n32yNFjdZy4o++cD7Xi+GhNZPNoKMF21mB1Wb39YEDDQpOdmFvW3cOkfSpZb5\njThC7ipJJpQ8jXGzo2HbaLNUwBKb3v41sWfzm53CsfTa1jSTV2p5qHwdmdcr\nuOg+aGtEb5OVW11bV465/A1fboW2I2zOk++bi01jY/FTQcGSYOSYaFwGaaTH\nrviIJ77sN7IlxUKrKy1hvNfWrbAZfR2EphGVJRyxWDKmRChE8ofoxEzzIcWS\nqThoqjwQbFK/9jhYxeEMhITpGtlXK7k4sdP42xgLjk+D3D4oWYCR8CQdQGqI\nxCa/eONNQAxhU2V00hgjKhBaGiTlEajup3puGBiEsoS/lJ0Kt4oFHItinRuT\n/cjujpYgxlP1Sc1L7exuwPxogyRnr6avX2Spdx1OEBvr05VofpSto0m7oOK0\nFSHhV8qg/JgVCNPFDvgBZCWtqWr3GdFwrl/X53I2GCeHfXRCA1sTMIQdhiag\nKLVP0sqQHKSPyEj6J+jfdn22r90cNclT8nNIs6OznE0fCKA4KyRrj+M8s+i3\nAxLP\r\n=0xMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c43c6e2e74a4352aad7225952aeb9e7154d35751","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.142b1549e.0","@material/tab":"7.0.0-canary.142b1549e.0","@material/base":"7.0.0-canary.142b1549e.0","@material/animation":"7.0.0-canary.142b1549e.0","@material/feature-targeting":"7.0.0-canary.142b1549e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.142b1549e.0_1588372609281_0.35852144793550944","host":"s3://npm-registry-packages"}},"7.0.0-canary.524b7b812.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.524b7b812.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.524b7b812.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":"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":"8ef64e6d7138c89c24375c22fd2bf0bceb0d608f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.524b7b812.0.tgz","fileCount":52,"integrity":"sha512-9f1OQqGqi/XyIQ/c40hWi8SwQRZ5pUgaKuKLiUzdwTjXK9TdCyQpoAnzeNgB1fjrGC86lTJnYF4dmbxQFwfbzw==","signatures":[{"sig":"MEYCIQCoFvDU1fJ4LV+RS8D+pudpBJswtZLeiJqePQ7d66hwAwIhAPH5F+mpNskkdBlqI2o27+Vk5zq/PevMdYCcqTgsncgt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJery4gCRA9TVsSAnZWagAAOksP+gMSSaGnvXFJ8dv2KBYr\nGLdiQ2yAtf2Q5jW6hvXE9vVRryw8TnJllhw54qlHLqfMM3lx2QiJvnXTLcjs\nhDN4sf+C9aqASuPh4Bz7bAGktErfmwM3aQEI2O98uK50ltRC6EgTtHwFV3CY\nKC/qXDdKBexpEZRzdzNKRbHjz8skDkZcXfC5CkqibwZHzLau9REIFhVkn32R\n9gtHypGvu8dAw2tO6WvbdQBDABqjNG+IDojglVw0W0i5kcDeNQsxcHzViwc4\nlMhFZTobxy1Q1CASBbENz6YVxkLPE2Lka/HHT/S0IgKhte3HT+cil78mhVrH\nFISaSjCzSAdf+FV7nFlC4Uz1xpQSc+GeCsGQNm7wRAb9PH8aGpQes0zyLQSh\nbEtTfIPtsI8jOTEDR5YeYr9xRgsj4qFxTbEQBSRgscMN8yaIExHWsPkxpUUl\nIs1kk2GEXpli1GVgerkFN5jbqYGE70X5nZS9bnO2TJuRtBVX3+mTGrFNwdYg\n0OpsSl2EwJMBgMlNkyUaK44BLzH6DMd4U4w1l3W31MfhSE3+23K+Lodqljz7\nQFC7bP5DpVzTmbVcNGBTzYGsZLBfFIPD7nsR6A+eKUaCFWqbc7sSD/zXem5y\nx3JyDgNrz7RRth+1oW8e6148OKPTsVvfHSkbRbSM9E5oVfDuZv10Jqom+WZI\ngQJt\r\n=VddA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"82ab8bbdd2373b285c315177e7054a727b38f4a4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.524b7b812.0","@material/tab":"7.0.0-canary.524b7b812.0","@material/base":"7.0.0-canary.524b7b812.0","@material/animation":"7.0.0-canary.524b7b812.0","@material/feature-targeting":"7.0.0-canary.524b7b812.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.524b7b812.0_1588538911711_0.8349743462348347","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8ca9678.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.bd8ca9678.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.bd8ca9678.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":"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":"12bceaf00b39fb2aa414f1e01ed1e5dbb3f8b80b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.bd8ca9678.0.tgz","fileCount":52,"integrity":"sha512-+Kn6hWEJTqekDtcRTD4zxMSZQj+wRoCztRBAuYj/N24vFOpphAD8X4D63ZHvDR2DEf4fZJd9wJlBbo5Z4vLbiQ==","signatures":[{"sig":"MEYCIQCcVjkGZ5ZJ6rWWCoH9vTSDiGdKIUqS04EboMr/N2b8lQIhAPQlDkvswVzXclK91z1Io9KWgtahP/NaU2UDolDetY6T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesE7HCRA9TVsSAnZWagAAsyMP/i9sNauRCC6PHBZv6HeD\nnxJfSfhug18GITh761xCe9+fZn5F4POM3roeeZcTN6sTKGevuGPBnpaWSCqM\n7UVzAAmxMkIeTia46MgWL9gCGb2C25kHRksrlNbUlBVDdyf2OIa5gtF7Pw39\nbQzaIlVmBZxIi16B9h+V52GGggKktv8DBeUhf5afhHOVNsgdvqdPzOPHJY+L\nbuaBMc13iZUjSFFZEIN6OhZ3zWwzmrBSh0/kP7wbNuqbmvjDHbtMDiTnjcHM\nS12jxV45MXznrOMPN+OatL81IRiVvpWuWdpRMusPIuNRoqG/Pg1Ocr/Yi9Pa\n3QNFJljLvcRFmmlz5gdxW5dlD80AFilFZGvH2SWSCqECFBPuCqDEUBCPeoUv\n2jQyQLLPVSiXHztS2gI3eHOqgzrrQlg7tWiL35Q9x7NOu4lbHp1Ckez9NOwW\nIapUMyjEyHAtTLwow8c6m1L0vPY0W10Gqih++tdTDXDJjOF8vdE50Qiz2nZ7\nrXTwAKVd0l4WG+d4yi592/5GDcyGzsUr6kGNeCyCuS28nW6wCrA/f3EH+ksa\nL3b7VU8J0+bVXVHbWous5cmDPmg1gPbCxs6dLIOVEgz1ACQq2mx1oj2KwCJ2\n6AmqpzfGbiLdeLWh2Y5+II2Yr4EGE8S3ULe/uEvo+tp29wytZUS1WRDDIrNz\nX5GM\r\n=fChh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d21e98ae16f9c893bf27272d187617574615c417","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8ca9678.0","@material/tab":"7.0.0-canary.bd8ca9678.0","@material/base":"7.0.0-canary.bd8ca9678.0","@material/animation":"7.0.0-canary.bd8ca9678.0","@material/feature-targeting":"7.0.0-canary.bd8ca9678.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.bd8ca9678.0_1588612807255_0.003164425784674796","host":"s3://npm-registry-packages"}},"7.0.0-canary.2553e86fe.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2553e86fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2553e86fe.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":"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":"2d6ae7a27a74f571ddecfe36bd8fefa4fab54126","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2553e86fe.0.tgz","fileCount":52,"integrity":"sha512-cXJefP8LxLw26MSqwabzijtRb1tqoZBL5moR/Qwk+03sMfEjMUsDSOd6W7ozYGTex8XKtqlNPzj+CieElakzXA==","signatures":[{"sig":"MEUCIDS4KREN64TL9aY9QmCh1/tdNQRS1VFtCyzAMt721BOxAiEAh3Do1u35zXRcV38lAr1UYSw4RfIC2AcZkcPNBYacg2s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesFGiCRA9TVsSAnZWagAAp/wP+wZW2W0o0oFkjtO3SUQy\nKT3eSKBir4x+8MzpHvKQaCPGx9Kkxl1x4jNot/B4aZvFMARxi3pT/TZMjk0s\ncqkWxrfMPGBbUbwCw7dYImM/GNbI3p6s9Y2U63rYxFKXkVkTZgyHkz8MJ8rT\nRW8BMO5UWnXm7TUMo35OPuDwgObvXT2Zr7Pf+oryBeNgnPeqjUSv/wKI8xOV\njTt/gUJBLV310kVCvsksa9wJG7CTs61NjLNqK2kBJTXTg4+ZCHpd4jYM2e1f\nEn9L83UlK+4a0V27JtL/BDceb9lG0GytAJ+CX0fWP0psrnqGi/Qgv0UvRypT\nL07xM7O/FVK79dH+bSv4rccEofxthCnJdupRSsh6Xkjt8mNRvDw3xiNHWTII\njci7IKElC3E4X5lwYd+qxtlKmKYHDBVH+KLW8tAwTBI5DihZm8ro4M1JfN+A\nnxoNdcRQ3K78ZkkWsLJbGH8Z2x9UjC5+cl3LUsmr9QlyDVIkuTe9ozEodk3Q\n8KQJdfxz21SOt2Vrj/zwmr17KtLZL5/9Sec7RaURnjyhe7979mnd8lnndsZE\nWx1I7rHQdar9FsLDDtrgT8f5hwe2JzZZjjOmeUqUfT/qpNXvO9b1SH/uRU6T\nZZ39Yxyn1lnJw0H9SqkeTwDfw9bMX1h5bVRot+E6qG9HWKLjqGAn86NnNVMK\nB2oL\r\n=S1eP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9fa3a214bf3d70eb6522a1f75e622d936e7c0273","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2553e86fe.0","@material/tab":"7.0.0-canary.2553e86fe.0","@material/base":"7.0.0-canary.2553e86fe.0","@material/animation":"7.0.0-canary.2553e86fe.0","@material/feature-targeting":"7.0.0-canary.2553e86fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2553e86fe.0_1588613538248_0.9484834752854947","host":"s3://npm-registry-packages"}},"7.0.0-canary.03dec929e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.03dec929e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.03dec929e.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":"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":"0480ab76a7cfbe703058a14b9901a6d209b8f233","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.03dec929e.0.tgz","fileCount":52,"integrity":"sha512-OjQXh8+Qe1yh+8CbBpju9unFGiB1Q2VPug7LM1Vkz+l/YqpfW+oLSvDDGhJcyVrMTw1CRtGC1F/GoPZwgfcgDA==","signatures":[{"sig":"MEUCIE+2QqsjqRh6d1fca0Az8DGM9ovmiJbrfkO6qpXp5PVrAiEAmgMOR/xc9KwvXr3m0winogFcGu9ibgubPFVBtDt9H6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesKauCRA9TVsSAnZWagAAzBwP/2z9iwvtcsex/4YiLpTG\n0nau/yrBsoFNa9i6CWTp555Bs4zU0leDJhR7m2hqJhEejF3RU/XaAJPrKlbw\nlobVI2D4jmhVofHPAMP4zZAfFQ/ZhcMG+XtqoKpQD4d8b81gxRY5w7nK83iC\nR11hxUmjB+9rIweRnzdQfd9KZfT7DBXHuxkwJ5QZSAF/CgXpUQJ1G2mplw88\nF4IpmVzGFh1ar1mNyNCo2NUFfiM/4dEWiX56O5huv+Ew0qmKmMpd5oIh87vA\nnJ6Q7gV0lumXZyLvOnlFP5C3TjVc8S2qZWTLul6n4QUrI1en1+z4H/bOXMBJ\nS9DL8WK0undcF1cSO24CpsaKAyG2iOO/jnruQTLG9mk+m7mNNs9IUSlQAySh\niHgDV4M53KvMSSpgdnQ3ruVeCXF/RatAIWGh7I49602tt047eMAVZCvP+lYl\nW4MWRZYuQWK1ZTPw1ePJsqcaM5XUsPQXXqFWk9368rser2l/Xw4U1olLKepW\nEDgNwQagzBigKNIba/kpoPF7zrSDpYeIhjcIXP9/sQUr4nXFeJc7amU7KwAE\n8U28lOK1vRfTJkXDTkkdG/KfRhmMWcNk6McKxb6G4dX7lbhb3jUqFGLTbY7N\nz1ZzwwSziATO2TDdBj54kQbeJrYpgq7RHhQxv8PdVvdD3rQ4vvXSril/Rht5\n+aQD\r\n=tmj4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"976244ee82fa3e080e074d9aa9a254e6428c90f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.03dec929e.0","@material/tab":"7.0.0-canary.03dec929e.0","@material/base":"7.0.0-canary.03dec929e.0","@material/animation":"7.0.0-canary.03dec929e.0","@material/feature-targeting":"7.0.0-canary.03dec929e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.03dec929e.0_1588635309597_0.9756231237611652","host":"s3://npm-registry-packages"}},"7.0.0-canary.d92d8c93e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d92d8c93e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d92d8c93e.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":"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":"79f1cfebe337562b6898a96f7a25dfb5d84950b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d92d8c93e.0.tgz","fileCount":52,"integrity":"sha512-RSUGprUXHe/8sIz8q7eA96xaWqcAa+adCIrcUQKQf1MOea6Ym5dwa6BBvH6wPoEtvr2dQTB4jRO9xEOlFsUiTg==","signatures":[{"sig":"MEUCID+rwA7M3ihTKqXjcYOACUBpiJnF6eUpwfQUpcBZrLLeAiEA6w6rmI+vtPD5RJh3cvi9FZCJOz9W2BUQ30UO3aA0UAM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesZulCRA9TVsSAnZWagAAU20P/1KJkTUN9mA+kiqQymee\nnxqbZi3fmsAXiWlagWlbYUSS9AO3N3wPZuyoRct5U2qzzBHu06x7qoA11BnP\nF5LWtGyRSQHj38lsyRhtLbSf2w2RizviDHrpmZeQ5KtQafYIJpmaME+FdoMT\n4KPZ0IOpClewuPTkqu8di7YeVtTBzP+ITHtZvi9QBq1pRXmVwwjk7+OtXUU9\nwqK/EsNV+q07wsvwOcAYZ8f4UCA+MwRUygfLfL4wwtUk2fQIaUtGg1B6CQIb\nymxV4jHIhg6FG32xQYriX0y9C3azxZs7446QZiWsdwALBODHRh+aSm78zN7C\noMuSOXrllqkyseXr10R3xXhRbfrj4Ene2UG4V7SD1fraHyB8sqvxmyU/ZG+b\nWvm8fjbKMybCunFhLoWK5SEPPZsX5WzZQ9wkAlBWcr63O1+MQkyA1GkPvxUo\n9f6fw5Tmzg5o6jW+QB0yZBrmJZiDUsFupAjTJ92ExUFXaNHvH0GCM1a3KByw\nkjeV7G7paAc5P718Y2gb1Mpks0SMqx4kgML1UQTz2j+yrM2/3Pt2rx1OhvIw\nFYV0ARqN0Gfb7YbETsxnOTUnFjmCkMHaG1SU3TgYAjbkmEKabLRyF8/nJ6G3\n7QzSdwJUnK2Auj302j71Ci1LD8m3TYuFY4U+OwXK0A1i9Ie2qcSBpcP6q5F0\nHBMX\r\n=+IKw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0781b5a0f14ce17201271abfff044630d170700d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d92d8c93e.0","@material/tab":"7.0.0-canary.d92d8c93e.0","@material/base":"7.0.0-canary.d92d8c93e.0","@material/animation":"7.0.0-canary.d92d8c93e.0","@material/feature-targeting":"7.0.0-canary.d92d8c93e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d92d8c93e.0_1588698020688_0.3274517207020753","host":"s3://npm-registry-packages"}},"7.0.0-canary.09f591967.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.09f591967.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.09f591967.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":"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":"d6c63ddd860efe0625274ada51bd0b1bd9a88c9b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.09f591967.0.tgz","fileCount":52,"integrity":"sha512-er7JAQKklz7bfASgk71mf3aEUPJSk1/u4yiSqnm0OF8gDK3qzi/lKOV3FjLIzoG4wCf6ipu49Pe49P8GSz64uQ==","signatures":[{"sig":"MEQCIHigfKJ9MPz0appEAPMfd+6H+GlHyyxUK2NR6XAf7toLAiAhx+/1KGQJ+aheXU5g0Q22x2UYc/KQhBKVNzQ3MLq1vg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesdUfCRA9TVsSAnZWagAADdQP/38Hl6h1j9iIU4DcgqSi\n/PgJXXu/pvtj2pWZb9Hf18xAU5fvc9dfYsenxGVxm7fsDjbw6WHg3ydVqNQw\nGk3CpepHia2kKMu0wHPImHw4F/17k9Hidd/g2+uGREHZRFbE0YWBTK+lcqkp\nMVq8lgYWhdCWFYG+UafHI7q518sVutrBI/yZ0tIPqe4L/n1cyFIJv61cXwjq\n6CJi+DpswzalYXdERqg8FsRbvJFIaQ3vUpURKXUksIfkt5xvuO1BLsiHeJFh\nKE0rlVAPms2XnSPpkGLY/OVdWjZXJtuXi/sdMWyXyED2yR//41nm8WV2/oaP\nCeFjI+WOHmaddqv+Axe+4mr2DoFft1j1+jUkHer1anwUOQOIM0I/dkrO9o4V\nRfWPwhqUlwCcJW/aBRCKF17/LjpYkOVSiy+JVsYD17GlKX+dOV1PUUEiskll\naoJ6rADYC2hD8SJNaL26k2CzGIOe4o9W/p5WzDofTSW5K4Thj2Fu6RzaiJhd\ns0sUukZs196iw9Tbu7zYbfPM3oBPGNlov3mXe8sxk4rtpdDVQTgILRGSlQ5Y\nP4dHYucYGloyp84UrA2u0PZUuRZc5jMzI5VsjLlKTjPxO8hLytWBVJ/Q2C0n\nfF4+LO1LrVaUT8OsbeEi3IxHkzw62JyfYBQvc3+z/qw6QfVCSJDM38iNaO1i\nWFwQ\r\n=UsDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b1c5f494b8c0fe5f6f9710e50d51e2736a01b227","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.09f591967.0","@material/tab":"7.0.0-canary.09f591967.0","@material/base":"7.0.0-canary.09f591967.0","@material/animation":"7.0.0-canary.09f591967.0","@material/feature-targeting":"7.0.0-canary.09f591967.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.09f591967.0_1588712735247_0.038487105557869716","host":"s3://npm-registry-packages"}},"7.0.0-canary.3846ce311.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.3846ce311.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.3846ce311.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":"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":"d1886c1ae7468fcd0aba48afef68a9d67550564c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.3846ce311.0.tgz","fileCount":52,"integrity":"sha512-5ZBU52JBH07EXb88o0ht7QpMGJq450JjNhOnji4exiPuAVrflq/yKz4kvltDgzkrTvckhN/athNlA6ILzZeyOg==","signatures":[{"sig":"MEUCICS82rcs6tjFPhFgMwmGTN+QYrrwschONQGA5XaigG4RAiEAnk5+hL7vm/0m2/RpRzD0FRE/uj6J9jPFXHv3NP1Ardk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJessVcCRA9TVsSAnZWagAAtnYP/2d+jM/ysdH07955mRgz\nl2Db+Sigp6TrCOwSDgBMiuAt5mE9cR3Dq/6v4wQmv4LMJ21Pky7ALGBBNYym\nSAMmbEIH3hT3swU0JNfF3wEW6HUD+blsoEyUFX5truXJHtEeyqtz5XZpa986\n+JtUvcyupTGt2xuRa//fHcEYsMw0+q/5QfU6JXJ7q0VIgfvLO/c4sFnDPuQh\n0gq5xJxcbUm4PWmcDiRPGlwKlildn+Z7NB+1R/+LeDEtC4NpEtn5+FBaP8an\nPAW+0SJqgVxrF1DrFZfuJOAU5l6dskunYPsy3iW+4fZeN/f+SEI/Vknf2deb\nWRIBJCh+Nwn9wgghlEy2vriLDvuPqWcJ/WLsvS2XHBl8qvy4vt9OxRKBQuA1\nxi/C5hKcxKwMg8HcHSTP3q0sASIB1mb3zM7xzNA8oSyNpbuurbFBukhOHEDG\ndeozzPtve85xZ2xCumkng1amC77Gl/fnXmKIm3E7OswauCprz0K9r02l0QKi\nuyah4DGtBPfxbijg2ABmSxA50yQPoiWaGscyrtHj/N/MHNRmeW4hKGlbI+tX\nltDoLt2yid5rNUYC9thm1WihgcPX94gdtgAuCJdlMJOuHrGc3YV/i8ROHKrX\nNW30NAM/6c0ulVuom10csoRk2r0CoN9mq4s+17STRuD4PEJjj35aSsRERcBB\n5NXE\r\n=UDii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"80b3806d13f75bd5b77443c9e504fd6468a5820b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3846ce311.0","@material/tab":"7.0.0-canary.3846ce311.0","@material/base":"7.0.0-canary.3846ce311.0","@material/animation":"7.0.0-canary.3846ce311.0","@material/feature-targeting":"7.0.0-canary.3846ce311.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.3846ce311.0_1588774236290_0.5438785551052434","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed7f32463.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ed7f32463.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ed7f32463.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":"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":"d521a5c396665143d8930d4dff3baa79dfd62c0c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ed7f32463.0.tgz","fileCount":52,"integrity":"sha512-uIWeJ2DNJxPX+c2r9hf8X9HGyUWxIoaEGqPyanXkk8IsnSO6h4zxMl/1nYaxL4DaSy2LqNGUQ7HH67PRcuL7qg==","signatures":[{"sig":"MEYCIQCRB3s24XbzuexOoEgthJr7pP0kIlh4Li5ZQ9T9d43njQIhAI+KYSC0D8JZs3iOIegkkt1r1ZLjaCZyWs8zW+NpmcoU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesuEZCRA9TVsSAnZWagAAb2QP/iJaWUW9yC6rUS+a5alJ\n2A9Oqa4uC7ah1k/QPPuFq7OdvdCxwKq3Zpc1BJQCe7HyAR5clecq0w+P7fdH\nFglzw/lEDdZagmAa+Jprh93e+FqIi/QWwcTPCOmB+Qu68AuAlz8IVg+xRHNJ\nDhvE0j1lHBtARhkonDh6thMX2qag4gNLWiTvGi3L0ct41/JuLoZQNT1VEUQn\nDzu/Cu7RC4w3YAW5wn5uaNdofNN5jlZHK9jBunAmxmHzDBVOGApy7NUEgl1d\nrSuZjWZYfi55FIzUACUHVCAhWXhtJdQQjiDEzrGAf1xFKQ4EVklGpVsZiuyl\ngDFTvd9+gg3WvGzNL6STUVEYU2PvRDsW0sJ2LAqz5AUdTyO/pbiBlcaUeaLw\nrUcWJ8hFKOeUzEiQZkpI90ILUH61vrWyIzUdm5diogZf47t4+mGRQtdYdcUI\nNUsRjD+xHBj01shBK1f0OhAQd24HPTJoo2qzEfZbMz6Seq1qmcp81mcC1hxF\n3InJx/IiHm9fuHf0uPSkkKDCvZdAs+Yil84oD7jJtdwIxFqD1yQq0WzTgieX\nmWnxDMai7zYbl3GQo4y8hbJzntxQ3TRwSIAaJ4KwkhHwOwyejOCTeN0Y++jS\n4vvz3gfDEBIBvmTM8p+pFniQ1G7h0w4QxLLrCYZAagDkfCvBccVo+MeWTw1G\nC0h3\r\n=aQRE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"84dc461d7b4d6f61ef286fa2ade4f3d05018af62","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed7f32463.0","@material/tab":"7.0.0-canary.ed7f32463.0","@material/base":"7.0.0-canary.ed7f32463.0","@material/animation":"7.0.0-canary.ed7f32463.0","@material/feature-targeting":"7.0.0-canary.ed7f32463.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ed7f32463.0_1588781337265_0.836081216879774","host":"s3://npm-registry-packages"}},"7.0.0-canary.8135cc085.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8135cc085.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8135cc085.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":"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":"92418cd9fbc53420ce07361bd6fbc964931cc686","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8135cc085.0.tgz","fileCount":52,"integrity":"sha512-qbJD3JTKzxdefmn6wO7VpiIgyaIASlUFGmpvbkgjZCHJNmf9vyCt2DcAx/PS9ym3Eg4Ls08ukqHPXFK74I7iLQ==","signatures":[{"sig":"MEUCIQDFO0uSMKRVe6PmiBIXbxMKXmTdg6cX8wYMoTD7BmdahgIgW1py4e95NcttTzWdSH5hbAyadaP65Z+6wc3JEcysFKE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJesxZZCRA9TVsSAnZWagAAp/EP/2q+3ewyb1Roa2JUlZoM\ne/ADKiZRC18zdnING1nMMC4CE1jZaz0RxbukSzpbQuYbR1qQbiVcTw+sfyTj\njUxH859xRO3/cV2N69VCVqFNqJzqvxK840C1ID5kjKxdIUZF1Cwi7shtVHvU\n2Pas3TYcbV7ilEfys6lO5ra55CXtNiL4MSapVXUBHwdWOkHPayalfX9+OP2H\nMXl4/LOw6lyzNl7dKmc25kU3G0C1834Iq4s0F8qzDoIp9soMggrLwfmumDhA\nK5feeGYrDbBLX0Xs83s74OTJfd9/xgZef0LeKMXiRvlqzzAPCHOSc0HPFT2w\npAP1krDc0aH/OHpFws5l/LorM64oiv0IA9t5Yzb0tItI6nNfa6Q7nRtmpF03\n227ekvkvv/62M4iCUIa1b58afH+l8RLgKVRVooLAtIMw2GXA84c5hKDFJvFc\nGpF0oGh/QkqtxWvsdNbmf3zhPkm+vwFA7nu7t56Pvx+Qx8a60mV9dN3yvSHu\nVvcyuJ/Y2cbxP2W8xzvWGzKAt1tOSvExSZp3W4grGojZCdQ2xHM62CS9ISGm\nCHAykFHKYjJLgQ1RG7WBsGu9cPSeqp8S19ziCxvdeiYaEPDYyiAlDpRTh81h\nSQYfRjiKrRSWyT3OyYx8yVUxsmbF4i6Pn7X/MI/NMK7JWNoQ0cizfrHf7j5I\n1xKG\r\n=dxNZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"56422959574aba25d1461d4e7ebd168437ebf9a5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8135cc085.0","@material/tab":"7.0.0-canary.8135cc085.0","@material/base":"7.0.0-canary.8135cc085.0","@material/animation":"7.0.0-canary.8135cc085.0","@material/feature-targeting":"7.0.0-canary.8135cc085.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8135cc085.0_1588794969177_0.2983210476078164","host":"s3://npm-registry-packages"}},"7.0.0-canary.deb212de4.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.deb212de4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.deb212de4.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":"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":"cf6e5c9c57abb7358a85a4b35c4ae3cc303f2019","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.deb212de4.0.tgz","fileCount":52,"integrity":"sha512-yeeGaOQyz15Cxh71RJxTyFoGjRCHr1dTfCLdd/66IRa5vYtLp0KPhczyUL4IeNVoxExmIC4yZceoPPLXvcokEA==","signatures":[{"sig":"MEUCIFaco8JwllTUTWJPl+5VmZrbD3pQ9B4SZgQ5yYYZp5NbAiEA1oFfLFEInKFTUnbpvJ+o0K3huenUYOxu8NinM+I51wM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeszgACRA9TVsSAnZWagAATXgP/1C798p5mkqSTPjaabtG\nIK6IpyDNlnEtcVS0WxHHoTwAy8LVy5S2+7N6TmIYSAkYKIGHYr0aN+THXagj\nfJ1FuALEN6NZLhnORTKYYejcp2IC3YptT0nXsgmcw8rA48aDVu7XZnRddl3Z\nhSrvVPcfcdIjjP09zIfQsR25BQv8t16wAZaPyNoRKqCfrDO5fUnxAKcY5sGg\nlIx7E61FokZ871T2A8dLpXcSe3Zw+Zv+JlRYE5PKIYcHy2H3SltbVTS5JNRZ\nmCrisjKU706+piMyDmO6cd/4LAJefYef69/4awIyGKj1gga5BUSG6fOCRJEf\neApzbn8aBJ65bGOpt2YLLZTTtZ/9ytz2wAXipLJ7B5Uhi9Al10VZWU2QCgaS\nzyCY2EXXLHFNDZ/wLOOdyKfbOSyICL7f6X0TJI6mmma8Zr2JgVGnG1oh5R8Q\nv+mwMknVcT99WdjGSRCjOP0xpJI++coq7G2xWVI72IWKImqU6ToDIUCnZUuw\nNyP+INxwKyxACP99ysrAhwSHRU7MHmUc+x7uE7uXv+VUuOpdCjua3i0fae0C\no1BHBn8epYnXbX7oR8JLgQXDx949WViAopTYBgcSEJnVytjmCzQxNfdHrPED\nrihJCAjhyMiRLLVKtH71bs2XSENfS5fVFM7HJxi6apuk7IVPNmOnFSsJeSez\nmfWH\r\n=69zg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"fe9c146f82589e5f1c471dbb4986ed6b3a7caf54","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.deb212de4.0","@material/tab":"7.0.0-canary.deb212de4.0","@material/base":"7.0.0-canary.deb212de4.0","@material/animation":"7.0.0-canary.deb212de4.0","@material/feature-targeting":"7.0.0-canary.deb212de4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.deb212de4.0_1588803583706_0.938975655943084","host":"s3://npm-registry-packages"}},"7.0.0-canary.f83e00898.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.f83e00898.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.f83e00898.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":"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":"fb4d81b65edc1e84b9f28242a5719e1cfb2620f2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.f83e00898.0.tgz","fileCount":52,"integrity":"sha512-/uJ/BuoW+hNsN7gffXra+1DLuRu8b2RPyHSw222DtIaW+kBPAxJwxzwt2oMhJyVjIDm1aK1wptA7Gam3H/yb/Q==","signatures":[{"sig":"MEYCIQCtQwr8qw+2LQPiE6m2qwtoa/80gOdXVdx9PAfckEFMJAIhAN18UmnNQG3knbioyiIaYdrQWci+kWtPzFDCHWrhdndc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetDxVCRA9TVsSAnZWagAAg/8P/jHO74mfMq7fWXc/BSFr\n12QG18exf7Eokg9+5/YQcG1+cEPunSOXVieHwUAlvwETAlGBMEFLomjt+Hyw\nJzqUjlxpD+xCneimRxUOM7Y8weYe0jv58OwFVemIApn9/0ftDhA16EKSvmpn\nw8rW2moe4yAZMXAo7/9PuniuKkWKNpK9W8Jsw8/OOQyH23iIk8AKHjAMgmQp\nQcWE9bVw/6r+eifQURPwwPBJCZNE6tT0npqx3CnpIYx/7DpuY+68ZAK1si3/\ngyue1aRlEPa2+Ilgpd04k0gqOy62X5lbGFWGswJ/fFQmmmMKywWfr5K7BN9o\n8mK6cBE+pG18K+RT/2KfF9Jh88Ys+PqfkooXhUtJ+JyStCayML9Nekc828Nw\nhWB89GApxALOXIkFJlgycp0XtbcxzLijex0JBu/Sx4uJZeuh59uNLIhMQqO6\n8sle7Ju7MDAYAJ09605JiqRiF16tPRgYrGV5n25rrD4K21JeZo775r8Uwdlo\nhWhtqN9iBPPzYU7nWtifeH8rnuXa1xwATrUILC6JxgGvxlKotEV1RWzv9mL8\niu/RafRHYwWS8jTGMqR/Q4btYktWgbF4Uzz0Y5VTIKdXr8onEPOz9VpiEIGd\ncwpKci6tNXbocDaUo/w2/TeD9XMDDFw5olsPezB/dbW7sQTnOZc/7zZldNgP\nteSv\r\n=npqG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"02060afc2f5dcb762e9083970f865f1c714a38f3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f83e00898.0","@material/tab":"7.0.0-canary.f83e00898.0","@material/base":"7.0.0-canary.f83e00898.0","@material/animation":"7.0.0-canary.f83e00898.0","@material/feature-targeting":"7.0.0-canary.f83e00898.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.f83e00898.0_1588870228725_0.15652353714763279","host":"s3://npm-registry-packages"}},"7.0.0-canary.047e6b337.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.047e6b337.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.047e6b337.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":"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":"ec399aea0213baf27228ff9cacbe0d7ea0145dac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.047e6b337.0.tgz","fileCount":52,"integrity":"sha512-iVk+Wtr3kkb1D2eAmhSDxqHTvtU/gsGXetzZ+V0RdqPXR4zqwZsgYuzQtBw5R70QtvCNFYKW+BZEH+bjj5TOxQ==","signatures":[{"sig":"MEQCICU/SULgwCo1v5945rrayz0Dw/vwnUSg3QRibH3M/664AiAwTVJJBp3NAKI0F+ahA7OIGSzls2eVEZ2c2njJM69IIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetaddCRA9TVsSAnZWagAA4vkP/jmQIIf6qvDRCAwp3yrK\ngPkQfRrALIn3R0ScQGi8pDcndFqWAjKMobhGBJ6QTYrh4Qx+ndq95LqI2zEM\nBHfWy+QnGqmkFfBeV+K6YXrw70YoilsOd72NTEaArLDe0IrnL4Dp/hsOm1Uk\nPDU28WXd1Bf3whmBFR0cckCdXUJXX0k1aKGGZibUPO2zLcsxIBcKQTdTCl2W\n8CLZjzZF5yygMVCJVhZ8JPhW06JraGtYNEFJluPXNWiGv3zMndehU3PJZhxH\nMQVYeTqx3PvCuuX8XYTZWh8GsACOeAcgbSSRtmbobgTOo3vOwEjeSlKcASYH\nXqaDbU231t3RAwO0VVvpLQ38Jgdk1nTuDT6uy9LimBrffIDZ8jtBuDVHKQDd\nZbzIojWoI6hW28XTMyXcx5+KPUV5eBaQHNOna5GupBJWz1KwBtTRbINOVtR3\nnXX/VgUr3Htbw9FmkDQUzwEZ/mtNctiPtrd+/OqkScwoluA3NnltoUZzZIz+\n6byV3/SNKolPTzOHLeZOuKLJqZbPZoU4jS5wvEpyjK0Ah1lfrcIn/HSoOLGY\nmF1bXDni3ekSvvtU2Lh3AwE05TY+Gyf7+VUQqwaEAJuCOt2R2p+AyvJQ7SRf\nPaC2LXNkHerGjw77WsnDUr3xd2d4euqSWjoBbsv/6QybCilwL7bGmFvPNavQ\n6Ylf\r\n=dRgd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2be3b5993e14d0bddf55fdb157837e5593ca217a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.047e6b337.0","@material/tab":"7.0.0-canary.047e6b337.0","@material/base":"7.0.0-canary.047e6b337.0","@material/animation":"7.0.0-canary.047e6b337.0","@material/feature-targeting":"7.0.0-canary.047e6b337.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.047e6b337.0_1588963165114_0.34415915991627744","host":"s3://npm-registry-packages"}},"7.0.0-canary.119e21426.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.119e21426.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.119e21426.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":"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":"e80feefd040590ebbda0a90b923193be33676897","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.119e21426.0.tgz","fileCount":52,"integrity":"sha512-9ytUyJEQAttJxNjzxXfPDdoX63n2Dce306yMHkXKDmDEZEN8UVpfUVF+/cBCN/KnLGKBx6sUIJh/aaWCYxFjxg==","signatures":[{"sig":"MEQCIA9auE4WBu9M1BEiwT7bkEMbtMTk520wvExSqIaI43flAiB7X3Q2xO+h8SuWRnMVTxcn+VpwgNR3KwEH6xIUmZIahQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetb/GCRA9TVsSAnZWagAAy0cP/253UdfNaBH0Cu30izsJ\nR/wZFIeVv29LXeY2SEZkSP4SwTfTFbdocrCkM5vYF2uglcr6gsoIHAoPCct6\ngXOfVMVpEgaH+u690siL3r2M99ujnQBMXSnoXBkSYADc7VNDStPAUHmZH8sN\nDyKsoDwJ5HmMWi9xL0wyBg/QwrOzXJH+kp+nT061MSomFz05f1y09k4Ltz0x\ne5jySYFIkrUPDS5pQwG9u6mg8Ig7NBw9ixPkeLBcn4p+dfcTEk4QsVIRFZz3\nl9ek6tn1WoFxivAzBm9nw6Zf5vqOMfLkzPRnbBnHb8YUffTjklhuStdO+JCe\nYlLSkD1Jxl53NwE4zfRb42QcoQ7MuFvrZhlRoESV/wZK9HIujjQHI2dPvYgG\nr5k0n+RRIIVmIOb82dkOaRkaSfF+wvN35yOmiw195jxqBAIpkijNnNDQhNW7\n8lGn7gnb8xsMrxQ7jhA6JVSnFVDl/5O2OWE5Hx++FK14VdF03zb1oSYkvgPf\nd53RFIgfY77YcKOdrsiPYoCQJo2GWYjEzp+NmKIEnYSqnlVTqnfQJrv/lc5u\n+zIYRU4sG3HJ29+rsH/h7fFH62linYyuGefbd0uC2OVDwC9ReaWkjtNrc5cK\nNSXufJIa0IGvIYu8IhtcNwaxYaH/mNZVt/dNXTFqcnm5Kjq6hQW777OToLkK\nSu+B\r\n=UG2B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"693ba4159b1a25af6955ffb1ce0555d7a989aba9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.119e21426.0","@material/tab":"7.0.0-canary.119e21426.0","@material/base":"7.0.0-canary.119e21426.0","@material/animation":"7.0.0-canary.119e21426.0","@material/feature-targeting":"7.0.0-canary.119e21426.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.119e21426.0_1588969413505_0.644046596551729","host":"s3://npm-registry-packages"}},"7.0.0-canary.2f052d824.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2f052d824.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2f052d824.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":"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":"3e385d887604228a767622f7dfa73e9e462b2a82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2f052d824.0.tgz","fileCount":52,"integrity":"sha512-1aC3G6m79MlD4tRSqGaSNLe2IiP/proFtNZbh7cV1p3E0nlOyDmg96typubZYiQCdWWDQIXoHIHggbRaL9Ah4g==","signatures":[{"sig":"MEQCIGRJfHGCuXAmqbLw4WerAT9Fys5hQRjFg73a6iKmj6CxAiAqAFEkOAocVslp3qw6o895qFYxFfHiGw84c/jeQi+Lxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetcpRCRA9TVsSAnZWagAAaLIP+wUYQvFB5xrqDqmXQ9MM\nAybY1RzCGaA/2s5Y8jTvAshofimXRMlgBOCk6N3Ez/WlFphyZD1/NoQlfxIx\n0zowuym39stWnb1C683I1cxlvJ1ABoy+1VApNnXyBgR4+oZ4gEeCH0HzkMZf\n5HlDp8o0irfGTVwgLQPl3PoRJSRZGNDlnCx+w4vFZxXmGyouQjHdGJcFRlfa\nnOr2I/8n/nrxPK7gUlqOpnkvUkX/v30Z5If/TL0Dy8P/HQA4zxt9whjuU8qX\nfG3U7ddeY0KCMzJ4ckD4qX80rZbJWsPncD/t+3uz6qYRGLL/FsWNkqc0PLjv\nSvTODb/N3heBw7McA/HP9Nw9i1r0PXsMt4aSVPNHw+fiGSWWqe91J3NefbYs\n5EfOSoaJR+M9H4xh6oCy9d4kxHVRqytFuPgwvbHJqakTU1wEM2jGFFXKyxQt\nok0wVik5Q+XcaQH4ck21TDIHEY7T8SahCOHb4Pc0KbBdCg2bw6qpHxHhJ7Vu\n0/7paPaaX+AQbvc+1Q24V6lCtJSmQfHYSSCqCpGHgwnOKwCwzIbpv9khHKex\nEYHO9w5mmaWxGaBj/KeN5jKubmDzTQ9MevBXKa7AimTBeEOFqIhuThsLZ/lP\nPAHcSiPSjOu6UgEQVhHnbYvSoBywXoIPboF247tx1DlHei5QWnA+tz61qeZ1\nV89n\r\n=KXDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e3bfb78e98db35607ba75f333490d9693f14e844","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2f052d824.0","@material/tab":"7.0.0-canary.2f052d824.0","@material/base":"7.0.0-canary.2f052d824.0","@material/animation":"7.0.0-canary.2f052d824.0","@material/feature-targeting":"7.0.0-canary.2f052d824.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2f052d824.0_1588972112525_0.5671341388959021","host":"s3://npm-registry-packages"}},"7.0.0-canary.e84444387.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.e84444387.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.e84444387.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":"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":"ceb989798067ddb5cb700a03fc4fa0b48dc5495c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.e84444387.0.tgz","fileCount":52,"integrity":"sha512-2etNSndQD/ruBcsmLIwFHT5zzO9S7ZWe3TH7lsf8PrtZU7lkx7wdZZ4RI0NaY0/UjJunld4H2IYmADr9Rrzh4w==","signatures":[{"sig":"MEUCIQCtNkgLEdToZCBsOq9VjA+F4UfMlylPQQpzjwj/5s4JXAIgbxbdbiN8UfnWh+bIIjwdBsip3/9mITWVgYok8NrrVaU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJetc/1CRA9TVsSAnZWagAAnpEP/3/uFrMk6fN9mstM1rPN\nS8RcJitbZ64paTZS6muQ3k2HfiI/TnmP6idUW9vLpyieLO2j8Oex1lqjse77\nuuiazmo7kJL3IZbKuFeDG74cwZgRA7a9lk77MJuP2Dz+WQL5Em7BPXJBiMbJ\nM53HIfwfQl48JBIrryS3n4F5NBxUQ2Xj2JfwA2i+iHjc8IyGX6/66C0iG5yt\nDU5/jtoAygnBh+lLq69RjayxxhQ9Vw1zrbT0x4uPOraPxPp5slj1YJgi2tDL\nwbpxLo7uzM7MyyLPt+3itYRRokSP9u0geZRnqGMGUPqFrilFZH5pKIMCoqYQ\nY1pVSJIswHtJuxTxUjsjxGGgdTHdrvtf7o8zw/Om5+U+GaCgoNqmPiuOYI5e\nwg3RSzSeYeKfhKy/rFdc3DRbbEi0SAbngsQ+tJABecZK1jpUwWfJyk1JiGVf\nlivgW9VxSN4hmjHUFblL0z98MHRYr8n0uIrax3Q+SA4TWKQM94LfwdXIKm6d\nrCMs/o/Hd8fcczgtmq904XbR/6yYNu5PQeqKufqbUsI94M56+026qjzoJwfn\nzX9IkQSDTpXqaPhvWFTLE/VW28DTqbUYUHVBQRaUJY/Ou5d1yiQgFf0EicaQ\nSRIHU71f1uRDC4vK0Saf3S/aiE1Rxci+Vnj6DaQsw/nwJU1tepIC+RilxpUf\naHvz\r\n=ECb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"35f59683bcff8d7b2e79ea4f582488d0d86b0b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e84444387.0","@material/tab":"7.0.0-canary.e84444387.0","@material/base":"7.0.0-canary.e84444387.0","@material/animation":"7.0.0-canary.e84444387.0","@material/feature-targeting":"7.0.0-canary.e84444387.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.e84444387.0_1588973556668_0.7666709146630015","host":"s3://npm-registry-packages"}},"7.0.0-canary.893eb1876.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.893eb1876.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.893eb1876.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":"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":"876e9e8a49e9570a475c3b58201ed4fa548cbe58","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.893eb1876.0.tgz","fileCount":52,"integrity":"sha512-TDjmFgK2clsYVlfuRPkchr+GfBoTQiZMMkVuBbjBv9TapsgHgvddCVDKpANu+yjxuy33uNNlVBuIDJfkK6My/w==","signatures":[{"sig":"MEQCIHmn8zPkyFel+9r3JFHpFQRWnmCzRIPdAPeqaKNN+LE5AiBzUFU7qWochHnlkje6V/qmTrRLONCv6r23GWIwtdJMOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuV29CRA9TVsSAnZWagAAimQQAI840RaB0Pzomfs1zyNI\nrpkZwETnImVyCY/TgzcMDWckeVa7xd25rOVarv/js23rh/96ul7fm9qdyB4P\ngHA+IxQOKcB9xcsavBbtSREcVeGAJ6eiX/WJCvkD058FRPaErodPt/+fCEw+\nBNlP4kWle0pYUGJRWVq5Fxm3DUgxwJKaQOIQv301dnwIUbw8PnITK4LPDjuU\n4THSWzdYOYBVzVw290lz4M7VnS5w67uvzGjAzVijCiKlmQz6DDNhOwBzBOrS\nMeupsAQb8Q+n4ca3yu/8rKS45Wbib5+WuXna7JcRtg6R9EBM/RRG29cBKwzq\nChNMOE1Kh+0dIfiUOd7uRdckT2VWXKC1IX93zoGxe5D7nB9PNy0sKC5a47Qb\n+3CLzFwJ35GAGkHpSVOP/NSVLe0XARA3Wne/owLq1Cw67vRyDHi8KyJw6ijf\nlARau8qpy4ASmP+B4K/9PvyuCXmtU/OQSaeEwap6/KX9fiP3yR5dHqa7rrhG\nr8GOsYBsKQXz22JYmAa+LDoD2vT78iiyhY8Iz6HRvUchguSenswwCeeAmClM\n559bMApzzUN6wefN0JlIWNtGADVDV7sMTW37r2p78OGwb2pLXCa9lcbUbHwr\nfiOkg61SdxZKrknRUixaShT1ym+0TMVPEFuqmoP6We9HYfg2+0IRrOPyl59a\nqW+x\r\n=0zOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4bf9fb733753ef4cba5683a95a2f2a71a743a68e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.893eb1876.0","@material/tab":"7.0.0-canary.893eb1876.0","@material/base":"7.0.0-canary.893eb1876.0","@material/animation":"7.0.0-canary.893eb1876.0","@material/feature-targeting":"7.0.0-canary.893eb1876.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.893eb1876.0_1589206461093_0.6937523775616505","host":"s3://npm-registry-packages"}},"7.0.0-canary.a5aeb3001.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a5aeb3001.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a5aeb3001.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":"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":"40099717be00d3d0a0b094dac7e81b239822f14b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a5aeb3001.0.tgz","fileCount":52,"integrity":"sha512-2vMx8S6/WwAXHEun9Iat0sHd8WF8KzVZDz9uhlp6EEnAJj4fCzft4zikn+KgBsUKgHuZo6ia7W8s1tiJWMeC0g==","signatures":[{"sig":"MEUCIQDiBbyUgMCTIv6zRqFJ2J2FyrOCuXxZniPIFLGeZNUYWgIgHnh0rDk3mmAuSs6QZnmLNx4mpHZmitnzEEW9XQcxcR8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuWGGCRA9TVsSAnZWagAAAoQP/js6+XmQ1eD9NZoQ534C\nEydClHOnIfMY+O2/zGZ36Y2XDoF/cDYnOkzEjGKL7BqyVgjUxOZ917FD0QsQ\nKJ4n2hmYiit3iu7ahLDF8X+bYfN4aEsQEzJGZ66XSTskxS8V8Vr6MLSg82iI\nXWGzDGFNiv6S7mX4nUdDNk2Gml4kpGFhdljcIJLsl0x6fRR/DbNHjJAZ1P1R\nXMc6XEpJMSvOK6n2I3rIlG1SObMtZxYq3g5o2382acVqfCJ8bisOv3/pKU/Q\nCjgt0LDOPvXvwyTs30aqLXbj6EMhQH+2JRRg5DRQNQ9vTqRNoRaEORo7/5lv\nIzY1Tp4+SoJI+g3w5f2yrWy3eGtSjge4ySd3ESKKwhCqZuXjalVrxiJNRTuy\nfFgs0DmU7oUhuIB9XYCCMEkel9HnpRZyzJddghc1eW3N4lkfrcnMudlgsvF0\n2wu9t/XbWWZ+3YrknX54KN1IZKApcKrGZm8lJkO687VK7tFr3csaCEq6X6Wx\ngbzr/8k+qgaqSvNaPvDNpQuAeLv4UTFbHTwhpoKiQUMzQwgRX1AVi1bVYBwi\nX5gyJ4eZWWRnw8TgYewmUa/I/Ymc57jbQH+GFkxgPc2npOXsxHJMPRqFAzsj\nATvV2fu1K6eHmmBR/tGTXDUH9+EYPJOhMLVg3WtJThofi/AnIXam7ehJFz3Z\nsDo0\r\n=Omoj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"01ce640dffe32b7838dec108ffb4d0c40d3e7bc1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a5aeb3001.0","@material/tab":"7.0.0-canary.a5aeb3001.0","@material/base":"7.0.0-canary.a5aeb3001.0","@material/animation":"7.0.0-canary.a5aeb3001.0","@material/feature-targeting":"7.0.0-canary.a5aeb3001.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a5aeb3001.0_1589207429783_0.9393970230400741","host":"s3://npm-registry-packages"}},"7.0.0-canary.610c68d97.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.610c68d97.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.610c68d97.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":"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":"774340aeb0bd1351bbb412e300977161d8a979e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.610c68d97.0.tgz","fileCount":52,"integrity":"sha512-cQcroho93xNHPeWHSBh37ehF5AFvqfVkMyHIGA3VOwb7eEmvLw5MgdfXrq9RJnaQQkR4Z0gEAKMMyzYsxPwfWw==","signatures":[{"sig":"MEYCIQDfNyix2SnE2Us+ih8RzYqAQoXD2Tf1Wi2w0jiQ2MhXigIhAKlDojPgiBifbahkKYlNuRu40aI3eb55fXOdTvmGOfaC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuaidCRA9TVsSAnZWagAABi8P/15QTVyER0CjMY9QPhsb\nEZW5lXcvRRm4LddCm+tNIxjsZ4M17Q2SzwOcVcciuDZoGHvEWJkfdByp3NUc\nZZCkjSJBAWG6TsVaKgtVH5r8KopKSSlB02JVWI4Y8Um7zDS+JYhSObqfvsrf\nAsTqsKH52/Qzg7FtGmJg1ulrx81etSSJcSPutWWJz1aXeHK2y7epj6SXKUv0\nHNGiBiaRvqZKL7bpIPtBx7i+/6Hbf9Csb5R+41fzR9Hb8/Le767xb/piZdwd\n71o1xcApLMKXAULff1Wkd0LVnmFnbU14jNuA9V6Aur9iekro24jbWHxkYKto\nUkGgGyWY/nVVNLRu5rtK3TIqyN2hdftdWmg+JtHzN/GH47yqEcwzes/Mw4mj\nFha8PuiipemCxba9jxjGy7sS9Gdzv3ooi6D3DFGVBjFTxWTVk1toO/Xz8HgI\n7WoNb8loF9a4Mi81uBXabWfg/QEe99q7EvkgzZmywVFBXBdUmc/4LUtDA4/G\n9CsFifRwkuyjEQZQ8IQ5DiFe0Now3+5gNUPoA9QVE3bGCytXv4sX3Gn04rgp\nKNXemSDdyJ1gC8oO72y8myX4KR8jvJo1NG/WPr57/oQE5l8baTyiThtFDiaW\nS6dFvPm7NAyc7r+YSaZ1+f447baQbGHVF7eGGVraY+UeHIYSUcRPudJWfsdw\n3VBE\r\n=wR8Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ac4b0339093446110cc551732ef34ba30b4f4a49","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.610c68d97.0","@material/tab":"7.0.0-canary.610c68d97.0","@material/base":"7.0.0-canary.610c68d97.0","@material/animation":"7.0.0-canary.610c68d97.0","@material/feature-targeting":"7.0.0-canary.610c68d97.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.610c68d97.0_1589225629265_0.12809835939536685","host":"s3://npm-registry-packages"}},"7.0.0-canary.ed52af767.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ed52af767.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ed52af767.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":"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":"a5bb1a2440dd377a2da154ffceca1cef804e6ef8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ed52af767.0.tgz","fileCount":52,"integrity":"sha512-PLlB0cc5f0klD9Ne9CRSCRx5uN/Vg0JWE2Y9F5WWRo12i+4Lxx6GE+D1291AQ6K6oBEnKiNysKjL66zm384mOQ==","signatures":[{"sig":"MEUCIQCCXT4nJT+ws/z3MD1S0xdCfLuKLCh5HFxG0kCXx7t31QIgbtvpLgFMKobvpsFHsx/bw5TzO0oRC6eJM20hUITMIrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeubViCRA9TVsSAnZWagAAIxkQAILGLaw8FF1IyjhX3m8o\nnBS7sIttYu+gzprAtSkyqcsDJCgWKO5Y0ceaEc377pai56hZH4bdEWOSu53k\nGblzhUQ02aE8Ic6CuRnE4wpVPGWyzJXJIJgDD9oS3Tz8i0kRv2SvyFzvOnLc\n04gO+6x3jFQPwXTLvSkSNqoVzw0QBJlAKeZVwKz/ddAcpLVhKlEFZbSK1eaI\nL+KbfRAqhJ4W0G9+Hdt/t54XeETq/X0930skYx5VjyOuZ5OZ2cYZ97CJ4+Tg\nZ0n5B1Rh8wRRXypuiN9K/mtvEvEYOr6O0KeOV0oglqi5l6csO/jDDyBOnkpu\nBuTuciJ0vcmWzAYqn+RbgqkalITxZ+VaGa5sqz/IWjmYbX0LmLruBbJifiwG\nxg7cIjLYSMLHIGIjNLy4bLHBROpXUHrF1F/daHjAwte0SEYTxsjGxfLDAXXG\nMev00y4SKhT+0cb4ojbVnH63L89jGVMDmWA51CN2dllF9Q4ioIh+N36n7IlY\nVUF3dQ85JfEeNrUJXIGWsqtsovKtjlZVjKs5JpsGTHbvQllSn6sWvRv+J7vy\ngYhrHjzxLaVRLrAB14PxkX9Pgc6xVFsH2sj12gDfV55J/M28349rwM0fFOd/\nHVygElUkIGJTW0k+TZJFO6c1U/yMZEq/DHero+kuW1YcKwSr4xqz3nL4etbl\nn9aH\r\n=BKPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"06b24ff740d1a29e8764ec98f735b6fef77dc5dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ed52af767.0","@material/tab":"7.0.0-canary.ed52af767.0","@material/base":"7.0.0-canary.ed52af767.0","@material/animation":"7.0.0-canary.ed52af767.0","@material/feature-targeting":"7.0.0-canary.ed52af767.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ed52af767.0_1589228898218_0.5065696750428883","host":"s3://npm-registry-packages"}},"7.0.0-canary.058cfd23c.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.058cfd23c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.058cfd23c.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":"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":"1e3f8d770813253c5de089cb92b3a472442b82c1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.058cfd23c.0.tgz","fileCount":52,"integrity":"sha512-fJ4AWqd5RkVyY9q7kQfr2I8oZof6ym6YKj5cbeE7ToTkXuPEkM+aBRQMbxTNPrG/OBgOrN5k6cU7c5Wu+/q2qw==","signatures":[{"sig":"MEUCIHt0eNtCDk0lXB8icCAeklcofjylf32vjAZD312TUpe2AiEA9AHFgxP4d1fXgMx72Snf2v+yzBIU/sR+AMErecbIvl4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeucLvCRA9TVsSAnZWagAASp0QAInOwxv5Z3PzjXrmu6ZB\nxeX67rC23PS4HbosoDEW989giMlbqPmRdoaBCKvX3hBAHMqSzIWSIrHC2vHU\nyEG5aCO5dXYf/538Az0roRDSg3tm544DsmoIrRTyhdqWK/koLRwlN7XNra1P\nuV/NCl9zvb+BNbcJVC74KIB0gNib51ENROMRf84G8PX3zgD9w0DBJy4gDcsv\nwkH5xCXPbqu9NbeQ9m9imsim2snf8Gx+ny0WIab6CRvwDVG636g8xFLZn/4k\nO8Nd7nRGzkhXqsCHb+FPTcsDr6KLTkpryNBP2meSq/Q/wRBhV+1+DFZrX/z2\n91ghMMGHtsvdbmIb2+HR7Y/66dNIThM0o0t8x//bqEi15dbi+f4SYk+OGYgy\nJZofwrPXHc905BpxhpV9lr9ike98wJsfY5VBSkG8AjYJ9MBZfZ2cto+KhYwJ\nQHs2j2hxJg02j+SRC1D6sY6m/EyjTJBynpat1sikov+5dPgwcH91EPC3z5Yp\nmuXx4/xRJgSpX3nX6ys0WVaqt9tzReBl5Prh1f2SEgubRWP5siTF8RNa8SSJ\n3IAKqboCXcjBO8bgeSf6aMZxToDYT1EvYOOGuSgllwHH1jCu9Qt8shT2T/4T\nW3hed3gHjTwXo+khrXQcR6+nNCbubDVIdWDFYKnCg1sTAFaODxRueY84BVT4\nY1Jw\r\n=QIuz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e012af26b00c720a751210639bef8379d1085234","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.058cfd23c.0","@material/tab":"7.0.0-canary.058cfd23c.0","@material/base":"7.0.0-canary.058cfd23c.0","@material/animation":"7.0.0-canary.058cfd23c.0","@material/feature-targeting":"7.0.0-canary.058cfd23c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.058cfd23c.0_1589232367208_0.8354424587440941","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a371b4fe.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.0a371b4fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.0a371b4fe.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":"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":"f9585bef48cc369563b62e98062465c9978067ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.0a371b4fe.0.tgz","fileCount":52,"integrity":"sha512-XdcLO6X6ARfRvDGBCSaLHz0/QHNK+SEFCnWF/n02nV4hXfU3h6AVdv/QpJQe0dLtGNg7soUBWML65P8CHmECAw==","signatures":[{"sig":"MEUCID3FURyFR7B/3l8JDFUoihq15OliDu3dT4n1A+LpS9OgAiEAg+b8v8/GUarLlZsdRkZlCzqAIsBwSR21rLb7IofYBYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJeuy7+CRA9TVsSAnZWagAAPGQP/AqZyEf+d4H3FfU6VH9P\niwVg/xKDgBm/xaozQGVSLFX6+P9K4OyjKtzPeQodrb1eggK85HzE/3JEnZ3G\n3/eZonw1yHvXI1RlyCBpBaX6fbvZbzXO6W0b6MQbrDWVKrD/bDFVHBuwZu1H\nHiP3AI5GUZeXbQVgNojKS2zo3j3pBUgOBoHH/WvkSB8Ffymb2GzwHM8vbwzA\nbt3GVQN6+/Tv6tAlu20iJrPTHuHpABOT05ExR56ljtBQjW1XBfx2jPR8ogvP\nn6/Tv2hwR+BJdX+359E2x21DSAulVop1rlGytJOY8+0E95Y9GrLRJ/XvbGbj\n+cK7n7+Pdh7D6x3LPm+WRhp4taLwLstRaz9Qfv7Ignhl2y29vXqW/WAFyf03\n41u/nqSGSkqKMluQ+2WAlClI67Rqozh+SnmAtvSfePeytsGxHA6QDBtwEAnX\nEGg2FCSLw5ZTp/W4X6l6qEi4yJUS+mnC0mtPL+3B/wuCvLozRMe8Ry5Q+lHV\nh2U1lDUFdsBKOo2/jP/vgFr+tcFuRcFJfDuKI5DemkgRPzNccN6Y6YNKFw8r\npMnnRaww+oMOM6JMvZXocf/SThvznh4ex1bD5YNwmL5QLlsZUzC81LPRivFx\nwS7M59tdH3jdeKcxIRbBOib7lUq2D3tQ2FEB/sm4U18kYHljAsGKLEPhe3br\nm6aO\r\n=qFuo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c3c5efa159a3a5dd1da72a8e4e94015fb7984f7b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a371b4fe.0","@material/tab":"7.0.0-canary.0a371b4fe.0","@material/base":"7.0.0-canary.0a371b4fe.0","@material/animation":"7.0.0-canary.0a371b4fe.0","@material/feature-targeting":"7.0.0-canary.0a371b4fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.0a371b4fe.0_1589325565956_0.16097096108287845","host":"s3://npm-registry-packages"}},"7.0.0-canary.2139200b3.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2139200b3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2139200b3.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":"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":"434dc92fdc91193a38f4bc1c13f8937ad817c4c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2139200b3.0.tgz","fileCount":52,"integrity":"sha512-N7AxWllzu5q/i1Fas4mXArIeCjTG1+wPzZPrNsYomLMBhYMNgidt/BFsGnNtgFaWrfx3uiYkMFZKIbzdq3BMog==","signatures":[{"sig":"MEQCIBrjgaYmw4Z3LCA8NBcX3m/hSW+P3WitmXK0Qmgv+iUYAiBivnOtzNO6cY62rIe9Pdt3+wRQ1df7JzejY9VZWeLjjQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevAi8CRA9TVsSAnZWagAAwP8P/2FUWnaLgv/DWJTPg4GU\nSNZuMeWEoZ6vTTq86/nU12S724caMLuwETGiQ2glXZbIV9zujkjGZ8fKO7Sg\nUgyZs9Oq+Al3i+0Cd/g60Unj/Um6fWbZZW6fGn2yEZBwOt0PV3PrxeWjy8hG\nSI5URJMHzB7GfsRQc3eGRBhtCxRMnyhPhSYF9oJ25L4Y5azdD2jVhLhSLDsy\nATUWGqk1HO2A38bnkK/z4T+ZDVasASFJrONTqi19wuNTiE0zngJOT5Uy8gjr\nhwoa/RESjh0yZMFqhiyGQ7XJTyrFYgQgFPt2TTxSeG1g8GUNVLBddMyZXVh3\nDZ/ehs5sVB+CDlDpx0qoBBseBvLPFlVDh7pUVgAFPs8Ha7bkAnS/ZwDdff/w\nEKOI0YSL4ks9Ytr5RI7BgTQTWzW/hPiIZl960wCBme6JKM8ohcfmNoxCMC07\nmu5peHXEhGZfJhJx/xP33L3gxBnWXcsh7bhyLowVFat+WuA524DzvWnppZzR\nt/5rKZbIPMR4W2GASDJwJEtPh5QXF7QkuOrG2xs70Yx1LaVIh8r8UPxja1Um\nPZ27KW7U/5XZfOhanqM7j7NYXEZAevMEJX4ZrADqrnsChbWjHvuY3HfEAcJS\n51jVeI+GYMaRXB+YGPuadY2SfVFpp4S+QZuqjWKvtLF60vbGqxmrJK99XCN7\nkb+g\r\n=a6Op\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"42c214d2b2b544f76002d71be276eb747a69d9d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2139200b3.0","@material/tab":"7.0.0-canary.2139200b3.0","@material/base":"7.0.0-canary.2139200b3.0","@material/animation":"7.0.0-canary.2139200b3.0","@material/feature-targeting":"7.0.0-canary.2139200b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2139200b3.0_1589381308260_0.4886041667758594","host":"s3://npm-registry-packages"}},"7.0.0-canary.744d751a0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.744d751a0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.744d751a0.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":"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":"4c09de482d59d63ccc5f92340710c20f09946a24","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.744d751a0.0.tgz","fileCount":52,"integrity":"sha512-+ELRcuHL/QttNBtaCQokMPHTmOTHQMitDGftii+v/d/hVng+PtXduOBdKBhvzomL/qMeyT+kBf+YRdmcWWH8Jw==","signatures":[{"sig":"MEUCIE0WBKmyyJXSirjofes7nzENb4cq0sgAGjCJPvlnlTOMAiEAvWJoUKiB5mjpWiE7bcvY2ADPhCa0whxVSmNGK3W52rg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevMyGCRA9TVsSAnZWagAA224P/i93CjhInuyXeGsqmJmE\ncUNUTDNLER/VfCpZ7mbY+0Zwl3t/yeBEknhy+8kDN9KJO4Qa3UcxTkZcxYyY\nL5jLhZgX0wyUB9kbrFxcjfuCVsnJumA8WDvzIRSELSjHd3hRdfRBy2cHaYNN\nNOTR0BGkwxyLfUEPCNVGNsQwRS9KAKLF1bgeCH93J+nLJIwp9eM1PigBpu8J\n+nzrQGkVI6hxvrDH9RXK19BPJtzJoqcQ2uiSzkdeR1Gs45uK16Dc3MF6x//d\nO/6ho/LH6Q4/4A6YLzr7ScT4eqb8YBDFurcWtbpp7DBorBmQAnWsfSU97pL4\nyyclFelLLDJ9tZpeFVXgeHQriRGT/HiyXzT3li8nhxPUExAz+tvk7TbjC161\nj7K68Z7kJ4e8TdbYeepTmDB59vq7XzxilDS3mD0O/JQu1c4WpUJSWK8UVhrK\nhS1nmbrZsn1rzLPd+B7L6csUN++2NLulGxwZsbq1DfU9sY2ujK0LM82TQu4f\nMeUNZh+Y5ug6bs8OZAqREIqorpXwthi3EY+5cBtIKTOFpBpx1maNukpreiF8\ngS6qxdfqnoUtuqIscyxQBNo1jYW8AvpSfjtDgvIqGw1lOOgdqf0nq6qbS2qX\ndVcoX93V5rSZKiEl1IOLE/HOIi7bGaiP5fYG9SPB1aQOpLbPPS0W1B7OQlO6\nhaRm\r\n=LWjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"afc5bacf5330bcdbe874e652a8d6df5e4a35e7c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.744d751a0.0","@material/tab":"7.0.0-canary.744d751a0.0","@material/base":"7.0.0-canary.744d751a0.0","@material/animation":"7.0.0-canary.744d751a0.0","@material/feature-targeting":"7.0.0-canary.744d751a0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.744d751a0.0_1589431430330_0.42327579494919476","host":"s3://npm-registry-packages"}},"7.0.0-canary.ad0c0c103.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ad0c0c103.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ad0c0c103.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":"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":"a8fe564500f0cc1a798f5aa3b8872bf4e49353ad","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ad0c0c103.0.tgz","fileCount":52,"integrity":"sha512-PtDn7Pd38tvgXQ2LXdOt2pme5ujRyZznYWpUf54mTFq0g/Nr2k8jigql//SzC3sy8qwOFCtEdtKKHK32vBLOdQ==","signatures":[{"sig":"MEUCIFLsdSqX4Vnrx1MVA/O0+H7Dlr8lWNL1q+0wABS4pVyLAiEAvcO+VZv3vXdOkO+I3nIhNm1zrNdUZE8woEnlpVORP3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJevVtBCRA9TVsSAnZWagAA1ncP/2qAtNd9iuRnj5QNCH9t\nuepyIIZ/+Ioi7fvYefCP0miBRoPpP/o0wO54IuOGFzaPZvxns6LCYJacleBR\nmJCaPYR2cEQzaXCmXpqSvAqY8l9eAQ03VhR3l4kRtT21GlSbEFFKcK09u/XK\nkfApEgfg2XTgBEZy7r1kUeUKPQByCab9x5tKB/JSlJvWtL0tdYKeElRoclvO\nWLlC/uIlqeOlpGHhh5RhC4cm44azEORi472J9dScOu5ugj7VGIubolPxYX3I\n4uErbn9rc+yLcMNT2wJF/eaYPvRBwg8bGLtmaF73c+T+SBQTEUEvlPCV89WE\nXsmsNnPVPMsNmCAwKmjk+QW0UtXfeFXTiH2WAKASmXl2o/04/8OtU1CRFATu\nY9gkqUiPugh+k94pSzI/JJ0aqpBBYwXxxch27rEYhYOAbaRJefdztbKWmsdN\nMQV63hgBpiBv5al+HgaH28wFI/1MF+xgLlB5uy7LG2DgWch2hOus57veAvgQ\nJWwUi3E/+mjSI3QT6KAoEChLXLtZk+8Y1CMeVA++h0Ho4mqj7Nb0pvgG5qSn\nykx/W9YUy/0Lsh/bY8aZ2rVhWO8Qla5S2RgmBOTQOn6oiinPt3MSv8QSZSnQ\njLLzD4e8NgLeW0S7ro7jtmyCdAcjsysa+PR9myMxXV8GlTiZJ9RSk9oifCq0\n5h6B\r\n=J5Jo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"76a0fe161f579d30f0d739918fe09f5f4eef04c0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ad0c0c103.0","@material/tab":"7.0.0-canary.ad0c0c103.0","@material/base":"7.0.0-canary.ad0c0c103.0","@material/animation":"7.0.0-canary.ad0c0c103.0","@material/feature-targeting":"7.0.0-canary.ad0c0c103.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ad0c0c103.0_1589467968843_0.7272924899453881","host":"s3://npm-registry-packages"}},"7.0.0-canary.fd8f8f2b7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.fd8f8f2b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.fd8f8f2b7.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":"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":"517cc204884ea65504878ef1993e9196855335cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.fd8f8f2b7.0.tgz","fileCount":52,"integrity":"sha512-lQB6fHNsfdYyF44NgMv29Pm04xa3G2ziaKjJd7vF9nSw6vf6awaZZZrll61tw9Jgik9t3viwVJGJkE0qLr+31g==","signatures":[{"sig":"MEUCIEwr3+WWFDBgu/OAXk4OU9jf2CCIlwCNtSKcMQg2AW9cAiEAtRHXdSEFR5HXuCUaufHOPXR4cGthN6nAN4QtkNU3NkE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewsviCRA9TVsSAnZWagAAuqwP/0ZX42CtIvFEDFJnhxBr\n98KZzYoSWfSdpzVAr1Dsw6heN9MBdxlRRD3d1eG/EpDTOnjfSeULdEJBdxCQ\nnk+rwr1Nko6FSSvCvmYLkz93mw1POjLXWI8FzKdFEvTFkaclMUzd64LDRyKO\nRZ2UTCSesLhXStKtLo1cS1nvqHPvLPjVZCRQ97jSF8rm5Gq45wDVOA+mdcSH\nyoOFv05MT/fcpAHl8yEIVsJasUVdcA2eh7W7ZzzyNmypUilRJ2JpjXd5VvX3\ngqtrF0N8ePFI2P1DuW1jmfwwsWdveO8XlsQO6G6ENPlwuwhBPm2j7kDFL6Vd\neC+8OxslUC+xQ0t6XaAzTs4tHfr/lQYo5S/6Bc7TfwydApLZ0lxuXs0EEcm8\nQsv3l08NjIpi+35xSo6WxiVwY3vixTd/JEvBLM7AUKjXzE0sqgnBeITMB0Ta\ne0Wt8uOWlTnARGmY7U3kmnisXxNkljyIjH/bsMdq3cEaRKOJ1ZcCwcD5iG3u\nkmvE5Vd+NhwpqDearVhARjN8oc/3aZFbUXntmTk6v+N734jeilr/oJLrbBk0\nUS0AFhf1bWU4TVMDxXi9ypD5n1pI/szMSFWtK340WzWOvUKBteouT/npF8xb\n0WKJjhDhb9bKH0kCnC3Dmcok9QRONWhzoW2FC1kx3kg9Cva1K1emulWKHovB\n3s4L\r\n=OMxG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"30fbf3d1582cc530b978714ab043f92bea7c4b83","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.fd8f8f2b7.0","@material/tab":"7.0.0-canary.fd8f8f2b7.0","@material/base":"7.0.0-canary.fd8f8f2b7.0","@material/animation":"7.0.0-canary.fd8f8f2b7.0","@material/feature-targeting":"7.0.0-canary.fd8f8f2b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.fd8f8f2b7.0_1589824481744_0.660632873779941","host":"s3://npm-registry-packages"}},"7.0.0-canary.730920fbb.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.730920fbb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.730920fbb.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":"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":"8bc02532aca152e981f192a16244e4c513c72601","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.730920fbb.0.tgz","fileCount":52,"integrity":"sha512-ZTQ7h37n9MOfPo0hj+N6WsDr/P07vCNwfMerTkSdyMHbTFJJrAnjD1vWmGgaJ/zkZKf7PZb70YNE2m66VibKpg==","signatures":[{"sig":"MEUCIGB3bnlExmcZr1+CRSGOH8EOIAIjpBwrlB3izfG4CLq1AiEA7R6st1HNjtEXVEvET+ax1PdYXbttjCMJQZFQxv2GBng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJewuXaCRA9TVsSAnZWagAAWhcP+gLr1OwEUGVJh8NRxfX5\n4OT+vn5lSGVGCEJ/tiZLk86XwZUBzC8d2BzKNBUnZI4ACbKoSK4bb4bhqE5+\n79vdzsxSOXH/TInGmXZP95i+/pRlwlC1FZe+MjPbLnAUqv+TjmHV94SiXeSj\nZ//xI1FeDFDI//oy+0smOw60q5S9Sl+CMAMse96WS4fcZZVpaabneQEKNLbv\nGlWFHJL+uaNRcHTPzMty7gvwiXeQlLzBXq4NzhD8D4IgTx/ByUqnE+aPX+4A\nOKt+Ma1nQRKVoh6SMlQkxzG0RZ/iv8Vk1wRJYPZCoHWpwy0IK4MTGg4iLLDR\n+a0cW/JlZMRplETfhmB3txGA2przjs3S8vP5jmWzSDLbv7XxqOhx0mFZjK9W\nfWN/aEnxZeP6AFvMCuGWl9IgsDrKWSpSN+n/zF0xCM/EAnX8EfTQeoisiQ9g\nAa0YZId6z9Kgs0mAQZFmP6sfFELRTUTb6u6bZWPtB4ybs9/qKaQpTXEUJhV5\ny4Zw6UI98yyiHZiP/W2szeIv2QO5H6HIJlOwOvVqNIntnjpkY4focD40vPIm\n2m7uXM8ifcP1qqzM/s/Cub6vG++id7zt58qKNIIXxwhsRCWOzY31GSybFcOt\nxNKUQjJMyMIFRvUtrBlvvRb/N6+VcThC5nZWCcjPGUXpBMxaLgYcplAaMmys\nrcd6\r\n=CWzS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1acee01a3bcc1944050bcc6a38a1846c507db43b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.730920fbb.0","@material/tab":"7.0.0-canary.730920fbb.0","@material/base":"7.0.0-canary.730920fbb.0","@material/animation":"7.0.0-canary.730920fbb.0","@material/feature-targeting":"7.0.0-canary.730920fbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.730920fbb.0_1589831130235_0.6806617954842664","host":"s3://npm-registry-packages"}},"7.0.0-canary.bcdad99bb.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.bcdad99bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.bcdad99bb.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":"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":"9468b02cc24a24d6aee9a9eddd74ae8297b935fc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.bcdad99bb.0.tgz","fileCount":52,"integrity":"sha512-pw2jLbG7l7gUeITet/pCf2oVkumrF3oXaJQXbkW0TtZSr01ni4yuYpLhkyNdLsriDgdUrqB5JUUgENJUAuCV1Q==","signatures":[{"sig":"MEUCIQCq9cW5b1u9nIXLHD8hyOEwYclHO1ixUeimtPel+iIxuQIgGdJvjpd3jFSVQaNiRJAZEX57CmivJAa+GY/m9McdXOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1AtCRA9TVsSAnZWagAA1D8P/R6hLJXtBQBmh5wM1qcT\ndVJPhLHtCIbPdtICFjLbBNPWFA9ckOx23dVaNnH3/FiuLTuom62o+xz0uHmJ\nkoQFYrWDXl8H4Slfltg+xteV16iJ3xg2j0iYhkFBsmyb7GIt69572U0m2Qo+\nMIYtRm4nn+/Bd2DZ4qKYnNdKMMYstFs4J/j9O9uqOg0uqsJtgIMtoeRUqmz4\ngjqzjje3HmcdSRAaQ2YSBDQKACoO4WemgHqe4d/feLgplumfnZkc6CBmwW9i\nkESCx4fXIquHgHJ/FVMJ9N4e8PhGC7LTA2eCjljH06gveQ6Bjt3hD0IirUHB\nyPzZpvxDm4ojZqldoIb1ytF1lDpad9UGGWxiFzucEssNdxJ/+19uWXsrE4Az\nFChqbXTA0Q4Yax7Uwyg7ZlQizANBQgQBj2J4+xxnqih0EbaiPekOkW2SIKFZ\nkkZydMuyivxzCLMWPukLD9alfjpdRfRvRdF3zfeTATCr2N8mfs2b0I/QWA8Q\njb4pqC82rLmJ20iMwHihqa7cxRLiF3LE5IG9mPIXs106Pn2oifDmy+GTwWtd\nKBd3p4ZKcBHwPvlJYr5gFNB1K4wJRdYS+J/BQWGJMB11pQFxehhaluRE38vQ\nm62CXjQrYI25tdW/0QPG5W2R6r8Wio20O2daJGtAcPRyiCHmil3q8rKrvq0w\nDkKP\r\n=Bqgc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"33c3545075b4fec07083bb484fdd7245d0b243a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bcdad99bb.0","@material/tab":"7.0.0-canary.bcdad99bb.0","@material/base":"7.0.0-canary.bcdad99bb.0","@material/animation":"7.0.0-canary.bcdad99bb.0","@material/feature-targeting":"7.0.0-canary.bcdad99bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.bcdad99bb.0_1589858349247_0.09776571953896607","host":"s3://npm-registry-packages"}},"7.0.0-canary.4497b86ed.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4497b86ed.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4497b86ed.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":"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":"27f238a53052b44fa16ef794c430045baf7c2e09","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4497b86ed.0.tgz","fileCount":52,"integrity":"sha512-3aOHam53hrbwb4Df+qWkrv/AGwkgcoaqKy/0DraS7rkSi0nikcD/sjQoh7A1XPft5ib4S/ShClukGxZs50SdXg==","signatures":[{"sig":"MEUCIQDwQ5kRomXbiccujbJxlfliubSsSisUUQxwEwupBUQbzwIgcBeC5C+NPFttAsf1foD9SVG7IGgm4Q44fbQ/IPyKCN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJew1fUCRA9TVsSAnZWagAA9DIP/iUEUcQhWaW8REwWluXu\nzEAYtai++LjA9MDukDnKBJeP6HfmkFQ1DO5zmwoIkLrZhw3bNzMlIMKm4MDp\nNtaqd0aN4xeOKR7bYnGfb8OTyyqx7aCiGZty2G9ZmjxOCbiBMUMSxiOyay5y\njJT/U8VYbGWYQgs7dI8fA0Ueyq4Npeb91GgT53o96b3cC9zHTlXdgHZSHk32\nIIVPiX84riAKCo/eGpwErjXKEupxh4rxOhRjJHk4pSQUgkrfhVf85fiHXb/S\nWOJh6w5lauy25OuzShz8t1LpT2t6Nj9WMZr7VJzlcP6GDGjj9PzHzkBzeo/Z\neAvdCrb3V0sIfRtoWhDyJH25ilxg67utODKHGuomMAw/WpF4qk/w7rbsFBo6\nndBeEMirEcUosfDWvbup3vMw1tgWf5EqdRGO4aCYg8466iaa4lFjZ0H9xrHd\najeVkGDANda8SXeXy0/ybkJqFESl9D+ukRX4+wYuKY9AySKnTSwDKB7C7tSf\nCKQTHkisQktQkib4gw5atoWDOsJoFn+0ccaw5K734TR117mvdHYhPVJcf4rh\nbNq1Xtfaia0MoEP3K1fHf+9t8ma+l2r9dsHFO24gCL5XyOQBzvtU3tccDt1C\n7PLC+S7iKneOwViBdBSm98x/ThEFtZv7YL/t0yeZwkfzz9ghH6j7CSbk1ZCd\nY5sW\r\n=TiyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7ffe8b9fd24f52b80e2fa6a7007881da7c29f885","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4497b86ed.0","@material/tab":"7.0.0-canary.4497b86ed.0","@material/base":"7.0.0-canary.4497b86ed.0","@material/animation":"7.0.0-canary.4497b86ed.0","@material/feature-targeting":"7.0.0-canary.4497b86ed.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4497b86ed.0_1589860307597_0.604395538613977","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e60575da.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2e60575da.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2e60575da.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":"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":"21b8fc840c0d71a68242f770292b8c16afea669f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2e60575da.0.tgz","fileCount":52,"integrity":"sha512-p0PNMCK4ZRHmOCHOVrGcaR6o4zhNY60Qo/U3fhGeg4DEn/C39aCE43qNNAm9ybwm9pglq8U145s1vFgj4T5q1Q==","signatures":[{"sig":"MEQCIBRrEH0z4wmwP67yvIEnRgVm9RZ8nrBhOEYfXthWSvEjAiB9r7qXbRtDk9TV4JXP/raabj4s3IPvIWBGklQmpj8jmw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexAT0CRA9TVsSAnZWagAAWS8P/2xw8N/H4nX9nOyB31sr\nTLE15sveXR2wweFWY1D4Ta0q+1EDeXmH/xOgUk8obFXuYDdgxO2bt1B9bqWm\nv4g54oR82hHuNTUIU7Zs93hBnAO+DHFW1J1bS4kst+zh71dHmYjOzWqYCkpb\nIV4ExtVldeM9X0Bp6EXUrTzpt2WrfRSFAQlxMr/pwL4JZU6VxZxTePJcqobE\nr4K1WtpxeyZlSxKNj8Afxiomy0kqPd7+8hdlJ6lWbYM28NrlNXCefeoNDLuS\nWUUrJJGTb+pJWRufsJKvc121iwgm/JV8wrvUsfp10FKddfdgPVqg5//Jpwy1\nsaKx3/eIKA2NvRvscFPcZOrdlygiSwmrmnrg6wOeJay64IJEB/EDsyo9Igga\n0wZIDlU5N+y4zyGj3ihYkp6T6/YBqj2VVTirpO2jKPYZXnNjcRnhOyy6Yy28\nhGBdUxul+rc18Oom4U1eqjva1YKkHt6vUxpDxYQKN3nwH7U2qTeTF/sXLkN4\n4pmVGnhMjNpfXZnD5Iv0xqRT9BehM7gZyn7Mg3PU7w1oZ0izByvwCJQRtjPL\n6Vl025KiD31HH9cSWyx6iIyUR1ZdcWyxnYEaaV6xu/j4SeFDRopHczAaYgUE\nFUjnYiGNo3eJzS+AQb7Pb8qpWcRh4h/AjM7gFZJbtysriGowkRhkPtMVhpdY\nJS7a\r\n=dgFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a4b6f1d5a01445ae9c14845614630907beaad190","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e60575da.0","@material/tab":"7.0.0-canary.2e60575da.0","@material/base":"7.0.0-canary.2e60575da.0","@material/animation":"7.0.0-canary.2e60575da.0","@material/feature-targeting":"7.0.0-canary.2e60575da.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2e60575da.0_1589904627848_0.8710547536567568","host":"s3://npm-registry-packages"}},"7.0.0-canary.e3eacefcc.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.e3eacefcc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.e3eacefcc.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":"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":"68ec7b8d4fc25c2100c6ebe0e5dbd1d29f3e9393","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.e3eacefcc.0.tgz","fileCount":52,"integrity":"sha512-cwrYF+EWdpkw3C/2ekLRsZyEh4Gkjs6Gu3sY54CEcdk5sJmB/FB4LVfWN0T8uLw9+ZBm29E1JcB8Cp8HANQDYw==","signatures":[{"sig":"MEYCIQC4fpvB3XmgTEskhS7kxiC3BD/8PlP0CV9MLNyTFG184gIhAJ1Mmykv43WgXHXFLRrY4fsrduAs8In8RU7xuSsVp7t9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexBnKCRA9TVsSAnZWagAAw4kP/R2d8b9cYJK1Dub2eQj+\ns8Bn79Lz8zWBBNDr02/4MgbXocaz0AuoWTEUdudtvXGt1Y4am9u3eLXyiqv0\nltI9xS+BibYvbLH1x9/HTEVUpJIikFcg5enNz3y/Qx7MNRU2o4AFHcsKgSAU\nH70JPcXfh1eRU1fe4cf8eefBAO5pRCr/WqVsuGd42vCc8VVWmTMWM4/KItAt\numRs8ghKHclrBPhyfQjEEiPvNZ/UFe1TjIj697lQYUvWzPAFnlFIkMaG8cYW\n/ObWnGyFHp7/1xAcj57ougcBmhFfLdvvvdC7Ezof+naNkz4yZXxdii/EWOuu\nQiHerMtuuQcONg/zdH42LRhUFA9GJ3//wGplnhx5Xk2Mn7OXuwSSLbR9bbU0\nk0+N2sJMndm0SIGpa4p6IiqdnrwczK6yGXwHTq1a1J3LYyHzgc0ngP93WIhe\nTekXvf0Z2iVQFMHY/PQv4GfwTmJ75eIwcMW/4hAkLzVWuH00x6ioHhNx8w7k\nFT03qbV+s2c1DyurOVPbKOX2Hftrrtbn6voRtzmnZR6oVStEE453BLjoyOie\nZniwBg0Qz4OnoUIdLp6wYUIRzzzT1i5rLwqYZy2I7Um6Dz7avu62y7m7vi17\nQ4YdOHfvX9daIleZ41D16rqvZ1IhB+jrYP1AhkZqnRyT0l0DInbZKKLWqmu7\nD3e+\r\n=3MiG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a80846c07f1b98212ba692bf027c2003093d0180","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.e3eacefcc.0","@material/tab":"7.0.0-canary.e3eacefcc.0","@material/base":"7.0.0-canary.e3eacefcc.0","@material/animation":"7.0.0-canary.e3eacefcc.0","@material/feature-targeting":"7.0.0-canary.e3eacefcc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.e3eacefcc.0_1589909962038_0.08367012200720025","host":"s3://npm-registry-packages"}},"7.0.0-canary.b065a4d2b.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b065a4d2b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b065a4d2b.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":"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":"dec74187f48be34c35dc2a0332d9fc32e2f7b1fd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b065a4d2b.0.tgz","fileCount":52,"integrity":"sha512-WZDKkW0NpA78/8V9ox+c3ye3yMp8FKbofHaG1R5j7WfHaWtvh7ymnx0n0VCCyzr3SbxjDgzGevVi6PHlmkGGKg==","signatures":[{"sig":"MEYCIQCB46pXv7qusijEakr9XALXryP4lX8r4vMMbgzzOZLMfgIhAPMzuYhSqRCWH2Buc5vexbQOhcB/L0WT+5DJnlbpyP0T","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexUDfCRA9TVsSAnZWagAAzaAP/jZaUmv1+49PNlzATEYv\n8u77wW/QQ7o+3CjU8fpeWA14cYGUzXsEetQeswN1MzN/lTK7b09CGZHaD1bf\nz/ocCYhOsmpgiDodqLvsEcm27KcmOmg8/qGfgbwutedosnA7j7FQ++8RrUPi\nqUJGsV8tqdAhQ4JbN4YBkWdyvSUdsRkEgnTX9XOuqMznVxNJaLe80T8ZCh5U\n+zSLdnz8R1qhIwb8Yn/kW4I7In0lH4/15PVbBouPjeFk2EK2frGoDTpMBhXe\npW+3BbkFnnYE3Zhvc5dnehXj1Sb5z1aQl7GZmZgOGuVAx0cwaUu9TYpNhOXx\ndKchwNjAXVJMAqFZg2GA3xnf7IZbnfrKVw33L5jdyNHOVfah+v0xA8/olq+o\nTvWDyJaw1APAx22NL79wIkiEwIZrtwG/MTlhqDB9IHELirlt/QIRWSnWsBci\nOAkw/BBgdwgxz8qbuQ6T3RjIxIVBpRhwz4SVYkDQIsdKWvnCKL+mNIHARqbr\nTW+/VrNr2zrZKJtk+oGBPPtg5s3ll6z9IBtWP0HFqaiCay1WbDu8+l43IHy0\nB+mhqt+pzeLZk1cBJtyhuWYJDcHoN9IT/ZxCFNsw+TheArt4JmUnOFTOUNz3\nctF73YFuW02sYcel8xCoxMIpNQ92fQPcI4WW4SzpMfBqSXAl4uMoi1xtsSUL\nZosb\r\n=4j1p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7de80cb2ccfd67196d7be3fd614cebb9cd73499f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b065a4d2b.0","@material/tab":"7.0.0-canary.b065a4d2b.0","@material/base":"7.0.0-canary.b065a4d2b.0","@material/animation":"7.0.0-canary.b065a4d2b.0","@material/feature-targeting":"7.0.0-canary.b065a4d2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b065a4d2b.0_1589985502724_0.03640661652110011","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ebce8d78.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4ebce8d78.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4ebce8d78.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":"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":"971ad5335760ad1ce116a86bb21634e6ffee68b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4ebce8d78.0.tgz","fileCount":52,"integrity":"sha512-MIDM/92gcbmXGXF2LSfb431bw8HQFGy8Ki5eeHd4Hu3NaO7fMfN3JqvQ4JoaLWLzdb5QGGjW5G9hOkNCVXJEXw==","signatures":[{"sig":"MEUCIQD/A+Mk9wMqJKvOJwe2lo/c1gvp366m2bEgYdAvQtmmgwIgJ4NTnChMRxQtBZVTd9Vc6raS3VZXRfaTLgXr9o8Lquw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexZhaCRA9TVsSAnZWagAAowwP/3+i7S+YNAwTp6WyxpCf\n1kfbYDvU+Yrzu09dvXZPlo50qiM/rV8fucJIYPeU8o96Wd1jztAzQ3RZxnWv\nH0ZR1+fuStHd6xEoVos4HQKLUbasfe/bqwPHZWwA8rZV82jNCpY6+Fl3zVGo\nXXLW7nSyrBdGgjGe6Su6WJN1TJ1CIDCH7VkJBCAQZYuNCmK5uAAfNWxTwebd\nTiux6KFUK+tcDsgHwE7g+jBTo0unEh5/IwwLCIxL84/hCvOmSLsiFxt/hVSa\nNTg3CqdrtDIF7DJEYpJ7EienEGziOqZWhaFjHO1NU4IIUtdusdJ2sw4IyA80\nC4X9YTXjCpUCIQRymG8frxXfxb4mP+Z7tzsQYMrevNLEtCrK4P5xqTT/jR+W\n5Gln+dgy97zhNVkJb4cUNfuBfVxkEUiMYgaiF9Vm+MbEh5zim+FzKGfsbt1V\n1qwbzv20rqaNzbtsfteswDAuOkdYgdmAP1pW5CyyC7zULnwltr1wSAp9FhlC\nyMJcb7tU4MlIZu8EibMdk8p4oHaeizu5qubV8WrUBbLCJCgvXprgg4h8UgUD\n8LmYSsz361L/yNbK1syknMnsKMNSWTd9oJpikJrTrMrDf2/u66ejBZArWW2V\nDfvK8vFAj6VPOb05+k2UfYmr3XCjeK0RR/9FQLVtOVjL/vrb4yDWqKVuOmme\nML0U\r\n=4Ln4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d7cc6c4aec24377070d4417765fa102dcd7c7e0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ebce8d78.0","@material/tab":"7.0.0-canary.4ebce8d78.0","@material/base":"7.0.0-canary.4ebce8d78.0","@material/animation":"7.0.0-canary.4ebce8d78.0","@material/feature-targeting":"7.0.0-canary.4ebce8d78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4ebce8d78.0_1590007898050_0.701045775647914","host":"s3://npm-registry-packages"}},"7.0.0-canary.b0fdca492.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b0fdca492.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b0fdca492.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":"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":"f9162ed71bb7ecf031553012a38461225ed1bb4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b0fdca492.0.tgz","fileCount":52,"integrity":"sha512-VVH2rmgJ6bB/FSGrAMKtjjdRPaAilnC7FG2YOBpWIyDs4CMYdUU/gUAzc1InM9aQOUOFxc78HHiim+zE+HsaOQ==","signatures":[{"sig":"MEUCIAb3t4PLKv2nwrdkflSjzMVLpCSkY8ub70exQLQ9bqWMAiEA3xNEMW9fDi1fEsUbLKLAb9BsDjDEDVf8PeMS4QYRmtk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexbdRCRA9TVsSAnZWagAA46IQAKSwQFZG/NUPijj/u2fV\nuiEGbmu/kqqULyoG0BVrCi0RYyZb+8TwTk4YHaqIpk+7+SCMIAa2N7QJVtb3\nGa5m1AOiF0m53vdqfu7iJyk9fHGT+0z2zwdiseJBNdTG6d4Qeq4SRLGx0dCG\nDT8cnWkz7svc4Fil3UEPlIa/wq9/HrsUVrTCkQTCwEug/gg4onVLFzuwCEef\nFEWCc9WUc8MAcOiDCOxQ3S7iO/m+Nm5nYIgs803nExcLZ2RnePca4zSEmV4j\nGoDOkyus4R9em7VLtRzwOZyZs9vs78gRmSzCdCaWstmCrYD3BYGF5ItoaRd+\naxp8W0z98+vCWFJgiE5RJeSVODyVRreQTijAh+JQgR/fHuMBQGTLFErVbPAj\n9workpS7aHDY95p2joeFbZNCBy03LMJKYE+1b9FjqtxdrdwaJD4t8ET+NfBy\n42abyVZbJos7PTyCk6L4fodrnMAJHkE7ZVQDYY4sx8OfsRbN6ZkN/FaaIrLu\nJfsphxZY6bwE/25Jz7+pkZlX4dNuc/mCeEE52+ickLphQ58E47SX8pg4G3Hl\nYgWtcScQxrG6SyAWLSmNr+DNcYKwqjCLrtoRyOm2TyTKqJucMLynYLxnx2ol\nDD3WzNSi5spfswcA58eGEhPug/9/oJA6gasSW51c9ZenIltmZVUKdGNN5Pr5\n5Lw8\r\n=QwQ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"590e5f052548986555dab713a1bcd253b6dcd01a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b0fdca492.0","@material/tab":"7.0.0-canary.b0fdca492.0","@material/base":"7.0.0-canary.b0fdca492.0","@material/animation":"7.0.0-canary.b0fdca492.0","@material/feature-targeting":"7.0.0-canary.b0fdca492.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b0fdca492.0_1590015825148_0.6269560298541799","host":"s3://npm-registry-packages"}},"7.0.0-canary.c67667e8e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.c67667e8e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.c67667e8e.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":"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":"8a2b226505006b508f9cfa50743da0a81c8f5d2b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.c67667e8e.0.tgz","fileCount":52,"integrity":"sha512-FsQv/RBEzWT/NqOGWrDtI/WbW0fcFUM5XQfyod43uqUOXrdCcL9NviTVb7OXDt3tjTU6haiDo3eakZifg3Fwxw==","signatures":[{"sig":"MEQCIGdD5OrSrHO3KEysWMmCndQPWNbvt8ndcpNbGPSUckQ8AiBQ2SO+1fyhjYbuF3qz0XXPSEH7vVWD1s7J0/CUBreduw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321412,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexoydCRA9TVsSAnZWagAAn/8P/3qU0ZbfkFv5no66/4w7\nWHJ9ay4aLek7afNwak10T8BGUUbI8Loet2DXZdy6TshGIAIByAOsFuvx4ljb\nTHO2K2WVgOcvWGm7JUjjERWmIGiFx2qqwfSb4IvFDvpEV6XwYCwAGxktfm9v\noNRkFLxiy9r86kuJBuHMfkLlf/ciPQTqRbEOoU73JsiuXN0QWQcIhTQuUE+/\n1XWxgj/Fw1/o78Hbt0ftdcQYK0Xd1IRqP+E9oW0wDvQhkATPFf251GMHjJta\nbYTHOopuyah5/bz1qKxKbW/pcJBeeKAAgi/Wra1F7Da3e7ORiTG6b1EWJxYM\nXtEnlzUHixGJdaroxQyMBJ3wcJCUw+GENL0/Pvw8JQOwR0h5hs0OGqHHLreB\n/CuAl6riTvZbeLsDsGVLO6OgiA9/UCcZX11XhXZXY+hngAw7lBJ+bK6vfN1O\nVh2NykyoY1jZygDZGwV16K6ZIEFmdrVm+2/hJz0Vevd2t3iX9bCvUR9VLn5d\ngPeRZVaUinyjbZnMzeub8GMLLMUG3ei4wNn7YnWU9j5XsjuqwdtlO8CbOPXs\nfl4yBK6plCpvqE+ruzRKvACdTG5Sg4qUYhK0c1vcJn8aLwTynO5Nw+cqKZum\nkkBT9zzD20Tzn91a2f+AhfVSzvV0fTvgrP7xHyI7up8atlu7ikEOanw0aWdV\nzLRh\r\n=M1IC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"405f1e85ef85a7cfb12bdcba9816d716433463d5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c67667e8e.0","@material/tab":"7.0.0-canary.c67667e8e.0","@material/base":"7.0.0-canary.c67667e8e.0","@material/animation":"7.0.0-canary.c67667e8e.0","@material/feature-targeting":"7.0.0-canary.c67667e8e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.c67667e8e.0_1590070428801_0.5231307422973752","host":"s3://npm-registry-packages"}},"7.0.0-canary.62b5f37db.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.62b5f37db.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.62b5f37db.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":"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":"46b416d0e798228bbc57b20104ca12a522355cd5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.62b5f37db.0.tgz","fileCount":52,"integrity":"sha512-52LUCQo+rxzk0r/stbwqqr0ICZjM2Jr+03Agz7ndWg5FTH7Xx9fMfR402LklhVIgXDyn9BbbGIu+Zae0a/tOWw==","signatures":[{"sig":"MEYCIQCT/JIpPUYNFnVOf9/6MhZjjlqzCnXuAzIieX45UuSQmAIhAOUEOtxKeNMOlzoZd8/cBAxwFruIeFmvCcGQ4qXBY6S5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexq9sCRA9TVsSAnZWagAATdYP/1ay/+hjMdxJp/7edn+M\nDkC09fE+5YOo07SRf/9thjdg8rqkcoB+MErSfG54iY3ETl0CigA7fujhku1l\nyULy0Ftd0x6xoAqgruX9LA8piK23LwJYj3ehOYY8N0U5qK4ZE14NhHLoCcOK\noErwUIA04BkkdxWXtzgWeNzs8tusW2PbFWvUVnuqhBbvCwETopN2zmPQz/uc\nnUJtwBEX2s+z3XmwD5FqeywR6v/mvvnW57aJR4aXyheRpPgnUKGpnrFWPXjh\nlaW/peW5BZYXl0ytJuNraZynMm4vX9E2pGhldOWr6ngoxOX98GQ12qhl7vFl\nDi90nNijYVrZhqrV9rAXCc8+3+x6iT5k9IowKw3oQTcCeCTKrZ3Alo1W9KkX\n54kqpp3Bb8hOFNyQyMx2S0FBsCqNAF3DH+mPvD0kKlC5FnZbRngWZRINSIUC\n1mbW+6nFE2PZGCbEQhCkC+qdPfDw1Vx7VcNuKr/KfdBAQczVDCcQtbC2ZjI5\nM1fGyzbCgV5edsBO3eUb9WblGeksd8I9oH1pBG5qmnyyddmxl737tysRFB65\ny/2wkEWJg4151scVhM2QC+ifrgeyVGePg+AVm8CGA5pEbjRalQ3SKrctCCHZ\nIfO6gj/mGuPRLz2hTxHxX8kSaH8+N0TdHJNEuVRXjl8Oqk8Fl3jq3ZRifbGH\n2zx6\r\n=Jaf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"62c869c9d490fcd3f25cd87f251a83b273e32736","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62b5f37db.0","@material/tab":"7.0.0-canary.62b5f37db.0","@material/base":"7.0.0-canary.62b5f37db.0","@material/animation":"7.0.0-canary.62b5f37db.0","@material/feature-targeting":"7.0.0-canary.62b5f37db.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.62b5f37db.0_1590079339603_0.5193211150546473","host":"s3://npm-registry-packages"}},"7.0.0-canary.2e218dbf8.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2e218dbf8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2e218dbf8.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":"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":"32b9598971affbf8b9b17b831f1ed067054fefb6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2e218dbf8.0.tgz","fileCount":52,"integrity":"sha512-uB3YMz/fZ/Mu82970Hnw8OMr2ZcK0coACxfff7hOKuwDSRpY2rYz4R2an3EAAvYBoo4y+CpB3Iba1u2kTmvmkQ==","signatures":[{"sig":"MEYCIQDPgNQ11E9b3B1I+gXq+/Sjfq+FoXM3NT8HxfYUKTDH7gIhAM54qw+NmvwHsveTjDq4Mq/u3VbLPm1o4jBazFyLTVPf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrRLCRA9TVsSAnZWagAACk8P/izt9Yc1Vn6a4/iRtfZK\nzRVG9Jdrqkmvfnqk7V/0EpuYb46+X8BLMMH0Iybg6D5prkuhRX3UfCHZ1U13\npAN8csHbo2xI9UmLAsV1qK5EDKnDkrZ9Dt2m2UW4+TtRxs2TWyM6UbQ3LP23\n+WF5q0kkynlRiVSaAPYIpKwR4a1GMjWj/T+ebzacrVftyswDZPauBmOUzuBh\n3v8kHhUuiEU+9eKSzbPt/yL1+OW7MPlqDTkgcoQLJCGm6jKrpa7+XTSEL2+P\njefBSXNhN15DeDgfWGeYTw67eioM59UxI2uOnjSs3leqq/J6Mhr6kZhd/iZQ\nTvdqBWDphEmpd4bE+eo9J9aznuMIBzl+NfHz6S9eOS/f+xYxk5k61WO1Gop4\nrmVQXzAL6RMElw7FhAklcN3gZgzOqc4/qXMq/mtl5Flo2MdCab/wvDSxfw0e\nTw7w6Hs8zlBWn8JACAp3BubpNoxtQywpNkLoIZVb7PpUjQ1G1FW7btIJX39U\nq+Y7gbShsSMvpFDGcUl6KDXzhN8l1U9FVVtaUigda215gLQ7Xr7eyhGx8JPr\ney3gwImvzORQMzFfVWYb96hIwHwK7F6IGYwtDaX6Feb8CvRBqUceuT73WIkS\nGTQp9bKiBwmtqUU/rP2V1GRhGTNC3Y3SE8+7eSXN3d0wdG/5Hn7KjIx4+xju\nw/9v\r\n=AoZ1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f9b76f9144a233e7569877ab8f0dbbb1be555055","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2e218dbf8.0","@material/tab":"7.0.0-canary.2e218dbf8.0","@material/base":"7.0.0-canary.2e218dbf8.0","@material/animation":"7.0.0-canary.2e218dbf8.0","@material/feature-targeting":"7.0.0-canary.2e218dbf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2e218dbf8.0_1590080586949_0.6006428651722953","host":"s3://npm-registry-packages"}},"7.0.0-canary.7fd792bb9.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.7fd792bb9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.7fd792bb9.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":"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":"c40224002898e285db94bb2c207bd05693e0d013","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.7fd792bb9.0.tgz","fileCount":52,"integrity":"sha512-HGejdP2uAemH55xoQoI+vqW08VDU/ZGy5puT4JKm+YxhdaFS9dbc8TwJexs6IqF1ltc/ooAqiVfzdmXMQSpmIQ==","signatures":[{"sig":"MEQCIC4ZTzfhhcSnkqPRhi+K2qRiQhyKy0LMpsCPaX6729GmAiByJZ4pHktfqEoJiLcX0nCTsGMQ0loen97DiH0+IUrLEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrdMCRA9TVsSAnZWagAABfYP/RvnBv86tcb5pvOd/RW/\nt8D3E8CGrl3+ESwTP9HEXHIHiE26jSyJLlqMq49QejT4G9xlRueLnF8R7b/1\nNQh8GvGj+kjxwwJmUmx8OZryRWfxyrq2HXGvP8e/qrST6/YSx0vn8Fqb3Lpu\nOLw4v49DDhdK9D6k0RrSpWuXDb+HWuZOrApBSXjVxGJHQt08MbGIBcD+mgnd\nmC+ASI/PhMZbGOj+qUsVxEvECSQ7y1JPsScfXzBq/i8AZ76Bnv7R5sB9QFjw\nwmz4y8XiS/+1wHH4ISkU+p6aQIssE7k0YGjVLTjbzDuTsysFIdZDGjiBRYwN\nDUV/mWwiq2osUAY2QLotP6nlplQBynZj1SHWS5zTwaOhmBmmU7cMZ6QSavVV\nRA+xhLov81NVBLXKjBp2UMbBT9EL2ynnZDIpcjFX2m/z5Yj1nlgn5qZghVDr\n6/JJNRPOFHfmq98YE3f7Iopk52JX0S7ymxDhA8KuFv45gD8rOqaFv5Rxum7H\niMGNYmhchzcRpkYD6WcBJQXG2sICHhvcbINQkI1aYFsqhvdMhdIF3vlA/hSb\n6e1iDhdKAdPDP25sA+OoaVfoiFEpLY3UMXDUYsSVaWXpoGEz8INiDw3vpKk6\n8DsQpLiKPa6U8tNTc/QpJPXcICsCH5QFjuhm3jQPhjep2cgL/Nk8KgLNREQM\nt9FD\r\n=bcB8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d5ce4b5e7914675090d101b10f10374783326ede","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7fd792bb9.0","@material/tab":"7.0.0-canary.7fd792bb9.0","@material/base":"7.0.0-canary.7fd792bb9.0","@material/animation":"7.0.0-canary.7fd792bb9.0","@material/feature-targeting":"7.0.0-canary.7fd792bb9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.7fd792bb9.0_1590081355733_0.7990079474722245","host":"s3://npm-registry-packages"}},"7.0.0-canary.a66493cd8.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a66493cd8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a66493cd8.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":"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":"65f74c4c1cbf187b155fe7330770ebc34d54c231","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a66493cd8.0.tgz","fileCount":52,"integrity":"sha512-3HImawINjXKGL76rPKEfGwfVPF9ZERwFluZD0tCHmzDoX0mXpElOj9bIvK0cqKZjKb1exhNiI7hAKJ6d650+Pg==","signatures":[{"sig":"MEUCIFInn1PDwbe5opGDaWTu3b8IUbMwyzUFF9Xg+1uzdXyxAiEAvAzakBpNzCkxYn8VIJyVwkhofin2eKMp//B12e/UzqM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrgXCRA9TVsSAnZWagAA+TgP/A4zi8yRm1VG4JjEfjhw\nU3kmhYkBCz3drHKFM3h7KaVX8T5FXJvIWsHP0HTrNCJz078tV48lvwHXpZW6\n7UnpuuxCrMXp7/6GeeJzUdPDIvcdIpqWKTUQsaeuYoLGJVaFg64+4acOSB32\nmJ1XMaTXC+74kkjrdVwJ9L8FVOgc8vVrN6Y6FMxdV+8MZjsi0TBXAB2P0TFD\nQ93XtZQSXqGiJ9kKAITfWzMjybBpkaKQbYJIjzO6PP67yRGwf8G9uTjcQRFU\ni0K7YnbMhPh3UYG49yavdfY5/LrzJABrMV80HAhI/rrzKOU5QItcvZyC4hGZ\nBbjj0M6RtcEPQbJYFU392jwOCjtUccfw0BAwDlyzHJm2rmssZT2zzrjpxHje\ngVOlZhcZagqHP+6weUm5ynNUxlvqj4MrNkppJTuv+cLQ/bYyBzTyTbm6cD2z\net3z/g47M0XOaWzwn25RDU3Cl2zGlqYcnaZcnytOvIAc45+MW8554j/DDOBI\n9Qo+44sjg+MSft9+7nnA2HWJ47mzWiRUPm55EyqDJk4yOjFhuykiw4bB4okj\nPdczh+sH30uUhiAhAOs0ZRt+SSfXdYFJrC0gfEQMojyPoSrmELEnn/FgejMI\nRSF2Sh77cKjzzHbsz8tLAAC0u8L4qzJUDbEDHjtsKex5jWFb4w4WVqV/njTs\nEzuW\r\n=Xczd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a14e3cae1fdb42680777a9a6b5706060924d68b5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a66493cd8.0","@material/tab":"7.0.0-canary.a66493cd8.0","@material/base":"7.0.0-canary.a66493cd8.0","@material/animation":"7.0.0-canary.a66493cd8.0","@material/feature-targeting":"7.0.0-canary.a66493cd8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a66493cd8.0_1590081559307_0.4912670385939075","host":"s3://npm-registry-packages"}},"7.0.0-canary.da05f66e1.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.da05f66e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.da05f66e1.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":"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":"56534bc07d2c34844ff6771f7777a0c3a5e7b0af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.da05f66e1.0.tgz","fileCount":52,"integrity":"sha512-Nb1qbpv/QyXw9Djp/EfnCxdtxgS/lYrN03D3F5RIc6Mi2Lh64GB7MtXaQgt/wm0oPiOhLadazF5xF7/uOHXokw==","signatures":[{"sig":"MEUCIQD1oIMLxEj2vpDdkJvMa8D1dBkutmknNF5DscasAL85eQIgOj77ZQeJHSugMHhg9ezFwDv5utWiby6lk5t8WsnVTkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexriBCRA9TVsSAnZWagAAoqAP/iokBRlX73wgYVAV5jY4\nOeDJOJhRTzn37fAzFF00s3l465H0V/9NZMgifHtbmnb3Psha76hki7oEhRfx\nZCRte4jARS+97Q0pr0gUkaWWYN/tFSS3BO/O3Y7EgV8AF9mGZs1spMVCgUZ5\n6RzUfZVsKAQKVw6p+wRL7wVPZNeicUQCpXETa+ZheyfjEujqgR0FoES1Ko9+\nibA4CYZgbgQRGHdUL7ynRLPQDxyHsew1dvmFfuaXfV1Ui4d3kcLVPP5LAkyS\nQlEOnw80NerA4hMSqpH3DBTlLWLttP4yhy9JCjmaEyyE923PisPzyz32e5bk\nfwHYuV8Jq8TdbUXwJ03TrjirAB3Ozd3jcH+CKb8b96yJakK5+6xVoDyK0zPx\nh5ZT42kbRYpvb5r14iOWamsuyQyyYRhsrxX7Qi3DYWDosv0FMI+pl4Z5UXSk\n4AsY1265eP42XvoN0H252etS6oJKn87KM91o3NdaLEjCZTwgn8eisNwZSdi/\nouiYDgJPOoQOCXZGeLjD6wEl/3muj0KMKnWCe65hukLDgpeUcr2ecf+Xpd/8\nFsm/NaGVTeu5r1cS8G+4ESAf6qMWKVyrKrxtTixIU90fvBQlH9/c97cxHt9F\n/N00EVLkjYOjYi5ZZYNk4WQIxi0sxUTYgfTYrxOhnGrs9Q+lyBkGv1mbpKCU\nxfgA\r\n=Wlvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"97f495e74f33645d8f066a4be88eaba95700a4e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.da05f66e1.0","@material/tab":"7.0.0-canary.da05f66e1.0","@material/base":"7.0.0-canary.da05f66e1.0","@material/animation":"7.0.0-canary.da05f66e1.0","@material/feature-targeting":"7.0.0-canary.da05f66e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.da05f66e1.0_1590081665000_0.021328020441869766","host":"s3://npm-registry-packages"}},"7.0.0-canary.740860e78.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.740860e78.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.740860e78.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":"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":"84447e8b4624317cb769ec181ea82eeedb665c97","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.740860e78.0.tgz","fileCount":52,"integrity":"sha512-t9fUHIHbloG/iwZBji/xJv62X5TchaQjsB+aeVNEUe+O9gaZ1U5wop9x38Ig8HiuFZcnjm6uTiX/8L1YETm8PA==","signatures":[{"sig":"MEUCIQCHvK3h3dBrfnjg+fca0B3WnOX+2tQp4fOGxHzHUnPvRQIgALI9VF1jSGvaCynKoTnQB4qG2k0xjfEYiRuPDSBCDrQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexroQCRA9TVsSAnZWagAANzUP/j/aldvPwJHmto/PI5C+\nlrK37t8qg4DD0/ThPi1qFwaRs9fsYzzjtVVTGFPtYDBR4RqmUlKRhOdPaZy5\nSBvWxNf1fS48e5FcbAvC8H5HHpubWZQyYberPq+otPEVNc/nxPRiMuKNXWJQ\n0xxCnL50lFDYEJavcSgnLNCdwVSdHwr82QTZwcqip++o5ArCNUDsTv9Un1+X\ni7bkeifCq3P75U1dolG9jsVabb86Q8h1yH8E3RjE8qC79xHedTFU+IOFRz9v\nH6d0mUDlUGHr7GIHzArIlQ2tbpaXLEV93pejWptTYCAV17NHEfUD+y8c4GsX\n5iggcOjiPm0iUM1kfly9gtSx/CkNryyDdusBMtV7WKud37NDM4WKhCkFNoU5\n6Sc4Uy8nAytJfQbrYtcpKp5fxOkpde/4aPVNDlmX2akq6DrSY6O1G0Hu6C2Z\nF2UHelV/hUx88g9VlautoO/oj/aW41rHSsRJaKClCfIJA03pvXEeLqNHllLX\ndtH49U3uGfQsCCeA8Yh2eNIuMcr6iyhidSc828SYdWqKuQtGAEDm8QYQzJpU\n7fT6kf6/guq2Yk8CbzCSqrMx96hQR0L6gzH7A0oNsH0rNhTmy2lV20lP2HEe\n/wwYyXhustLAC1iHkDljwODfk3AGfWM4jxYUS7pgFqKTv81+RHXeWGRQobaZ\nHEBX\r\n=bpqC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2319c23e86ed8e7ed27865b711bb6ea6970b98dc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.740860e78.0","@material/tab":"7.0.0-canary.740860e78.0","@material/base":"7.0.0-canary.740860e78.0","@material/animation":"7.0.0-canary.740860e78.0","@material/feature-targeting":"7.0.0-canary.740860e78.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.740860e78.0_1590082062556_0.6388304452840785","host":"s3://npm-registry-packages"}},"7.0.0-canary.5cea2610f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.5cea2610f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.5cea2610f.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":"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":"546f681aa622d8abcb4baf8f92f3549f57b549ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.5cea2610f.0.tgz","fileCount":52,"integrity":"sha512-XPurtv/CYdpqwMqEMMl2v1ZsbzZouqdhjNVkgvbexhoyOlwZPnqGbf9UMuwkEoj+nYBCFDY4thQdFpYYAauwVA==","signatures":[{"sig":"MEYCIQD99FL2nZGlVAVNyzsv7SUngvPwuJ6urLWMBnZh8aTNzAIhAMbxbPdPrTt0xk+hJOeE0gZtMx3PtiTyL5TYW2MYOXs0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqQCRA9TVsSAnZWagAAzjMQAIHcjTNu0l3k4MqPY5oY\nXO2oyx9dorfScZueAvcs7HIFKL/Fjg5HOVIaTxIYqqCDiM9w00F3DNITPQu+\nEKDaJMQ/CQ4ob7XrTGq7eJwgSkLSzrFzUIrAYJKiXhPY8IIinyG3NQ39tNiz\n1f3j7EEl5id7zRM0eEGperjjPY7/rIgM8+vyJ/eLm9xg+TMwq1P2ZVzphb7V\nZh7q9Hux5bXajs8GtV/pijNsT9oOC9Rb+jeNGowl/jsOdKtnaj5pOnzRdYZZ\ny1Pt8+Khtsm7+0Sj7Dxhqiy38DeBVxNfBWtbaqVNJTDHTW7hho8ENd/iHH1I\nShaOIC9NWLKpIoOhVrCIeQ4LQn9CwaG44renubrZp5p5v2m2O0b7FCgEIlrn\njE/gW6CGhoiTW6yNc6e5jgALvDUuHHsxcZUBsf4eERJMeYzsyJX2h8usVBC6\noje3Vj+MjM00ZwpBemVc+/pW7iP4XErTaKXXeyEZBOz78/DfVxBXLuXspIJe\nCfUmiENVJJxLH8RQXu1AceYOHjtSXbnmDzb00pMDbwFY/cmyi5g927kz3vhL\nZuLCCKNnPpa6rshzHWGY+lNwfl2K7Ni/KFUkHPb7RwDI4Weh/gRF9seAJ+QK\nBCxFTdsw28O9EcS63SRO6pPjKYiOXlR6bWiRsz+jke6S/qXXixwftDnMh3Id\nyzJI\r\n=aD66\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"647d4356b68bdae8879ed7384b0ed1ba4e1954dd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5cea2610f.0","@material/tab":"7.0.0-canary.5cea2610f.0","@material/base":"7.0.0-canary.5cea2610f.0","@material/animation":"7.0.0-canary.5cea2610f.0","@material/feature-targeting":"7.0.0-canary.5cea2610f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.5cea2610f.0_1590082192069_0.32450814916032855","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf7747ef7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.cf7747ef7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.cf7747ef7.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":"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":"047556b9d9699a965133d23b1b8999cbfe72ede4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.cf7747ef7.0.tgz","fileCount":52,"integrity":"sha512-cXZoyprDSOkBk1iCwuU8DxOOjFjo4/NVU0PaO8bFkEwGu5WBsZmTnGaz++DPXVBsTABZ1xz0RmHo4DIxA03PGA==","signatures":[{"sig":"MEQCIBevsmFW9HHoA03KArtzNXGEL3KzTwFh/VCE+XjhLt9gAiAnyN+zO0GjAw4Cd5IBvGcfWEf8eh8iAjlyrZwA0QEc0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrqoCRA9TVsSAnZWagAA8gEP/iq9CK/0UGIFBkW9Dghr\nPMkddEbR2GsiPSqwHFmdd5ec6tfzZhxMbiHkI6kWGEB/2/ApsBJSEJ6g++lI\nP9/1ri0qPy63hKMyIa2lbytDfufQ9P0ToLvFWQWNsAtGGXTs2moFcesZisJS\ni/0+kie/4zmhioXdpHM7JWodYw5FhDiKbHx4KqubbGoNE+NoCcP92WzHNdNd\n2dMrZTc7Q0etKD57OKrEIaUqBDQwAMH0qqHyepXmFoqGvP9tbG/0I4Hs1mJT\nOg3Aoq6OtoSAx8OKTkKmwYhaKXs0/pYnGXFyuPat0K7ZjHM5eLcHQeuOsbpW\nqEMnfx+1ufjMhw0fKWmJzcDbOMvdR9e6aHFfLwKuH3/DCBQhigRiADrrousa\nXXt4iJWK1ja/bQTUx8bMIw1YRE0J4/9La33e01xEAU3+kd4Rua8HHxXTFJcQ\n87dIr0cUt9/QqaPrw3OwHsfIIgHvox+HSzvWDMdvYSGmyq4nwcXWwQRUW4w8\naPRvsua0pRCS+KpniuLOm7evKtNz5/AV0UCQ1YUrhdqmvbux4AeM6kb26yl4\n8XHQ/1JLZZjTm+I6UtNmolihSdRUN+RiF6QXU2w0ZIK27IelGW/GKMw1Vgd4\nb2qxT+62VY0Ftg0Y2k/iJ8WNg6Hj2Zw0dOXSXXf2f9mH2RVbMFKRfXUzL2Dk\nr4bE\r\n=/c0L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"12d3ae46d64646ae020ede8b9ce88abc7efd384f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf7747ef7.0","@material/tab":"7.0.0-canary.cf7747ef7.0","@material/base":"7.0.0-canary.cf7747ef7.0","@material/animation":"7.0.0-canary.cf7747ef7.0","@material/feature-targeting":"7.0.0-canary.cf7747ef7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.cf7747ef7.0_1590082215571_0.9675534664554923","host":"s3://npm-registry-packages"}},"7.0.0-canary.862d0d7bc.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.862d0d7bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.862d0d7bc.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":"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":"381550cbee638e3553e4ae3bc042295e9e228125","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.862d0d7bc.0.tgz","fileCount":52,"integrity":"sha512-7qOajTTgNZHZz08g0JLh7FP+kOXCdJeFi3jD6+WddXxtX8U4c6cXLdE9zMc6S2DBqcGRmSkqXKdPMC8U0Wdc4w==","signatures":[{"sig":"MEQCIDkqWsmFTnF6C0G6nNkRHKvKAW9TD/F33mgqEEYR2gVDAiBVEHSrExrEG76Gq0c10RIfaAmGiBtmt2y389XObM3TEw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexrtCCRA9TVsSAnZWagAAMBIQAIQyAFc495AF3coTmqDV\nad9QgGodAdzxC15P/YlRk0gdHGAfjJsbA8zRbbhZPFLGPrQgb80fw9jGFLBi\nkc1jwtGfNvXWVBtW9nRd8CetU6KhREmmIR9gGkCVfqM+afancikZR3+lwYJu\n0q58obnRVzuRd1uPvQ/ZY5vxDKbakYC752zZWhdgWmjpPlbpZw7C5epGWKRL\n89Dq3bKMMyP42S/h24KxGSe1l/3Md91Nh6pDcSlTf7L6z8DVxD1zOwpMp97g\no6PCLRlNikOhr5zBRkKb1PlzldcnpA78yjbwLx06ERQxIIa2t8peepf6uhW0\nER+S0N2zO+cnwVdbK0Pth4yMq0CdVoQ4YfvSj/UfPBq3yQ0ydAN8Mv6O3PNY\n5pFswebACZuXCZXmyYpBYhN4WxHB0MWU/MvGA/cRArWyaRgNXVBYrr2edgpE\nmMOU+fPF21CDYhD+K9GHj8NdpJXCj/RFvAR83M8kIbmurh0KxoIHeaCudw8R\n4e45zStyyHnMZzc2eruJwWVGJwl9YLPvSfoUtSkAvIGtAStAZxZ2rab7Lc5z\ntPG7k8RzsIKiyCkhDDgdVgCNYiuM037DFtn2Eszmpw0MJKKip6SmBMmfBfCq\nTZDk3hQBVQPjB3JSCkhxVPjVwizzCHNp/DPrEstBP5CsMQtHbj+TAwB7SYko\n34x3\r\n=niLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"534ebaefbbb3a8abf3be3e2e13c05f86a5461127","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.862d0d7bc.0","@material/tab":"7.0.0-canary.862d0d7bc.0","@material/base":"7.0.0-canary.862d0d7bc.0","@material/animation":"7.0.0-canary.862d0d7bc.0","@material/feature-targeting":"7.0.0-canary.862d0d7bc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.862d0d7bc.0_1590082369909_0.9039064201335563","host":"s3://npm-registry-packages"}},"7.0.0-canary.0008c8a91.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.0008c8a91.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.0008c8a91.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":"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":"5697e6964d91b5190b9ef9ec1409e8a9518824eb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.0008c8a91.0.tgz","fileCount":52,"integrity":"sha512-vH6mYn/bR6eZkYIqmnJRTA4++9qGxilQKe1T8lWL1L5GCTEcf7ZIh000lZdFR0DnlO8/Y4defa1gtFlFpPKFXQ==","signatures":[{"sig":"MEUCIQCjqrte/jP71meVhE+BIdCcwDhBdrDVG/+UALNvJCC5uQIgcOTIOGTG+IwxjpIhlnM2egTaGys3dOD8AjDrtkKof7I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexteuCRA9TVsSAnZWagAA7aQP/2LPVrzg4G+KBsbh2OXy\nU1zPshgUU9ackfgS2Wmr33apiqfNH1dg+/1bLfxGfrW9figPcHw6+D5qjm2I\nR/HPf4L5HFExpILPXm7wn8DADET+EkW62CmBHOeLkPifdz3gaTu0IZXrgXWk\nDSVYfgKWfMxqk+UGxqjAQ0r280Ba8e3KHfZ3fLn1RH56pUsuysV6DebAsDpE\nCrJqv3Kg/t8rvs2x7e/WIlTeMu7q2KEB3VHsuvnIODsV5OHmbL08i4H5UQhq\nTNK+mwGgJfFeMTgamqd9gvDRQOQyPr6HqOZZcgBpWOg7R8whxbOQRr4MWbk1\nZkdr6hQNDnLeDMa1tHm/p4wSXfPJZB6eSN/v7Qs0KwAmnksxjAdi5ZUjF+Q7\nEplMZb4aJ3CzlUwbUUVG8QTyIzT2nnt/jfW4f8snPwjM0CERqn9RpAlWIfpk\n0PkNi7TxU2PjqQWiHuNn/FICVXllmHcj9ERVU6Wx+T8Fxg+T8kR/q73h7CHT\nOaQk5rGL0ABDI7+7FF6OwvDE+jLs9C2wdLAoxpnmoVY24OZLmU9XAWe3q8PQ\nebSyvKhWYenKwF/QSmEXwYQlEiFGHbOJqkioHpb90T1M/D9R5Aa0r5C/ghLG\nx0rbjRpe6jqa5vqi64VNOGi8PePRNO/lqTaqtSt0eYAaJiPG/kYdSJOk8z1D\nc65/\r\n=uaXB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5bafcd3cd9f6f60ca813af30e2b0a8974de09ec8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0008c8a91.0","@material/tab":"7.0.0-canary.0008c8a91.0","@material/base":"7.0.0-canary.0008c8a91.0","@material/animation":"7.0.0-canary.0008c8a91.0","@material/feature-targeting":"7.0.0-canary.0008c8a91.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.0008c8a91.0_1590089645957_0.494790817861968","host":"s3://npm-registry-packages"}},"7.0.0-canary.541638fa2.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.541638fa2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.541638fa2.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":"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":"0fb2c2c7fc7a61030975e59bd817afd511c808be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.541638fa2.0.tgz","fileCount":52,"integrity":"sha512-2gilj8Vc4KmZ2cRHyb4eVE+FQFrQ+U+VVN3J1FL6krQ60b86U40/C1XTY1srmLE477z3MxCo6VYLGnxdKGionQ==","signatures":[{"sig":"MEUCIA4rVzb8o8BPTiEV4R5qnJBUtctaPrUG1jEKlvnmF8EvAiEA7+zkHaPz9+E/xj+8tz/pahdG9+TlG4zIZKyHM8zRKGU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexts0CRA9TVsSAnZWagAAHcUQAJwmPdI8BY0DqX4VO4gE\naHk+uD46sErLEicgUW3inbv+cyHE2NpM3tVNZLVDT9i1u3RY3X2F6hKXyrDu\nI8gRgB2AGVsJU/Ly8e4AlvxwgjZVZNVH8DV+O9gDhxwo7lc3uSZ0rgMbbVCh\ndugIdT6ipmd2GIt67XxmZbfUH3pKB98dgGIZNE1ls/kiJSUXMbv5ocXMQ9JN\nZepRN44vJDNloaroOx8TyvMCUi4Z0iYhkxrxn4BfAg3szrLwZbCRtUgNnlCd\n2iUR40WYF8Z6Waf2Jr85qgj3wRAmdOMO4XX3w+SWNKHb1ZpOr4mriLLStu90\nyY1+gz81UhKXswxf8NnbjzW3QqYBpoC+EC9kpPE8NXWLEYhaKDCpKKzF/q/A\nx8R3JoqQiZ7x/OkinPPfpkGygjXROIUhvwY9FENh2cR7uCNVG4gi/I6tE0zm\nzOXuJSj5/Dxse0AhG+OESRYdp+3mNPuspfNn4FNz2ByHmAjyQkW23Ua6vqYt\ncRyoyA92U8A8ibJ4mOppG84QEq3alMfoH9BFVjiJq4VkLni5JYypUv/DPi/g\n5F3NWoReaVkHoKAMLwxByUiDRpfHe4a/gl/bK1KRNSaLXuBaVudsoM6mUl7g\nDhY+kEAZ1NWu0hjNL8jgpCl/OZHWiUuMg8on9GwZw5PTaMeUeemCeDQ3OCO7\neQRx\r\n=52Dk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e9634a8258477402629947671e06d007833e14f2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.541638fa2.0","@material/tab":"7.0.0-canary.541638fa2.0","@material/base":"7.0.0-canary.541638fa2.0","@material/animation":"7.0.0-canary.541638fa2.0","@material/feature-targeting":"7.0.0-canary.541638fa2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.541638fa2.0_1590090547845_0.1660273461107289","host":"s3://npm-registry-packages"}},"7.0.0-canary.6167cd075.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.6167cd075.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.6167cd075.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":"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":"5ad3df7d273055805920eba08fe67b1a38cbbeb8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.6167cd075.0.tgz","fileCount":52,"integrity":"sha512-AQ4GYsvDUPgYGIsQEIcvzaxFJ0DvNeE5QFuIJTpX71oCAtGVbaRsPeCUA0gWuzlORbuDgFBGqLuVufo8gbnJhg==","signatures":[{"sig":"MEQCIE+cczTKGkUkNyAoNCMcgBZvQ9xUmHZQTQMrQwjG042JAiAmMQU0CCPeq5JFS9LktiReiEdm70BBslFaCvZtoozA9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuL2CRA9TVsSAnZWagAAhKsP/1G7M/nhrvaKyiS+izEV\nek2OtDyemnrdnn9ZLTZYzh9GYwLzKgH1OUm7NJ+I7sYYI0mCfMIhWx9te+Oq\nkaE3PC7zChOipXhhXewuwueEItC4oKq7FDgg7uYK5zz7OtXBSRQB8qKxXKXl\nhrtO8L+AcebDmJA+vc7OPVoP4fRslJyI+Pb4ifUCUeZX3SQDpGDeWz2fbu+O\nobBj0X9fwI8K4TYZwb+5a07iXvrQfijAM8TxVsgU4L2KQplKNrdzwfKCY/9k\nQpIesa9Id9jzdp6KpbPSewrfPAlmwzGj+PRDJ9TSwHAe9bn4j+x+b07pasGz\nzTIOKEfU3GpWHR/h/IsYcTB1sMkDywgmzKfELKr8iqD79YXy00OfsN1mEHCc\nSihNjskTp4RbP9u/Yt5hqm1XQB+Ra700VdGYNPsOMnG9Da+/zbcb1RhdL2rW\nIYJwKX+g9pmvt+7AoZtk5CWRmMpFUlk8VlEbs2SnXUOdQYmQhPYsN7W6St27\n0kDJ7GQm0fEjHvjt3VStDxYvIu/172p33kXL5pwatf009QDIZ8V6Dn6Jh1UX\nAUb7aZcuheSHOsQhFYiRVExgrLGw/0jToooYZbeQfJMvC3BGIgBPfEAFce2x\ne2P/FYmxMzJhUQ4vkPqUL0XX1bZoEzRxNJgCjbyKVOKBRNxDZn1HprbZIUP8\nYRSZ\r\n=zzm/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c86a924ab304fc32e4e6840c7c8962330b6b0fcd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6167cd075.0","@material/tab":"7.0.0-canary.6167cd075.0","@material/base":"7.0.0-canary.6167cd075.0","@material/animation":"7.0.0-canary.6167cd075.0","@material/feature-targeting":"7.0.0-canary.6167cd075.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.6167cd075.0_1590092534225_0.12891376323560877","host":"s3://npm-registry-packages"}},"7.0.0-canary.863ac1b0f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.863ac1b0f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.863ac1b0f.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":"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":"237153e769a3e573a5763ba3c216884375c65e1c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.863ac1b0f.0.tgz","fileCount":52,"integrity":"sha512-NXy7R8y/ZYyi3t+LD/17dQ7OPXVXISdHTbqvK865xvhBI1e+Ou0iKuF75dZa+1gmDtdk/6Tv5d6nmc47MDQJRA==","signatures":[{"sig":"MEYCIQChC7EKfE/xwfHoprRqv/3hqMGG3mUn1xsI9rWh6cJDFQIhAP1jB8MZSX8Kn50lH/U8BXYdjreSJ6oD/B8EPQY9vc/p","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuwRCRA9TVsSAnZWagAAM0kP/00G1fVWMB4RiI09KFql\nj5VqBNHgwc4t/pJdq4AW9wpOXI2Q0v9aYBiMqqKJTiuuNE9o2Sdb4a/wStzB\ngJkz6gZs35XG2IeiPTJWQ9+RT5FSMjrT8OvdfW7OuqkWxQIH3ZUSTSlNbsul\nzIoUlQH5SRnl2V6pkph/PFOoPmHepgBQBVbdZjpJ7hEIDbIhDTrj4BoDSqEg\n67VlhEnmw0RAM+TWB8bCnrREXZ0UVEm2XcBssXVF3R5ZdcKeS62pUF5aoD1T\nzdcf7ED4HKVw/cYdSwHDFWYCkBegWppLQ14FQT4GnJAHFokdEBUuhVSOM8qV\nlpA6rZrKgxuU8qpTyERqmjHBghyKgq/ruy00zTqCDIT5ANI4xeZ3fp/gIOUr\n0b0p6RH90rnhM9e0VvWYy69FFZaL7UKQR6pM/2SmcEzJzeyxTNypiRo1B8sn\ndBCsABvxuGMy4LG07ic8WZKmsv2xmOCZgs0shNKMWp5I4FQuClhbDo94MeVY\nP94PIP5jvJMkVJfgnxh8hAqTExjA8Of4b3bSFW+YBfgmO9dEnwX+bSwMzxsC\nlbzsRhxEX4bq+uBpsqZ9df74itoMZqndw9Lj3WMuWv8v/hNFJhon/i6lBYjG\nm115lHxAVi0jY8wxJjW602zr/pKbkcWrrHMNsL/oz/BZB5lXo4++SqKYSC+m\nYyx2\r\n=igyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c1e7026720dc12f1bd465dc892c8718b429563b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.863ac1b0f.0","@material/tab":"7.0.0-canary.863ac1b0f.0","@material/base":"7.0.0-canary.863ac1b0f.0","@material/animation":"7.0.0-canary.863ac1b0f.0","@material/feature-targeting":"7.0.0-canary.863ac1b0f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.863ac1b0f.0_1590094865057_0.07984603968008441","host":"s3://npm-registry-packages"}},"7.0.0-canary.d30a214ac.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d30a214ac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d30a214ac.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":"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":"06affa02a4f3bbcf5224925ea378dd4c206bae0e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d30a214ac.0.tgz","fileCount":52,"integrity":"sha512-vIWAiTUJMIx2oNgnGM2ATM2e28tBOX7hAvLZJo0CKKqianFpkUxDHfSoIckppTkL0ktq4Up+BxAs8QaheXWO2A==","signatures":[{"sig":"MEUCIBarvpT3dgBvG6E1+y1Am4gS2akVUEpoxp+isZYgEWS+AiEAiUo8nlHbXAhqlPtuHFAKkCvFcTZhnu1kLYcHfYbzZrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323146,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexuz+CRA9TVsSAnZWagAAJ48QAJamZGp4Viyo0Iwom3kl\n+WuILnX2SHEit3WlwVeNKyGdgFTfmrjBjcq+bZsYytSWmAkZuqOfjBWQSEmG\ndXS676qYvznE0QfZh1lG2b7ng/sukUBnrIWqIUHOuemC5L/360Brpy4+eV3s\nlunE1YtqQD7IcQpiSZZJsiKaGkZP8+err/6CIJ8jPWY0n2zSElS3C8xyjMFh\negGR5hqZ5y5iDC4hOpcvvihuXLX09EHREMJ5vDIZ5JQa/oSekGfDMoG380fQ\nieovixNnb+IdAvV/B8NfKPMGMwe+ej+g95tCkwItDp9MDFYnTwQohjbPL7BF\nUHuyZanwYPx6fbf+Rj1zPqm0H/YET97b8YQfJom8OrzRQJKmt10oCnreQP+p\nuRLi9CyFql5rNibGZ93faleg2asal1ZZCtZajvAZlC6PVRFaHad89AAWMFhK\nilMvMIE3cTej7D0hM5aZsyRV3jmDXlpNhKNv8XKU7kCOdzwnTPZgx+PaDMPy\nFkdqm1iIWgKLW7qN34uSvhU7PpR0chof6RbSZRGSP+V42kDjMgfWYhVNgBgI\ni2KSeFOvPSm+BhMvxVlpCI4rSrHgj05R2N4TFvG/RiGvVzXmRM2dcnmDipda\nGMSYh7AtSt/yPoBm1U+XM22wO0b36W2Kk0ykyxfr07zUyb0+Hvk4PCoJSxGx\nCe2R\r\n=SVzD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"635c0e7c484f851d2ecb4be825abc36357ffc685","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d30a214ac.0","@material/tab":"7.0.0-canary.d30a214ac.0","@material/base":"7.0.0-canary.d30a214ac.0","@material/animation":"7.0.0-canary.d30a214ac.0","@material/feature-targeting":"7.0.0-canary.d30a214ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d30a214ac.0_1590095102224_0.6019126575166742","host":"s3://npm-registry-packages"}},"7.0.0-canary.62abbc8d7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.62abbc8d7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.62abbc8d7.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":"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":"b1d7efc863ee3061ed136c0290fe488382fb8577","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.62abbc8d7.0.tgz","fileCount":52,"integrity":"sha512-DbRHaktgbGd660PrZtchhh6lM16o52/1hldmZHOcmT/o4hSylxWWdkulzAikHCz6cRY2J9ZYz+nwdEKQ4J8L3Q==","signatures":[{"sig":"MEUCIBYqwZnCvftZmutyvU+6xekvCePYFZQvN08ksnT/lH5HAiEAk4heAmDMtnZsGpYSxq1/EMBBeCK5NhZ0b3FlOkA2SzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvLGCRA9TVsSAnZWagAAUR0P/jkA2zdBCwG40r4EPF4S\nW6hoGxXiqXi+7qKOJFxjKZxYKlRFyE+uG06mqafwsTg9S38lg7G3Co/1xa1l\nAbehY3OoILuAGJwWO18OXrNTapHQBkOacsX9tiuOKBLs6LWmj4wZwqH8BdQq\n/lmElfMYXNdgdFZhwE1zYOETQnHQBM8tAFXWSLAN1AhNfZH7A2pd9K2NeKp4\nIi6qf2yWv9iLHDx6ib2nRmRx4Xj+TuaY3qE9i9iEQtwQ8/R0TRUm6UO0reYJ\nd+8k/kZMSauazbQO80FwH3PYjwqJet++AYXkD0rYa9XIsrzSR7F9TBYRlEeE\nD7kG7QPd2Kbv6cxel5DE19eeuz/bxbWCScQufknQ4C+2GzxmGQQSEvIYnELL\n2oMq5WYf8EfkkXUCUNy3Gi1vFRPCB1T/axap2E1NJh3EI3ViuEE/qxcYvA2F\nfQYXOpo/QU28rhE9oz+iJXeWg+7tJO5PwwSXiQhk2yiUqU4iNU36Tn0qTejb\n/A1joeA2+Suz979rEOOSxrDKxscoJK3rnx87IBVD0NH0z7MtsQro6S4vguXa\n0pXY0EUtcLOxAvN6n2yGS1+ikKa/W6b96LGY38ZAqczu1Otu4/9df5PTGRNf\n7pFHsFhI8RK5I571I41vS0nlg7OfSNX0x15XwK41IjCGfC0+PbPLyMlutrTe\njBaQ\r\n=pwrk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6758c29e4b065e2aa9cf633b0838c4ebefb9f54c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.62abbc8d7.0","@material/tab":"7.0.0-canary.62abbc8d7.0","@material/base":"7.0.0-canary.62abbc8d7.0","@material/animation":"7.0.0-canary.62abbc8d7.0","@material/feature-targeting":"7.0.0-canary.62abbc8d7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.62abbc8d7.0_1590096581820_0.504749348005298","host":"s3://npm-registry-packages"}},"7.0.0-canary.49bf31d5c.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.49bf31d5c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.49bf31d5c.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":"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":"8eefbaa332dfa98a52bd56adff3aa3ce5b183dd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.49bf31d5c.0.tgz","fileCount":52,"integrity":"sha512-WOi1I5OgpEFpzu3nM5KwwVW10VmE3K/XGD8C3sWfBYl6qhbjJMuh++An4vXNux26j77FL+tUhDGpIf77CioN9Q==","signatures":[{"sig":"MEUCIQC7G+f0t5Oezg/hCxA0+fvVoMiCcPHbiKCxJ3cftZZZAQIgf7HXxtUzB9p+JCJp+NyvMIpxE/bBV4UvxWxnDV1Kyj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvOYCRA9TVsSAnZWagAAbPsP/icuz1vMuSgTs0cwM7+B\nTLib3uEQ8OE8iDrUci/c2uTSfhzY6qIzP9Yue5VXVx+ZnIfkFPBIB6tUiHiv\nAlf07j3hYk548RGcoLkA22jXdzcTRD2BnniU/Qcr3d3PDYxe6Fpv/pci/QQp\n3ZB0WzuMXsg0ov2d80ByViZ4mkiMQrD/CG4EXDj/qBlySi8enKbPGGb4yYMA\na689Yfi1W05/k/gzmm40PIhKBtRTmuxwpbY3NvqsQU7SHXabE7gIWHn7uaKg\n4w1Xpmq7DRJnqKoN7k7XvqExoc2wP/UySYMACLm/fNqLNVenxv45NRVKbu5E\nnYx69489YTTD/8UzrGoBol648OCPUhW4YgKNJoYj4qm0TCCdTOhUM3KpvmnF\n2gj7wK/k9vk2XTGR89m39M5VcJUSi2NQ1Zs57xeTUDQXBl7BL8qHT6VQ6/OK\n1PZBLTxY9tjjnmYtpMVDBq5HRPUy3upTs9R7emPERBfJu/zH6v17cPb1dM6j\n3ILDspMzJ9v6Dl/7dQbEnCVNzX0DQDgu21XBmAgYSbaLmkbb56r9FCIOwwtS\nd7aGI+ifyPMJlkyhal3CPjc9rHufn9xKztLy+mTCxcX/WlYOsGv/4DL9Idc/\nBMHj7zdrTH7r0Mg6/twBpf1QLARorBviedhuOxxHeI7/P83pbULIwJFhEY9K\nJiFq\r\n=S6qn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"01cd7b0082a754dfb042df35ec48efcd4aa4c52c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.49bf31d5c.0","@material/tab":"7.0.0-canary.49bf31d5c.0","@material/base":"7.0.0-canary.49bf31d5c.0","@material/animation":"7.0.0-canary.49bf31d5c.0","@material/feature-targeting":"7.0.0-canary.49bf31d5c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.49bf31d5c.0_1590096791574_0.28383188243516866","host":"s3://npm-registry-packages"}},"7.0.0-canary.8e17857d0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8e17857d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8e17857d0.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":"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":"5ab7cbfba53e2040c0eef7c004c4e1f688863fb7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8e17857d0.0.tgz","fileCount":52,"integrity":"sha512-vtR0bUiu2pOqYDApZLndTZb+DgT7u4mRQZ1U0iSL6Gyz12RnTTHRKWyOT6rvTAwT3tYAtjDmSh1bdBXMQWr5ww==","signatures":[{"sig":"MEUCIQCUwXmaheoKtp38pXtIqcYJXc/GNNtqxZhrURe8KN+wbgIgZ5hJ/7Ts5u6Nwih7cOD3V+QukpJur8Q67lrLZtkAPlY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexvPGCRA9TVsSAnZWagAAqrcP/jAPlC7XwdCe15qY3ZyX\ns0xyQ5Y48o5YaxvT08Y5zqiic7Zo7FDQJJ83bgooLsU0wWPRdn8lp/ZdNbs5\n9u9K9Myi/m4Wxluo8UkPSxnYk0sC4UjVpSWOGjRf4ah89opCJz87x7k3CFZK\nP7ECnSpWrgE32KdWrq02PIMcNXTY4OtQdE7bbjYzIRBaX9fTo6zxVWfcRbPn\nOTkNykncJd4rKMZ+77iKdXat3KyUhqEw0/HDrJGgnloHSlgjlIEjWAIKWA3L\npZfiHCC2ZcuioB8KweRDqT9iV65NE0vCWcROnpjmfPKE24M9L7UqrVTh/4pE\nR4NsZ1hgsrn0Tf1vhjoygelNR1udpmtf2itLE5T3Ce98tpxRr/BRxxuHVWhK\n78Imbtmeb95HlTC3e4dQ6I8xu8QVENd+TUb+av6piLTWs9G8LrG9pVfOhYhf\nQKvFDUXtRInkbhLr6olL91vffQnJNsf/PH98GBAGaANz3GYF7U0SW7r/yEWp\nEVL+dcrjMJK6yhgCXOvNx+p1aUFacn78o3KG+A8BValNebtu45BwN2C4MFgw\nCLeOw8BUhvKqcYEYrq+gxDNHIguFjDiLhfy0G+IG0UWzQoAdY1GxXUvceiK9\nrofU1shXvqSCgDYD4+sV57yclYCWjmDK7pxvnMhU28raRNeVYcWLhZnZaDj0\nORJd\r\n=D5Gj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9b03d700366fd287f2ec053c5ef4ccf802ac600f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8e17857d0.0","@material/tab":"7.0.0-canary.8e17857d0.0","@material/base":"7.0.0-canary.8e17857d0.0","@material/animation":"7.0.0-canary.8e17857d0.0","@material/feature-targeting":"7.0.0-canary.8e17857d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8e17857d0.0_1590096838500_0.44276186356756475","host":"s3://npm-registry-packages"}},"7.0.0-canary.c113fc942.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.c113fc942.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.c113fc942.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":"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":"57db28ad6df5911f2088a536504644352088c5e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.c113fc942.0.tgz","fileCount":52,"integrity":"sha512-8ZcAzlGt15pp5j2GanlgOgiUh/LyVrF8bYd6eXQQOxPobDGCV5K96RZ8Qpiq8ZEJoicKVLFDNljQtYsdpbQibQ==","signatures":[{"sig":"MEYCIQDhzakWKeYHDEc8rL6js7w+mgJ+cIu1bLg5TyPzW/tXcgIhAOP1LCdApIFG5lSAMqLAWiXXoOxOKODAGPTsbP42m8yx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJexwUICRA9TVsSAnZWagAA1o8P/3ZUeQY22Z/1UPB/zWrh\nuw9sGjvxqLmpE4U+gqHeuOvY/XjrFrWCTVbww87Q095dYx8TpYblGMBnu6Xf\ntgPB8l3C4WcpISL0SkB2XZ2+uOTho1ICS8e2e1f7RluWtFLF5+BePQpkw9S+\nbl8mB5QsLjdx9bZ260+6iUnycWA8kIWUUIB5TevICsEHKoaDHilgDz7u69Z9\n0MtgtjOSkGV98Skn7HhkQAzD/grbhVs1B7qm2GsjdbMZI6CaqHbUXHujdk5m\nezhrji5Ievbw+RfgOv+HjkHDtENBWJi0NkBjF1+T3vUmJkdeb0r6tVRI11PI\nl1w2Ue6rk/lA4G9FUrKlLQ3Jtt+4sNzvgbqMUkRJ2gQ15DdfVMu2zgMDm7SV\nl9jxQ/C6nh5VXVVMsLGZAimWRQb2dmPJk4XzKP1D78iviEZPiN43Lfo1ZuIQ\nE0FgAoaEQdm65x2ksMMfF1C1N6Lbj4VQtCs3IzcwXcH2jHyA6d+MmMwNqT40\nMxBBeDkQ7wUkewsnsVznmJlFqARvoUVi0fYmenJUhgSGnhaqXJWO/9vBYA4Y\nOO7/pmB5pRn6tbjX0YDAfsJCroBpAmSkHEbqmjCOzpRQfNEOlhU3e2m1lDdF\n/0PiyZjdozwUwp6zU4C+M4qZiHDqAH17jlb5itv24WMC3B1pwDKcq/irzc0A\nkp+h\r\n=y24I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"49605d78c19f78dc1b28a35457efd8dd808621e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c113fc942.0","@material/tab":"7.0.0-canary.c113fc942.0","@material/base":"7.0.0-canary.c113fc942.0","@material/animation":"7.0.0-canary.c113fc942.0","@material/feature-targeting":"7.0.0-canary.c113fc942.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.c113fc942.0_1590101256239_0.9095979540348389","host":"s3://npm-registry-packages"}},"7.0.0-canary.912d9021d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.912d9021d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.912d9021d.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":"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":"074075775e1c4629d876a543f42e6100b6fa6f14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.912d9021d.0.tgz","fileCount":52,"integrity":"sha512-a0Z3H7hEzkyAGiTwVqsCsdHI3jxqPDkRLXIwdgvrBqxF1LlZcteo9P+fSAdcQxu3/b25seHFkk7lrXRkEhzq8g==","signatures":[{"sig":"MEUCIFBZDy8Ybhy861nNR+I398HrNYU+9Xb+BZAzq9ntH7LUAiEAmKFYVastLVRR3qRniDQIptmKubcDhYH0SqUYffePFMY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWQHCRA9TVsSAnZWagAACY0QAJQ0YiBCezzVj5INgUuq\nWOyhAeX2NoZDJxi1aVFTH59H6EDNgRUmc6MeLV2QfrXa3q2dN7mHLqZJgBEQ\nSXobJKwMN6WXfrbmnyZ979HZecjV40J5I320FJt0iUa0wAkyFmIjSCD9hRcw\nFwQztSzzDhQ1B7NUCPCjGxKaFhKH5Qz9jdWDX3BDW491qfgFeOzN9P3ICy7o\nLW7cfDU1O7GLSLW2HRqJomPgsJci7MIWIMGlh4XozogJ2u8CkEnlYj9si/Rm\nTXRgrlIGsdpI/by74hlg1Nv/4ORzEmFrU5X2eLQm2l6EJYZco3Pn8SDUn0XX\n+O4NzFxYf2GaktOZP71gaU7/R5r9BDSVB7DltM3rAYtldXJm5edjr4tuu/Ol\nQ2tgQTdTsDTJHsbOs6p23qbRRvTEgJeyDxBRIGWGJ2PqrY2ZysLODtCp35v7\nncv9QTk818rrP/juxpRkD5HeDX7kE9zMIgH57xZ4CNR2/ZQbY9aeErOLRUXg\nYAA6kADcAhhqzLcL5xpKsKTPO1wQR/YzhaWASBjZnO7gDNyVgNveKoi4SbWz\nAvVmjWOnmCliPKhOp3rKHMGJCbH7HacXmYvlBXofsqvLxOKa/2iewPDnTodm\ni9EX3yYo7EjU8sB2KdHH73Q49vwV4q+tRjkglodfi90x8C8pZmupwGLsBo02\nDLbr\r\n=qcaA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b7080ce5675d8ab69b7f361d040e079511499175","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.912d9021d.0","@material/tab":"7.0.0-canary.912d9021d.0","@material/base":"7.0.0-canary.912d9021d.0","@material/animation":"7.0.0-canary.912d9021d.0","@material/feature-targeting":"7.0.0-canary.912d9021d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.912d9021d.0_1590518791507_0.9033587281978652","host":"s3://npm-registry-packages"}},"7.0.0-canary.68a2af131.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.68a2af131.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.68a2af131.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":"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":"be134a51ab2fe940dc0083184c324ba09ee80503","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.68a2af131.0.tgz","fileCount":52,"integrity":"sha512-pKY2Mb/l89EsNqBDO2pM5egP+oW4jDJiFYL1rWs8WfCUh9/RKued8wipC/rIX8b/N7L3ZO5eeug6wLMCfTKucA==","signatures":[{"sig":"MEQCIActxAMVA7FTzV+KLdyYwrztgZ29ROX9Rn7tKpjzDD+ZAiAAgVUmZq8NaLQo4nP1R/Eq/XvpWUHKNeTSKW557K4k0Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezWk2CRA9TVsSAnZWagAACY8P/iTvN2IBU+fwIdyr8wAZ\n08KOxRWR3RFFoN/hLQPBmkDDeoS5efZpFcP1hUNQIPvYnze2Mvfvzf0YU6gg\nBAVdItkP0443hrV+a2bM7n5GOm/UqJ4+lpWQcpx8oQnu3q4iEzS0AYm0A742\nx4sEZzX6JKVsIDM8SrAWoZEt82TB08hUOshzXQmn8symupVFNvI8QpNgm4OL\ncKojmO5MAxAWV4b0g1TbMYGWNoIMZiBR06Wnlp74UwtqvH342sBamF3NYZqT\n+fpT1uT6tofwEjqVo9MRH5cHmTCWh1THf4cCVFYfyGEZAFbdNvoB1E76iYga\npxK71oeVT4OjBQP320jjleAlQOf+2o2LjkHgIKOWIYOL+Ln409uureFRRjrj\nr8QFghEo4EcD+WNybsn1wVE61ZLBRzhSGARqAISAes4pz3z3wGsCdZ5SpwsP\ndIe0Tg1C3ChscnEN4aN5bD2L7mtw1LVQBOJJxIKi9ed39n1vdKrTka3rq4J4\nLQeLOtkBvaJX8OXtKOYq1+5GjvAJq4rfJ4IdlibVS3Ik/kLwAvPDXLkTLhk+\nXFFNZetAmeLVgOnCP8CsE2GvdS/pGVacu2ho5vKOZpfV1aycWCgcNrrD/ffY\ny9Mz2+ptgEjNPpQWPC8lOHOhQsnRv9YwDbLdqG1dQ39B2BkHdLoPyRnvuH71\nCN/D\r\n=FnCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9fa697d39bb8f18500434764b1fd608819d2e194","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.68a2af131.0","@material/tab":"7.0.0-canary.68a2af131.0","@material/base":"7.0.0-canary.68a2af131.0","@material/animation":"7.0.0-canary.68a2af131.0","@material/feature-targeting":"7.0.0-canary.68a2af131.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.68a2af131.0_1590520117685_0.2904998123327276","host":"s3://npm-registry-packages"}},"7.0.0-canary.01de07011.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.01de07011.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.01de07011.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":"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":"1d12a0e246a80f475f94a2441bee11269ddb7d02","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.01de07011.0.tgz","fileCount":52,"integrity":"sha512-eFitWmxjPUTcF1QwKrG6Kmc/K7ZylFqr5urMap2tfI/qbiWrSoW3s8VIr/3UeR1EZqbFrccskq4QXPjN//R0Ow==","signatures":[{"sig":"MEYCIQC8xvAwjp3n0KVPaGyUVhenM1NTemFpi5jXcdblog+JSgIhAMP8tVJElV4zsUtCQ7OaoM1+MdPAIg/q7lC0oRNhxW7+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323332,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezXPDCRA9TVsSAnZWagAAf7oP+QA7trCtt9V2s4gE33YY\n6D/bPr6i3+q7p7T4vV0xnRVf73Fg8V1ZGbnZAgIeXZKAk0VZIXTYuaa0oeqR\nO68ZC/o/M6jEhX6IkzMHt6xd8WNN4jamTXDo3mPhpyKVLHr4m9gjrJpE4WFg\ns84Oy2AK07DnSxywFhV/nqRA356VA/B1n50TQeWQp/l7ELfUdCZ39ZEoPqJS\naof8YVM6+TT5z1FuLY931x1SbjYwnCoTgDVcdKK4E5FDcHknMf71SUuG1vNa\nDVW/xsZG+XDBai5gay4H4CpM+otvB664vFnQrzg/wOUB6j8lzXVouH9jjWtX\njuAbSyiZ97Yrto3wRROC+nVoAMb53bex99LUyuprkJ9lFx2m3z4id33AP/Nr\nYUuKdn+JHSpNrxvh5Hly4etxVB48g2UOfzvbcsog0iu7QvQPR+AW0jLBQ4Gz\n/05I3l3h4mG22GelU8M8b3kBlWNamTXPXspGSmDZWuavBnSOEUmGY/CnVJW4\nv8tFiTJc7+Kz20tj2aIWCGbCC3v9UfoSwPOllBCbf5OPQzS6zUKRqYvMqJjT\n09deleODIzigR39ZsAVvNMUR60Wfqog4crCKeRIBx5b+/XqH4ZZCEFTS2qu4\n21ZrLO3Kk5MwGkR/PAZPR5EFmaymOBs8xnMEKEQyVxr/yluJaon2GA380+NI\non+s\r\n=CNfa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"58ff4055affa7a1d66e79813fbb147990e5360e1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.01de07011.0","@material/tab":"7.0.0-canary.01de07011.0","@material/base":"7.0.0-canary.01de07011.0","@material/animation":"7.0.0-canary.01de07011.0","@material/feature-targeting":"7.0.0-canary.01de07011.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.01de07011.0_1590522819309_0.5241429860563276","host":"s3://npm-registry-packages"}},"7.0.0-canary.51d4535fe.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.51d4535fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.51d4535fe.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":"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":"df0339fae1c33b94ead35f2321f86d3081340bed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.51d4535fe.0.tgz","fileCount":52,"integrity":"sha512-T0V66v4kY29I1JeXqsHsznOnooHpYAOgi+dB5ZJw2QDOI7WGeJMQH01+J2kOeugXqfoiVFNuP043hnY/C2KZ6w==","signatures":[{"sig":"MEQCIHmuZd2PoCA3T0FdUdeNA+VqHwPXVipQ+exH8sHnRphaAiAsFrI9eETyUf8JewfonqAdRnibIDLG5ED2IbAGANo9BQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezYvkCRA9TVsSAnZWagAA7SAQAJJJfz+tbvOJkomi81Gb\nM10XedZ3kBNTbVrRUFhKR9NBdseI5/BMfoaPT1JYWeY6E3ECRq7l8lAbJ08b\nMwL941frk57/1TT0cpp1ulsvrYRhnlL1YbJHfurK0VF1ByO97K3j+dNdeWwI\npU8CO6pIkuaBuET1WF7g5PUihCKojkFCoAGaYdDmTV7zMd/+Tk9w3PpOSMOi\nYOTo8ahyw+xz8RXYmrZjkeaAv3+RUzjo0++2HlewBI7/g3b+UNVYli5FfEF3\n5ywdoO/3AqVukCFnNyf/YQp2oA7YuV00hUlE7yPxgwxXpHAN1W1o7Ege2fnP\npHvA/1FFTEujjIPDCSBDBLbFoR4b00ew9QcWP+3mE83e5K3dlnAooocV0egb\nm6Fs4R33Dt2D8jmlJcFSmY3dQmGO5f4r1vUeEWSdqPlG7fk7JJpbdCIDh2AE\njlLHEM7//ELeT9ir5CSnJjqh3lbxcDjg7u7ewL+hm37SGA//OsyLefkAuknQ\n4QgflPXjbiRvATQMy0s4OSMENtw8oMpxg5n5e8wdZ2IOrYd2yMlcATOT2AEl\naXdRG74mJ1SGZJy0FJWtYPcskUNgEoL3Q8CZgYDTCyuPp+zi3mE/7b0nH5u9\nR5ao87JnKJWZLMAs/z768uOmQNgJqQAsGq9lphtP04lCPTzbCgzKan6hgPu4\nEy9o\r\n=c4/o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2ea346ccbcf8fe2cc90f893a510a194ad4f67356","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51d4535fe.0","@material/tab":"7.0.0-canary.51d4535fe.0","@material/base":"7.0.0-canary.51d4535fe.0","@material/animation":"7.0.0-canary.51d4535fe.0","@material/feature-targeting":"7.0.0-canary.51d4535fe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.51d4535fe.0_1590528995716_0.1454721590726764","host":"s3://npm-registry-packages"}},"7.0.0-canary.b86d826b7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b86d826b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b86d826b7.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":"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":"7f32feb445a9283d9e9e3527a52d635a22bebe24","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b86d826b7.0.tgz","fileCount":52,"integrity":"sha512-C4dhq1ZxhzB5B2BaEqJD67W1fzNAku5qX6lVfpukzvvy3jBj7BhSZ/8lHLzdsOk5oN5HVXJwDUDHT5gnMcsx3w==","signatures":[{"sig":"MEUCIQCASjDwTChltdM+HOW6AzTSihXfkbT71WyCEeTcjmi4RQIgZiSXiOFrEa5AE5eVvn0vAiSNK2rwcrdkQVXxWAPogDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezZTTCRA9TVsSAnZWagAAR7IQAJf5zrtq/MilAfxxs3fW\n3jL9W3uOlcdR2jxHH2tiXEfSer6Lt0FWPyMSoBgqbsnAp+yGQZZEnvahLlbv\n6JMLOaqOL8dND8OdaU+fsAQYVdMNCnndrQGD+BZ5xe9ymfPELUKZmIRFUP3O\nYGbp+PYU9l1yL/Qf3u3Yq1XLjupGnrHU6AKksVZvJgCLnPI7rNSodvIxWRJc\noODqNtjwvcS9mLR5nW7T/W7ZNYkGYearEV991KaIIojeRfUkznfWdOU6jgKB\nQrAGoEkVKZj/fNPn9QXd8sOkkVRTiY4BEkcPhNl8mADZ+eWL+JK2IOaYfKIe\nKe8wA06X0NdQpYuuQpHFVMKdLh+0bX51zDc9ACvZ1JW11CQQiUHbUaiDFst6\nme76O3TnFdszeKqMbyAUMpVwGGSf4oia6yxbqkDUjaPW+Pa6vOoJ1GMmBxUh\n7tDG14kh7j1d10tjar7Tjd0i5Ik8PEaOWNX2O2NpAlk2YLl9Q5Dp74dEOAQ+\ntZ6/SqVNcA8ayEyji44GBM7YX5Z4fgUE2oiCXgcGTaccn9qcdLhFU8Hh2eN3\nqmsLdNkMaf93cqUlIRF91pgdY7s24qTZUOyUSjTPkPIVvc0IqGVBv9I8TDgR\nobdzHUSbl96rZZvi4kDxYrKGRyYurHdE92gA3AMelTaEgFuX7VZuWp5YoIO7\nie4c\r\n=lX3Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2b22865938bbce871e6d1ce8ce0129227142073c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b86d826b7.0","@material/tab":"7.0.0-canary.b86d826b7.0","@material/base":"7.0.0-canary.b86d826b7.0","@material/animation":"7.0.0-canary.b86d826b7.0","@material/feature-targeting":"7.0.0-canary.b86d826b7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b86d826b7.0_1590531283429_0.7672532616406034","host":"s3://npm-registry-packages"}},"7.0.0-canary.d91794c7e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d91794c7e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d91794c7e.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":"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":"c21f07f42aeb8c0fafed3cc8c031f1c391365ef6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d91794c7e.0.tgz","fileCount":52,"integrity":"sha512-zyBZRK3dnmD5lVegrttdUNksqT5VZutXOSeI/aGfZVv9x28NYKD1XKjv3JwX13frV9/fZmkq7oNfj83XfbjbUw==","signatures":[{"sig":"MEQCIEiBOXhzaMAwXIcShN/XHJp+LFU9Q0iR+M7LnEGTalEhAiAHhYyRcRwQtbmTvKnb1gAOUOkUA0R2Yj2h4tQVPW9WPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322795,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezayGCRA9TVsSAnZWagAAVVcP/3F/FYTqqC65vOGQ41gm\nn/XjRBZWMxvD3jYzMgg3NN+zQAU8ZnVa8OX/PARIU6DwWodeHyrQgYrZYYMI\nJgw/OZ1aZ7HnzZpXbtfY4JaHUd1PR7PtLxDtIfds8BG5wHK+gAzfzH639mig\nhOlnH134dfl4wabqOiOLdomhM4ctlOJ/wxlZuVYgtRnJzqR2iHwDe1jmvcty\nyR+12HM6kC5QMGXRwPPUuzH4Y4VL/lXJJ5ZvwcK2NJR9O8ym4GYYLpFhPOLE\n5K9Y63CkXNdHgJUhhh8asjVHTFq75l6gm/OJq4klDZn7aGf8RE1oXHU1OfJD\nleIw9L5QNaSAj082Tum70aLN1XzMaB01b5C7LiQbaHGz1t7sQRFptWFPdYsW\nXFRPlV0MJAyO2K2/wgxBV8tNRa6+i23i3uJk80igfDbu6eHwZmVzWbSJ8bl6\nLj9GKbzdoRUvoZbdwQMAJ/+zYtOYubpN+sO+aZpaNRuEC3f1Pr8ntsZQ3u2Y\nbr+7Qlk2dt3aHTYa1wgTwm8oxY/K5fI/FE+3UI+UMWeFCXydvlRLbJCkRNmo\nQ7ut9sEmuFgkU8xI3POyKGh3gD3RT6EECn2jguokhBwAGg6ZtI63STL3BtHM\nMeNG0ULxBRC2rTXygn63aZzrrYYgSCrPWO7qbDIu62bCzrsUJXFIqU3yPOjv\nFryH\r\n=edcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f931cc9789364ca07cac4a17cef0a225bf43c168","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d91794c7e.0","@material/tab":"7.0.0-canary.d91794c7e.0","@material/base":"7.0.0-canary.d91794c7e.0","@material/animation":"7.0.0-canary.d91794c7e.0","@material/feature-targeting":"7.0.0-canary.d91794c7e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d91794c7e.0_1590537350151_0.9696692618043492","host":"s3://npm-registry-packages"}},"7.0.0-canary.8c6d7e076.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8c6d7e076.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8c6d7e076.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":"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":"a8bda45c01bee224fd649059b1d53b9dda5dad7e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8c6d7e076.0.tgz","fileCount":52,"integrity":"sha512-/P1EqY3bsffihgdUIl7/f//kvYHtSHD35yMTbJ/3L5jOJL5B9HpzlhEa/Eonqp65c6nbMkjbDl7V7qvMwqdMAg==","signatures":[{"sig":"MEYCIQDD3aX9c9EFeipf5h2vusJW4fsC/lx6g2vzfkvtQS+9mwIhAN8WgeDYdgK9ZmsMa7qDA6Nr3gGvWkOwI77mAmGc42dz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321897,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrjnCRA9TVsSAnZWagAAHNkP/iQhzcPwvyOzRUfKYq87\n1D9UEn0yKYhuRlnDG200XoZfot5ctzzR7ymHrjxrS/lYOF0rI9TN4uFSgdnl\n19rRmKpJY2CFV39+WreYAnERB43JuDK0SFzZ6Sa9t3C/Tz7zEJn9vkxNHWSk\nOEv5ADnomnIll2JOVUBX8AaV4Q88LdX69bVpVjPh9c88A4j0dcnwxHUE65T6\nQ2Kd5cdqgMrMWvR7bUmZqUgC/JoEZHyvq71jQUrXS/hnM0A1voZqrhjxxlwN\ndH432RHg2NU5V8wmiIYMdnW2h8H6Of6R2pzyKP3mJK+wez5a/SxUuOFawiLV\nIngxwmbOdLQd24YNWFa2NC3KNro6DRtp5kjq/6r8eROSfRBxAUOdwhZdBdpl\nM4EVChBp8QkTe3K97zd9t49oERbm17qMq8f5meb21CnPyfKsgqKd5XVOWUMO\n9/ahhXyGSaKXzuGrkjuUtqvWVagDPsN6BEGv1ZTuJjfTJ3SD/Yg9T6PJp3GU\na/UG8UqjtdqZU95o0r5wRceg1DQz+PXWfJTMIvg9Z74US0rO8ASF9JL927wH\n2B3J33icoBTSt9hCMbZiBA0OLo9QtAzSW1InmdqjFbVvOhU5aOIX0d7mdJFs\nz2Y1AkD+4BHPvUj7rx402wmQzn8Wh2xOPwJhsy0UtWD4mOsp4OFydASl6/P+\ntzky\r\n=0wHI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ca2efa9bf20bd3fd24c7f6ff263721fea798614d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8c6d7e076.0","@material/tab":"7.0.0-canary.8c6d7e076.0","@material/base":"7.0.0-canary.8c6d7e076.0","@material/animation":"7.0.0-canary.8c6d7e076.0","@material/feature-targeting":"7.0.0-canary.8c6d7e076.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8c6d7e076.0_1590606055079_0.02551098520200301","host":"s3://npm-registry-packages"}},"7.0.0-canary.5b5f62f93.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.5b5f62f93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.5b5f62f93.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":"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":"ac9a5355d8547b7fae2a8ebca7faec3b3822a5e1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.5b5f62f93.0.tgz","fileCount":52,"integrity":"sha512-lFSsb2k03l6iG5XEjFbYOWbxHYhyQM8QxGHD6u1JBz/DQjKAR44R/rSyF8ptp2IO/LFc8NH6Ht+Om/7nMeZ0YA==","signatures":[{"sig":"MEYCIQCunMTpFShlIVIIP0DMbyKy6uhfTsNvCIGRpsI/Vxm7HQIhAOGRdu1iorEfv+b9VZMlSWjFuO1QjS0D/ZZkyhuGjxKM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezrzRCRA9TVsSAnZWagAAlxAP/2jGTqMMblEONvG8KuZs\nOx0tluxLe/sLedjG0y+l/U6041WkQcZPbfY4gdKs8dCCs/d/OcPQDJlfp1jE\nNqOEjyXgYjMVpP1ziBAoc9x+lL+qKGgeaTR9PpxB3FEYvBFWNPCmr4T2zZHb\nXdWxMVkklJxhq72iej+4FBt71tawyhhospvF4PgbOweZcPG26ieYYyU9o9WB\nLjdt+56btf6hQv9UGeV0GpeKolFsIJgQnJbZGeIYnT6omna0uQQ6syASBuZH\nL28imPL2uc5EOk3Sl5pGZ4ZGfa0AV+QniIZgU6MUoBNx2Ft/NtnqWhhACx4q\nzJN0IJe85p/nhOk5mTVGTh2J2fmk+vTIpd2/Hlo8KHL6jitII5r+/1pi6504\n6eMuH5lIZdr6tIXR7ZzeJWSiVKDy9ZeMD6PagyjXldwxACVBFoJCUKeU9JTU\nelI7n/oo0oibm6f9U7AeM8EqbnRlYzs0mjrSh4A3do6CghJNay8BNqYa3d1X\nYUZ8fKOj7zjcirisKqCRj83w+kGKD+aud0fxsVYWGv+l3bUGIGI43f5pQjmx\nkm3J2fz36Sk5ZEXI8VDhSidfS6N3c6VD0pZozMT0eT9ylc3aJUu3cm8Ov6Cc\nNOFa6sZzHwd8E/Qm050ho4XyzHac1+yAh+I0INlNVhyqNhbWP2/3H31D+GmC\nvA6u\r\n=w76+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bdb576423b0f8020c453a5473bae420ee287c240","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.5b5f62f93.0","@material/tab":"7.0.0-canary.5b5f62f93.0","@material/base":"7.0.0-canary.5b5f62f93.0","@material/animation":"7.0.0-canary.5b5f62f93.0","@material/feature-targeting":"7.0.0-canary.5b5f62f93.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.5b5f62f93.0_1590607057449_0.06734575815053834","host":"s3://npm-registry-packages"}},"7.0.0-canary.d9972abb1.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d9972abb1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d9972abb1.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":"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":"818d819df2bc1bfe2521614f88ce1f7da0158124","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d9972abb1.0.tgz","fileCount":52,"integrity":"sha512-RHEunLazKsfyOP3Jh1WSZOik58VvTBA9tHhyesIILmf4LM4ALjOye58z8NCqGIdzLzMy0h7CDs+DJ1cOA0ZzFA==","signatures":[{"sig":"MEYCIQCsNq6NBWmgMMcEibGMOPPXHKKwTd0toX9FT39yylUHEgIhALatGfKYTnzqoR/1Eih0daFjFCgv9tZJ0Ni6WzgbWBcu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezsvfCRA9TVsSAnZWagAA9EQQAJX9LGA+FARBNYaMk8Tw\nao1mvZLGVd9R22F2R/AYQYApPKsi9Ka2RjqxwwWpTs0SpZtbG1S9dOMyDNwA\nzv3SY6kqHyVgJdXhBnNYWMYuDBtzuYzYs1LzBbXljy2AK40enTxx2DQFkQXm\n0t1P4F7IQfgn6PHSSMl3K70cOsZPHsYrhTeVvOqnDUmVHop1FeZ0XwBZmHBJ\nhIQkw7DQpxeLjygD3CRW5rnLclhTvuqhrM6nymZu5FRZOLiaakkmO/kWFGqI\ndqA02adGSMW6Dt/wZKv+EgKqwUgcho/6HGREUPByE/DvSuVflH5xhe0s74o8\nApVJqDsSv4PSTDMSDRxXgFno6EEE6FA5R5+tZCHXw0HwTuAsuf0fzrfUkLh6\nE5/Pd0RQcLWxIIu3NDl/J2RLz0WpkkgUdFT7SPkTjy/jb6uXlGAvnYAQhH3K\ndwbQIHizp4QqYtARrV25hilPPs3QpqrwT5uMX6S8dVStq/+pTpaHsqzb6NW4\njeskoT03RAsGPtAPUZoaqaJwqNMox8MFVpzw8QKFYKVHhTyK9uuZ/oGsIOVb\nRv1PcEU4QS0Gyx3p41gdx+fAHoJlNTz2xmnjvZyFIl3+Irv9dJMt4XUo6jUx\nZwDMeiG2Hn+xKuePpUMtFxplJFCJj22TQi2kdLLQJZKY44l3z6hJUT7BFQak\n8MGe\r\n=iZPR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3db449915645c45b366327c8152342a34f1e10e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d9972abb1.0","@material/tab":"7.0.0-canary.d9972abb1.0","@material/base":"7.0.0-canary.d9972abb1.0","@material/animation":"7.0.0-canary.d9972abb1.0","@material/feature-targeting":"7.0.0-canary.d9972abb1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d9972abb1.0_1590610910798_0.068109039974388","host":"s3://npm-registry-packages"}},"7.0.0-canary.6556eda2b.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.6556eda2b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.6556eda2b.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":"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":"c0d56e8fd6df2fd7ab3b252d8e837db4a2143005","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.6556eda2b.0.tgz","fileCount":52,"integrity":"sha512-D3aerjIcQejhlD29hqKpHguPtrBpdw0TCSGhwGMNRUy43S88B3SWFdTqATm+a/7ppi4hD9ykAZkMcMlLQ/ZHDQ==","signatures":[{"sig":"MEMCH0S9K7r1MfNdvWgEFP6qehyOCyzf7MsChn/D3qd7T58CICtrNHdjcirUn804wbmeMSODC1kkRerVwJ3qoRlau6QM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezs4MCRA9TVsSAnZWagAA4WEP/3D12GpY9i3WfIbWi23D\nDGUq3CBsV2fetngfxgFdy4nMsrMxg4B2NBqTJpHVIvShj1MPKz7+X3CYK3Hi\nZyO6E+oAJZ4IPIGnM0DHeopHBsEKaXBx4MSqe5rQj/JTtR695NQjex61LMAW\nzzoMjZEBcoDS/UBx/KEAZi6HbwS9czFPNoCtAV0eyydyKOmtCsSl1gAqvo5l\n2zvc78OoB3xpyYHhJIjSGEwsQi88yZe6Vi8gLbQc5UhiUq5iaiWWy/MYrrZL\n+xpfb1hTsLnqB9zSzhTvDdEVr96e8lILULR/46euVzfw8ZRilsTFWsLNlRKK\ny0i3opRhMrXBrKYoufnYmsG9aKW+mQgzGMaz2oqcmwJSqBQcjYfLXw2DIme0\nw5dKp53rWDe/JZAtVAi86UmMZf4mU4o796g+qmZSAH6Tm2ak1yoCvM8B6nCY\ngTLt1nrefcFcclqBhb0fdDn9+qBRghlGmT/KGvkHEX1wdwDLJ/8G5EXUTu5w\nHVQfsHzsfAPZ04J9IAuWW+5epdHUzldB1i4fbcOlRLiQoe/6F7eWSi9HJVD9\nOoKrgfPRxhWpHJ9FAroIXtaomnlGvGk2NOspffiea6Vxoq29h0E9ZniXy20L\nn9nTaWTWwsuZ8QyjvgD//zCOVH1C0NdrYWL1ufs3yTGOHf5aIeQTd2U3aONu\n3sR1\r\n=C3H/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"504ec59b4b401d057e70ba4bd1bbef2f87218204","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6556eda2b.0","@material/tab":"7.0.0-canary.6556eda2b.0","@material/base":"7.0.0-canary.6556eda2b.0","@material/animation":"7.0.0-canary.6556eda2b.0","@material/feature-targeting":"7.0.0-canary.6556eda2b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.6556eda2b.0_1590611467783_0.2460086972175437","host":"s3://npm-registry-packages"}},"7.0.0-canary.32aa23641.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.32aa23641.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.32aa23641.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":"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":"8f31a649515c7dcc1cf42f3df68b27f80d4479f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.32aa23641.0.tgz","fileCount":52,"integrity":"sha512-S1TqVoHV4j2FejwcNeTyL2EVSTeUkRsAaa5VEBs/p5+wPbdFbfa0fts9493vPTZy6kvacmuDyeOO7Z5b58U6aA==","signatures":[{"sig":"MEUCIQCkNluzSlBBZjeDEoZRdapvdEdWRnuyOm2IXPzgEhxcIwIgECWNe6JsX7YAXAouVYAI6Rdq66n+U7QdDEyAnf8/D/Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezt4RCRA9TVsSAnZWagAA5HAP/j0/BbIFTkPifuAfd6Vw\nRdQzJj10+iZD2S9QVJbJszt/xXwd3EiyjQ1+L0kp9Xv3CJLeSjrfOV2Faong\nXvX1TGad45cRqkW1Sy8XnmVPSUG5/1OwWDpilWQI2/70rqwzp0oPLr8qHI5J\nEKhyPisjhn3g4h9rQ0r9tv36EvR8BdWioPgxOXkBs79AWLwS5P6c7kH8NHFJ\nMABK/pOgXsvNYIy+toQwqtLQMZsp7SL1c/0CFh/MIuotwnPK7Hlch0/rweQU\ndVJI02y1PH+7NymaKPJEsaxGsTxjjsRH1YMfFzhGMkc/jEajFJfIROiJSmx6\nSTfpglgf6PJ8Jc3pI4Iy7z1Czad4oTLOp8dv4tLmmDOVDcHlRFMFYVv3vcjT\nqJdlMYnwWswU8/btOqjRQpGM6jbsg67rF8N4AmfRQX/2GWWXaBOjiPdT4b12\nXuBF33PPfBqYM5HDa9B1+/gvqmGY07VK2waJAP3Ewi0rHytH9Z4WjlX3XRG0\nyc6gUexlskap8IteqXRjPvR2NDDVLN1S4eyzt/S5yaV2LZgUILcWxjxao/Zd\nnxhMOzwqhq/SZsn5qdiCtRjlFhacINQU8BmJrjeU7Xm7QAB9Ey2eDgtohay/\niLsL+LrvCAA1vNiuk5eg8LPAFuP4fLDL4wCtzrELfiQUWwnoiH5UTDrY+4/d\n/YZP\r\n=PmzN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4cc39075dabda7fb76257a3403f0bde13084b87b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.32aa23641.0","@material/tab":"7.0.0-canary.32aa23641.0","@material/base":"7.0.0-canary.32aa23641.0","@material/animation":"7.0.0-canary.32aa23641.0","@material/feature-targeting":"7.0.0-canary.32aa23641.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.32aa23641.0_1590615569061_0.11112079386935614","host":"s3://npm-registry-packages"}},"7.0.0-canary.654934dfa.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.654934dfa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.654934dfa.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":"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":"7af56b610bb0782d8ba0dd21fe072f9fcbee75de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.654934dfa.0.tgz","fileCount":52,"integrity":"sha512-IJBUNvog0aRMbgy3I1Y285syB+MX4loC64bgtduq0J8E/JbYjIXqjTEH0G36BgibL98DAVYRtsBj9i7tbGZtWQ==","signatures":[{"sig":"MEYCIQCWXpSzEe1ejOZl4XyqyVCzoTUxmemKchWOLyAKWB40SAIhAIcIdv1DF/uBDJOAfdsU1bKkwheEtR3yW1B4CQTGGZEd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezwfxCRA9TVsSAnZWagAAopgP/jTtd3vkSiI6OREF8t3W\npOLj5AUlYg41DHxhtcV5xmLU7Frjla/Mek7Mo6OI+B4wuui4waMBCipshR0P\npPT9Sba/Qt8PD0zGnzbxJG1WMu0RkHReh8qVwsVtCJDaDusF0NK1U2jb60nZ\ns1htS0GpuA0MCozB1dl1i4OC0oNz+pIXFdyuDG/1C/kPJA1GJOAOh/fabOKX\nhNBZLZ2tG/cDQeyFXr1CSXWhH1NpLyNNJp5tTCY+7mL3scEkFeteRI7wsWX+\nrjFKmBDZVujmtsW7XiP6tu+wzfc9SIpNaSoAOjkcTJSaQtJPnc+TSKalS9b3\nYTwZKjSNQOOmuhbNF8mlimTMc2jYFOhniZruEd0rdnH0dUoOlHsSE9OmkEWj\nR3hMcDik2aJxPbndP22Pb+dOir1vJ2vC1kUgoH5lePvEMcuOO413ehV8lokW\nnpq5gOKzh3MZMNYf/n1y4Ca5pdXZyb8J88HPYMjkTshgE3ySkqwh3nTH53cM\nOp/SE2v4FK0ayEW+4KGZvEPVuLkFBlc86/Yt0wx6cl6GnbgpcU+lXMLYDqpO\naLsTWEyaLQifjRWC939MzB4fRchROC8h/FTBN4TPXa3/+t6SWsvc//yBGS70\n/g0VSQ9nM5fAANLvO6Fdse4CAONntSHezwybD4Ocl7DBe2HMSQeSWPm0L1QT\nxKwQ\r\n=Ull6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"99e56121d157a5a30949b826c0d521a365a1ae59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.654934dfa.0","@material/tab":"7.0.0-canary.654934dfa.0","@material/base":"7.0.0-canary.654934dfa.0","@material/animation":"7.0.0-canary.654934dfa.0","@material/feature-targeting":"7.0.0-canary.654934dfa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.654934dfa.0_1590626288727_0.6459284995220562","host":"s3://npm-registry-packages"}},"7.0.0-canary.41910b8b8.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.41910b8b8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.41910b8b8.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":"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":"0f2d33287283e0f0e2d52a906a5d5bc5edb0dba8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.41910b8b8.0.tgz","fileCount":52,"integrity":"sha512-LLKbkIERZit5vL3FHpPQgo6L9pWEEPSTsW+zk3A7KFhaRl3cJlCBV7bcc/HkqTSM6dVLlZeTv5YzB9rOVI/zJg==","signatures":[{"sig":"MEQCIEZH3QRE13mEPVfMPv448Dx0INDC24Zvr2gVnjVpo5+VAiADjfYWiAw3T7LVKaZrySNnkQnYRhssqZ6T7SB02OxQNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJezws9CRA9TVsSAnZWagAAL/8QAJ7WTf01tnh7U83GPdhX\nqcL+G4SXhOTIETtUuEF18o7Z2p7L1NQUc1Dl2kkiS73IeggouG5nnCntBg5h\nmyg6r0bCFn2fGMHG5xtjF0KOBvDnR2roqkgtwLEBTtefWm939FP2DMBv42OL\nyXGOiPjW3Cb7G/lJfQXj0xkB/RNv4RU9qZek8E2EqrFOI2n+1a2CTLYHK/dQ\nsvS+SA58cz0jOj1n35MtaXw4rfyjMEGpJ6lf97m+Cp843odB/oNHq8iHipv+\n9q5qcRrMi+xab3p1Si5e9ePWWkTQEDfML3L8vniwlxM0n7ln3funIgKglH6Z\nXtrmrZgKNzn0ecrITyE2YB+NV4T0AbQoSMbnRx2AmhGSuHuA3054DZMh1IB4\ntj0FPU/sv9p3RFOPV3eE/MjnCxtJLULYcdsDdg9P5lC9j7T76d0ink4UyuwQ\nx9X+/FMqc1YX/DeW630nm26mY47z2WpeSWPGVNL+8By9Ze8PVeb6ftdZ4QPl\nrwZFsU7rkq/IplG4Ic6Wcjn7jEbTc6vM/NH+kfO7q2ZALbIHYksLma2tm+kR\nwnJFiQDqgEKoOfHBPuh2hSWs597Vs18aS7C9LZiFUoFCpLwhUER9EIDVhCYW\nhm7CXEGOqmKp9K7H7fSbv9WOaL+ZgMbrcmEMMwr/K2m6fSS+A+q9tzLE8fRC\nf30V\r\n=ZZZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"14656d5f31e9a410c15eaf9b47530d57a5901add","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.41910b8b8.0","@material/tab":"7.0.0-canary.41910b8b8.0","@material/base":"7.0.0-canary.41910b8b8.0","@material/animation":"7.0.0-canary.41910b8b8.0","@material/feature-targeting":"7.0.0-canary.41910b8b8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.41910b8b8.0_1590627133094_0.5929582199665775","host":"s3://npm-registry-packages"}},"7.0.0-canary.d66d22bf9.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d66d22bf9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d66d22bf9.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":"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":"e3351e4a0edafef8daae02106fd142ff5b97c433","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d66d22bf9.0.tgz","fileCount":52,"integrity":"sha512-5McQPzHKvqVGY4ZxnLksucPgk3k+Ld9jplhQeb+hO+3FmJi186kSSEDXHq92OYug/aaWJ0GWFIkcbgGpGiMrVg==","signatures":[{"sig":"MEYCIQDv9k3bugmpIncwb6qtZ+mT2u9vT7D0sq1/bNivEUrcBQIhAMHeVJDMdmnQ/pvP/dKyxbOg3p6oT2cdbLJud9z4ZamI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0BdoCRA9TVsSAnZWagAAugMP/A+zqXRE/PHaaLI/qhbO\n5lHPJYRu4eI9zOCwXj8QVAh0OYpG8Wqs7BVufNrmdtm2AXfbAw1lMnKnHI1N\nlLsEZii9tc2eJd6UWofgwcXgl1j0n7r6miXuIj5TlPxI43mAeO+yqDscKyvs\nxciW44Lq8VsmqPebqpf7s3ErzdBRxdISeGCV0f7SU5czUlb26f/uXHz2+1lt\nbIdloSE9iK/tpM7ECNnY1qBVxklDoeeSmWGupN9wD8dWT/4hW1nN5NYbvhee\nipaP3sy7QX2flmqyFDljcUf+jElwVAQJYWeFcJTwPKCpU0cD5w4JDPVoim6q\nCC55horbHPxpW2s9KuYlMmXEFrkYhkYwM+dCVhBWEybk6uZbJG8sCtFnNOpD\nZkpoRquA705O2TbClo2rZ13TQXyToqakF4QgQsoT8NV/8ZaEOuERFHzwUCe8\nT8BWw6egkqstv4neNTXhGRXyJ/c+gbqusMw5zQqYMK6HqtJIdTNO3Cw8Y6yi\nCUhqoYxJiRMtfUfsnUReRH5IGrBKv4YSqutrgAhf7ZzTkzFXewMNt96idsda\ngXnP4Mz1Hbshl9IQltRXZMxORm+B+Q1vXQr2jpCCdT4uH71YMd7NGvZqNf9i\nwzKm1GpfVDDDN3Po80BFo4o5vd7DXjYAvFTkh+xfTEXHbongJxUNaNcdOu1l\n0TFp\r\n=ZVlu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cc182def4daea4d871df41985e6d893429174b3f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d66d22bf9.0","@material/tab":"7.0.0-canary.d66d22bf9.0","@material/base":"7.0.0-canary.d66d22bf9.0","@material/animation":"7.0.0-canary.d66d22bf9.0","@material/feature-targeting":"7.0.0-canary.d66d22bf9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d66d22bf9.0_1590695784299_0.1282651795860943","host":"s3://npm-registry-packages"}},"7.0.0-canary.8904f3cbe.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8904f3cbe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8904f3cbe.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":"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":"e6a669160de8f736c39b24f1501e975aedadd5a8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8904f3cbe.0.tgz","fileCount":52,"integrity":"sha512-T33J/APutuFR21jAeoIlv3xifET1fHdmsy9tf7Av7EIA4mgKFThVIMB3c2wIoOOZM6+xCpfQsHAvQZLN3x4qGA==","signatures":[{"sig":"MEQCIGWAIfO9nfOqMnv0YY4E3WYTKdq4Os1No8fpq5YkQkejAiBWNfuPxMCP0A/bYRxSKXTZCc6ZAZTwSbV5EMAiJJQ54g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0T2LCRA9TVsSAnZWagAA5igP/ixDO0vaDajbhSQxoQVa\ngSp9zro/qKRTfBxhnnv5JdgNEOaAG2+pPDHCUq9oVsw5Ulgrw6iztyr0rjbW\nTqIeZcskiXH2db21fIzL3Kd6c5tglv3QUeRB5nPCGTlkpNw5DaWJX0a7RIZT\nrDyz8Q0aCxxGhQ1fg8f2QR3PeyzzUga/Mj5SZkOOfnLA/MIOXbm1qkXuj4dO\nrqy46VYuJExe+EgEo4vfZ1ul6T4vNXEfV92UJ4cOyBTjYd55Kvr13GYBOgNA\n82r3Sv1zAubrcuA+ETp7bjKUI2FFS1l06gT1LD3tfXDhAS0upLTG7QVICBMB\n3TwICMCBYW08RtNN4MLWcvCTPLP7j0uoWAI2d1F4oabVdM51QLXzpHFXNVHM\nIw5zc83YZTYfvRTKlnOee8BSV5CGwQMR1Gm5rcYG74o6ROTGz7aptZ+mqQU5\nqHhsVzc/y+rLJaqlsY2q6ncqLr5Hnnx90FQnjNzBe+3UQvr4N9R/1pxCuVg2\nmtQreCvAeEqT0vxbmpIcwLPqwY3svsjouosJFxG4AR9FQWC01ukHRtrHe0wj\n3YdhLo7C3i6+uU9MbLyUcqwBiQkvbM5JzfHzNkD9x4tAGb17wh/dXicj0SCv\nJA4+AG2+xAfpSb7/9uWpn1JEUBzY3ACBEx37whA6U4Q/k0bG7SNzdkGbVxn8\nwWD8\r\n=Aq8G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f78dc612af1ed0ba397842886fe5bc41e32f181e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8904f3cbe.0","@material/tab":"7.0.0-canary.8904f3cbe.0","@material/base":"7.0.0-canary.8904f3cbe.0","@material/animation":"7.0.0-canary.8904f3cbe.0","@material/feature-targeting":"7.0.0-canary.8904f3cbe.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8904f3cbe.0_1590771082890_0.9300880342290809","host":"s3://npm-registry-packages"}},"7.0.0-canary.51512a4ac.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.51512a4ac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.51512a4ac.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":"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":"e4a5af907d4a4669ecd88a626ad6234668b82c9d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.51512a4ac.0.tgz","fileCount":52,"integrity":"sha512-eE0Bj9HPbElsTAMegnjjQPrYOSuXRQ6nFmoHbQYWv/B12baoS9qHFzh/vzsbyxWEcLmM/cGxHavU5dtp9+kIYA==","signatures":[{"sig":"MEUCIEM94l2Vk7H08ZMTHJ+BOAuD1kRyB7cmLYF0CBTBQeMtAiEAnmkTRFVsjy2y5D7TXCX/awlLc8hmymmi7otjmU+xhfA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0V+CCRA9TVsSAnZWagAAneMP/3hDyr3+IbDLyKloJGp1\nxJ7NnC0F6xW2BJrmQEZ84nDiU8MlAxaK3z9VVV2Rt5BG/q0+lkOn+Vq4qo6Q\n5l9gO5Mszzk8I6I37Y5HiKshh3DyYn9dyaGn6dCg9A7425PZriS082tIaFK1\nMgLgK4h6VB64Hyh+CvnSJIkm4rd7GGZN19z6ZbkSKNgzb6yxt51/zKZELk6a\nZtnotyxnGhpThz5H5ovLSNQGvMNUnIVvIvx3AoI5SCNMk8tMYrI7X1cZ3Ifl\nEA2JaNN8qWU6XGFTlMzYfgGVkXxfU05Fua8fTsltdgvXTZDY0ol/lxD/Sw59\nFqViAkyFG1Dp3H1C53wkDf6hNhDe1wyweybepz5kQGk+0TcgUPTrpBPO650z\nAyoDAuK6tfd0Y7IhAokmlrwT+u7VOEJ7+bTTrZgYJwlme/xbMM7AL62vIYlB\nkf0bZTBFFnCNCcAE2s77LgBOrP8m50g/tsghwVq1+inbC/7H6gNTdI1+FHCO\nkh7+Du4TbddAxW4VaAnfnBR2nK11blLeWArfeL65qar8RCOZvMA+fJcbwi8o\nn3g6Drn0yd/2VO+W7YahxktwYnVdmvfNzIUjXSIBg1eEYbedD23SkTy4mMfo\nz3cCz8C3s4zs3ZPTAG261iH9RycEemngfIUJGkK5l1UqU/Rhjq00XFq/fPAP\nQihf\r\n=ftEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d5115fe8118e1e2bc71fc7a491f672b079f281ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.51512a4ac.0","@material/tab":"7.0.0-canary.51512a4ac.0","@material/base":"7.0.0-canary.51512a4ac.0","@material/animation":"7.0.0-canary.51512a4ac.0","@material/feature-targeting":"7.0.0-canary.51512a4ac.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.51512a4ac.0_1590779777836_0.7572099291479684","host":"s3://npm-registry-packages"}},"7.0.0-canary.0743288fb.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.0743288fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.0743288fb.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":"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":"32b558fe851426016c531b4f1ca827d300295756","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.0743288fb.0.tgz","fileCount":52,"integrity":"sha512-i6EEXOURF4jJBblU7iTBdUOOS8KIrWN1oZ4WqTyie75Yz+B95k/zeXkDt4tg99EJPR/XhXGmRXoTAwEPveuRLw==","signatures":[{"sig":"MEUCIQCyrJo2EiEzmND4qgRwtjxAAyrAeABfk4Ms7cA+zzysgwIgLyKHxpJuzuDKs0fy/CL6DiDifWsvdsoR0G8phat/7EQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0WsvCRA9TVsSAnZWagAAr/0P/1VURwbiWOPZ5HIza/52\nF+P7oyZeU5BeKHpbQuXPl7xHYok/Kz1/nz28Ja5dex8P0OwueL6PEpgSptrb\nk17QIp+FRb55Lj9wDN3pNJ8GsCCPu3a0NEwONnfe64gYesV4A/X8XFQ/qYL3\nlpDHYgoqTq20ab+HAHZrYEzdbeoofYD6sTugi6OFHSlU4wWBbMWV9uUa4uci\nOM12zBuEFxs9VI4iMNeR4qjXeSC7L8KaXqQbRyBYG/aMTzeGOWWXypMJ2vm2\neVsbYxMGg4a9yp+rENfyD3zZLTzCvErOs99u4BJX4lYjCOiQuColMABwlwmn\nEe+hL5bdeQy9jVKybmnJ7vUpnUR4Q2bnxZ6NWUEV7XIS8zDtzl0Ogsl+vzCc\nkCn9/mXSw3Q/nidWEcB8hSNfXWInoHodZFTWiZXm7bHGE97ofThyJQ7PV6mg\nne8zXxn31Szw2iYvK1L39PyCvns9dB6d2e5C2HkOoPmgG7o/fkalZ+l9B5/K\nDPJjqndxNfe+0IoSXWsUgXPTmmK/YslP6JlZ9w3SSNpjDY/iF+Z2eiglCTiR\nI69vnkN58mLcTUEDIVPzU+Lt9XQKvSDi9sdwJFl6plWk30rER274HnZyh3dj\nZHOepq8/izi2xbCF16y2gcDN0V4U5RfNYIzwdnvDwFePZvN2VjbTOV9zOnnM\nH1X7\r\n=uUSa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e0c92eea0cf28bf0f2367fb0666eb8592ef2f8c8","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0743288fb.0","@material/tab":"7.0.0-canary.0743288fb.0","@material/base":"7.0.0-canary.0743288fb.0","@material/animation":"7.0.0-canary.0743288fb.0","@material/feature-targeting":"7.0.0-canary.0743288fb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.0743288fb.0_1590782766752_0.7157759955399359","host":"s3://npm-registry-packages"}},"7.0.0-canary.06ef147b5.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.06ef147b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.06ef147b5.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":"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":"011e6c063a4e3d5273cbb5d99aefbfdb2befbb1a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.06ef147b5.0.tgz","fileCount":52,"integrity":"sha512-4ooUZ5PBFOXRM33bJ5vB294SqWKANbhDyaduP/4UdUhH1HqJiZPpJvyum7M7OsXeBv2cf0MfHAeCwDHIdS6r9g==","signatures":[{"sig":"MEQCIDCCAMGXd58XrnAPHxEpwgn4XSqVqCZ/airGIwCohOJDAiBaGlfdlwGSY6J52ATPicI0bKxT8BrW5j5UWv8oxJCNyA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0XOHCRA9TVsSAnZWagAAPfgP/iYXLbSjOVkn+PUl5m9w\nvd3i3Dx2wp64aZ8536mN182vsC+UPlm37GVUJlo6ZDbHNo2/6yR1KadtSXaG\nf0etydBE86yOujHfOl0Snz1SjjfjBvOjPM1GkXIV1QYH6uTxnOHAk+xg/Z8I\nJBmcWsBgbcb6w8ro1QJBS9um8pe1DIwTH46THNkOneIBEnCjifXwvaxDmjYB\nC34JISTGs/3y465EZuLt3h9Wy0fmF9HTa/C2vgqeTsUMs2P6Iu7rgXGBVJrR\n61eDiKetOECPdd4ckP+zav0xn/IyNaoQj79whSAQSDhpL3+kbOIuaEqK62cP\nhsGQmYn6RD8sFQ8UJyv5pHsPj0kT60otAFf386IP70JWrnHvKUoLPdv3LjKh\nwkl2kRsV5AeKwJMyC8F9SYmxuThdKsEdUDi0TBupnUA6OoloavjfEz441Wen\nMy919k/YcsPwg9hmxCf6adZ9wqKJ0Zzgywv/meuoRhzXALgtBH9IXUkQw4A/\nSJTiqJzhZdyLyUDDzSv1VDHWKjAWSdYOEhhNFGqiqX8KB7ce2UtbW7WQnnsk\n43jx3GwsAnpmaPrUKryyWBcYQrBAGFXr6aSZFYHfg+iqzQzZdl6HTU+41gAT\n++MqBm3hLdg5YGoIOSNGbDen6j0XkAMPVrtvsRfKyCztaFZUnsG8ouCDJTWR\ndEHE\r\n=jx/7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"43f043010a4682138cfe1d453ea0460f912fc2ea","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.06ef147b5.0","@material/tab":"7.0.0-canary.06ef147b5.0","@material/base":"7.0.0-canary.06ef147b5.0","@material/animation":"7.0.0-canary.06ef147b5.0","@material/feature-targeting":"7.0.0-canary.06ef147b5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.06ef147b5.0_1590784902566_0.45407507137604863","host":"s3://npm-registry-packages"}},"7.0.0-canary.8073a20a9.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8073a20a9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8073a20a9.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":"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":"c0dbcff5e4b68192b11522b1d1f79f2861d3c6ca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8073a20a9.0.tgz","fileCount":52,"integrity":"sha512-Y/vtBxNqurLhuDfXc73sHnJufTi5sIbFyClBtsdC2ZsLddWhL37kKAbr8ufdgwds5/BSSpIkEhM3bMKCmV7GuQ==","signatures":[{"sig":"MEUCIBiaUablBWii07WIJzE+G8k0WSsamB8LQpf8JxJ6d9wOAiEAp7LurzRF5BSQMHiUCuNxizYSDSap5DfFR5fPFpk7x2Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe0ZoxCRA9TVsSAnZWagAAXjkP/RA822zGKrFE0knWZ/iT\nkTn5WumVjm0SzjKR89hdVfpYtziI9YDSdjjtesAQ7gwO4wxm4i84rBaJ7rgI\nzr0N78+7fRB+UnONXylPg0NrCPVUramzDJYjsMUSj+XqPZBGvnxrq/xdcuCt\nCPNTUe1StIYX/vN7lpSdXssbkxnNmXcbTay1GxdeSqkn9jKOp+Tj+XADdgmE\n13esjRaO/bFMEdznN6X5MgNM3hwxyaac7e6AsEbh42Oy63piVpdQBboJGA5P\n1P2mkgz8R0T6psRFfRVdfpxBe+/vzyzqM2iH69VjTpSCTrkiMVU2bwHbopLM\nq/oT+qLVmi0JZX5i7+I6D3RfltAV1Cd1fc4qrw4NOj4c0sY+FOamqk9XSMOS\ncXhLv0PBIj8wcTEiQPu9Kd5ZVxLodJHJHlIDHc2vWBYgbmdYWw5LySwvtQAm\nx96L3xsOu6RX7QUPuB58lWmYPEgVlDvD8hD+rGFuFlw04lV/Lmd1LGl52rvo\np2/RCD632+u91lqUbGd9AoQUtO8Ueu6ETSKSrgVrhOE9PeXbaMcaCkWVEAZg\noSDOVMtVGxdaRU0GaF2x8GgqS89/048R/E8TnJfd5TQ4OuayR1qYapi/Ybi7\ncmwfUFAsfcmo0rU1ocVvsnygxAEDVTbpCs5NVz+TRdXy0uf7+qqWS25QRZr5\nvqw9\r\n=cAAx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"576fa22ec00234b59b1dc4215b8dd1ae982c7c8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8073a20a9.0","@material/tab":"7.0.0-canary.8073a20a9.0","@material/base":"7.0.0-canary.8073a20a9.0","@material/animation":"7.0.0-canary.8073a20a9.0","@material/feature-targeting":"7.0.0-canary.8073a20a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8073a20a9.0_1590794800288_0.4178391668252237","host":"s3://npm-registry-packages"}},"7.0.0-canary.72ff42330.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.72ff42330.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.72ff42330.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":"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":"d7aaed90301e6afd1a59274babd6c2271f332d3c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.72ff42330.0.tgz","fileCount":52,"integrity":"sha512-giBjFoVjq+l60PoxO614sFACoXuTLsDLOkZxLerATW2KKPjAj5ydP7bTd/E3Sn3/v7GfOUze92uX8X9f36ObHw==","signatures":[{"sig":"MEUCIDfRdNI8nTotARF9er77P+hrn58KTpd/9lf3f4eI9rLUAiEAmnFcR6zzknss1WfCdGdBlmVcZHG1uidjmX53mKAYh9w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1TCmCRA9TVsSAnZWagAAHioP/R/AsTaw1Dnlb053kLaR\nR/4VaLy7xvDLQTZkOqbfrMr8FwOH1Dcbd/CXMv2D/arjZpMJUdkmLQpyni0F\nXC4TmKZBnpiWGt4ItN72DewoEhbyPKp1VBCHqJjcWRjWimXLDLvAXFRtwfIQ\n6OCEiweqFF3uOa+/1s4l8xmCwnBFxmWDLOFS6cXl2B3e5uIX8OWzGTnp9B5D\nw6GkYe17zrqRIxCPtlcsIzpcV9maKjAZFnzmfqSgXEQITa2ksajCf/Gk8pQn\nBNbPiN+RXTLYAc3VAG7oD8WLQeH0pqR88JM77hYXOB2Mh6fTnafXm12udnPn\nu/Bwf3lJfert4X79VRmBGiM7JbiBoUA0XOaOtIEbKRO2/jMW8qaYQa7WCcpq\nahzQd4VXW5x8OpwsGE/PSfD1YhZfE4BjFhh+GBecbLIim0pKsgn5M38haNMo\nkomLfkvrBZMfe2zhAda0WuWoZXB/fQBlIb/QHIhvx0OSV/hlKlOGY1WyL7oT\n+46UO/2ABLJCa9+LEYbsAgEknfzRAacyg3pfP/MEZwGANHggxTX5Y2TeUmzH\ncz7UvBz0rGlZg0IlWuFD7P1Wer4y7IVuNzmjJG+bEsdy5BZebUXpnoQuiKHP\nSYUmriDUu797rydY5YQloNPXXgEJi68xlB7I2cFN36xIjdWYY5l1Ej3SRBMm\n8C1h\r\n=j97z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4c820e9d38fc1bae9a502ae78e336f0e8381f432","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.72ff42330.0","@material/tab":"7.0.0-canary.72ff42330.0","@material/base":"7.0.0-canary.72ff42330.0","@material/animation":"7.0.0-canary.72ff42330.0","@material/feature-targeting":"7.0.0-canary.72ff42330.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.72ff42330.0_1591029926346_0.5669075689968774","host":"s3://npm-registry-packages"}},"7.0.0-canary.9ea52070f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.9ea52070f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.9ea52070f.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":"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":"29ce8c754bbd8e5a5b7c46cb96547700b7c121cd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.9ea52070f.0.tgz","fileCount":52,"integrity":"sha512-PGPRGNHkUIeODeXKUg+gDueIqCtmxcOiH+9Y+BlAuj9+QSLM4knMf34By3s2ohPM2XJIxkTUbpfIFi+ge1D8EQ==","signatures":[{"sig":"MEUCIAYMFBOwOLPDDD+EhokgSx/s3u2ZX5mGABKWNh/bHVOxAiEAlPx62rmSigODo4OEQ7iMcdxXKgmolANzwsFl0NByiHE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1THBCRA9TVsSAnZWagAABmYQAJfNXfxOR1rKxkldYnGu\n5Bs8fSMXZN9APufW/w0g5hO/2ivSu/DyaxTV1N3WDdTxvHM99YnbKOn4XiMC\nlPLRtEP1sjCGK7jfCTdxZy8aSHknQaPjQ2oj22KEOmqUXWGLExnsTN4BS+On\n47DjNHeudHSLAhWP+UYonDxIEKD/mKF0ELqLl2AjjrovnNRod9WkHvCzFHKV\n+U5w9pR6j6Xav1yUTRfdGSBCXBTk0fOutZj9mbzJuOKOp1DGi+UCZvUjWTe1\n8eapCYAfkrkZa/macogsCJONU2m44wp+D7EGMYnz8t3OS8H3niTXUAWEmynv\nOlLO+EtOLZg72kwl6VOZZ6JETmlKI0mHF/Ld4lBL7fy3MBbplr1tYpnGuAR2\neUIROGOlqGoskg589X24AiRM3tqUTuaSmII32ORg8//Dfq8V1zK4MoTauVbH\nTZjdpe7wOr/GyPBqRpupLo+zLC8jxfpghr1H+wO+oSZmjaGGjEnmc3GLxpqu\nZjkavix17a4HB13k5CMxEeoWgmUJXPkasK+csbTqxHKGpm/dXQHPUjCUc96n\nG9Br8pNeIxbJGwIEkBGz5UwlLJxZ/jtx2sAlWoLp05eF0VxEwCERgxeBbjF+\nW4d8lXN6N/FZdbLA6PEJ7asTXuB1bmjHoyKRxDF+cuWzl3QoxP1iIAMFTSY/\nGfc3\r\n=u0f6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1c7aa3231ba2d87e7abffc33fbc156ee0889131a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9ea52070f.0","@material/tab":"7.0.0-canary.9ea52070f.0","@material/base":"7.0.0-canary.9ea52070f.0","@material/animation":"7.0.0-canary.9ea52070f.0","@material/feature-targeting":"7.0.0-canary.9ea52070f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.9ea52070f.0_1591030208882_0.22414858004882188","host":"s3://npm-registry-packages"}},"7.0.0-canary.d86ad3b60.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d86ad3b60.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d86ad3b60.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":"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":"d413abafdbbdd4ca041456d6a732ada2d0133567","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d86ad3b60.0.tgz","fileCount":52,"integrity":"sha512-2TkjlsWi585RHXnuoJuCTcZFnyviheLmtikhH6pA7r1w55G8LOZ4LcqDwNqWrPGMFF3Ugfpsno4KLKviJXlCkQ==","signatures":[{"sig":"MEYCIQC8cYZKooK6ZCqo3xfoEAJCK6JGA9pLPCxk4xPUXjPyNAIhAObuZDgF2tgzk9CIgCRdJz87j3ALs0WuyJQJYnVz9P7S","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1T++CRA9TVsSAnZWagAAL+oP/3wShqmXLvpJqfxj4RXD\nuCDpvu0/2aFHh+/BZdxXX/mtoo2g3mDzly6FzwvNfmvMDWzlb/B6OW9CABtV\nGTi8fw3g5UptaWVwJwRTs903CBwP3fQ7J7LUMQW4RjfbWp8TTEFpO7d4yL4R\niUMLzcRoOR3piYEjuFerV//nGdPO9JMeCu8dPBz9iVYAsgO9V2xljiwkWvwS\nYOFZUzCtTuxCr9sWjaegtQBv8/lm4bnJXRB2JiEj11SZeKEAOkhP6pZq5ExW\ne0D+lYgj7ymDz1mdY1+oKNBfzGtykE+JsgMiFnPecNfUPwKxpsVxiJH5Tyra\n8u+Pt5XpMOGWn61Wm//rfMpXY3mLc1AiEY4XO/XdZ83S2ILpziE1lHxt84PP\nXrF/LgLh2vOtm3B2S3G/jZ8ZSMVdTDlDI8dNrwkcBtosibnfocFWXioU/Q91\nDadBpe/h4DQ6GIWu0WeNI2BX68PO+T88W1aRF6J/E+KEmB/AE2KmSAMzSUdl\nth8kLQFJeZ4FoQsx1UcLLp/C6CH5fXdBXMrggznPPpI2MutkFsQy19LN28c6\nSia5c+RqDXJvgGucWQ6d43qXNxrHXzsjSrAcpTp2AL+NMcmFlNVmbx7bXDFW\n/MuceG1mG1vgC8fVNfcIpTm6fBHPxg6S3axJOJeaSyFkLFYVLVDDryZoewFq\n0bx/\r\n=S1wB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ff64ee77c98ab8a932f9397689714c078eb9fd02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d86ad3b60.0","@material/tab":"7.0.0-canary.d86ad3b60.0","@material/base":"7.0.0-canary.d86ad3b60.0","@material/animation":"7.0.0-canary.d86ad3b60.0","@material/feature-targeting":"7.0.0-canary.d86ad3b60.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d86ad3b60.0_1591033789595_0.18051790733698803","host":"s3://npm-registry-packages"}},"7.0.0-canary.b9776b1d0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b9776b1d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b9776b1d0.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":"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":"bb6a8061e7805bf24f7036d9722ca8bb4172c7cc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b9776b1d0.0.tgz","fileCount":52,"integrity":"sha512-bQPU6q9jpvDSX0PPKOSzwYE6xZ8QaGW/V6IhWBguHsB2A0UO1vlpSQ90nqyLG8w+m06pMFsRIQ8s+46Tw55u+A==","signatures":[{"sig":"MEYCIQDZg+fbJAmHMrM+Wmw3BFrOTO8pHng/d83WqUiGIOZ2vgIhALv3Kipg9tZX342iulIUe4qCWNTj/S4nIZbFN6jvZ1df","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1Uh+CRA9TVsSAnZWagAAZhIP/0586NLjd6DanrpKd6pl\nEm2qGknF7tABMIlr0NsRHc3+DMNt4irezK85UE+p8UUtdVGcbvAIdpfk3aWa\nfdYhFHZJmGZTcQLvaSt4cQxItfsYA2uhHCTI+wkA5T+HhgnjTxN0otxRdG5N\nwYJcSi4y/Kd4NGqvKP6cvdFq1jAR7jtaL8b+DMQHLapdPvw2Npysp0YpYnkO\nECptH3iHJo02+flbIqzOSCygkcYSOAwTUi7JuvArU0LLAkHA6muB8Q8wUrao\nLezfivjSj4IOSbHubL2K6l7462b8/J1uNqqZEd9lkMpKzSeKoeTWK359Rhc/\nywSVRaYy5xajvmwq2kLTtUCNEQ2lJ+Nfte2Wjhk2D/gkEfkQDIynLkizpyAY\nq3ymngHuR33jeH77C5guC8CEXUz3u7iDO29cAuCFSjtxbYxG0S9LXU65ZVZw\nVkBqzv7zJodPpXPOz79SwHCdzb8z1Gt0EdUJn3k0CYWlJQZ/e8jSe2lc8TED\nMPIwlCW53eyW+R1r1gPGlA3c4oBAnYZ92wYB96gAkHGuRev+8/4fJGEx/lsk\nt3409foYT62yEvnhteJ8nmZiIT0SBubCrlUVhhsrgRXkAcuoa1ogBpaIHpSL\nTuZK82z/crQDKys+qJBQuDuhayBNC+x/oybZwx8xgwMPROGs2T1qjxzZS6h6\ninHK\r\n=WnEQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d43f6785558859ab233dac12d042ada9fb8c1b84","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b9776b1d0.0","@material/tab":"7.0.0-canary.b9776b1d0.0","@material/base":"7.0.0-canary.b9776b1d0.0","@material/animation":"7.0.0-canary.b9776b1d0.0","@material/feature-targeting":"7.0.0-canary.b9776b1d0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b9776b1d0.0_1591036029482_0.9992276902690034","host":"s3://npm-registry-packages"}},"7.0.0-canary.ba6f7c294.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ba6f7c294.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ba6f7c294.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":"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":"5407ed61b35b1928da159732b1f3ae8a69836985","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ba6f7c294.0.tgz","fileCount":52,"integrity":"sha512-0rbT+k0Og2j/GNqEQCASOq5Zow2jGwZXcEDCUUKDO/GuzeNCrIuIRiuTZewioaxqtdMCvxwxyvkT2OCzurd+0g==","signatures":[{"sig":"MEYCIQDiDklB90TfcX5ueQ2E5UGkhZmP5dpWBE4aBXGi+UNoPQIhAI+fSF/jjn3mXLIVH51BfML93Dgr379VJvGnbOuYc6cm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1oZ1CRA9TVsSAnZWagAAursP/0jjlbUpcZeF2b387WYZ\nBO44Ltt33pbGUHqxKYIOzpXWf9gWJleMBGtijn0ChTVbF7kNaKpi68fuJY3I\nxGAY9PV2OFet/189dgeIFeHKmbE4JKSA2KQ+D1kdaEA7sfnAjuqXrf8Kti+k\nScOFZRi1GQaFikMERRzj7pmnQvLQbR+7difWat6rhJF7QMMIi+OvoLqqPFv2\nNp2UVOXim6obqfZw9GbsiUAQRFxirRFPd8GFVVGS1Gx8d3TYwymKR80yIFpG\ndh2XYN1EZ2QVdOgEQ+HQovqYo+O3iyubdgNC88AGPx8qbyy+cUWdEp5n3Fwl\nj2B684uwUgbPakAc957IMSOuGmkYbwTJmfXZXNhNXYDLT7PI/VT18Od/9Bzu\n3PqYZGuqKzypLd1fzmi+kj2nvfEkapkfXk9JhhIs+PX28aQ29t/icdwmYCyu\nAxTKDOSfA8GIuDMX/DxPaeOp/jj5yMVX9mmj8jvqrmDq7GGSvhG73mZP42r6\nfaTe8j8T7OdtzeLOnhfwWjDaldDDoqJ6N5qqvlBQefaG3jnIev+XZIkq0jHt\nmIRa5yPwsBiLZTEV4BHf0iVeZ7e+c87vIwzcXlcaQOz87i/Y42iwu89PMqBP\nomLFXH5ZdOyiReu8K8BPGrT2KAEyyqHmvEjDIzHJzBLp7UNDXAKCYwT/U1+u\n8wm4\r\n=AiD8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f181fece0cab022dd478b7c2f4b768aa14f7ebf7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ba6f7c294.0","@material/tab":"7.0.0-canary.ba6f7c294.0","@material/base":"7.0.0-canary.ba6f7c294.0","@material/animation":"7.0.0-canary.ba6f7c294.0","@material/feature-targeting":"7.0.0-canary.ba6f7c294.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ba6f7c294.0_1591117428884_0.7682456506853768","host":"s3://npm-registry-packages"}},"7.0.0-canary.cf3b664ab.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.cf3b664ab.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.cf3b664ab.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":"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":"508eb92e0c08cbf55c1cd248b13b21ebcd992fa8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.cf3b664ab.0.tgz","fileCount":52,"integrity":"sha512-fW7TheNbem+mLOCd5Auv7/2lyhNkxMshQQa7TuAtl2URepG+etkOPJACuPFwab6S4syHRwD7HPfmyhWloRQhoA==","signatures":[{"sig":"MEQCIEsXGOS69vvvQDi7iUy7YtxeMe/aUcQqe1FrHqNqCgopAiBjkXrFBVXgTJ+tuDVeoykVgisuv6uVnzgjxQOHAXxg1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1pliCRA9TVsSAnZWagAAfyIQAI22uIi+Ry96vdND0Hzg\n8cOilJkrFTYLZSf5IPeuU8RZ49aLQ9aJ9XnkmCtLf9fOTc1H8rwhP6e+3uvf\npOU1aaBbDCRQLfF0pEEh0bMK32GxpacCBBmzyFviW2Q6oCrMYKkwebZy11O7\nvKQ2BsxbkAgGlaZRWt8RqM5v0VghrB3SYGNImoyaMCasA6YpaPSxspcOZvo7\nfATPLBvg6xwYo0qGQGu4+3/4ZpW+LPsImMf1o5ZUmqUwqd/uVxJAqKEEpCHb\nVErIaWO9rX4yDklaITt/c0MDskEFEDl/Llyx/zP64WfKRS3/C4r3QLBS01NQ\nLumzpgXqj0eJB7JGkbuJAcaRR4+DekKKpAHpMfHsAnexAZkMXk/9MSNO4FbY\n9ULCT34Ade1d3KK3dLqF5nivq84XCwgiDCaJOgvQkVcEF9Ru+dR6b7Al7pk+\n4swDOoqxXILV/Xxinl970PekgSydV3L+a0fq8mZKPWtEB2ijT5e/7XFI6Vv6\n30ZYm3sa/8Kb5fVVMrENcnlgtSF4LUZXqmk56EoVf7JJCDw0vP5URk/AHnmH\nJ4ZIrC0WCLYoPAqxlyrCPSPLttMT9ySvNtPtqCbbzH1jIAaa1ylC3PFCVxkc\n9DC+VJwM1C9M19raWRIDq9Dyr7kH8y6MTr2WeUHb7I3UlP3g5xjEkck2rNYu\nfFzp\r\n=LlvD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"708ed8576095ca5e673311fcd970680f855a7b59","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cf3b664ab.0","@material/tab":"7.0.0-canary.cf3b664ab.0","@material/base":"7.0.0-canary.cf3b664ab.0","@material/animation":"7.0.0-canary.cf3b664ab.0","@material/feature-targeting":"7.0.0-canary.cf3b664ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.cf3b664ab.0_1591122274401_0.1602959586387669","host":"s3://npm-registry-packages"}},"7.0.0-canary.4ba3c9a31.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4ba3c9a31.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4ba3c9a31.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":"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":"7c000cd47be70ed8123c332793ba6fcfbae4e9bf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4ba3c9a31.0.tgz","fileCount":52,"integrity":"sha512-oeubU2FfHv78olmD8N4zq/2KuUyIhkq5EY4Vm4ES0FXEjGI4oNFWrKxAvDmIXnAIB5zBH+AWE7YcitwWaAq5Cg==","signatures":[{"sig":"MEYCIQCK82Ur1A3Dhn9MDbNSfnu8Tnp6xsPl27JbLyWhofkPRAIhALsK1+XiJ4LQ8C4wH1pk6PGBiAjlFrRZRjosCrt3N/0R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1uZ7CRA9TVsSAnZWagAA08wP/09V3XtqF7Do+A8E7LcF\ngUW25gDAcYvAL3tBAdCDwfge4xTxj3bLfsQaTaMTe7knwLqtW7a79JSccZr3\nWWDNuaR7p5NQSCJZprgC1N4+7NxRyIrO30W1WZLGwi0OkB/gwpkJBK8JR62F\nw66fzETeSbr2WaVuVnCRGcTTrDD5orhwifjhNPRQKGKbhjwydVP+5PuBl4YU\nOnVPEJoqdNMj2C/oDtehwAm89GWG1zE6Lavt2KE3Pg0VUY2K+v1mu9xWukuq\nhMtJDzu0ytiwNVkaT40v+Cwi2wd/+4NYrIv2kThboaPbbpFxyio/8wREl+AP\nGG/+whpLq+iCmSeZXmAkQw8RTNdwHKuvex8OwB4a7C87rgg6HjQtWqR8X9y4\nxySvzVVQQA619ixBaExTRRhht3cU/xywmqER/svDmWLGdPmFH81QOutohOfB\nyHxuBSW9rhOIqfoACsHClxp/5HdTPdZYeW2Q7FlfByvtPyECPj79pno5q4hV\nW1Rc0mMM42RIASTMP5RaSPA3oKgZ3bhn6UPuP+DHeM8bxHVmrkwz0td3Wuww\n0F2xpwN18VT9mVVoTgHQur70J5AQz4SAY8f/N9JsQnV7UiaIbNx42WPf9Le6\ndHgOIoX8KJbLcb8rDofJ5jN0abGekGAuZu10djhCSXdQX3fcrQtS+oz5/06d\n4t8v\r\n=Axag\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cf7f823aac5f803db06863c865c07f432ec4fd09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4ba3c9a31.0","@material/tab":"7.0.0-canary.4ba3c9a31.0","@material/base":"7.0.0-canary.4ba3c9a31.0","@material/animation":"7.0.0-canary.4ba3c9a31.0","@material/feature-targeting":"7.0.0-canary.4ba3c9a31.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4ba3c9a31.0_1591142010922_0.6731108585802312","host":"s3://npm-registry-packages"}},"7.0.0-canary.388b042c7.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.388b042c7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.388b042c7.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":"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":"7fd0b1cccc15adcc1456d530712d818955857e08","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.388b042c7.0.tgz","fileCount":52,"integrity":"sha512-i87aNcuIwvIrY6x33Q1f4wHmq5A2zFEcooXg+/cNb22c0Z5T2UEBugBM7aNhXkSv/VgUCGP5iWlp6vqZJk+jPw==","signatures":[{"sig":"MEQCIDwDbi7y6GBTkUQ+QoPx18N8oBIOoKgKr6H5KubGApUsAiBPP1+O/npOI86yH0aEY2HQtZE3Om+Edq5E201GpzZ8Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe16oMCRA9TVsSAnZWagAAl6IP/jpu26b8i+LSeFsyIO5Z\n6HjEJdy8K+s6JDW81Mufcmmkxa2cSX8Ou/RNRefMBsEs6Ikzt2C8BTOsqXja\n0ucOgF1g+M8ZhJ16CDdX8KonYyzvqKo7Ngx0RkkH2lXsNB8g0jd9PxGBbsCW\nbDEnecFzDMsfkKEbqkwMzDbHqAJ6OlyPqCIDFIJ4cZUEsYaGTQFij1GE7URX\nep9oVmXdY5I3R1YrnspiWBFzg+jkAyaIvdRTAL28RKJJ81XBeiCD5xLaHlCV\nes1awj99T5oGo/005V7fA0wbM61D6ZVaCHa51oBxuxJCe/pFWfl2XaRZ/jWM\nGwUrdaoatyiOjVreMmQLoCypi+l4eFLK3iOY4X7GAxbObt5h54R3gq2LDSs0\nk6H8EWvdSg1jaLMl8yTMtF4wWxzK3uq2m5jkWNAISqlh0tWEjwCm+nU3YU5P\nKGqVbYWP2l29GLWKDVjTeZctbJNdZldgc+winQ/8UZ7KePX3gNmKCEImQN1h\nS1YJRCM6sy13vvLCvw8Ju9xpOKYS9GKL1UUgdDrGWWtCrc0+tJjNEk7ttdaO\nfVIAKNJEAE38sZdN8LWWCsPUNRaxt8/77MriKXEF96YiSd7Yo4DDydHVEPGp\nkox8hKxSJk4fQeSpyzg/mrWWDEHQtblgetnKkiZW47dAtkFSCKr+uAHyZObK\nRtu/\r\n=4jyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7c9ddf94f1ba2ee332d7acea141e5022b58f79ff","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.388b042c7.0","@material/tab":"7.0.0-canary.388b042c7.0","@material/base":"7.0.0-canary.388b042c7.0","@material/animation":"7.0.0-canary.388b042c7.0","@material/feature-targeting":"7.0.0-canary.388b042c7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.388b042c7.0_1591192075485_0.3498833462339326","host":"s3://npm-registry-packages"}},"7.0.0-canary.cca1ca84d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.cca1ca84d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.cca1ca84d.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":"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":"046a1fa84feb137cf24090658d3ff585a786d6a1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.cca1ca84d.0.tgz","fileCount":52,"integrity":"sha512-ynXLnzE11YDL9HcGnyEBe8edjwv6Nhs/xP6PakIr9ubb7bY2Ga4Jd3AX237jc0EmPdUdcxOiqPzLZN2bK019Vg==","signatures":[{"sig":"MEUCIC5XskuYkqQGhd/jkk2/e4y2amKObKS8Wl7uskc3/wr5AiEA9TGWC3Z+odb1B+KAhHbj3P8B6eEywRg2Ayg15ndWWRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe18n3CRA9TVsSAnZWagAAWIAQAKQQ7c3lv01s0w6ecjq8\nmB/by6oT0FNtmzRd/KUsuZ73erjfGrVNAydKrsBzOegBmxLvoGKv4ypW6JZj\n20946LfxhPuGKtoVlukLYp/0Ob3by6mZyPjwMYRc2VLO1EphksyLkK11EKsj\nuRFcxffx0csfdxIOvMNE52pnnBCSCGt/A1QwFjilwRoYoUGeHrSk8RVJhZ9e\niApCTYBk/KGkWYdQranDDOWXinaHwG3RGjjJAVXWxwGc2/vlVM/mBp7tgGPL\nJFL+H6tqPAWN0fhTEvMulXpFOFGl7lK53PX4l874xxmC2mUrrA9o/DV/NnhR\nljEGtjzcgzGLVJSu5PUIOwUSHB3PBb66mCVYDEi7/T2l0EU2i3J0+MalUfYU\nqhmI+jDxxeHVWv5J49lG7TGqt46R/qkpzR5Et94IfYMVhWFzeK7bNEJFuOEy\n66aM37HAYrZQLi+rOOVPD52f28+1qJJ+CMmNZUjWvRvB6wlQFubHoBoYinR2\nMImE1LFGaDr4Hezh8vIaoxNm2R+tNjYeVdm7sdDHpp0B/7UEHVQjO1HLlydz\nZJpTDw36LYeAH5BbWHg7xqNGDchPJ2DFAfiKe+PPvcIsPtycV/A89m3ddVHp\nbWBB/NjGaEwXuSPvHBHqkwExblJnfUP4JTOWN3JeM+/NfJBPSXPNMIMWnnRk\nyQQw\r\n=EiEz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f154bcb37f9df5f07d3c6dd0c397a436794ed609","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.cca1ca84d.0","@material/tab":"7.0.0-canary.cca1ca84d.0","@material/base":"7.0.0-canary.cca1ca84d.0","@material/animation":"7.0.0-canary.cca1ca84d.0","@material/feature-targeting":"7.0.0-canary.cca1ca84d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.cca1ca84d.0_1591200247119_0.6896750100678886","host":"s3://npm-registry-packages"}},"7.0.0-canary.9b0b5f2e0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.9b0b5f2e0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.9b0b5f2e0.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":"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":"00efd32aacddc283766d1acde6b620c09ca05f3d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.9b0b5f2e0.0.tgz","fileCount":52,"integrity":"sha512-Vwlnr0AC6xxfJ0zIXPWEf4vmEiYmvAmE3+BUOQLhI1mVnHDWK6MPqCCyp46TavGbK6dH8/4RMYrzIIGNcAKz7A==","signatures":[{"sig":"MEYCIQCfBgVqfs16Plg97eL1wOx+diU7bYcagAOzgmtBjn6ZtgIhANCjZ7zIxZP9liSPNE+fydo02gXfmCYpJ2BfLHA0uC/E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe1/L7CRA9TVsSAnZWagAAoxsP+gOj/2KotdYZFZPV6lIF\nGKhZBlGX9ohsoRNh1HIbo917YrYDML9vCgmV4g0tyMN+CxGMq9jbSqBNn8dF\n9MlLod/dc71ZhQZeO9oGs2eBD5CHzNDy9ogYBlU7tmHdutbHDdWxWZ/8BAnT\nBPNoIWeLUrijo5HasdydipIFjyEv/OC0OssxooeqiuSbXIZYdyUVc9OyqNAi\n3CNKG83yS99DwwhPsDHMACP3A3WjjMBmm1B2lJcFbpHvHkjs1noL8MIeNTWs\nQub/WoXai2p3uylIx0eYG5a3HtRKsZB5UI/xPeBK1pwg+kZ8Uh4TPFVDmSMK\nUJVioIV0qq6NmtC0mdqn0lEtqCloj4G8jJh7Sbf890nryEDsHpr1+kYZAqhI\nylnSxb88eRpxqtvykZBNpZFsKMV200zEC91i+0Me+9xSsadgi/S9tr/0W+KI\nhL3u56GoQ+2mHfdiLKWsxt1AF9dpNJ81gVbhtjpcI6Ayu53vyqaaPwcRPtXK\nMOSy1YjjUNvPnWLjIa0isrliHljs58My1KPDPK6d4H6rZpJ2qdU+ZquU+fEu\np/96uAs4EL4VBvCIzm/bRfidWm6G3LFovXcaWTKBh48tHC1VwVmdD7/hj8r7\nQY4KzpYBe5TdQN/LSLCHw75u4BYMBISRSo3Gox53isaxjzaf5crTdUskSUZR\ntg5E\r\n=F6Oh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"35348e60387f88e73ce8e1376b7f352877821cb5","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9b0b5f2e0.0","@material/tab":"7.0.0-canary.9b0b5f2e0.0","@material/base":"7.0.0-canary.9b0b5f2e0.0","@material/animation":"7.0.0-canary.9b0b5f2e0.0","@material/feature-targeting":"7.0.0-canary.9b0b5f2e0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.9b0b5f2e0.0_1591210746504_0.8333132927974567","host":"s3://npm-registry-packages"}},"7.0.0-canary.0a7895f4d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.0a7895f4d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.0a7895f4d.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":"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":"bcc8ea95259c5a082249c62ec76994211898186b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.0a7895f4d.0.tgz","fileCount":52,"integrity":"sha512-iyvnNV61jKAJLjMgOpNK8pa23d5/2FDvrv7oehIKo4ldxcq6cC618rO2oXg1wmleV0fvQfpU9tZLink+MbSCwg==","signatures":[{"sig":"MEYCIQDqa3aHHRa4zYeX259V8vCUg70ULJIZL0j0Wcutco/TUgIhAIp7nNO4ZbweXPwJi+31FMyHiA/QU0ATChYCNGppAicz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2BG0CRA9TVsSAnZWagAAKAcQAJwgyKO1R+hVqty8wPTi\nrfPoXkmsQT4jOy7nq6SoUlGcezb6pXFXs4BtnAITIrNPcNEhC0f0WEsHU/Ja\nK9/hgOYp0Rm4JM7nha3zsHkEyJCjOWUxbS0Jyg8z467Cf4DLMmXXpVbY1kZr\neOo4MH9n9BIp5F0circonhHVE+DYz46nbMzfNPF7+8lX48gVXCyY5DocyzlN\n6qZRq3OKmbdRqoKObS9oJaF3v0v3NexKRVzAzy/bzXb1ic8JaL2df5ZNW+8G\n0FIfKME3KzfISOPoqWCKA60k0o5QKDrd/SS8N18QuGuzLDFIQ3btJdCuN98y\ne5IWxVvE7qZUro4zU7Bqm3S4ixsI11f8f4yZHhhpOeRC84ab7+UWHTaVrMg1\nHio/r9Q+UDWymsDtoNUro1/jKPuCydOVTH3wq6DV1Z0+eUUcJb+QzGdZ0vrz\n72tTUfjC2LLOiAVcSgKh3mYmsz1ebXfFMZ/ch0ZK7RQZxPy/uTzFQuWEKcMt\n3o+1r4z61j42ycyfgfnd8i0Mp4v/zW/X2n7ErPPPTOzTVrfcRk/VJv2H7Kwe\n4G/sSQnMOgS1dJ/GusCRqNUb6gqmwIKIVuPww86WxVjdRPoKqguwVeHWyJsZ\n6uIC8J0hv7KYUNq24MD+BPv6yVAWuaYBlas6JJQ/Q+A5ERlH8Bgh5z71ZCjI\naDlr\r\n=1BXU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"929c9bffd0636490958fcf34e0b40578b44a9cd1","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.0a7895f4d.0","@material/tab":"7.0.0-canary.0a7895f4d.0","@material/base":"7.0.0-canary.0a7895f4d.0","@material/animation":"7.0.0-canary.0a7895f4d.0","@material/feature-targeting":"7.0.0-canary.0a7895f4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.0a7895f4d.0_1591218611410_0.9115318917600927","host":"s3://npm-registry-packages"}},"7.0.0-canary.7461aad68.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.7461aad68.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.7461aad68.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":"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":"483b3c2717fb36a340acbd7ba91c349ae2d234de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.7461aad68.0.tgz","fileCount":52,"integrity":"sha512-DzltwprhnWZElWy8CSVwTbs/m3wYLVbMuzRWp8zKnJKiZD/oTphg3OpI7/Dgx0VyyRFuCU01vK6v5M99SvsQQg==","signatures":[{"sig":"MEUCIBS5LjXM6+vT2WUkodd8e1AT5JuJrI0TIsffnhRwcqz6AiEA1hja/fPeIyZQsdKdqzlp56vhpzaLDG+Lq28a4jF7YkI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2CCfCRA9TVsSAnZWagAAlTEP/jAdNqWOCT0TKEBXKHWa\nzk75ifNNA2itUcknKyTwcUpaCLCCd7FIUkxtR1x0B+rZaaXfcGz6/pvahGcQ\nVaizNassH3yTbk4N55jitZZ7MWWBRgwhCKo7e/o6/TFyP8XgwOzKZS3PZI1R\nXFk4Pwp5sPLZo5Ew/eaUN3kph4SZWFQPkWur1DDd61cbBPtTHw5Yl6CprQmZ\ncnBQGhT5wUASJQIo8HSBcLgeqMQX5AJLfdbi0hREwaVdtMGavJM7Ap6FCTI8\n/QrQ7l96K7RFT7kBVwyNyEhTvi+JiD2QHZ6EN3zMYTJhh1IRO8tYbshrqc8c\ni8f/T5TQXZbIeXKK+VWGZ3IW4zHP+xpwXg5EliFdwK8ywNGlBfOnjDGvXGBm\n6ozxae02WHhzGpjallBFA3bpIbugMz2IObvyUqlZp5fl4Nz7Wy7nfnOhteLf\ncCBVoXUPnB9JFygcWVoOgOHR7aJO9hBB39lGYO4zPwupySu26DKVKKc01G7j\nNGVaPF+OV/DRz0GVKFVzcx1Kvc9d3iMCCJiwyZo+BRKqU1QI706Sk538pufA\n4Y1ptBXr2mrSyyu6N0NGywgdLcqfyu5MrCUSjw6a6lijthaR5GIrlQGTWZrw\ndzQU1PMcRjZVoGakeaycjGrjt3lx3Bn2a/GU8h+jNi7qOHE8ZtD48MxRGqEH\nRcmJ\r\n=WOzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f9166e39b20f57c6b5cdad1ce684529ca891bd81","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7461aad68.0","@material/tab":"7.0.0-canary.7461aad68.0","@material/base":"7.0.0-canary.7461aad68.0","@material/animation":"7.0.0-canary.7461aad68.0","@material/feature-targeting":"7.0.0-canary.7461aad68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.7461aad68.0_1591222430745_0.22390655455284914","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0dc2b5c4.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a0dc2b5c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a0dc2b5c4.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":"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":"0392f0cdb73ea0f938c5564c2c6f2dd9e04d670d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a0dc2b5c4.0.tgz","fileCount":52,"integrity":"sha512-JFGygyTAXRy58z1U/FwUGqCZ7iQbx/KxEDQ+smDzAH3s/QilJZJaXnPQ7jRoF8Sg+ecdF3tRQJ+C1YOucU04rQ==","signatures":[{"sig":"MEYCIQDg60PsIw6LA/KZ7wSvj6C2kWVhb74V+8Jhge5m2HVaBQIhAITRN7vk28MZMCdK7eMicm9HZIvotr8G5+70EfT0nGLa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe2WR8CRA9TVsSAnZWagAAnHIP/inyZQPywquiXv8SDQdU\nGePJFApyWfNo6B3XX/J/FdwX3k/V1xNBZFq3MQJctDukv5Lec93sOs46oQM5\nXqCzA1040U6aD+gayCf9b8TjrefwdA8oEnJyQCfncHpLjts5xiBXVJSsm7xq\nI/gYRK9g4P7/N78jeZdCjUY3g6BoboOdaIpXWUW6qTIkWtwpJxu5yj9b8CqQ\nREpgArIfdUy2TPKv7Xubfx3E0zrcI+QyvPOUCcPo5DtN6NxLODNAmwGLOaR5\ni1H5aN3GIZk+Kf4EfyadKDfsu0yLUfybvvqpPJiKvcA+quypBqjmGQpONBSP\n2PhI95ctKcI/w+GueEzOjav6Zv0gdHz2AjD9e4LC8z4UYA5RuFMmZQqkAD7d\n6eQ4+ZFo1+EjaDdKvuaQGHX7GeEJ4/JNNninRPpIh8uvYnLCDhNVa9Slq2/c\nEAzdvpm3lqwrf/9+gzr66w+eftwcmflLUyuntxS1CHrkWTqTnGJiicr8cP+g\nAD0JZiCE74Q4amGYhuavSaZZEU8T7umxELyJBS4vO4VTve+CUpfEFTP9Z82X\nkWkcgNVKyOnRH05G2CoE2ByLSXPVbT/zJIUxcHsBvbproraEBDoQrht0Q0qr\nSEzYpUUlf3uruAKznHw/uyd85q6EyxHbnJbh1PXvDe/w8V+5DQSrjP0oezKZ\nBeYf\r\n=XNlL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5970f3857673cb8c032d0d4532a6cf1209f94c47","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0dc2b5c4.0","@material/tab":"7.0.0-canary.a0dc2b5c4.0","@material/base":"7.0.0-canary.a0dc2b5c4.0","@material/animation":"7.0.0-canary.a0dc2b5c4.0","@material/feature-targeting":"7.0.0-canary.a0dc2b5c4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a0dc2b5c4.0_1591305337250_0.6391451248611992","host":"s3://npm-registry-packages"}},"7.0.0-canary.2b420c5b3.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.2b420c5b3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.2b420c5b3.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":"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":"c895451ee353e831bbb857e0a3470f034b08254c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.2b420c5b3.0.tgz","fileCount":52,"integrity":"sha512-gY07p84KuUnUuMsXL1t8nNv/wfbA8DqNN61roqePE9E9UmOtHTwcQuU8SkH2ql01kCEKneS25m1KE0EZ/Hwupg==","signatures":[{"sig":"MEQCIB/pIkc4AjKmXC8u31RsWRZFFD3s6VaJxf105AVQiWfDAiALn2IkL4+ZOpQVZo9Z4Z09eTaBL54Erw8YxQhpkV/3Jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3mQrCRA9TVsSAnZWagAAN4QP/0Y0twEuk76u2+MKVBip\nfUXW5QXrMiSfRUl/KEJhjB8ipGAztGDrr//l9+RwpXOgN/qVW95EqfyH5zjb\n6nCxq6a7dyVDrU3UWq6uDXEqjzHDFIVZhsjazl0NONhOtRsWIMlSm78wjIf7\n6TBHmRF/NK05Qh5IsWZf6awXRTClRykPJ/ievy38owGIONTyeyGbm+GXl6jC\njwDEsRDTFzyh6x5RN52uuuVfqRjZxPvBXk9eI3G+D6AJCIhnJewl7P0V52C8\nKrDygLMtMuNDBEfSBXsf5ceWPe3Jp7ydQJd8MSQXomFYwx3u9fXtB5KSmR2+\nrmOO1WHDAnLEgJSV/1iVZZW4eZraTVL2yYoaq2dMr3ERejSqTtqJwuM5RkYT\nhhqbvBSubnPbZyqAxyyuWyWc/sAennAo1zRIlvAE4Am7w168gifi7/CG/cGd\nomgDfF+j1bSZLfLx5zq+gQstN5zZGWSb/FqK1cEtPd2vhILpUQIQ3R1FGLHL\nFr+EI4DuPeSseOAsqrFyJml4s3oPXtQKqqsURVd8G2hDOey51p0jMC8jy2Iw\n3dEtJxvzIYq4EIGJL437ojO7r20AL+r2lqnZoQ23jUd/+ef0aG12bZI3Y3ou\n/7E4k6fbl086VB4teVcz2jOQGEZOQw5DgJy8ES6DqoErHpFuvhDJqyTWo2Ll\n2hAj\r\n=1jvD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"80cc16a27982fc781b2a68accf38760a98fdbe2c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.2b420c5b3.0","@material/tab":"7.0.0-canary.2b420c5b3.0","@material/base":"7.0.0-canary.2b420c5b3.0","@material/animation":"7.0.0-canary.2b420c5b3.0","@material/feature-targeting":"7.0.0-canary.2b420c5b3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.2b420c5b3.0_1591632938855_0.868825829679913","host":"s3://npm-registry-packages"}},"7.0.0-canary.8fa22aacc.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8fa22aacc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8fa22aacc.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":"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":"1ed6cf926e216952be507402383eb3eaeef604fc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8fa22aacc.0.tgz","fileCount":52,"integrity":"sha512-v2w0P9q4Jcr5LuAAwdAfVxyG94+xG6xto51sR3y3up4z5S38qx3/Z/CbItDMW0VAn5gOaG5gkPapIWX5QpC69A==","signatures":[{"sig":"MEUCIQDZGA/VWRwnIcnfhvz8XS9fM0IFjp5uUfpoc/t0Gd5QTwIgXGwvxteXc1yDm9IWIP2vK/liyIsLDdMrG981t5XBhs4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3n33CRA9TVsSAnZWagAAWFoP/2y4YyE/KjrRdLq16rbW\naNGUOFKtKT0magWU/Hgmw1ETbbc7heXoYBfJJbPI8P1uKt9MjT3T7dS56xQm\n1XKJOxjj8EUqp73XsqhN7DsDRpp70Ib9gktai2MxSCjhBFRgKwGRhCvZoixu\nrGpnfhEujY2sobaxhAR4AgG6aFkYI6Tvpi/lLdIPpOiUu8rtNvG+IQAIElnE\nyCOrfmOlUjzarfGN2YgRbbkGeVQyqmNuIBbr6z8WC+1M32B255u2obILUPuy\njaYkaTUq35HC9sM1wO9K43JK6FwPj81EbjbdDvDBVolHxQ5ChP3CR2WIRcfd\npIusD2c9hNVfwc2SqDiMJOKm02BdDpUoiQLvElbC6OFY4/wwXdFCB5hqo70n\nFU7M6GnZMnQU6lqwMbYI8IaBeIiEWm8GnmivH9e/iPlt6l6pdc4u1NgQ7Imo\nYh1QRwUm/0GwcmNGDsa6Y9iybl+YjFw9L7dcT9wRG7acO7O8o/kCl74hpG7D\nqf10aO8IM1+v1e5P9RbaNARtDd/vpVtUqt9Q9/c5IXe9t5yPf4+VFw3gH95a\n2D4O55Z4HzWczoK5fh+GlyyhY/+uoy1QZuZAeXxPADzXZYDPTZ/0SVrQV3tk\noIrfh7dgtYZHSqLkEU3i6g5DUuS90JfDR97r0TOyVaF16k5lOLwR+helK30p\n86YC\r\n=iYia\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7c66b081ba582f4d58dde82c8b83ab1dfbed6063","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8fa22aacc.0","@material/tab":"7.0.0-canary.8fa22aacc.0","@material/base":"7.0.0-canary.8fa22aacc.0","@material/animation":"7.0.0-canary.8fa22aacc.0","@material/feature-targeting":"7.0.0-canary.8fa22aacc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8fa22aacc.0_1591639542954_0.4900922939238903","host":"s3://npm-registry-packages"}},"7.0.0-canary.21c4e4ed8.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.21c4e4ed8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.21c4e4ed8.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":"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":"2d681bb0e43b977fd1ff1cf4eb0a56dd171bbd14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.21c4e4ed8.0.tgz","fileCount":52,"integrity":"sha512-Ni6wTEn1+DQpovwnHbojKEezEltZIvenWxMLRQHFecR+bZk9m9l8ORMhI6mDsnG/mXMPphv5BPdjfKv9kbk8FA==","signatures":[{"sig":"MEYCIQCSHAPOmirH63mItheNWqMlFC0bjRBR+Daq2Y6jfJMv8AIhANRWnaylEPRXzmPW5iA+AaVMdmdudwuSXl+u5of9weV8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3odGCRA9TVsSAnZWagAAxXQP/30wUer0eyCDEaKWU/1J\nuOhrK/i6PNh++Ep9dIpnjLLmCn4s2Jc0ba4OqfMAQeTSax+Elc6k9MJNMBk4\nn0JgdAFiyJ/srrY0kj6pqwkSzjIJIMbJvsgzOq5g0NOLX1GArjMCasJZhnVp\nt7ESo/cmfoZ0xiNFuDG05Q6QvQ1NksLMdZYETtB78psZH55kq7uQxAypsiCl\nyMpfHPdBCI1OJig/+JmYaR5cWTAHCAdrOBlHT/CzjneTl/yQwR0O45UxIxmk\n5AKeuQgduUg1gnt9S1joS4QN5J4dEcaF/z/7mYMUJYHE9Uxd4A582U6NES78\nwwhq8EtAtdvJEoiuLntCWbAq6A9TBS3m8bWchiS0stAq0zNuw1JV1NZUpTCo\nZZryYHiGExk2oEJQM+4JY6nvtiLem+8adDZV01a0oAlZAuRPx9qAteKSzAjq\nOAW6BdclqpoGQEwSo79w5rr35VyG/XkXTMw1lbRMFjzpTlYNv/UwFbLkbzJm\nb4hmWJxTyR8OI9nFoKZHvNFpD5btxTlLRSvcixCSiKVBOCe7PP+DnTzR/WCv\n5QwfHHwwYFOPjQIHYZjxaYtu9SxPqGb4qJryqCkkAH+z4NR28M273vyJaEqb\nPyre60VUQwuwv+xIDX+5dczh6E34TJuSrGQFgBdQKG+VqiiHw1kfi7g+s77V\ng0fu\r\n=7QpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4028e059428ff6b13f79ad3f9076ddd853ec1904","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.21c4e4ed8.0","@material/tab":"7.0.0-canary.21c4e4ed8.0","@material/base":"7.0.0-canary.21c4e4ed8.0","@material/animation":"7.0.0-canary.21c4e4ed8.0","@material/feature-targeting":"7.0.0-canary.21c4e4ed8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.21c4e4ed8.0_1591641926287_0.5029659251651213","host":"s3://npm-registry-packages"}},"7.0.0-canary.dfde46516.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.dfde46516.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.dfde46516.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":"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":"cadf71ba138dcd02816bb92c7c350706efb3855f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.dfde46516.0.tgz","fileCount":52,"integrity":"sha512-e+WMq5A0Znck0/J/hKfkL8QShxHtC2bh1S7YTHj6mEOneiyibkHYT9CM5RmQMtt38ITGVlWfdkUkeZegCOn6KQ==","signatures":[{"sig":"MEUCIQDkupmOuaIKbdZLxRKIGuRg/AWzHEuWqvG3ZyaIdQDQigIgZQc1HQ8jStYbSYvHnB2ya8fSiMlch6eqau8CUPvQ+oU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3pTOCRA9TVsSAnZWagAAUeIQAJpp7arrBX0WvmgBzf47\niYyWYrOOI+ok4WuZaDG+enVaGb4xxrzGQWQcMe3JCEl4o5bcIRk18YclVvZD\nsOkjtEMaeQ6noRoxAz5YLH944HgI9k3jW1IrngtTmqfdBz+TW48g4h5YJyXf\n7nLT2d5Tbq5WzyFRVCZDo1z2IBgMReZK1RTlaHC18SSf2CMrgA6b8Kw9ymMT\ncZSlRIuuMdFlgd8WcnUOoxuBlcyF4M43tFWRV1RDgTZmJVvkyVwxlzSUiYXs\n2lrcMzv1isrL3JhJk5FsQj3nOhB2MS5yiLi2W2C5MUoh3BHosIzBkMhI1vKQ\n3eh3wZ3TROzTLTMfr5wWbEWyCiyGKOuwY3UqlTCBHwKGZLJ0sCJP5rKkgWbX\nGGRgn2GYMyzf00xAtI2Ze1eo1nhqIfJA5rlm5JDGVs9Fdo86dyiZWid6zVTf\npmlMD+DNwo4oBk9fKkMvEI54dp2T0I5MYv3tjmw/+ItkmiaOxb7h4JMriqAr\nga48zKCg4lwb276vybjNDzctiChILV+rUhnQ3SrumV4gZeVXqrjoBLj86MLS\nKUe5WT/sVsdQN1GMHrOYwUjLKD3QS4YDTRWMgGbCItGzd+ZEL11cytRuywTh\n+qMLUQdKrDjs/zuiR/NYubbjmwpZw2pDL/UAVS28WMmYYFh3p7JnRmWS7ipy\nGfD/\r\n=zDsv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c25d474d22b404bd6774ea12567f0916bd7fd165","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.dfde46516.0","@material/tab":"7.0.0-canary.dfde46516.0","@material/base":"7.0.0-canary.dfde46516.0","@material/animation":"7.0.0-canary.dfde46516.0","@material/feature-targeting":"7.0.0-canary.dfde46516.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.dfde46516.0_1591645390375_0.7494523757797276","host":"s3://npm-registry-packages"}},"7.0.0-canary.05cc5c206.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.05cc5c206.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.05cc5c206.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":"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":"de092c522286fae68319eeae879cbf37a3cda675","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.05cc5c206.0.tgz","fileCount":52,"integrity":"sha512-Yvy8yEIifWZP7KllhbZJiKTpov2fsKpIbR9sl+xKcOrGGl9DF3fHkT0u8WNRzkK3tqf89clrvsaMN6RzDxRxvw==","signatures":[{"sig":"MEQCIFqJKNrRSCrZYzrL2DREpclgO4w6mgE1M41AN5U9h1akAiBAx6CZEV3pS1pz4qtM00MLNWzKQGnd0K15hk9ts2OQqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3qaACRA9TVsSAnZWagAAibUP/1dcns2tmwZHpWbo5JKm\nH+ACV834hJUeRmQ8xSbs/RXpIee/U7xa301+YJplYvFwAymhhnhFUl9ssMFJ\ndqy8IXJscDiRH8p1udFMexDqvDVMY5oN4UJIx8c/PqoY460aEK15O++W6J0v\nTPP06qcovPMirc750h6+TdRTFl+stId/9XXIwqyXCxf+mzEbyJ/TwgwpQIro\nMk+YWO8rqCwIKk7EPLmcl5mzBuq9CRe96U7ullrFt05D7S/tDcTTgtK7I8Rw\n3c2iXb8xXmlax5FyUbklG5goAkBAMkKj/k/+RLmZU7SAm1/PLf6Wcz2KfUl+\n+eB4IEhDgXQuEKdiEiO1qVy8bzNlAGaSV1Ytqpqax/j0eN5mFyvc7GNpOljA\nDS8Qh6BPnFQ6PmeggnPl+iDzbeJypuqasJNliMcU0AZBfrSi5Uu09m5Ve4SF\ndH7ITqit/8+bABEDky2hPj7V3AcJoIxvonvJcJ9sqUdjvrNdfA5CUUyLyxkT\nWVrGMgJr8jek2dIrgrCvydsNhD174iUM1PR0IeQitBY+KPEGQnvne5zS31PV\niIPk2vk4Ylmnnc3uM4Z+4LPfHBJFnYolp23dC4goy5drYJTlHrKAlx9kCq7t\n5W7N4Fv9mGoNJ/zLobyqM3KBthgHGAdMbqZ2ufDidyWV9SLrvrpt4UvXB7iI\n5NYT\r\n=ejJ9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"933ae32b3f02920ab3f6f1660cefdd6302297532","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.05cc5c206.0","@material/tab":"7.0.0-canary.05cc5c206.0","@material/base":"7.0.0-canary.05cc5c206.0","@material/animation":"7.0.0-canary.05cc5c206.0","@material/feature-targeting":"7.0.0-canary.05cc5c206.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.05cc5c206.0_1591649920512_0.9887828758688728","host":"s3://npm-registry-packages"}},"7.0.0-canary.3ee488f1c.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.3ee488f1c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.3ee488f1c.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":"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":"bb805d13ce6dd738eeba1f3d0f076baf9826acdb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.3ee488f1c.0.tgz","fileCount":52,"integrity":"sha512-zG0xcjK6cml0zOh9MUVJo5NYFEnqE1wUbaU7WnvO3Z48oGmN4J0YUpqa1o0P1nRoLn6C2dmwxm+pPiEe0rffDw==","signatures":[{"sig":"MEYCIQDBiswFHFEu8XmpKvyDwak0EfRlUSBTD4Ll/J9WyMSOagIhAKplZqYtRuCsenTTn2TQVuz171PkN3qwZeATa+vrAQLy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe36LPCRA9TVsSAnZWagAAdvoP/0S86k2adcBUfrxOvc5n\n5VNdctuA93QmCOluL+XlavdU6TR5LY2tlgFycIBOFaFzLiUaCk7FbyNo449b\naU8fI4H1Q2FZf5W5bBA9yL/X4HmDmtWWC0Y+k3mSH66q2fltX2qILl71xlAm\n0qOX7vaJhK6tyyX1b4/eDU+wuYZuntH1OzdNloToOFNpK4/mRj45I9xEILhP\nxq76CEq1Gqzhcqhs47vKl3b3I3TLt4T3rKvtRRMWFgN1L42xuIdzZFZZumtO\nxQytwVLt/4wdNVHfLie2ltHvKS/ARfmAMg/EaIPNgb56CNLibKZgm+co81Zu\nNmjCUykuxpjsqbh2JdsOP6l3xkK1ood8DwCba7e5uqYue6dqDoyug6sAxWlf\nW3ceKO0GRQpHpUS9diRIGxOBQV2D+pA2Uc+T7qwoBfcD4iuyJfBjI/xRFtEu\n1oOyWfHjuGbIAGCwqC/mJ5zX9MlMu6DpwjP+P8AAzGHDkWkg9Pid9dUDDT/c\nX4kb0eag+pvM2F1OJbkvLoYcbGP7HAaAbB/9teFLasv8YWx67sCs58gVHeb4\nA1S/TF8CUoLylDfVbs6hQ0bm6jtwZsIY00nrgRdryDnyJ2bihF64H5F29LfA\n5Yxxk9ucxOnwqrZXz7YxL4uLDNWB+QELAvMYAUG7lOsiQQwVKTOKUvFaXYyS\nqbj1\r\n=VF1I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ceaac97d295d5d50e71137ff6d4b390630570b8c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3ee488f1c.0","@material/tab":"7.0.0-canary.3ee488f1c.0","@material/base":"7.0.0-canary.3ee488f1c.0","@material/animation":"7.0.0-canary.3ee488f1c.0","@material/feature-targeting":"7.0.0-canary.3ee488f1c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.3ee488f1c.0_1591714511477_0.07993557894713654","host":"s3://npm-registry-packages"}},"7.0.0-canary.b83d720ee.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.b83d720ee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.b83d720ee.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":"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":"379c196b1cc55b3bb2777b0c953a46cc243cfdc6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.b83d720ee.0.tgz","fileCount":52,"integrity":"sha512-DdLXqzpIciNE5PyO4RpcAcopjPl2jamGcoqtjrtJah1G+oFbIaoh0WDzbHq1yVPY4AZHo6LarEN0WJ9CrJ3ngg==","signatures":[{"sig":"MEQCIFrbxuhzW3DrMsoVJIKwzJJ0c+4iAx04kryoGTLsjAgqAiA7MyA5Jb0TLD2EtESk9X2U91zMXiVUyFHH8fP/sRniCQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe38Z5CRA9TVsSAnZWagAA/OcP/A4bi7jUgKKb+pS49LQL\niZSrGd5UYyHRJHvX+xNdT8nqfJFAVK+qg72ylY+8NVPD3cToOnCnXq4tOjZi\nIoRMLnzQ5l80xgO/2aB70Qvnvh8C+YwBpQZsXKlKuZWo6+8qfkUUJxUJ8gCf\n6xuJwJtrSBrUUdD/plRov0Pa2LwXmfkYCxPdYu63xwhrF+NHVrM+ChHnJcqi\n+nw3runnvZ3LTJbQHpozDcQc5SlXF9+vSnqoBw7HIZGSxPcGSrKl6rOxtI2V\n96ZULudOhWTqtO2THBwAx3VvBFsIe73dX3NCo8erR6jknuT+4TZE1uOp2cIB\ngmhQOmjgvjW2UHGAbDTHZAJEoFVa3PpSJehwEa0JhX8Gu5sY0sTEBZ93bGUK\nenAqPj7cywN1AhSFq8pfnYHxcuqotFk/nXppjffcpRFszVshJJHQ0gyF0TzI\n1ly7EHr2BmG5iODK0KpqXBxbC37fQjky5cTq8TutD7fPvzFVtbBC0Y0HkQCC\noNwzba+tX9SV9Y9nFy3KYfwRC3iiVog37WpPrCGrYWQZoO4rj0vaIMDFeQhk\npu1s7Rb3y//JPFSCL1GOrvM5c9BIapVqZJeDRopuYAJCbvyzCwQjMgR3WJzV\nIXH9JCmIKhrZucj3IQuldaoXXLv6vaDRfpG9AMWCq7kkBW6WbgR6LZgh36iJ\n43bn\r\n=yFyP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3e998e476c86bc89c3bb626240ddd068529062aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.b83d720ee.0","@material/tab":"7.0.0-canary.b83d720ee.0","@material/base":"7.0.0-canary.b83d720ee.0","@material/animation":"7.0.0-canary.b83d720ee.0","@material/feature-targeting":"7.0.0-canary.b83d720ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.b83d720ee.0_1591723640972_0.6134617517561147","host":"s3://npm-registry-packages"}},"7.0.0-canary.afb1c11a9.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.afb1c11a9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.afb1c11a9.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":"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":"ee91f20c4ce00fdd71337827722114cf47fe9268","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.afb1c11a9.0.tgz","fileCount":52,"integrity":"sha512-UHDeUKn0MSLltQtkNPvnjSpNFSn2UY/c1iHp/7bEFhRLLVpb99M+52Oc3gte8gk/2MWjSmtadCTmNyxczKc7xg==","signatures":[{"sig":"MEQCICmlzKqa/nbTkqqj0cV4b2cue/4Vx7L+W0ztk/lITNBCAiBSzoucUeWvcJ8ybOMxmmAmw7g8JK8ebAPZ3tFdCOPWaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe3+5QCRA9TVsSAnZWagAAEMIP/imDgZ4MiOstZnAQ+8iF\nUNgjD0yuDKIDoDXZagwQ7VbpYWTV6RnbCaahICFEhUekSENLC3YZRm4XVeXm\nR3EMqaU0b0THOShVIh3Xu1WMmFHw5n3KxTy17rr3azj+LuZ2VSJSXLwnMjZo\nTO7KR6PXFXQCdXZulVCkdG3v1GtIuJ+IEj9nIqMYUjOoe49pomJ77uipVaNO\n4ibLWrHDb4yhz64Z+DbDxpQ0SvT2CAb4y7ewPLZuEoTF9mcwFr8PfJ0F7S79\nXsbIbUUiK+3Ec4ed7S9QaWJa++LZF2fplZtRCaeDqrPH2P5U5fmb4J41lhBC\nFtm8xDQHABa1ihC+kI1FPBIkXwEWxtmtK/XRAwUrwd3Uwazh6KnW675v5kRE\n5MWl1aEEGy81I4K02x0M4h6ZJm+cYQdFnDBTtvJjFy1KZpkcI+ksED4U+ADO\nz7EG0jQiJ0cdLOXeKK1ANkHrWQU3E2dA2Er9ANG316Wba8t3MY+tlDq4nArt\njWpeBLJxerVdxIqyYa/FhZbVZ6uW5+PCSv+tYbtCPPUXha6JNwP2MwxHl0ga\nsyi9LKHAGEUcFId+DzEln+RNyXfuHEgQ0nX5odY8L/JKqy/LKjmCuNJZ8aC8\n0vjrv7w3cNmm+aJAHHe4sU6oqKhSLMYZSlTPuktBX31KqXS5NpZKTGIyTOO+\nHrRj\r\n=VDIn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"893f09ebba8aeae1b012971b66ce3c77c410b823","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.afb1c11a9.0","@material/tab":"7.0.0-canary.afb1c11a9.0","@material/base":"7.0.0-canary.afb1c11a9.0","@material/animation":"7.0.0-canary.afb1c11a9.0","@material/feature-targeting":"7.0.0-canary.afb1c11a9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.afb1c11a9.0_1591733839805_0.8975428357390209","host":"s3://npm-registry-packages"}},"7.0.0-canary.39e6f71e2.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.39e6f71e2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.39e6f71e2.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":"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":"c3604b5be8775f2258583799b3d16a015bd39fd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.39e6f71e2.0.tgz","fileCount":52,"integrity":"sha512-mTdmVnFz6xFsZuGdNdUQFZBNy15IQhRlu58wjGrgEkO3A7jzMlx1ltS1xGWsCEvMyvVuIfervd1ltodE4p/P6w==","signatures":[{"sig":"MEQCIH5CLQx7kakV222x1yZtt25Mes/NWTCvkWrZFkvJ43skAiBXTZsJr+j6wdyhHjo0nEJvXbhpEMIAAQO4Je3IP4GhQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4B3sCRA9TVsSAnZWagAA7DsP/08s4+M6bULQmjxwlVPk\nIn4EafPoASX/2DKizPmC63NG5Cjt4Gn+H6bMJwaPMwgE+sAPTwHaYWgdetU2\nxCdB0YFpbXyWKalA2wu9OkyBWzXJOMulmq/EmIUAy9Y0kusxdaa/VFrIA7zE\nf438mM+HjG4dcbG56j9+leGhhHSe7tPY2Kv1WEdFdkMAzAyHS45TxsQ0wm54\nGn5+xWS9GZaSVzv8r2zYX6mI63N81870Icxv7tRSzsqoCF+B56vWIAdDoqC6\nWGsmFb7HAQRaOlcTjWmkdRFx08PO3nH3X+mJrj3LWnoCZvJqUzDC/yrUKo78\n9jI28Dplx6XHO/I/4lWhzMvE3Nbb7doAm5fTJTb5zeOA9YMZFEeeGViaHG3o\nRa2vUk/voQFTpCUvo8s7JgDAlG3y0aDUcWsZKDF6iKT6M6O20K0EVNK5aze9\nbhwZNbtK0LVrqwSYcXwF4t2Bgfu+HfCs7pK/GXmY0CfCIr39PGKIExyvcFAz\n1veAJbPrMEubxJmKeWpZ3iZwrk1ZKHpkNO60MVMGz/iw+DATjp3i1gZvZOVM\nQauHZpxUzLdyc4DvntfycPSFEmlPobzU8wz/CoxSMcCh/bOS4KOH9H4uwezF\n40RsdjSLSJOIAkl+6VZ2abyR/hDHlQ0bJf/XT+NC2r1A73VWilFHOngRkQ1P\nXKz6\r\n=a8Yt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2f7273891cbcb7da6646bdca0ac4c5dc2ceed9b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.20.1","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39e6f71e2.0","@material/tab":"7.0.0-canary.39e6f71e2.0","@material/base":"7.0.0-canary.39e6f71e2.0","@material/animation":"7.0.0-canary.39e6f71e2.0","@material/feature-targeting":"7.0.0-canary.39e6f71e2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.39e6f71e2.0_1591746028301_0.018953344126402483","host":"s3://npm-registry-packages"}},"7.0.0-canary.d4c66dc7d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d4c66dc7d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d4c66dc7d.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":"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":"fc14ec9700d7f4552c725ef1718491cef2432f61","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d4c66dc7d.0.tgz","fileCount":52,"integrity":"sha512-mQekQEbx8M8ZdFc5TOS+PTY9Kh0ClcMU7j13YL7n79FmlZMEtHwQKxY13f4Q/VCqj/Mmd9Mj1IbpIFsACEYKZg==","signatures":[{"sig":"MEUCIBVL0UXfconzLjnUMqYJ73V9xXbPd8uSFvfJhqubSBjWAiEAlpU5uO991eZZrMyHCF883v84YXjEptLLmDgmTPyGn4Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4m4wCRA9TVsSAnZWagAAuZoP/R62zo6ksEdTbWO4Rtj5\nkNa5pmjTAvYyYfPnItZQXpaSRLJP6JvHhZ/Fn9aFnOoz4BTV4fiN8SWT4/61\nxeVyvqC8ArgKE2WP50SnXvFqwsRE+CUZxCJIPmLTTaK/nIkQEn8dQt2y4pU8\n28lfjjCGowsNqiu6zw0cmeIaKmhTBqrBozbaLYIV/SN4XpEI64Jdc5CcCmjd\neukFDsSYD+MkYCZJH+8dUoyVZ5DmfPORS+/wZC41vV6t5cM0iurVCW+xVo2e\naNJroLBQXyHxT57erSEg0lIrL35cTQ2GYSFeUr72ONCnjHWekX4FxCr26gr0\nZy/Y3LvqfGpDEBlxqpzy+luiAByKBa9PiA66Eiyb1qMDhIr/L9oO4e0ClwJy\njQuB90/EnEn3yDoO0G7x2QzxRVLVHvrrkTvBp9JsKvnuJL2Dnb/jcpguf3SW\nSQq1bg+TG8ET0bo5CkUF/1FL63drH5ts5nts5SmHoD8buo6GmX4nVCsZb1rE\nPNjjhdt8RqvUdBA/hj3J5iKlicZNtOpZm/WydiLDBXFPp6hNinFCfNmrVfiZ\nG/0jnzcl9l29f6D+p/QliGyTlGALhdj/qZt+QQOohhD7d8OFi0YjgPTYZpkW\n0HT6c3GK9aiD0ILCy5sxNAlV0Aq+KT95ItiFIVuQamIfs6rSEaDCb07w2Q1z\nSkHn\r\n=OKKt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5964d9e6836962528334c54ef81ac4cf4898392a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d4c66dc7d.0","@material/tab":"7.0.0-canary.d4c66dc7d.0","@material/base":"7.0.0-canary.d4c66dc7d.0","@material/animation":"7.0.0-canary.d4c66dc7d.0","@material/feature-targeting":"7.0.0-canary.d4c66dc7d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d4c66dc7d.0_1591897648415_0.6080405878033923","host":"s3://npm-registry-packages"}},"7.0.0-canary.be4a19f9f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.be4a19f9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.be4a19f9f.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":"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":"229a1208e260012f476dc7dcecaa16946a9e875d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.be4a19f9f.0.tgz","fileCount":52,"integrity":"sha512-7/ZVo1P8XdqGv929npUGpzCx2PEYaRmlb9bxQES2C1MpoZgA2VE1oB8onCPKDTNUHb/qcl9oZ0F1aGcgLeE20w==","signatures":[{"sig":"MEYCIQC0NYJvrGU4AN3AAyEmpLmVPJ9kkmdmxzKrEX3r+0MoWwIhAMSAyVNYhmwctbWxdru12rXBZsdqx+EC4FTjGOpiGUR0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe4xwLCRA9TVsSAnZWagAA87YP+gJwBmcCjbfh3TjCsHaL\nzFu2rmXiDCJWLsIhUgYF1CWMJCuGLPuJL3/Vi72rvjmWvshXqp7ZnZzBtorQ\nCuXMA9UfMwm6ZkVbV33+aYdPZZu0S+wpMbXHwQBY3zM7V1xHHOqq2mgQq4lp\nFSSdbjnhhgE3oC3afzopvckAx42sD6RH+UddQfxeTIwd01bqsAvGomN4ZNWe\n4jq4Kq8wpZhxVCyllncyAUcwrB0uiM7Hx9D0Ch0Rm1Xvr0nbx6YH/jdDHkJ0\nVFT2nhTrBYHKx9bTmdc9dacq9nJupBDgq57enXkU4vuCKySmm11pWiliVJek\nbpMDTRMjN4k0CGyR5fC4xTZnvLHSDOzjE/P8wrJeTKzwyNlYff1G9qUdAFrf\nysIUGyA4rYkOjKliVoSMqiz0vwOqQUX4AziZ8jvmJhdSGiB+hTxZRURQH+VR\nbWi5AiuWtxD0JFUCcIxkQNklZmk7FugNxJ+PGLBAyoPxj8p2AWH3jbSG23DF\nV4D62axiV43m3ENjRhPmQ5thoOGQRG515dpMv3THkkdhVTos6398lvstV/kz\nv2D7PBn3d2zvfyW16Mm6V5w6owgx2pqM6xVb7LBzdypfKksKUN3W9u3Hzmei\n9r2AF/+aBFBXlNuftpRr44KD0vAxM6i32M3Er2jUDCTrvqR9VM3Vm9FJfE0R\nArfs\r\n=HAyg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d7a0b89cd18efc7fec60e96de627e59883e3657c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.be4a19f9f.0","@material/tab":"7.0.0-canary.be4a19f9f.0","@material/base":"7.0.0-canary.be4a19f9f.0","@material/animation":"7.0.0-canary.be4a19f9f.0","@material/feature-targeting":"7.0.0-canary.be4a19f9f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.be4a19f9f.0_1591942155258_0.029466805613738822","host":"s3://npm-registry-packages"}},"7.0.0-canary.a6ac8f629.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a6ac8f629.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a6ac8f629.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":"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":"dea13ab60f86b520e349ffef2e4fe1891b837e82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a6ac8f629.0.tgz","fileCount":52,"integrity":"sha512-9oKffg1BeI7VjwlqlLocy8iVzZjcI01OXpypOUyyIlQCzo+xT8k1aCvgjfQt7lBkGd5c1yhmX0dKejnHBlzoTA==","signatures":[{"sig":"MEYCIQDGCnPdhacOWnph3PjphsSqExLslgxQcbVBIWrgbyC6HQIhAP3T5X1fXizsUgXHH2xEywzoUMwqb54RGW0LRNr80sMc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe5+i1CRA9TVsSAnZWagAAIJoQAJCMOprhkV3g9OSRuknD\noE9ygbzEpMFVZYgUyBfSIfzH7THSWd/mmrjpXh4rgoM/Bw72+vlN92Q08d0T\nvWQXvAoVy7wk+3AitJb56ts6cVB6H8Fl/MMlxxAp+/ztjEt6Hb7OVivquLmg\nGK7Lu/DtffLuBUAnraEnMGjoVN313rCSy6PBRDGwxi4PZLyHUkWZfQQOfzeE\nI9H+qLP4z8zukXg+E01e9/nhnKbQbI7hWPlzlE+Wt8Lz9Bs52TW4sM6dQg62\nuyX7r8djR0TsWdItx33Ei0QasPN5oqHBtiFmbrNVYVCwP4nBV2LI+eBpBPAr\nNENeknQ3MAjuPbEFAj5SboidsXdXpU+1kq1d3R8D7zGgF93XNsHolxQ+TUTZ\nf6FMIIq4rGY8ycRrmqxtcyOn4S9HE1TaqmrvR5+tXx3mr8jXadGCODALxUf7\nHOYb4cKXP78WWLvXOENjARDOSoo6QSsf7r+ynnlCRE5qANy5xWNRb8wOqeHu\n5GoNbQOvQHV9mepZOjDB2wR9XyRSESKv8/or6dtEYTVFQnYYK02oE5cJZHuh\nl7g/wLnW0exPixhBT0xuqu/uVkiljtquKs0J+EulKbzD7+2j36n67t1xR1Fu\nTfrcASPXsXd/CeHu3AELTQIawE0dkPVExNvDl6vfV5tsiyPO254U6rL35wDW\n6JZM\r\n=Pgxp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"30d2dc59ec3530f0f21233e5b8e93c990a4a2776","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a6ac8f629.0","@material/tab":"7.0.0-canary.a6ac8f629.0","@material/base":"7.0.0-canary.a6ac8f629.0","@material/animation":"7.0.0-canary.a6ac8f629.0","@material/feature-targeting":"7.0.0-canary.a6ac8f629.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a6ac8f629.0_1592256693240_0.2835852709628812","host":"s3://npm-registry-packages"}},"7.0.0-canary.9833dc287.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.9833dc287.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.9833dc287.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":"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":"ac1c049ee56b15d8843ffba47f175de58e5c7e12","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.9833dc287.0.tgz","fileCount":52,"integrity":"sha512-xynMCVVO5HW4Xj1BivlzPYQTYX8YivTBYl0eMiDYCL+0gIxkdg0sG6s+HhHYptljId+hdmrXrbmM6BCV5t6PWA==","signatures":[{"sig":"MEUCIEfwuyyeHC+PCuW3LHJVo9VjKBnssBOKXpRobTzU83iZAiEA5JdbxKG6s5D3N540677Da0FqFM/pCkzpCo39+adE9fs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6SJxCRA9TVsSAnZWagAAI9AP/itIBK3EzlulwT0l0K9k\naRf/p+i4O1uYOPpjeWT/9tuCIuQmaBaENOf4NRt9TOSm3scIHvSvN4XXIhaw\nVzfSGqr1gU/rO3Zaj4EajSiT4qZSUZGPlnRwRr7EXyGZMjYF/+JWqPq/bctm\nYx/X+S18X9cFgYNugb1TYeSXrwXbzfBd09V9Hs0iKnW1AEMvkycRsSQRAoW5\nCBlRls1laxtuag9oj4DCi8bLEpOyF1GALhRn9yMTtQQR1ARmLOSH/iAQb37z\npWEdrunWFjylp0XYId0qwwl85DxKsQ8AKSn7iT2wY5TEnoFcCgLUHqZrVV4R\nVLdHKKw1e/Re1sUqQJ+uOV773CHUee7W1ii1KU34QW2ByQ67vC1xj7i/jSjC\nQI1Yg1KNnht0UhjttLGPHWs2V9bBNPv3KCENpMsGZtZRYpoCtwxW1Vlatarv\nkpX+QVnR7yAsbWmzLR9akDLvO8H44UYixwx8jHqe5DMX1/lWTkKn/HkT5QyX\nLQM6u60cMhisoA/9VOek1QdtaYVDjb4tUWrOKHsb6UiQw8bj9yzs/wYtEfZd\nEOh/sdNagMeyA3VcbA2DUWya9ya1nuubqcM8+/Va9ZZiwJNz98xY6kHheBW2\nM0RseOfSZHl0BF0hcx/8owVZd9LM3EJUNwbGsdML3t/wl9Nzpuo5zzLmuZN9\nyELN\r\n=ubvb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6852334e45da838c4140c1aadc974a39d80a83b3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.9833dc287.0","@material/tab":"7.0.0-canary.9833dc287.0","@material/base":"7.0.0-canary.9833dc287.0","@material/animation":"7.0.0-canary.9833dc287.0","@material/feature-targeting":"7.0.0-canary.9833dc287.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.9833dc287.0_1592337008875_0.2877147531703881","host":"s3://npm-registry-packages"}},"7.0.0-canary.3aa33998e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.3aa33998e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.3aa33998e.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":"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":"9941ed83f0bb60470cff3305358d40658a47bd87","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.3aa33998e.0.tgz","fileCount":52,"integrity":"sha512-jmDspxZQ2Vw7BpA7AZgVdzWct7LuYNlv9BFd+/xCPMftWs6Otl91ONAqwn9LKj6TegkoyRXKxLttrQyUA/dVwQ==","signatures":[{"sig":"MEQCIEcrZJGoPmbYhCnl9G+5bK92Cm8ePUrh+ZRnw/+VlLjiAiBsUvnphH5kVauEN52H8iP7dUg8W1BX8M+LC1prk0Ph8g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6Sn1CRA9TVsSAnZWagAAbZsP/iWrrUVt3tPvG2Pgla9D\n/N1lTu2jQu5DRBJfUHuweyYvtioK2lnY4JKaOp4yBJb2WI2eLDli47RxngEn\nb/LmPr2RYfjOGrJsozMAfwAku7PakQlMGk1tqDx8hWy2movVzuaggU7t0/WW\nbztgOejm2WGE8OZFZbkJAhwPD4E9MQ905AYKfjqrR2w48caEgK12g/QMNXVk\n6+kdlnop+VUMeVf1TeXH7udarW/Nkp4rB2zZqGzoFE8f2Gia3uM/92rSjiEk\nWoZcqONbyMUKvTLUmhv0YWH6el1DR0kzs5rQ3tuSs6HSSQg00r1xwLoCEWl5\ndbJQjo5jKFMeS1fecPHs9H3CQuhyW20qgZlcYHTWJOCL1/CK9khPEOiTDOGp\nMhH95hKWHhk6XtvpaOjC5bz6l7vpH65AIiqNDscbaq9KrR+Fe8zkwBrNjvcC\nopCBsMimOPZ5xEFEXNmPZs1ag/K/OSuF0HHgwQ3F03MhP4njWK/9IXFGuWgH\n52aJcymTJK7INALUPDFzP21mAmA13sFdp1hYuH1vVgr8ROUVoa2VHucAtfQL\ntRar8h7M3T8WDdyg230b1aIb1JVQnJewpBD6olKtYkoLasX0l2qkxAWwferu\np77mLIlQlNiQqY3xP8GsUFRpmnQtXp0J7GntrNFZfpHu84RQrKUx9l+NGdjm\nKvec\r\n=JX3k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"20873613db8172781d25b42fda84ee1fecd88558","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3aa33998e.0","@material/tab":"7.0.0-canary.3aa33998e.0","@material/base":"7.0.0-canary.3aa33998e.0","@material/animation":"7.0.0-canary.3aa33998e.0","@material/feature-targeting":"7.0.0-canary.3aa33998e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.3aa33998e.0_1592338933356_0.1282311976162267","host":"s3://npm-registry-packages"}},"7.0.0-canary.d2b54d183.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.d2b54d183.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.d2b54d183.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":"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":"84ebbddd045025ef2cb918eda186c4c4848d0286","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.d2b54d183.0.tgz","fileCount":52,"integrity":"sha512-VbNhMA+FiA8YCwSh0MVGAYvg/Ahu8zcHiXT2KqYwPxvW7BabmsB9XN2Key85voHkMy0rfGW0G8OMwH/QVWQBZA==","signatures":[{"sig":"MEUCIE98Fu2s6QPGYgxrYqvsVTZpxiHhTQd6euT+ZVyR2ltVAiEA5YdEjBdu0UD+D0zwjJDkQa44qGPadYypZNZGmluH94g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe6sBuCRA9TVsSAnZWagAAUrkP/A5Lvj3jt4usKPLhoQoe\nbgTBmYYLQ/Wsm4k2d+ylUjMcqKYWw7WsWksTK1JmCrdSocK+2o/TE1olUQrM\nOCjkgJCGIyTi0KBi3IQWaTD8fIWl/oG9Ve4EGlHktzx9u1GUYp19T8ZiVtT9\nDFOFjGm4c6QDoc3L+eAQXOk+TQnCzKhKktFO8yGJGkbACnyxwyflpNhdmY7M\n2Mhg9FRWZVfNO0nkuKKSZyUYPEzyZp2lM7uuvX3Tai9UQw+8QAqY11xk8JfB\nHOJfA0FZMUNPhtXTxXjxi4RU8FcWj8jtV6GhvLDx0H640siprKhG5cZWrI6q\nSdWFKNdEVs9en5msovvAu6AHlFokiBZSZ4dbB+Bni3XzXec3hPyUrKdwIA5Q\n3iZqI3qAXQCoOvJz7ksMsK9VWwS37KpH5gFpWc+L4lHcgdPnDz62rnsGVkd+\nlmpvGTqzFXtRpx9utl3XYW1yyekELCE3XgQb4DLvnddZBXNmXa3Sr9qZwRAI\nqYlcT0W8ywWVQggBGlp64dEjtfs+W8V6MEHxArnvPI8rjL7XEeNCEhqAH13T\nsXRKtmjt0GeG6ofAzI494aFzG5wiuSI/DBw1uNFWz0l3HfB4RklPBPFhzHyt\nDEStHoNjZLMstmgRG/6dzwqwfszETbKc/YmRCS1/prilX20DG2K7w1tn/NNG\nFgvb\r\n=uIH2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2941697c8abef0c194a923cf548ee231dc67a2c9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.d2b54d183.0","@material/tab":"7.0.0-canary.d2b54d183.0","@material/base":"7.0.0-canary.d2b54d183.0","@material/animation":"7.0.0-canary.d2b54d183.0","@material/feature-targeting":"7.0.0-canary.d2b54d183.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.d2b54d183.0_1592442989915_0.5925701338776739","host":"s3://npm-registry-packages"}},"7.0.0-canary.f2a488e95.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.f2a488e95.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.f2a488e95.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":"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":"2368c668a86e1147708cf336497bf331de49ed34","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.f2a488e95.0.tgz","fileCount":52,"integrity":"sha512-RRFgbhtJrM+llEiTCidWICDzAQY57hpXpflxdIHPWBMsL7FfhIuGZ9O15/4XzhwOUjekmFhkgM9bMAAKv7/Vxw==","signatures":[{"sig":"MEUCIQCSZBFHjCimL0Hs3jLtlITP4rM7gK+a3kzD551pTEc5CgIgbPm1A+Ee+5vHOIQNytIGj71/7VL69FVMn5yCMR4s0dI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64KmCRA9TVsSAnZWagAAp+YP/2Kf65yy/Yn/Wwg0sKgp\niU1bVcN6qATup1WfJoVR9fsONGT4Rhc46J3LPRyuC/L5a+k4ZTGKXIKTHAnD\nYgbwguiHJWTOAvsJPehZIWkinwB0YASbnsk4iuwcwJkf3VMtqqsziOlvb8Iu\nSH3TG+JdmRyJsBPphEV1T7XqQmohMhftEAiWojDfr+SofklrIl5FDUAHtOlr\ni2NL5dPxZ9fcUaP5zl4X4DUClqSkaBERDmi83PelISuWR/eJL7sW2X1QbyMI\nduoeiQjgdxzZTBRFqMVHiRJLgWqR1U/QZOsrGa0YXFL7XbD0stxHoR83ovX1\npFLgUfcEifAhpO/ATZYF7gLkGx+8wN4QjRoOIPQs9SIFPX3WFR/FejwVPVKm\nWKp/jZlRjYiQz3nX0jF3jAc6VETrQvNjolPhzW2sEWvJMypTc3QLdjsXFSbr\nI0tYZRWzMB35GvUCTBYjutx+lehk/xpaQFtf5aQWny3738PG6fuBWdoeFYVM\nTMrzULuGgkjFWPTQxThmDjz1+4zgpACIvc1naUasLkMb9cjjvF8JEpIn/jGe\nR/aYyYbrz2srQm1O3oWufY8ras+lg2CpBDVEoIlF9EuCHEcoDHM+U3zvyCJj\n17oEHC8uwbfu9gz5gb0gsCKMJLOrGDP4ik2N28VaU38QwQeCCYXo0Lf7Z05l\nv6oU\r\n=kpry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bd7f6aafa23ab94aa2f862ece45e1775f1895b88","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f2a488e95.0","@material/tab":"7.0.0-canary.f2a488e95.0","@material/base":"7.0.0-canary.f2a488e95.0","@material/animation":"7.0.0-canary.f2a488e95.0","@material/feature-targeting":"7.0.0-canary.f2a488e95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.f2a488e95.0_1592492709897_0.07627246028820411","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd8d1aafa.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.bd8d1aafa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.bd8d1aafa.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":"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":"60b1bbb9056c681989733f17c5e28fe77a3b7417","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.bd8d1aafa.0.tgz","fileCount":52,"integrity":"sha512-nj9fR/NB7oqtifGSSZQTLAombAteAGB0X3hpCRLC8r+6nALS8IAsMwMPYkQ+AUP3d9/A8lHntRozJhtvbnGx6Q==","signatures":[{"sig":"MEYCIQComzO3Ekha51j61svsSNHRn4bM972CG+AxnAMWFcM2lwIhAPmqAGH0KYDy47iFHps9BvjAeQYpwNFNpelpRG213vm7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe64V6CRA9TVsSAnZWagAAVewP/16/i/EqVRxeXq8CnE6X\n01rEB6d2mQaT+nrPZvA2UtGo2/EFbBd7wprOC1quKpbv0FV17BK+OUscZ9Ez\ntlO7OnZw0pnHr8VLVtqGGcjo95dFtkThApC0R6ie64xuSqM5ypdVU3aXBUca\nUKtits2XwHVT/5xbhnnGjEio+wzXUG1Zc728YogU+oDzsWpmn7/N3qi1NjKz\nkUakUPNPUTONtcIBOUNSRwhma8acIY0EMvYn0vF97QZuX9Mst5C9liW3kYo4\nH/BayDAQp4u4izg1OY0Z3OfqNefTfy5vFKPsKag8RN6INsyR51LxJRVEJHGw\ny/wzN/Bn+No+Q11HL9rPcUijXuMLo6Fh3t0fn3/WM+hkupeHRZlYDesfz6r+\nQLgn5dqnb1vrTywukvl4KzHCZArjfjZ0giMP2BFIRc+YYqwc4+W2gc5sVKuR\n4LqjD1QjdlKYP/L7Qb/UEphOxKIoE0hB5mqvdUeovN0W04T6XISZVJICaY8N\nmnMSY9PcRhisfM05xn/MBA0SjB0rE0ltLvQ9ySmQ0xFP8AxAM7W+yxXQS8QK\ncJZ4abrllDYdJ09pgs5NMsLhnl0Um9iCEkv1zDKBHlK6Qsx0ONYGc/YIk55n\nAWzAZZiEbKo1e8u1wjUX7/M/1Nxu7JvZ30qjKC7ghnmlMt70bhG2rNIuEuu+\nW6La\r\n=C3sa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"05dd265c139c96ecaacbac16c7128e4a851b00f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd8d1aafa.0","@material/tab":"7.0.0-canary.bd8d1aafa.0","@material/base":"7.0.0-canary.bd8d1aafa.0","@material/animation":"7.0.0-canary.bd8d1aafa.0","@material/feature-targeting":"7.0.0-canary.bd8d1aafa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.bd8d1aafa.0_1592493434259_0.14919298751594812","host":"s3://npm-registry-packages"}},"7.0.0-canary.1321eb968.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.1321eb968.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.1321eb968.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":"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":"3dbdc0fcf87c5e8e27f28e9672db94550b9dc4f4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.1321eb968.0.tgz","fileCount":52,"integrity":"sha512-EcZk1nmTTSIhBNBNYa3EWA32AZ0AqauGujE46cGEOb3I2yjN+WYII4eBh0VI4MX5NcRrEEw/oURDfOu4rAxY4g==","signatures":[{"sig":"MEQCIFU8qjUBEjVSnkwMx1nbnhHdgC9E148O6Hds9lFDuEg4AiBU3Di36SYWnh9pdt0uCdzfjRDAoOp8HLW3vRQiG6Z2JA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RBkCRA9TVsSAnZWagAAVX4P/1R3Q+2zWuQuTCqhQo0Z\nUTMq52wswL+0a92TWHnfXIroEVta6WLrcljsU1IjydXRksm/IlihGn8Yrgwo\n5zPE89BfvrRqKfp3WNmc0Uu6I5mjgwwr8AlYrHJTaikzd4Kr+Cbw+N7V94br\nRGQLIMqUES7yslSoP3Lf0Hk2myd0AaTZTl8pmHaSjG3CIGQTkJ1uzORgl1xm\n8373MuR/eZbrXNcRXg+ajqYrzYmVWoIGqcE1ZWJC+mD3bBS1vgKDfjJ+twyZ\nDHU2BMIcjTA5unNvqZ7ga2OGGDaJeiQwY3LJ/wMGHBBjyNrqbwmszSSrPDOZ\nhhUIqBbIbXHRpChqZ19hBoIY4wE71kKeUqmsk8RvvOQyx6dqfjWKop28muLv\nycYgXL4L2XnXx8whJTXrHAwJ+g/NKhe7/kiLFUbr2HWnGCAzLuUdVqWvxV5m\ncIOAGY91KuFm835ZGkq2LhovXVo9FWDAOfsqizgS37gfqO9Qhehb58qyZhw1\nRaI4OYPxEgKLi5BZPZi54Fa8JIDCnHWXzEFpI2OHSD00aFviVjX3Vkwo5QvS\nPzP5w+XpWc7qR6iKOKmTIllJ1ZPmF5qX2AAH4Eprjb6Q/ayp4SfEfyFxlSTh\nPNdBGPJXLTWN6M+XeMwhiC8FCTZTjh2QGfPz+GhMq4dYc+JasNp+nkV062EF\ne9m5\r\n=ined\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"41c074a3370c2ff9b4dd6af27f2403d15cbf2832","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1321eb968.0","@material/tab":"7.0.0-canary.1321eb968.0","@material/base":"7.0.0-canary.1321eb968.0","@material/animation":"7.0.0-canary.1321eb968.0","@material/feature-targeting":"7.0.0-canary.1321eb968.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.1321eb968.0_1592594531898_0.24135352579918412","host":"s3://npm-registry-packages"}},"7.0.0-canary.db5cc0382.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.db5cc0382.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.db5cc0382.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":"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":"ab9be00daeec7e0c950339bf78f2fb24b23e8340","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.db5cc0382.0.tgz","fileCount":52,"integrity":"sha512-uJsKMUqCH4nJTWi/j7PELOZ7yDJUg3f9i2KFeR8feHtRkQ1U+G9ltbgDIO0vApl1oMF1DCGohe9c+J6SrdG+cg==","signatures":[{"sig":"MEUCICWUVMlgfqmDY1JUK0P0rowqFoyKb0mT7Wj/SFs7y7X4AiEAvhkjNA77U1qMC5H/wxCMwwYGzSS19khA+bcVy/4TYqQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RHzCRA9TVsSAnZWagAA83QP/RRRQFzJgNlux7WTGJ/O\n9Uxo0f5tEyPFixgcmE7lOi0RPwXolwkaFD3vz8EzfX/I5talncFo41IMAOrX\nFH9C2WKekrMMUriBJ5TMRtqxP8kpoUOYdUnFOEgWNkLQNeYzge4C6j/E2qjR\nbFOijI25PxITW5T38AHLWMhn41YKpMMjJunT/aRXy2FqQ/xRMiLD4vXe42Zn\nxKqguwOez7+3uXHA3wuNJOo5lmuc9jj0+Px5XaXcZtM72R3jvqaUN+drZ9DH\nqYIvUZ3GHBdAEo4mxAFBhDQCi+te2Ki+FJdcP6M5fVMKzarFvLlca5Fx8Bo/\ntQWSOkHbWCFlntweFpDt8+4Wa8GlI9QJcTFSQeFpSiqxvhEkvDHjCg8HrKfW\nf1iHNbnrcSn2esSCA/hYeKi4sFXK2OL5brNvaASGxMpTNa+IXPqcPQ8g1lV6\nvwVHRfIxIZX8Ro/6YYOgYm/117X+r9taSel/UofL+7YQtSzoTOGzIRSnVChn\nEvNjilRkh6shnBWyl+FdMXrPSOZY1LLI4drjK2FV3PpsNRMkN34xNwm9kSbC\n+CPAdHsL9ql5E58PyzvP/gJd9GHwR8Zqv57gZvr/eeyJvQZx3UwsC1nFDP/1\nl4l35WRp1U8B7iM8dyljjgj1ZTLmlZ4hL9rS83d826/MRgzrpon9gejqeOjF\n8Ew4\r\n=jIle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"698cb6184d0d6e6823147f7d050c39efe9b8e3b2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.db5cc0382.0","@material/tab":"7.0.0-canary.db5cc0382.0","@material/base":"7.0.0-canary.db5cc0382.0","@material/animation":"7.0.0-canary.db5cc0382.0","@material/feature-targeting":"7.0.0-canary.db5cc0382.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.db5cc0382.0_1592594931357_0.6763463713458227","host":"s3://npm-registry-packages"}},"7.0.0-canary.6ac9bf031.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.6ac9bf031.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.6ac9bf031.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":"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":"f0e6b75e79b03b29e96ce9b5ebf65496b8894a85","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.6ac9bf031.0.tgz","fileCount":52,"integrity":"sha512-Gpe/wGLP+CNtE/zMd5CapEET0ygA2KXOcod/B9RqyuZvoDT/icofwMXhTi0oJtm/A8/HNsbGCUsDKuKfQj+UuA==","signatures":[{"sig":"MEUCIHC0FmsECryyMJ1+snZQFRb3U/13qp9yRXo625nqEg5MAiEAlUL7g38nPtKQDQP0SqtwHMj84dQ1Bos51luVcp1msAk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RazCRA9TVsSAnZWagAAtBkP/RJjUkEUml2PhDChS0cb\n1FydKxh7AalY4xW0wcbq9c56S+JLzehMDuC+aVts33RmCB7gQNoeK/EUiHX0\nW4JeedfLbqEmbr5EKYuaucBVv+p0G6ZI0ijEF5V8zHNFi++RZoZzgviKNWv/\n/wRxchdAeUCZPXwxI8rKMjqksF0jEZ6iNYK8Pwy8ZQHL0rAan+RQTMHyYDQ9\nn0ZEGwnbkSXKpTt5Xyn1txTd71BfWWAp5HDEs9QQxDVEZP92Xevv2iYLNRek\naVD07SmrqAX5CrstrEP3ac8RD+GstzoDIlb7RF1nkI6XnSA2tWtjem6o6dhe\nIn60PjQyLh5sNDTn4C6pFzSO4TO55AfzxPdclh7hTlvbkDqv2UHmB+Nqw76Y\n0tURxzKDxKE2VorvBc4iKqplpqBNosNIxaZNrRKBpL2ViwkmTvSC9Ht0HaIC\nMZdQcSNsFAKYmuP19t94thopEB0iOk3aCj6c84G+Gsv592/8ouYgQxyyaaZ5\ncPUxuTpFIRqfE2OCR2/kuljEzva6UzeefEL88KY4qyC2zRN5YpNMdjrJ5hlT\nd20acF6g3D8P3/8m6nm+sJmi5Psme3XdtdmCHPzxTtnpHRDJOXw6bZGYjks2\ncBZihWXbvQv2GKSBaXfr137oVvoPhlzhduG949Fr2vrjlbt29+SEQDa6AI6A\nt+it\r\n=YGoC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e80b52100d3a9ae7653579d78250cf18752ea92f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6ac9bf031.0","@material/tab":"7.0.0-canary.6ac9bf031.0","@material/base":"7.0.0-canary.6ac9bf031.0","@material/animation":"7.0.0-canary.6ac9bf031.0","@material/feature-targeting":"7.0.0-canary.6ac9bf031.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.6ac9bf031.0_1592596147453_0.012521717922699294","host":"s3://npm-registry-packages"}},"7.0.0-canary.c21b5c367.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.c21b5c367.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.c21b5c367.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":"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":"6fdc7d3d8473c90ce6ced7544c20b0ace19453e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.c21b5c367.0.tgz","fileCount":52,"integrity":"sha512-2bIyDh3zTDdSxQIsCDR65BGH8gGtIt7hMI80Qj9R+n+NC8494elfz//QwKqdMuSjptO3+NfqCtSXzP3dD+qBuA==","signatures":[{"sig":"MEUCIFwhDhUH3CJSxeAW7qekd0UT/OsW6k1+A57mc7EvvOcjAiEAxkbkdV1PSOGAAnH1xYtxvQmcqzaR2nvle/7KAt9nLTY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7RwCCRA9TVsSAnZWagAAH6kP/1vtq16V10u80u4vXpQZ\nNvj7WZHzqPS3z6oVjdKebPDh27GSfop32YauxMDHzrIaiqkJSuc1nh3jAfFk\ngtG2E6q0Jqz9xfM55nuiaias12fhDoZ0ODnyCvbhqlCRvm/z8I1gD+NfJpAn\nDK8Jvl6iBT48WXa97pG/S/6HjAolfXz80g+5/WF5bA3stOXJfq1O38bKl+uJ\n0VOsYs7CSnTlDbmn1Xv876zY4qBfF2W85TuPq/B2bbaY3oZh8gNWl4NhY40T\nRwgfTxESwthNyGv4T7ITU54RKXiGR+p6xd+CeIP6Hj3/BC9hrwQRwV2et76k\nwoOJ2bGKi08W/FPBNFrnQqu3CnTM7GX0Xq68B7G3TZJV9WSAmW8f5kSNQh5i\nH9yxkuD9qCmpwMHNa5JBHoAoJ8dVWz8rBcLs1K2omLDZ2MLrDqAwtUX6c06N\nn+LyLn7qbkgT3hoELOx9yu2goyV1k8/oWQQIdn+A0Wj76BquWYbKhWTfmgVg\niolafWwz5ELtlh0JmtXOt8bId3zESoL0HF/dzDeGq8XkpoMYO9YXVnoU5yQ+\nDykUIoDuNaon6POz2Zfic6Z0Oh2ys5ZqLBU4TTrXAAEBvnp44h432AGTnpOw\nerKeyYRzg0HGuyOfXtsdlZmyavelDfaDMtFKGEvASx8d1GvS/I+sPK7PdzMl\n8QMT\r\n=rixK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"08c734c10ebecdcec22cb27e38dd9d3941fbe847","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c21b5c367.0","@material/tab":"7.0.0-canary.c21b5c367.0","@material/base":"7.0.0-canary.c21b5c367.0","@material/animation":"7.0.0-canary.c21b5c367.0","@material/feature-targeting":"7.0.0-canary.c21b5c367.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.c21b5c367.0_1592597505834_0.6512891904269889","host":"s3://npm-registry-packages"}},"7.0.0-canary.bfdd7fd39.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.bfdd7fd39.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.bfdd7fd39.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":"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":"a1f860adeca1ebd8688ead24a0b84b9baf90164c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.bfdd7fd39.0.tgz","fileCount":52,"integrity":"sha512-f3JHwYMs9G+sMXdGskgdPsuFi4/ZSp9ow3yhm8Xawx/dDskNtXW7v/B5qkr5D1bZ/VxB/+71AIHrltofsTGTEg==","signatures":[{"sig":"MEUCIGfNfX6jx8/zAMrskY5QPhDHhTA9HBxpuqiRJpiALG2PAiEAxKpUuiGtKzftQae0N3u7XAnHpqYGmQvZff3rGYtEKcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R4fCRA9TVsSAnZWagAAHagP/RPSWnSqT+fbE+9RKvMO\nv/5rfJk4Zyn3Rf6uaH80Rmx4Q6HHhS2Cc9zUF41Dd5kwcuelJWZmQ6b5JMWB\nDvGRxrqzuHDc4A3OBI8C5Ofd4thtsRG7YMqhSvq+Tz1PoZXU4DLmvfousWzk\n81i9050b26xQ3NwBzwzQJPDMpaykQMnwa/Bc+dk1xNsj64ryAk8mFfXbHItm\nCRFrRyQ+rLKDtFQIXfODYGuwi2B5RVCjyT49tUdj3OxUzcVbgwP/MnPQ4HqR\nmiR5IMBKIIZuqYNq522sAhHHc4IOJ2B+4dKMw/J74oTene6SLE72gOdo0xL+\nm1017wa7dk9dOmQMIfLptEuWcY5Dt0kQv3pgto+MSB9y4WXdPv8fWVg2cG4B\nJhM8x+Pty1CQHjbF9N2lzInVDRoe/NSzDOPAuv5QD6HPFXCSe8new813NGtg\nd4Qx/8UQhed7Zyz2i510Gpv5R0j9W5g3Gbb7k9oosI9aJ19q6U5cZHIuT9Hm\nhh7/lVmdd/kMDH5hMbKoSJfPooWBJ3f3AeGowRSg7ilu2Ir042bIBilvBzOr\n6UHefDr0K2gitoGhVS3lc3IZxDfgIAjy+/nmiLh/9Td8aMRCHE4SzitjgwkW\n4UazYpFT8Fs+i+14QDteml8RJrnC5kOfU/reti8uWNV9OxnOlQZvVo0c2SIS\nUkqD\r\n=3DQ8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b9b865bcb7a8ad91c21f4b1cc433f6a49dc627a2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bfdd7fd39.0","@material/tab":"7.0.0-canary.bfdd7fd39.0","@material/base":"7.0.0-canary.bfdd7fd39.0","@material/animation":"7.0.0-canary.bfdd7fd39.0","@material/feature-targeting":"7.0.0-canary.bfdd7fd39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.bfdd7fd39.0_1592598047063_0.2918798319508429","host":"s3://npm-registry-packages"}},"7.0.0-canary.10b505785.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.10b505785.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.10b505785.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":"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":"cf42212c7108ce9469e5c5f6baf77abcc4d71b52","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.10b505785.0.tgz","fileCount":52,"integrity":"sha512-m4Jl6kidkDK63ubWAptYTPf3ypqvvD7EKlm/oQBT0mR9Kug9CP7tLoVbkZlGBCRTDVe/wPPlwORDb2UERBSTwQ==","signatures":[{"sig":"MEQCIBVzXhx3Zf1G5Whd/7slJ47cCsBOD0uaLODEjU/moEqNAiAUAz+Vqx8lO8OPSFpUn0amrXpIIntJh9zKY5SWMKRL1Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7R52CRA9TVsSAnZWagAAJY8P/R7o9N5Fpt5AWPoKlUjV\nM1qNrhw1bhFVX6p2F1yuVD3Fflr7g/0kNkCvcgxaj12N7kVtKiHV8btqUA10\nWQUUq+WEnjDqDuPqkt1Cur3M0D2ZDJLSIMjzQnYru7z4Gg4n7/FKb5obJ6rE\nbCaFlVBKssxbuhHGy67xSII6y9cs4jP8VjcUJ99eAk33St7PPKD/HXrpRjul\nFu9MS8t7RExkgHbGHGycvarjNnSDT0RwafdFYdHugTAsNYr6xF8x90PeBBv4\nkmmKSYkuSrkgapKnuZDz6uWK7OIZrTJl4sw9HmcWpbbcD064qgaVjvr2VkOU\nfnO6fnBQvYV/6sKVe0tr4zOsNSLAZ/WMhaaCUvq5jl5AfK6+zvDzDyNjyH2O\nkdH/3KF1k0H7Yb51EoGHCpvj1QLp4kj6Pqw4k+MPfYJZVVwfcWFJCh2mSu6w\nyRG2mvQffvMjiTnCfEypzVRojtROmg4t+V/L3vCYFCrftmBmYLmWnQow8px+\nxRKJ71suEZB0Gq8IHcdYzt0jtrXY62Ph3YZf1AtLX6POqXZwwGfv+mFuLiVS\nBRRXF+WfBpoWeCg+JS688yqDeAlz6QxhKYmlCG+BU/qdBeJ0DEOqq9S1dpdn\nZLP5A/GQm7B9M/zWstS/qYxx9uWg3IEaGqG0SL/bnNZw95AMA35g3q10OMtz\nWdnP\r\n=BEqU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ed5923edcb43bfccd9d40cf56cd605eeaab00d1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.10b505785.0","@material/tab":"7.0.0-canary.10b505785.0","@material/base":"7.0.0-canary.10b505785.0","@material/animation":"7.0.0-canary.10b505785.0","@material/feature-targeting":"7.0.0-canary.10b505785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.10b505785.0_1592598133729_0.26463120061158163","host":"s3://npm-registry-packages"}},"7.0.0-canary.6483d3f44.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.6483d3f44.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.6483d3f44.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":"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":"8f0e834621ff1f610d66a0f17d4b0964eae12e5f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.6483d3f44.0.tgz","fileCount":52,"integrity":"sha512-w4DkfQn24J1zuVgttb10P7uP01edMHxY1PqAAMm5UKh/egrlgTEH10z+YYsyIHYdhu5ImiN2MS0znmGGkf4jhA==","signatures":[{"sig":"MEYCIQCZfOYlYABtN/zsQ1z3ub3KGF8wYPiaP+r1M2NDU0ytwAIhAMyT3p2kl65wCBqe95Lor2wqv+PIwKzk4o5GaxkSym3i","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SJECRA9TVsSAnZWagAABu8P/3MlKBluXjFDlY4rgQZ7\npugjtRP57Wqc8Z8KhRtrGsG3ehCDgPHKbBnNDG6hFzD2xzF6NKeAT4ouEQwP\nOX0BolOoLMvMlWErf7e68ZsKwsdStvRSVd7WMzwldcbcCAr3+SnFv01kNoDX\n8fkRKqewvfXgcnNiJlXR5PM846OirRRoVzLuphWGoscZdmWWeB65CpsoXeof\nSeMN82bnsnSq3Ne/I4mHNyDReFIoZKz6CgBCpQTE+wbsReFxDXnQtBDaeLge\nVorDFGh1uvl4TNBmjRJDpHfhyAzHXnYGbN0qFOqsfM7Sv9pHbDOm0mDGxyvc\n6VzOcwxQofNCiE+pLjCLevjfGtNUgs1RDKj0N0C5haydyaTGVS7bpbcgZNgT\n3Z0g2DYEafcwmJSS1uYvi/F7t4EVwfJO1uIXSjSyitBvtpmva/V6Sy07O+Ai\n1hfPgMpzmNr6LrZkyu9nwnSZgChi53KdYfCkf0iY22AqlDODKNiJQiQGWhjJ\nNJym5TGyU7JwUTlYKPbu+wpYFX4UnEksf9EVnKdtHDpgJZDB9iDwlGawbGlV\nlGi2SYy5wvkiL+5plYjwKkBrwu/uKu3+sn5o3pgRnu6N+tmNj5Stvh1b7Afn\nZ45cp701hoDdW/v/PWzmpGAHZqkXGGW3qunAHLyU+Lc9q3aXTo1b4z3n0aFN\n/CBx\r\n=j+WD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5c831da018408423d31c9c4813c507ca591a010f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.6483d3f44.0","@material/tab":"7.0.0-canary.6483d3f44.0","@material/base":"7.0.0-canary.6483d3f44.0","@material/animation":"7.0.0-canary.6483d3f44.0","@material/feature-targeting":"7.0.0-canary.6483d3f44.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.6483d3f44.0_1592599107843_0.3908665138462619","host":"s3://npm-registry-packages"}},"7.0.0-canary.30a74e921.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.30a74e921.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.30a74e921.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":"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":"16dd3a3ef3c899d6a1d21c2ee861a5482ca0a5c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.30a74e921.0.tgz","fileCount":52,"integrity":"sha512-bSYYB+hBpv3duzrfrOgu1ciP4d9Orddy39JWtvfQkNXTVElwxN+4H7qI+hziQnncXDg/clbdueK4+eHNigP0Fg==","signatures":[{"sig":"MEUCIQDRlh6kpeg6z0ach09vljiI51n0urCWqKVC5rX8fTDzCwIgf+Zxe4E0H6csm/G6/t+wujvL1qf9uU5wLlj8LVymLcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SLJCRA9TVsSAnZWagAAie4QAIcj3YXYKbfLEzulxoHN\n9o7ojDEbAm+hhNdQKmWKFTBMTow/S5uzFeY04VDQnVDZLXBqTdJPv2CPhWSA\ndXNkDe1agE73kVH7CApbLzg5ISpoAAx2BXk+KGLosQuP1TyrzeKcUPTKTNqS\nYN6sX+yCDfSUFVK126pdlE84JH1XyGEZFgjgMGcz6ZrzV3hyvqnFXh9BqqAD\n5mdqnCNG3P5QmGTWPmQljD13qBY5zYymR2eRhBiYzHhRbLESJb/hTzSZ+/48\nACPGCiXEqi6XW95cBYEvxPsis0rDimMI2zna8vGoFoHwqs3Vueb29R3uoVtB\nOydxm6ss/t8JK1kUHGZBydkKbhB2MKZUNHVnbydCzQiIewY7sFWrmJ/DLV0i\nlYuNN+1thDt1d7Dhy5RxFwUGnx7c1NfolzzW9RRr4vn9WmN6MnQGyEYgrhgW\nWf0khA/sABz63JOV5lF5u0new9xTxV7PFqArstCf2LLiPHf/VVubpGb0TRP7\nF3XOWRPiHbJHolTar9fyUF8tleS2lyM4WjFeD0zCKVUGFpoQRJWlEeCJag9a\n1uDM4ggHKIWMQ0ybkWm9+D4sruK3D0oJcCe1QoYH4s0I9/5flsc/0vMo26Md\nOaRP6h3AnL2fJCE3GGw+2h/CS5OdBRLY5p67zWtuegAOvXSAKEqxDpkdt/oJ\nTenl\r\n=NX55\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5f983e004147b05efcae5aac51dc16aea4a18a8b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.30a74e921.0","@material/tab":"7.0.0-canary.30a74e921.0","@material/base":"7.0.0-canary.30a74e921.0","@material/animation":"7.0.0-canary.30a74e921.0","@material/feature-targeting":"7.0.0-canary.30a74e921.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.30a74e921.0_1592599240679_0.9538558205141672","host":"s3://npm-registry-packages"}},"7.0.0-canary.c20727498.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.c20727498.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.c20727498.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":"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":"67bd50fa214b642653c86fa7ec0d3030ff51cf8d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.c20727498.0.tgz","fileCount":52,"integrity":"sha512-P1F3u/FtAcK5QGQFpaCoUKpldJLTl+DZGSb4dASeR7bdpSIchjWkwgy5vc9P7F2QZv3/wEuzweUaryGt3hvYJg==","signatures":[{"sig":"MEYCIQDoxbGI0cuPzFSuAvS/zRMo9tfOq93T8cjyeXnsUutEmAIhAMsUoq65oziG/XyPkGOSr6IGP3Isivz+yusTECTJo8zA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SN3CRA9TVsSAnZWagAAnoEP/2D6ufWHk5GH8ot0DBEN\nGSuwZN5HvD36qXPRJLEE0BBMEibszzcmdok83nlyJCL5/bQ3e8o4X1/r6A5h\naaSBcPvF/OGgI/pWtA8udH/7ycRvFhqpMc0hIOV7hd3WGqIUHz+3K0F/frwA\nQe8hLwxuZ7ccg1xb0G7TDWiFptTLTKZWM/K0HuYGrFiG18QAriHZaM4IQOSL\nTudbdOL5DN7FVc5vKEtlCyNB+oW21Ff6slk1oJnXTjvBSI3y265Sz6DVcCbq\nAKAa2+W02VOR3tCzIy8p/TWOxcw09k2UudjkgB9u86Bp1ddvt/sTWqjKzFJp\n8td4RN/KCPaEZlOJuVWVk7tcWfUNgAeT4bCGk8OcZv0BJr6TiMAvifBZnCwy\nZojSKe12dStXvJsQdLVa7M+Z2aamUDW4IZoCfuh30QDYZU5HXKHksYO/ZGna\n8U5/O9XFDyEB8k7ryC/l1Adwpmx6f2sne7yo4mFhlamWg3M6q6f8cFWFB+FZ\nR8PwAAKPR4Ha0by51xkLtLIT3ZiEEkdiHGmhge/YpEc4/q0yT4jrllsARi3M\nvu/1Noy+l1jNwyvVyztMgAitRZgAE9sqn2jKz6B/siyP71K39iwZxCxNL5dM\nu6DSOw2NhM3bnUA3O0yOVdIzHTFxIKf1r5fY4f4rWhSY+AJDPZw3xzc2CFJh\nHesS\r\n=fe6J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f9ac75746f7899d34903c19ff758bcadb9ce2d30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.c20727498.0","@material/tab":"7.0.0-canary.c20727498.0","@material/base":"7.0.0-canary.c20727498.0","@material/animation":"7.0.0-canary.c20727498.0","@material/feature-targeting":"7.0.0-canary.c20727498.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.c20727498.0_1592599414570_0.15189880535336164","host":"s3://npm-registry-packages"}},"7.0.0-canary.4e360ae94.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4e360ae94.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4e360ae94.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":"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":"6caf1c5afb0d812e7ce901998744fc5f84079884","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4e360ae94.0.tgz","fileCount":52,"integrity":"sha512-ZxcT3eTagPGuOBKmRywhlNUTY6fzs0p7r/Jm3iAIcn7oChfFT1mkyhNYJ3ya03Hb5GQMHc5nf6wgZskqUtD7GQ==","signatures":[{"sig":"MEQCICCbUhKuj2X5zgT2okUKh5ZhNSqMYgj4ogDthL2QaSzoAiBU5Bv6nwIpXhKoLs39kGLnYLUMNPBaB/M09ca9rYGQFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SdfCRA9TVsSAnZWagAA1soP/0GovLzQJPPkOpffsTI7\n4q1KenB/3qQ8KQsY+RTlgw4rv81LQj7p7AyBujmPUtYHOkHOsB3M9A19gow7\nk7hgMKUazoQn3TE8gvnB9dE3wtBybb96wBvwZbj1LzoB33FBZPdVnw5gU17n\naTSxVf/I/L7Kuhe5CX6eTFoTGXKChWqXX/xpfwRS0o9YI0fk0fLb6Qa5d3O9\nBEOOTW5FzDFvji8hqKGqADU9hberRMa+GLLa0Km6oYM3WxUplXstL+qi/rTq\neeCFRbw3M1ek8MF+nVRrrSTBD+/CXTJJYB/LBbWwMqAzLbG5e3G2dss0ktqs\nccmFgrPP0yuYBs6MRSM2IoHEEnA7fSa22O0mzZ2Nv6EOsW6onXH3LDfeq48d\na+d921CjMGP7QgQCL5/DWlea+D3XiLUKrskNu91TKavMxtkzMoy6fm3TdLMh\nTNjvC0v7Wpb5ZVwqD7/SzpndnuVWskZKs5iOdizCECBNovHoOCMU5SSguCQg\n3uux5vUctKQ1s/t+amFm2GyRGR7YC+q9jEuV+SuD6OF/K1pYZx3PEPcN9Iem\nrWir8Y8xsqFlntENbJEl2+NtOzHrHbadLjILUWKz5QoNnYqyxkOs2uRp4GMi\nCeuMooO3FfPxQ7/S4xa5ZOgtPPiIR75UGk1defXCgIYPPhIk/eSY98v4m6mx\nLXzH\r\n=5gBu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7bbb3adc3aa84c4095304613145fa53862e147a7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4e360ae94.0","@material/tab":"7.0.0-canary.4e360ae94.0","@material/base":"7.0.0-canary.4e360ae94.0","@material/animation":"7.0.0-canary.4e360ae94.0","@material/feature-targeting":"7.0.0-canary.4e360ae94.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4e360ae94.0_1592600414690_0.2940464955526607","host":"s3://npm-registry-packages"}},"7.0.0-canary.8550fa53b.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8550fa53b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8550fa53b.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":"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":"3e36873ebae2681fbd3c03faf3d6555895d08302","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8550fa53b.0.tgz","fileCount":52,"integrity":"sha512-CocEx6GfDNBU3ICeJiJuFMkpC18SgMSKpDMIRHQSAoybBtNzA6DQD9It8ST85lUg6KNAzXI/rYsK4ZN+CIcg2Q==","signatures":[{"sig":"MEUCIQDImNV5FmQSxOE8heuckgXb5irLIsbgkdKm/NYiFkgnogIgZxwl6yaEop/yKs++6wdVKQWcS7O3HFi1A3mvtZCZHMU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7SfzCRA9TVsSAnZWagAA3PkP/2o6uDYfgl4VqRUJ8TbT\n0fedEdb0C1uNFxhLAoL3qfrbZIKyugOLGZtJz+K5wTWUggpvGkhO4J6zFPX8\njqyiDNxwQ1zlbF0xTxPqmHPZf07JRjaGYoagMe6mODJb1Z73VP/hwZLCzi+G\n4NLCufwpH6uLaAolMT4/ES5AtJghOCPv37OMqo47OisjixemudjdpLXWWbp0\nIJDILKaHT19ZtZ6OYNbwgWmLvMtHzWYieC08swmv/flU0m24zx3XgSfpfI8b\nFNbvAgbgTXLv66aHhurjdfji1SYq8xJN/dG3oAnNcu0fB9+/zILNff1WZyex\nYJ1LBkcuEp2E9VOTZ/helRv4WN/1C8QtsAfh8hofDNuYwOFBobqocOk0xzo7\nsmiPIX9bZbk4ce9q3rN9yhlb456DXCOA6+rtmrJ2rm0I8pykjaAOZK509JIV\nN+3dpVRKT4Wl/GTZWccfHEQeCQvm4PTtBJfwDJ6H020roUXVFA2o7UXGUrgG\nfXqglqvQc/WvdoG01bbY+9aI37fTVAgx2rEaB9kXLFOYY8jvtv6GCuPI8lG8\negusP8SNqon4/uZKM+g3CzJi31li5H0TgfgaMkxLcuXjKVYIHP71B8g0dZs3\ns6nJkH3/oJO6rze80c7I43j8WMM06t1rYKs6SHjTz1pdDVudtCTeaErFAqKb\nLFUy\r\n=gbxA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9d8529cbd579dccb2470a1f19fac57883cb2a5ef","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8550fa53b.0","@material/tab":"7.0.0-canary.8550fa53b.0","@material/base":"7.0.0-canary.8550fa53b.0","@material/animation":"7.0.0-canary.8550fa53b.0","@material/feature-targeting":"7.0.0-canary.8550fa53b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8550fa53b.0_1592600562587_0.6231145004690481","host":"s3://npm-registry-packages"}},"7.0.0-canary.93ade142e.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.93ade142e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.93ade142e.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":"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":"323bd90045ccda07d73ed870e9d4071d9c9ab9a1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.93ade142e.0.tgz","fileCount":52,"integrity":"sha512-AiRkscSfV7q0HA/97j+IVwGL5bK9Xj7S//1DEuQQS9b6hzsqEWSNILRRupimw/VVxjuDsWyg92YOizmwcxIfpg==","signatures":[{"sig":"MEYCIQCLj6fLAiVXhxlSqo3fZ9+Fb2N1g8Ko0veOcemoJeyrtwIhAMECe2IaUznG6nWhYHEX2mIL/bpRYEOhaV8theFMtwDr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7Sg4CRA9TVsSAnZWagAAyjIP/2db3LqhBgBt7eeL4ycs\nNcSrcOFayPM2v044FFd6EsdzgYIQHxoYFpWDzcYHEF2vIYJFHRXfcQ+xJTja\nUN66pGadb41pHwOqtDxOwybc6azPWEOCxDeOa1pZFhCD8/NK2Q6baEE81MBf\n2mwEgd//pO5ieMIV5FZaXQbwb0tGpl0X3UzAU73IGIonljD6Lqi9gApxHM8s\nZsL5dX51WMwwZ4qVUXcWSxq3ELL2AhppSeYZSU/zIlmVSv02qIb8e7AUV0TP\ntAB2sU7Ty28OKZNWEz+WZCdcxCJoonvsIjoPeTyp/fzGCVu4Y3QxsR5xhqvD\nVFr4Xzy+1WPv30lKJm08YJGizvrI6N5K2MGRjPnUQkfdvTK5kIcGMvZiYc76\nmxlE2q1SENrqWt+QfwNSyUDrUIKwdLxB24ASzm3MyMo0HmfJJ4O1FtenvOeG\n5hO7pAJ5VYqq0bQwhaW5dkiGfDyw7RDWkFxUJNh0xgjfzaYH1BXyGulDiLe/\nNsg4KeGgwE8/l0je6lvKeDsDBPdD0BIz5cvq7gZLSGwwN8T0Bjo0B7cXTvCU\nLBt9TJeb2jJS2R9e5znJl8x5EwtY2Fdh4qmeykfsQEgc7Tdy0A+yoGFjkn0s\nGTgRN2W9uWjjDLf50NS2KdTy90EJRcQQX7ybqIomjbF9XWCXmvG0RtmC2o/o\nuINV\r\n=Jb8J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"fe392b7ba8c7033e5614eb91a20bdf2e6d7d7936","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.93ade142e.0","@material/tab":"7.0.0-canary.93ade142e.0","@material/base":"7.0.0-canary.93ade142e.0","@material/animation":"7.0.0-canary.93ade142e.0","@material/feature-targeting":"7.0.0-canary.93ade142e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.93ade142e.0_1592600632242_0.3212145119938532","host":"s3://npm-registry-packages"}},"7.0.0-canary.a0032f5bb.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a0032f5bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a0032f5bb.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":"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":"4393c9d88e41f74cece7c698979444e1aab25a82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a0032f5bb.0.tgz","fileCount":52,"integrity":"sha512-UOeJbQqnGFHsYipFXpB8RkEYhhx62QUu3hJ2WGI1jIuWbREe/6cbe0fmrI1yGJRP6xZm+voaS4qaNWo4prOMIg==","signatures":[{"sig":"MEUCIH+KOKoR9Getbeo3SA1aB+TH7PMfB0WvfIhVphjryzFOAiEAiqN4/zJ6EUPbZvoUVycYPN6dCMibpJNH6RFrujFr0/4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S4fCRA9TVsSAnZWagAAZu8P/A95HnsiZaPGTT6TTbSV\nc2rMxUs12GRMPbDG5KDRQbpmg9ZM3/q+Rq6nLkqsv23p/CQkHk9uM4QRFlbg\nv3XAgAmLmBGWHsB951C8r7VksZSq8vZUozf3RbWVG/chdhqkLDITY0y8sv0d\nslAGoVfkApQO5fNtnc+XBtiUzLD8KmcGX6vcjBuwYSESTdck8fFoHeSxU8B3\nIWP20NY/xmSmcSSTscU8+8JA37VSoMdIC09hEcoKAy+TpF3nodb4VPPJlB0q\n7stp8ZbEe9G4/HF/Y1OKohFH8+jDEflirmvN2riIyjwqXRoC37GP0g4S8b4U\nTd62FzrGxdkUtqjnAiVMOJNxnNYKev5wJ5LlddS2o48r7wpqL7Ou6JgJ1HMf\nagsNEenZACqpx5/k0Q7vN1fRHgwhjMwbsUj2+3DpF3L9/a4OCdUd88QE9wdB\n/9w9C3I6ZgC9hCfD3gdlBBbF2lnNRfo7U2ZocddqvEAdT/6F9aTQlPNwOWX+\n0icq5WizbIHaNsLGGJjwvVNWNrgawNINqOWVQOV6boyK7ZBsKhMe73ON3C0E\n7Tnks60jrkeYjXsr+upRyOWFZmXE8Awl/ghmWqZzr63JGzPvRVEH8Jh251mD\n/Aa/6BNpZcpUn366PzENl8X8u3OW/sopjx70eUv0CHcEm8iH20BdYlYs1r6x\n0R3z\r\n=iKqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8c0789d8c409d91f7f4e13675ac80e0f355bac02","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a0032f5bb.0","@material/tab":"7.0.0-canary.a0032f5bb.0","@material/base":"7.0.0-canary.a0032f5bb.0","@material/animation":"7.0.0-canary.a0032f5bb.0","@material/feature-targeting":"7.0.0-canary.a0032f5bb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a0032f5bb.0_1592602143047_0.29214061958567483","host":"s3://npm-registry-packages"}},"7.0.0-canary.3f342e721.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.3f342e721.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.3f342e721.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":"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":"52ad37d0850260e591a5933a39b14e0e41677de7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.3f342e721.0.tgz","fileCount":52,"integrity":"sha512-2zP6YwkfZLbZGTsaT1cBjCiBzBdRGA8NWTt6sEeEe1RSkl+XdL/S8ioyzeYidfnoUhjZLS4f3Zua/O3/2QQDBQ==","signatures":[{"sig":"MEUCIQCBTx8q8EsfeF6M7fF/emuqR22OSOzzNVWgS1utDfcMoAIgOvOSsP+mX4aqYsyCMuPDwd7XKVBay4M/zOvtxk4iaG8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S6gCRA9TVsSAnZWagAAeswQAIXHtjEzguvridkov28K\nORI7J0t6PCyW2lnlYsM7SAMp0bZ2r31Zf55kuy902nZkbZEWiziQFN2s/UyN\nimYnyEm5YvwuhLR/bxb5KCqzlXERGiH+p9KkX34jlYMlMa69GxR+k8ZFPiFA\nvWfEsXDKZQwLOSeXmEUCvsJRr879ytGGnGHa8Fcb+nWQDpUiJeZx39MTaeXz\n4l66a0mIrWMjWavpmxNU8YDsgl4lVrAzYjmzCuTE9JfhEdOEShI2sbVFio4q\nFYfC0oAMqT42hVnZfcTQkVL3YABe/dDTvmS/6sPLnVBpgSfpdFF8/rXXIAoS\n91y9HGK8hLSTkAksEP4n0xq1hFEOrxMqw9k/qBmy+mvPP9a2Qf8P1doppeaO\ntNxOQI8l/TH2mgZdXqkKIIr8nkh6ThURoK2/8qpbRlcr+UKlKPr11lrrev17\neYxqKnwdxAIUCap9KCK0bSGwT99/n0gepzq8nnc2f/2il29GIqhUV0fNPBb1\nQen9eySGSbCE09FuKK8ynEm7BjBcy/of9u6MWedvq/IbuXkXa8NrZb/TDTT8\ny4JnZBVNHlsP2XeyPvflhIpRxwtk5Tyk9oxLm8gVPyhmo/3vpVJda99zWv3J\nTZCD0W3yDItyCUGNT/yN9eVO8oUl0OD6sr4FHHRMtXBEgX7Fgl8X16ORwve6\n55qP\r\n=dNAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e972042c8ae08ecc8469492707d55d647e3495e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.3f342e721.0","@material/tab":"7.0.0-canary.3f342e721.0","@material/base":"7.0.0-canary.3f342e721.0","@material/animation":"7.0.0-canary.3f342e721.0","@material/feature-targeting":"7.0.0-canary.3f342e721.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.3f342e721.0_1592602271895_0.9757140434996496","host":"s3://npm-registry-packages"}},"7.0.0-canary.ff89457cc.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ff89457cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ff89457cc.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":"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":"d5c6b78be9997df582279a5de9d8cd366576a210","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ff89457cc.0.tgz","fileCount":52,"integrity":"sha512-CntD6fzpwAxtK04UpnpstEdFynzaYb90W1CiudWxwXXbNtwfR1FLZcoGAtAi9LIiWA0HPGWVUELPRWQhnbV2+g==","signatures":[{"sig":"MEUCIB9I2BfmvZHiKf6BfchnI2TTte3vQpV4wnfZbfG9j8VnAiEAz65+CikfzleFsBvoKam6SV92ACVdRVLBL9T7Ir3cQc0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S7bCRA9TVsSAnZWagAAWVEP+wV53zVEcwUX9iEU2rnT\nwsP+Y8AX1c9eahLqlHaVu6U0W3K6hMbxT44iR7YEAbuXtMgVcujMUoDdajal\n8vLWDsZxaecg281YT4hrIPPehnadEMuxQrj1ZJSd0D34bJmsN2//RsBPEUW4\nM9fmIHeyNpdV5Uz8Xl2A909asKV03+aSPLss5AwKovYjtAcc/Y2EqLIVfJkO\nH+VJ4I98GVhCnodSyXG2yXRvXVrnX/+9HJZN3boBJ49idejqGmNzqbVQYEHX\nEHwWo2oRbSrPaWgxGgpaL1yYcdIQszomjsAQelcwm5r3jJXjiRsvTQr8nxkA\nzvTNtg0v5PB1tcuL+kQ8yF+9TuxFvZbKjLscL+hMMjCKLFUSI0P1IyGKZr66\nEeEpFI/DQLwZSNmpB/giva/VwIJIs2507qfoBLvto/hKB/tpdE2m3OjqT43h\nCpsxaE9Zb1gkiT38h+Txf3ozAjXrtDyzl1rZIAvf4uEFxlRJ5Ke3PXlzAxl4\n2qpMSN9IhyKii7bhFz7B/StJ/OAtrv7UBKNtO66u/ZhF128FkpcRxTaQBWsF\nQhZ2HLT78bBzjrwpNVyXji85VTbaAckFEDFiIuGMbJBZb9A8nx2zoz3xO0v+\nhe/NX+sVV4lHrBHmzCklj8wdpAwKjh+JhRqZN4IuZzHjhzlfsPovvvgOg9HT\nkLID\r\n=ejF6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1a3ec64383e8afdd818b5edfb74f32f6acebd044","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ff89457cc.0","@material/tab":"7.0.0-canary.ff89457cc.0","@material/base":"7.0.0-canary.ff89457cc.0","@material/animation":"7.0.0-canary.ff89457cc.0","@material/feature-targeting":"7.0.0-canary.ff89457cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ff89457cc.0_1592602331177_0.33528400674869396","host":"s3://npm-registry-packages"}},"7.0.0-canary.4a1855cf8.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4a1855cf8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4a1855cf8.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":"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":"1a6975d08de6ea86013ed6cd95e656fe0deefda6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4a1855cf8.0.tgz","fileCount":52,"integrity":"sha512-VuOFyk+/s+HM3+AMbxQbIbiDwOJjsFTvrn/y1cMstcsEnBnc/txpxKxKALSyrERiTymPtGjmF4aCUYO9KnnBJA==","signatures":[{"sig":"MEUCIQCTYDG7tnoudh1ly2U/EP1/zGy61A0jUtz7MhlTqUoELQIgTBVLDi0zZ7tjhak89IWMpsXuTQkOQbCf/l9L6UqFUyw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe7S9+CRA9TVsSAnZWagAAMjsQAIltvAmC+dFZgXIMmwsf\n7fxERFy4CR7hWd7Fex3Y70M9yOcpMmapo7yOOglxcNkChDUSux/qDof+Vpfr\nrxGgy7yN95g6Kz2ZcWEEZlxiSmsHA6aWiLcdDysaUvBRTUHqBRMUPSvkPKPZ\nBEK2GaI77xRvDaL8zAVS1ELKlj9DZV78NGokKAhwzNAWI5NzagIHUWJXWTgF\npalTShgK8ZtNNWdTjEgROtI4XgZVLHGLnDmUfE7fEA92/7X8ImRLvdT0WnEe\ne3CgSRo7L1SdZlVZkTrZNw8WvlyUnDCiRbarcWhboAnu9jW1sm2ZyO60+4Hp\nPnEFIpCRoCmduyE3c+GfnZVEDw4/KNEkJLAjmA4atcOw7WjJ+hB1QEiSJg2s\nIB6zpk3x/ixrbboVib0kmk+uMochLol0ih657OgsSLSJ70MyqmWW0SRXZOp7\nnyFejZaWKLj/DxRmHDNhZ0zeqhVx0R2DZ2xNgbxQX9OkWfcvo9fF4UHj60Wk\nkonswOImTd/XiePgopdN9XIIf34yF4qqpKMcpkaYSn9D8F4Q5nLc99N3KHg+\no+CwTwMIEZ+Kxyuo6M0bqSbT+NSNIrVfgGYPw1y2iI/XuRdJBoutKfBIX9Zj\nvkOotICltPbeKEtZSnX+FwIDLcUOijBbnVcCNFE9mLCumdLSnQzyQ2Ss0tbG\nC7Zz\r\n=2kYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"eaeac5e820cdb30fcedba281da8c2c4a846f0e73","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4a1855cf8.0","@material/tab":"7.0.0-canary.4a1855cf8.0","@material/base":"7.0.0-canary.4a1855cf8.0","@material/animation":"7.0.0-canary.4a1855cf8.0","@material/feature-targeting":"7.0.0-canary.4a1855cf8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4a1855cf8.0_1592602494616_0.10490765041411332","host":"s3://npm-registry-packages"}},"7.0.0-canary.8602f1b4d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.8602f1b4d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.8602f1b4d.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":"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":"066494693b7846f0d21eccbafa8ddd08b81ff024","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.8602f1b4d.0.tgz","fileCount":52,"integrity":"sha512-RJhSDK+TpqCVP5KdXr/uOmFCiUSFVItokWQoU+SJPbQHX4h3vwVMXUt0ZtO4gaJU0gOJGJif2+sd9XnwTe0QLw==","signatures":[{"sig":"MEUCIQDHdbdAhiHDJXo9cMmkNGXc35zppC81vQSlikECdkRP8AIgK84o0FFZlX/OeK+dmscWTJ0hPAOCr5742tR4vabNt+8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8OlSCRA9TVsSAnZWagAAPAoQAI7Ekwuwkc/U3iKTBzFI\n1YYR2OjSN/Pvg8hQBJxRbukWQmjaaXr/Py6s/XpHGkeULPlqFfeOIwfNubgz\nRtSF6SFU97xrJO9dZH5K9bEdQXMpfjueWQFHPDnjuFeeur+t6Uxu0wb26x8q\nY0iXTY7R3fCCnhm3vsdHcQgtH9xDK7VG+knEGYXFt9EOGpK9RrAD17lVf4sM\nAkcl1/+g5cM5664SuKy9YiJ4D3aitvmqKm3eawqt+5XO2SOkqKgetnZmiF9l\nU4ZYIAagRac2WndgmWL+GDyOiyZVWFy7vrs8FecWpByhJYyBo9iWPe1hwwle\nEdbWXyPMy5haTwrdkrIYjvjQZfj+n+p680QUmKsix1J8j3PFgD4JFes+sO/I\nztpqx2tJekrGWJlZmUTYZlZuDMiV6dS2z8ty95Wk6FGVxVG51iKRhqYMKfNb\n1jtjTtP62FFTx0+lKyLNNW3mJfUmSanpuMwFII3VW1gAGAcB1p+ptiJEClEG\nH3mxoKv3AfwNHQdex4lCyCDPUh2ZwcVylMuVGopQCMikv+kzJzBABi7ADIvv\nGqbZH4/OEglxDiVlIQp5N3dWkQ6HwoWVLtFsBB3B0UimVUPU9+nCMX9KSQ4i\nK1RUQPkYgqjH4MGQG4Kb+vlfBi2M2QV42tRtvaGcjMj/7LX46wnl7mg/Uq92\nX645\r\n=k/F3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"07f6372c5a2f6f8add971db62aba74793d912f70","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.8602f1b4d.0","@material/tab":"7.0.0-canary.8602f1b4d.0","@material/base":"7.0.0-canary.8602f1b4d.0","@material/animation":"7.0.0-canary.8602f1b4d.0","@material/feature-targeting":"7.0.0-canary.8602f1b4d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.8602f1b4d.0_1592846674230_0.867601617941679","host":"s3://npm-registry-packages"}},"7.0.0-canary.69f9f0982.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.69f9f0982.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.69f9f0982.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":"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":"7ecc3097366a6b6fc1a69ad2ea7c4f80a9ca977f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.69f9f0982.0.tgz","fileCount":52,"integrity":"sha512-6LZzwSM2WDVLWXFRzBjTO4Va1ZSy5/89NDPfxFbjSOYLeZEg92ncH6JrXEB+B7eDSZ2RTG2TVaDdb7K/QIClqg==","signatures":[{"sig":"MEQCIEvG+/9Zv6EuF96d+oQGpQ+SI4G22Fl8I/m3yT+I4jvkAiBYee5lYH4vQx/mDKsoB9CSOZhDYa7GYbnRbqX0nDccCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8R9xCRA9TVsSAnZWagAAdfAQAI2tVITB0uKHvYFgyniN\nJRdgkrovZ6HWEwnI4JmjcHWLVLhEMhBGGPG2I3aAJdHaUx0vUj45M7NnfGeN\nzLDmUKy31j9tdFGJ55FifTmMBddyNjGzljArHhB87J1j2Uho0mRiJ7MntC0z\nCOCe3y1jCbvJclI9OYSSFuDgM4/cyYUo5ViWGFo/+n0T1aV5WFJahc336MPj\nLEsPVomdD2XM1h2XX1wurH1Y21b7YMqZTPI4+hkS8SYPTR6cs6kugF+LAwUT\nLF2I42t8fYYKpxy44wpcgUxxt2bTG230D2LUsv+/CDBj+30r0BIm2/x5+4dU\nJAQzJoobc/KvLZmNde3DRdPownJAZlFqC1roov0r3qp6zKBsl1Tm/RLDVT64\nirbOqtOXxvsSR8g99B9zws1/B87k1GIhME2cMnWZjsveIT10oN/w+TYugmXf\ngzHR5dQu3e0+USPXqp0yhjbHOSWY2wYnHKodkLdf3mEDC2VKn3kUMkLAdOjI\nAjSYIKHhiOZqJ9dfCLWJ3REoEZOEFBO5lZDargOS7OWA7Chjig88FHKSDzwV\nTYoXG2WVNHnFt79ydN1ybxN27vsaR6AJArRCFfo3E5CRB6nkF966XwQI9lcT\nijTUGiNsKiVO4N0BtF04CgUIGAXq90sZ1wrDxgC8ukHghU1rqRs9r93+4S/W\njtbR\r\n=IyNw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3aa0430a8c5f21a2aa9f3d54afe07b1c1b1cac09","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.69f9f0982.0","@material/tab":"7.0.0-canary.69f9f0982.0","@material/base":"7.0.0-canary.69f9f0982.0","@material/animation":"7.0.0-canary.69f9f0982.0","@material/feature-targeting":"7.0.0-canary.69f9f0982.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.69f9f0982.0_1592860529134_0.8709232934100091","host":"s3://npm-registry-packages"}},"7.0.0-canary.369a293f0.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.369a293f0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.369a293f0.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":"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":"2cd3814bf7c322e0573b546a3eb4a941d691a41d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.369a293f0.0.tgz","fileCount":52,"integrity":"sha512-XCDdxgPOo6qqbxraOrrSsm6vdggSpIr4JqdcHdhQm0iPCOswuTBKTHu06XkON+mKOSmZUUjykNl9EfcOlE373g==","signatures":[{"sig":"MEQCIDgtucUvYSDa/XWB2M1uvgyjAcpt6M5NJUoaR9Om56S/AiBe8CEB+0RTyaQidTB9V9FnpkxlFWftE0gcdQTlfRrXWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SATCRA9TVsSAnZWagAAp3UP/3UnaaBExeC7xa9B7ZRf\nAAcIca/OLabPqBVk9Ol716zJgfNXtg/h6Qk4FVo8hd0MaMGVLB2qsF0Kslry\nybuQpqcHljm0gKgnaYFoSntq64N5vKDNi4ipq5DIx71Wp0DW452/ZFZ/bC4x\nHS8E3zL8eBmWIzGp1JQfyWqkW6O5R/YkT1a4bsqPbUHCTgUm1Z5z1RFcQXQK\njMpaKyJdNOORVGUQ9qYCMS4uGDljnWQhYleR7rE4ObNs3fK72yacLRF7OYMc\nmi5hqKE1b/f8R8bIM6R5r0icRheZtSoTpQziaF5zBzPRsBGlj36Y8UPDpcJj\n1cL4/l5eeDP7yjRvfhcHgSDg7hFMjorQbkitLDiiaRKPQUZ5GkR45GTNyIBB\nTTbs+u+riSLci/dueXRqxhSy5ZJSwmrwA/RNTs3QKyJwqne/vvF5JrLeQXwp\nSZqVbVN5R9GCCKNBbXdsVoXdr2AiNX+jjk/uWT77KoZZ9dwfd4LMsRPEBaKd\nQNlqQq4KNY9RgZRYmU7IuBpF7nQfc1xO5kP3UP5JDqwaCfY/bP2m7qheFSeJ\n5ynx9iqrouw79K2A7SCPuhDcbaQuplvpUJHVj9qBioR43kQwBB0iM1w/sSlS\n7l8kxWmOhxSiUEQGUr5XdNnalQryL31gZXvj/pA9zcym2p5+7g6qizAPwXC9\nJgcS\r\n=wUFp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4b9943a16a4fab61aaa8f5dad0d4f7aecee862f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.369a293f0.0","@material/tab":"7.0.0-canary.369a293f0.0","@material/base":"7.0.0-canary.369a293f0.0","@material/animation":"7.0.0-canary.369a293f0.0","@material/feature-targeting":"7.0.0-canary.369a293f0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.369a293f0.0_1592860690640_0.5923988259268855","host":"s3://npm-registry-packages"}},"7.0.0-canary.f1432b5c6.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.f1432b5c6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.f1432b5c6.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":"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":"fcc1c212093f3f3536f5d508d1837eede98adc82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.f1432b5c6.0.tgz","fileCount":52,"integrity":"sha512-BEYhfBbYnCHDv5wAczR5h5tNeAzVBNbrJSYQS7PoqspFJS+lbdqUUajjllmgh8CbPaJJCDyv0ROs1S+c/2RyMw==","signatures":[{"sig":"MEQCIDCH9avEVwLZUd2MANim9DC8RWyiwCWGD1antc3x2WY6AiBhZib65zzGfDn2079xqwMbVMDMnMvuMyTgDLDw0IBHJg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SHtCRA9TVsSAnZWagAAkEcQAIVMlLcTQQ1N3ldcwyPs\nvMb0qQOgWgu3B3dm22xdGKojAPMa7ywd2W3+oSs8jr8HA3QOaAH59t5Nkje5\nAwvAW7IV0/zc2aoWFtQU8985/icJlGTd+rcJblQOqZBOrLuaaFdNwdbminYH\naopTfd8GyKAxNrFxANQ+oyZSJx83yKXgDG5yoebBROIMOGj7/kcF/suMPkdT\nkWBDRUBsstligwsnNAINzC1c1uEjuZ53hUDB8ug43xRmpc2zdKsyNeRsprQV\nUXa/RW12r6iuDXDy7o9PsCg7x9t7NwfvtqoDtM1V5c+qQJrB841Xo/NM0LsW\nYJnfwP8YWC8D0Ha8vtkw7oWHxWRkJyLTlTLRinZg2BRHyrgfXDk0h5McZopf\n6ymC5Kel65ayFGF7hqRljjYnmDm+f/5QEesc2TnSfT4/XE4eRmFa3TPKUz7q\nq1O/Mfm9nIxhmh5W9pX1rY6OB1jWJl3Y3d7aVbZEoqlkaCBXbIUIKywV4CXA\nbp3P5mTrvw+h5vsv/hQojk0SkJrFW/tHz5UU44Ni0uxxz2fNoWZVQfGZhUid\nqsiXI11MZiTkfmUKFI3nufH0xgbWwR7uoDPeb1XPws99NV5JZOXN4Ib+xzjQ\nrhZCaONu6LtF2F2lYW+9rzBKAULWrHlQy6i4LLe6oK6Z+EgBrFQ3m3Iu2B8+\n+Efu\r\n=ybBE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9987341fcee9f9c549490bf6cf1a6ce57b5a83e4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f1432b5c6.0","@material/tab":"7.0.0-canary.f1432b5c6.0","@material/base":"7.0.0-canary.f1432b5c6.0","@material/animation":"7.0.0-canary.f1432b5c6.0","@material/feature-targeting":"7.0.0-canary.f1432b5c6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.f1432b5c6.0_1592861165306_0.38972489706153435","host":"s3://npm-registry-packages"}},"7.0.0-canary.4757a16b4.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.4757a16b4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.4757a16b4.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":"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":"4641beda35bf9b5432d7c04e0dc28a3d0fd7d3f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.4757a16b4.0.tgz","fileCount":52,"integrity":"sha512-dwentb7DKENWULmpXsFF0TK5X6+vooWCbyV6sGot6gTbRve3oPzYvrG9qzGr1IQ0ohQrX9DcnVvohhM9d3/9JA==","signatures":[{"sig":"MEUCIEx77fB8jZ/lHxMdSEh+BAxZJRAVBv3JEofX+iZutuB7AiEAqNFPuiE1CunwqeMnpaiHFuS6DmqYaOj3cvu09rz7+F0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8SiLCRA9TVsSAnZWagAA+skP/jfa00FVqjyE3bVb9Dod\nJ0e5Dyr95tvWqOve2QcMrtr8G/SPzQ3XogsP3kELfVhDtNOCf6N4GrlLDqKC\nKSsI0/vBhDIrR+0x+3/f5wbfuCzwVeTC+tnpwirFpO8Dll1ZBYdILnGX1YAf\nnbiFT0kYWG0ybCRRIYaPBb58x07kEZfqc5+/PV0vYxhuW+Xk05W2kulqTXfV\nhcbeZRrqi9kujfplwDeEhqr6XgHOKoxm/2WWuUQKQbxDWYfajLtktrWy+8S2\nv9PxpTvh1+BbXuw8DphbD4w76sLMmhv2rLDRZryiUhX/Q9D/ybDtFXb0gdNZ\nOE2GGNccTQzDjaCWSyqXcvvifvroVKvufoRisKrkHaMySUQ5mbeJ+A04bqLD\nP6zEbHp0VkNkzek3xB5ZRITjIPMigFFRzy3aW7p5FL6i9/Q4vfnE0g/2SYKO\nQYgsd8+rcWCpy1TZji4oiSreiYhWAqGfpsSb6ph+0yBs6dy6f069wCfIOVfA\nUzw6a5eg7UIYoawPTn/dDNNb8pAFHmdRAvJKIe15PiZnOpRvDvX5hpB20c2O\nZ+4UkUfCGmqfjLZjj4rYzC1h6t5ZrhWY3aK7+o7o/2CbI1EggFAg1Yr64ikm\npVNCKAn7/cPbia0/Q7RShUU1qqhRlA42cOsEA9x1BNKjMIdAos6j3A6V8yg+\nbPEW\r\n=Ow8C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"50b08262743d25109a9cd3d4c87d82d0631d9c79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.4757a16b4.0","@material/tab":"7.0.0-canary.4757a16b4.0","@material/base":"7.0.0-canary.4757a16b4.0","@material/animation":"7.0.0-canary.4757a16b4.0","@material/feature-targeting":"7.0.0-canary.4757a16b4.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.4757a16b4.0_1592862858559_0.22703289507815105","host":"s3://npm-registry-packages"}},"7.0.0-canary.f8f472762.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.f8f472762.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.f8f472762.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":"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":"c5ca4cc5ab363509b8a8cea045ddb3de7375dc28","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.f8f472762.0.tgz","fileCount":52,"integrity":"sha512-atuUBfUc0hlqsSqCgIF6LEpioehZ3n0240MiA8Zd+lkCidO5zMgfoyEHdJG41XV0hyz9jDGYtJYO/ZbEmdA/Nw==","signatures":[{"sig":"MEUCIH2sccG0JFiKcb2ao/UoNCmTcRtIBR1lf8CWLSntXPu0AiEArDm4ENuky22pwRn28x4fxxnVusJu0z61goAaYqjeqPk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8Sl7CRA9TVsSAnZWagAA6GkQAItC6T5Z83LWgYVGuBqP\nXuz6PZk2qw+fmnH1AN4DDMUN5JYhWNxYhZKU5j1QdzoIZNMXUR/XIhxkM4B5\n2tiWuExdPHgR3seeuIO+yOkhtvjf9cdA4utC0xu6Gj3OYfiu5UTnjqely4Ql\nWbOdEP/+NZDMD1TsLWUZmRsYMmO6R02c/bxqfA+P6ThiS+nIysRitVWR69sU\n5w+oKMKfvM40qjNpILOJRP1SY3eYwQGNk0MAOaSHqw0SLsnaov3tDR8Heh7v\nLSf12eWeveNaNP1E4UUDZs6hozptjO2Z64Q7ddaVhhlo/J3fMoPh3M5yxbkc\ngfT3LbjvxXYgwVkzmFUxXATTPO/Y8d6l3i3/zSYFkjbCqkbvLaPN1P3cGsIm\npPSThmn3rf9n46TpMy28sh6AGjIAhCIhCVoU3Kb2fM0SBCx98lqsjC4a5zJf\natEmyD0xuVQ3UxvXBBH8yayfAikWbsN+d8M5128hEMVEgW3nSWh285PxCWiY\n7ulLpJ1HF1MNXWsB8IwJr2txQ9QaaGQtw6flFIdg5+PD8+GGyuTgXzHAsf7S\n7WzOj7tRH16w9DrBSxmsEDl6BJWpTZSz6ZJuvJGj/S/VFDaaS9vpBASf2YuM\nPOK8dM/12RtbY21bfBkBmueLutyGLDlLeZvg4eWM0JRsfIwvl0G8CUQjZwWr\nIB+a\r\n=qfe3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b72e40a4e5c11a670f3423da9ae1ab370f088535","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.f8f472762.0","@material/tab":"7.0.0-canary.f8f472762.0","@material/base":"7.0.0-canary.f8f472762.0","@material/animation":"7.0.0-canary.f8f472762.0","@material/feature-targeting":"7.0.0-canary.f8f472762.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.f8f472762.0_1592863098763_0.6517921165011322","host":"s3://npm-registry-packages"}},"7.0.0-canary.7e4d55c34.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.7e4d55c34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.7e4d55c34.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":"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":"7b036e94fb5434c35cbf103565ad1ca4f47205d8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.7e4d55c34.0.tgz","fileCount":52,"integrity":"sha512-pbkcRIr00THyFCnAii6YvgQAIDh4C+cnPizk7w4oN3MftwqO3dpwz7Cr+AqEJc4oonUYUEAHnEU2zVJQZZs/tQ==","signatures":[{"sig":"MEQCIGb1csG9zyozSxT0ql/G1oynaAjmZrMNWEo60bmdYJ9TAiAnv4AGhVWi7kRk9lvmMyLtb/Wijm5G3fBI352kTx8Zng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321629,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8TD7CRA9TVsSAnZWagAAUp8P/3Ab7mUcvisi04hiibh7\nmk0yV6uGi6ulikw+nYIMVnQwrgpHYzTZ8kWf2FJxeEvOyVcgjMeLfsyvSzJ4\nacADhT3NeKSdVIRx7Bgm1cb5PhRNdenT3/NpRLNSHCm5HmP6pD+ud4JCN0nJ\nfnPdsABfPxbQZy9lp+ijsRfGbOiiPZHfJcAP6MGbDUxIibBfKDzLZ7eBA5OG\nVIZGmZyj0gBSBeUWhim4PNYnJaKpv4vVOd2sK4blphhnx+wIp1DGhk7Ln1md\nS/ShJNtw8t7eYgX3vv+J/F43wzFi+kedIPdO3+KqWPGe4wzalWqj+tbXJ4fL\n1xRo7h5klxhjq/xgDGvWTB5m8Q4LDWpjU9rs4PzSDpJH7E1b2pzrsQ+vWctj\nQh+hAQE/kle0/BjKjRWl5gEn/5e3joXYoRaqV5igc9sRKvLe49cE+a70xPx9\nv4Y4NVgA4+ueJAK0YQUMdlfOrxWJbhTSF8V7DUSR8FQD1pFqNFuTCt0C0Kdx\nP2wNJOU+jf+0STFpFmCSCxKGxg3hoxZyOYgUhy3mGwV4bRwHQFiIeR9aIueG\nvF3w57GqH2WblXZG+fxrKdHQxH43oKYW2Y8sVK0RRnWqMOjPp+G50kp0gqtM\nSicNt1ad1s++fYTgJxCpNUYDMTStelf0rtFa53pJZnRjggoy6XnqIZ11afzN\nZkgg\r\n=O/ro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1dcee78d27cafcaab3b8f265b4f1bea83600563a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.7e4d55c34.0","@material/tab":"7.0.0-canary.7e4d55c34.0","@material/base":"7.0.0-canary.7e4d55c34.0","@material/animation":"7.0.0-canary.7e4d55c34.0","@material/feature-targeting":"7.0.0-canary.7e4d55c34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.7e4d55c34.0_1592865018964_0.6795909279485204","host":"s3://npm-registry-packages"}},"7.0.0-canary.bd1dbc91f.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.bd1dbc91f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.bd1dbc91f.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":"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":"c32a6f49c43e8283fae2b85041b950a42c55b643","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.bd1dbc91f.0.tgz","fileCount":52,"integrity":"sha512-sit983QClsdyxRjGRN9+hWioy30D3JeXwKS9FKrbg/S+c9Y+Mn8hcMGJ7PdBqnFF47rJf+vCxXyRzaiRUAaIYQ==","signatures":[{"sig":"MEUCIQC9/ELeARy3kT5Khi4Y7PWJZ2U7WCKXVuzRoQtsPm0U5QIgGQT/v/Og1c3UrrS23Fe8pPQLpCNbRdpSvT2HmC/UoyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hGzCRA9TVsSAnZWagAAGE0P/3sUtGsmHaFPTCKlFvoB\n/w0nlwwCW6YIcZYqMP5zC9KKXnMvgfX+Q3EEsuGYQwlWFcDRd98jgWS6t4Uq\nts7Iuwx6z2cBhREBCJ2xokhZJQ/YMjIoes/Tj7utJxzIGQgn2jF/KJ22FE0V\nKRaOZGZApTjnaG68G+DbSFMx1jbPpipltu1tCwE5Odz1Y3Q+qFP0ANDYdZir\nB1rPrervzpl5zYN/gU5XXoKaq04WCynjGTE4mO1A0ikeMsOsntWhwNngBX86\ngKOFAfCGul1ncxFUP0PMS6xXjpPXrr5HJPO9gByO9HC/FfD6aAJF4k/mRKvJ\nBwW0PuLeNWbQLl2aXPT5fOyUgwJt+V2jjJQr81iIHE5Xq7XWbEHxIVxJ3ZW2\nWvHxjbMjTRdMZ69iqFN2lmF2nwGPy5tlrhBZrUdh9W8kaeDgcip4MSjyzuxD\ncRnXNJX8TK5o+kLxE2+UneVcVgax9GSwdTo6ArzCAtv4ROh0skhLBoMn4rbn\n1yzxIkF4wsCc2eNKODsfUJjZx/5lsQME4KxDVANpQWKhhZ4PjsQ4C15a8kUS\nL+8AJlaz3Ns9lmR6XSBEontaQLPbnljDxW4ZM4ar7z+pCiTovJKPUkM9gj2C\nIkigmPw2Re+mJEsoZ9WM1QZ4nb28oqBLp6OP0/Ei1I8xzit1cgshEpsSOPwA\n2fXJ\r\n=bNPm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b63b8059c82f418a3f6134124de3ad8bbb08976a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.bd1dbc91f.0","@material/tab":"7.0.0-canary.bd1dbc91f.0","@material/base":"7.0.0-canary.bd1dbc91f.0","@material/animation":"7.0.0-canary.bd1dbc91f.0","@material/feature-targeting":"7.0.0-canary.bd1dbc91f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.bd1dbc91f.0_1592922547406_0.5524398079038784","host":"s3://npm-registry-packages"}},"7.0.0-canary.31523bc62.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.31523bc62.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.31523bc62.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":"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":"0bddaea501d02f3d024058e119b8283ccbf99c40","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.31523bc62.0.tgz","fileCount":52,"integrity":"sha512-lWSXz8v87o5p5+sI+bcMat5scSUeEy4pdy4x5a297OlBIpC/AZ1QtgzL1N6Hs0laLkwVOluqecNFyom84i5F/A==","signatures":[{"sig":"MEUCIQCzCT45PLtjA5oHU26K5twUDgy8MGxbahISTTOBrfV6BwIgTxSsDO1ENGL9r+Kl6to3pfdgACwfRsAFSnASQphcCGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hMdCRA9TVsSAnZWagAASI4QAIuZrZ3Mbd38kpCPRtIL\nRKZuB1Bn42LM3s/dg8apI0OyDBZFzuLEK0zib0nno6hgtJ1iNrR99NlrtRNz\nJJ4Nq/pKX7kOpmfj0XkVsjxYmL0uETVI5Y26CXzLBC7lP0qLHVBxtrBGpUSO\n/+owRzsBk6CQmuGbA+fdartzS2aSPh6OkfPEI2JVw5d0+i/I8Lj2V32989Sd\nUeNGX3RMFv8c1zijBP3Y+c7jQOal8TqrPbbgVVnZoeu1p1Sf3SqAgvs76WTj\nkRQhg5ZjNqzvl4ukoWJUfPweM305LtGEGnbn7TYoD5impfFWj5+sEhGt06ub\niguAiBncz5/ZBp46pV2Sbu9TnQtSRtcDbUu3oAhMLMqvgY66t+1MdKZteugm\n03gDTtT+sqjBLnGL3qrA+vBjbSsLKirNYZnSjIhVo7D/o11C/Dpbmi4TIge0\nXnF42blHG+qdLg4a1GJH4oNdzKY7oFmdFokzM06zqXxhFRQLTvW3xzdy/v7U\nqYP5gjam5Fq2CEHdgmbS/Iajrr7wTRAoVOE0UeLfgW2Gr0KeSvmGHYuyVJLz\nwkJSh9zz9K8XzRpIhJ7p9a3sLe/nqc04oL2FfHDnw5Ey8COPMW/kRSHJJBPR\nZYpjMkl4bRZR1yUUZ5BuQJtC9Ld5FHlqV86YTK390KuSlD7jZlzQOTGpjQO0\neDH0\r\n=wyvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"035ab4d41a8c444abf721e44192fa6e10bed9f79","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.31523bc62.0","@material/tab":"7.0.0-canary.31523bc62.0","@material/base":"7.0.0-canary.31523bc62.0","@material/animation":"7.0.0-canary.31523bc62.0","@material/feature-targeting":"7.0.0-canary.31523bc62.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.31523bc62.0_1592922908743_0.8834265377657218","host":"s3://npm-registry-packages"}},"7.0.0-canary.a96b6d4d6.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.a96b6d4d6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.a96b6d4d6.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":"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":"b17264ce67bb54eaf18100711a33e786b0da771f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.a96b6d4d6.0.tgz","fileCount":52,"integrity":"sha512-ZHEkzi3Q384Flkbp43ugTc42kYEEFP+Svt8CvcCNJhIE8ZcBnBxLL+af9aEQDuwy++QgfIedHboXpSb5Fds9Vw==","signatures":[{"sig":"MEUCIQDqsjCDNJe6Tl+s4K8ZMoAvL3rsui86cjrd4vYZ2b3y4AIgbSq6tV0GgtBDmCfsATtYtDuFU1Oe4FB5rfdbjoPYDaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hT1CRA9TVsSAnZWagAA5pkP/jnfXJR/924nUyAAVX6X\nNkMmLSv1iSOPPAy21NpO9d1a0m+MQIMqJ8XQHH1ilFAM0iSHYmKTMcn145nu\nv/7VNfKEhcRnjQjesnbE8yJPCqI9+8DSq5yJBVBOJgrNHH77BcC9nTR6jD+S\nRJZANiKMxpMJyksdYYtxqczU6hatRr4/wG5ISASUJYvQ516+UjWoli5U5FOy\ntktoJ2fot77rtTW4c+TFtuQ6L/2b038Stkmsad9bQ6iWM5wJHZjtfFSiZFBT\n2EbpJMn8BurMxnr6fTfVOtdfRtMZ3IAqIymxf+ivCq1r0rafJbcrnFhxBKYk\ne2FgUd8QIgOGkWnFO/HQpmQT3JavpALIhbxufGJK3ys2twFIAXBPrbfzNct2\niah7NvTL9o4OHipf/Kk6j0VCBco10Eloy1J1B6qHlB+DvdI4rrSonZyYntxi\nwtRosSDNYWyfPHpydW2JOvBdMO+CrDI86VuSNaBWjZnNlNy8CUoBga7FFA7V\n/VNtnYNtS1sNerSH5kI7TaeWEoGZt7nkIoLA+oInXMOgneeXYdP3AxnIofSV\nTteOl0DbZgrvdas7JwX24XgyeDp6B9DW/FaTN9jEnVNibhR1x9K5kxmY7osD\nOr6YjLtw5YiPaBDbsD//Bix2L6tI41RYFDjoVoOEHiEZ6LXRVPJp4vqRlBiP\nl2AI\r\n=i1oo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"96a5767feee3e2fd2ff90ed98a721999f8cbcf5f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.a96b6d4d6.0","@material/tab":"7.0.0-canary.a96b6d4d6.0","@material/base":"7.0.0-canary.a96b6d4d6.0","@material/animation":"7.0.0-canary.a96b6d4d6.0","@material/feature-targeting":"7.0.0-canary.a96b6d4d6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.a96b6d4d6.0_1592923380976_0.0481207426434187","host":"s3://npm-registry-packages"}},"7.0.0-canary.ef3a09533.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.ef3a09533.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.ef3a09533.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":"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":"5799eb757f766bf9b8b5e940fe5349d8e4689145","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.ef3a09533.0.tgz","fileCount":52,"integrity":"sha512-/xugiT3fsfe/7WMBObjnynAqRZfkqN8EHToQBVz7IzwcFGR0eps4AlDNcj/FyicgvDAQjnQIBb5X9yxD+5H9TQ==","signatures":[{"sig":"MEUCIE9tLg2dKNeewL0YZqS44iX8khyvz6rEJ+UZZSsgf9gpAiEAqqVXIf23ODpOz++H+ZPxQ8vi+eNDhX7RNdNWBLowBXY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8hZiCRA9TVsSAnZWagAA9xwP/jEA5P87Biqbx4f5XMHk\n37tcBj0Iu1DdaovaeScvNkukELqxXRm3dX32Tf1HEKBBtXAG0wWEJDStYHX7\nbjMQRhEGFV7tB7/nUWaN5KyIT8iiR1kuT3mukkki1gKtjxL1Fzykv6+twBS6\nBPqL21ihJQmEKiu6qtxMKyePLwYWfrLRotNAqWBid1CYWAA303xdS9065mFh\n3ZNz4qfA9neZX3cn36yOMZ2lQD9/9uB2BIaRjZVhTHRPEoKMqe08pqceFTU9\nqybmN07bkG7ZWY275z+XvLUFKdw+Y/5qLAiJhi+3vAYOduQT9MoU77lmSvuG\noUGcA+V1nJHUjUKDeeuR1ekzZR/xWGstlMtIX/t2TfYXO1x3G99+F3Ard/BT\n45CIw0LBeJcVuG/gOp1uMQ5ThLEZu6I/mUuKepgaLoyPxDvoSQDcFN8bNGom\nMdn32IyqRpE1S+y0QiAPdE/h6gUF6iivyoIQw5JMaGmL7nbYUCQ4fWgbnSDs\nu0HjyECGExOrrllMUzHfda+OTBZao85z4O4pmPe4kykkT8fLj4HGgRGjIbdN\ndIGG7wC3WnC3cZAs95EdGtu1ZMjCq6fyEwA8w0R6AOeiUhRCbKbrsbmbU+Hf\ntOzAMtoypcfnEBriLCgwIELYqOUACeMPJVZVqzvIxooS6OXQ5a0GKQoqA2Gp\nagX0\r\n=58Yw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2af091492939e0fee42736977683591ffc221f15","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.ef3a09533.0","@material/tab":"7.0.0-canary.ef3a09533.0","@material/base":"7.0.0-canary.ef3a09533.0","@material/animation":"7.0.0-canary.ef3a09533.0","@material/feature-targeting":"7.0.0-canary.ef3a09533.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.ef3a09533.0_1592923745970_0.5373509375318439","host":"s3://npm-registry-packages"}},"7.0.0-canary.080965f39.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.080965f39.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.080965f39.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":"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":"cf85602492f7fa8e2c84a131bf2059fea55ca4ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.080965f39.0.tgz","fileCount":52,"integrity":"sha512-6wVdS/3nD2DVETjCMh8bkh9MboLuHNeMfPQCbyzifaPAR7lS6lZZJyR+IA7i7C3TDRETOevA7k0id3PLM1Nv5Q==","signatures":[{"sig":"MEUCIQChpn7QuSXjHrpFPcoSlXERi2IYhgqgBAZzAbB8KP8WlgIgCZqqoqV8iflqGFFAKAvI1uiqMYUOD036dGcW2TncdSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8h1ACRA9TVsSAnZWagAAb6UP/ie5Kq5r0xUQ7vsbvX//\nXHt+V0JYXmWXwg+ViI1/McbYlgq93Eq+iaBpSFuAjXZXlSnYBEg5DUPLSe4z\n3miGF48HQLWO8CQ8s165sPojUjczRQqY6wv+ACLhLnYue24sZ7Wxrs9f0UMA\nIZ0lZd5xumRKrivqWW2EWbTe8ES7rOOZoLFXb02N8SQkw9v/PURgISsn6/y9\nRBnEwttEFsmRE4sMJtNhPQrOw7hjK2/DMdoxv6hA8k6N8QPhJnJ+GQ0R6bqI\nAzqglhmomv8kZ9Bd1LRaFmO1/XfaKyz2SSt6Ag1hWJR4LwCrtK3LocMOONpj\ntjBGH9l4NWMgrW0ZosmwUgNxqNXhmZSILCTqqIGtekvLgpv3uFZjWDD875ef\nDlfIVHSii0VJV4VEIHh9OwrvjLdKu5CZASWUzKDWpVLeByNhFgjLGhl2QVoe\na/6g/3ZOfqC67b7apsQWcgDwLuhBvWQG9T22aYXo/2lWnrBxLdSvIG6+rvjn\nNTm0hAHRhTcOfTBz70wHCrh8bpQMIDU3wrqsoYQdiAeYPtXjy/cD6Oy1mM4M\n5X53KFv3CzzZmY/oFJUClhig/8RnFWO0iJ9sISOpxanU7C9NywJecCSk0DsB\nDnT53lgefelZu8HvIFdHIIPrLnBt4644Pau0tF4mL2Ij+OO31GMvMi27Pldc\niTtb\r\n=i0Mr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c0d7c5371df46e0114aef4ac9bc2b3aad1377f76","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.080965f39.0","@material/tab":"7.0.0-canary.080965f39.0","@material/base":"7.0.0-canary.080965f39.0","@material/animation":"7.0.0-canary.080965f39.0","@material/feature-targeting":"7.0.0-canary.080965f39.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.080965f39.0_1592925504352_0.49620695865971354","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bd67b65d.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.1bd67b65d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.1bd67b65d.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":"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":"16df53d386da9e41db973ecf52abb11f8cc571fb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.1bd67b65d.0.tgz","fileCount":52,"integrity":"sha512-RjIKgkE+zZwcklmIxLA8V22UXfN3khp972Kt3GBekP0L6FvRzAhZV3oQSZ30LpoL9AtptG1ujP3Yb/0kR2736Q==","signatures":[{"sig":"MEUCID89nkkmGXnpaLfRAMDiLd2Kt/7GMRQh/cTt4ppRFfL7AiEAvMsmokgrR+FuGoANSPZBoPfZqsLZhIFCGTRRt98SlBE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8ic2CRA9TVsSAnZWagAAC1EP/jqbbNwtT9eOp4QIG2zI\nONIYuECqepFc0FnKh0kx7PkJ/7yjtRBRfbe1HQcg5DkFmnB3Tph99c8sU9gI\n0KTP8KRUIuC02OB9PWG+V6huj7eztxIajaju7kBl5FBb3YaQ1Sp6cgxzUq4/\nAKLO+FNV4IPtKqgqVE45pRvpM6bVUyPHy2x6cQZ1dE6INdc0VP2Ef18fZYL8\nDnc4SJXgoFdqCKGmbqV9m3s45wSG6oDNwoQQcevBM92S6LOcvuJGvAltO1Zk\nx0tupPqlrII6MUhNN36iVI7KWc0CEnIrhSIzAcrO0cauX+VlYppyjiYMDeeb\nqnjNU54xl4sLqzWOZh6AX8G4AxnWPx1fHV7HY/zVSwuMAbQPfGxrBglZmhDO\nj31w+sas0CgPViLTnK6PYDSmPN6Wwu2JfPFsuDAazQkjiQfx2PLwL48Z2ac3\np/Xg3oIIA1/GJ/txr7jiyt4HkVTE2v9lXoags/8yWoZvAbRYq2NpiYlHZuSH\nbhXSC0Wfny0w7Unpz0Mc3wB5tTMBEqTexS/mZwaAqkfPobuScyCEeHSF3hri\n2C2+SB9a8yFKgjcDNWJ5UZRmy0s++xeUfe2IgpUhq3Fnyiy9AnPRd30c6HdS\ngAomHqZgeUuEAJ0/OYnDdAkdhh5RCRfGYMZWJJPHZQXg0U6qENicENfacwDP\nbnlO\r\n=8g9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dcb3206c3f6c1567eec203025b36bff594d66678","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bd67b65d.0","@material/tab":"7.0.0-canary.1bd67b65d.0","@material/base":"7.0.0-canary.1bd67b65d.0","@material/animation":"7.0.0-canary.1bd67b65d.0","@material/feature-targeting":"7.0.0-canary.1bd67b65d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.1bd67b65d.0_1592928053720_0.9136360379882464","host":"s3://npm-registry-packages"}},"7.0.0-canary.18ca31248.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.18ca31248.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.18ca31248.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":"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":"f6d715a7351c16f1d8e4e1fd73a26a7274782a4f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.18ca31248.0.tgz","fileCount":52,"integrity":"sha512-IGpH0ZwyllgEAOQXwgYbhKgZl9Mln1s0m40QcnyQxTOwk61mk0mrWzB8L0iT4RyG13kmIRFv2YP65h7PiD+OZA==","signatures":[{"sig":"MEUCIEE8maHyzsa7ipYKoyGQgXxLYadbqBjyu06JR3l7OMZ2AiEA3iGEwWYGZAJ8Tj8iLGKKdIejOeS63J5B6/MIeAAUc9M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8kkxCRA9TVsSAnZWagAANEgP+gKgyAZeL7LcAaBQoBKo\nT/znjSVFbIUZq8w5p9Y/FHeX1ZPnr78xySXNpxDQoBySKAYgNSWs60bELAht\nXM5k/6HK11wXP3VwuMJtGCDMnCCjeAy6xjf6PNLOt0mA7iXOidYn3GKaK6Dj\nkzjIPmhiImFS+u4YTAUg+caQ9Uhmed/vNt455Ifo7unSY4VFCA3jGRjTksl8\nN5i96a5MJZ1boG0bpnmUTiMe1j/dYmo1KC1TzYx23gThSxOqv3/SqqB3GKo0\nLAhnKm2kvc9CFb0aPVCCQORrldUIai6Oac67tJgYUstXKP3wqutRZDM3Raas\nI0gAnaWIpdX2P+QRZn6dVsosaeKMESzmDnX+vG4mPidVRAV3CHW5Rq0PDqmv\nCVomNWX8+qbBisXbLecm3d6M9WdQxHLa1vYJh2ucrYZetWGYzZIik6r4TQ3k\nIpBpKy/YhVE10Mnm8xYrpF3IfdT4jB3GbhnyW28W2PWZn8QHTcuSOgOJqJeU\nz/szYfINUy8eSGiAs6Hevu3AGDbrLjDqXUEXbdqM1VHnSiaNoFKORpAPUt7D\nNFJMhzeXz/aZAdNpFt/jKyrfJH7beQgeXzmDrOBYjYHYDmYBUR1Vg0AYrKwx\nWGVMYD3O1FHLr8QCBbzgVsLmr4GZmY+lr3BwNqvyPW9jWAsTnyfUlFTDPpxM\ng4RF\r\n=ezsw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"34a77f9ac5b41ab1f71969d01fde32c58ffc08ae","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.18ca31248.0","@material/tab":"7.0.0-canary.18ca31248.0","@material/base":"7.0.0-canary.18ca31248.0","@material/animation":"7.0.0-canary.18ca31248.0","@material/feature-targeting":"7.0.0-canary.18ca31248.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.18ca31248.0_1592936753456_0.5585658041160462","host":"s3://npm-registry-packages"}},"7.0.0-canary.39cf00836.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.39cf00836.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.39cf00836.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":"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":"f73d05bd657f71e8c87c24d260f450d18f8c1727","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.39cf00836.0.tgz","fileCount":52,"integrity":"sha512-I02mbevxPO20FP9SNN2fuR12DeaSFW18cQjneyvca/NxD5Zfx2Qeivb3qJO3KixSug7vj1R6ArxahZoOi0sY2A==","signatures":[{"sig":"MEUCIF0cOgeryQaXxK2BZA4wpifrly3t+K5UM1vjHgJ2Ge3sAiEA2sYyLFbW/HImgKmGo60P3X9g/kqWe7Eov1YeKib6808=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8k6QCRA9TVsSAnZWagAAYQcP/3HlwCoh+L55BMhR1j4U\nTJrhEjaNo7qi6qFLEnXfDXu8A1DGYsSI9f6lN4PX2CQ36ZvbX5C/Cg2pa4UP\nVHftI82IIBTAeSwkv2meuUJYDdkdOaX7KxrdxZwE3ohrAwENSDGVmNqTSqvA\nRQLwmiLgkmLF2MbkYUmqpy7wYZEqLkTPIQuNJbF2O2hYA+p2ULogsieeHGuo\nE7KTXehymTx7CuWjrhbkLlKcQti8DBpsKbUo/oRF1ngbCwnI9VvsGdacRJmL\nLyeM6A/Qd8ytZtQBpQUb9TK0wB12gPATQAExfriTJwfJezKN9ITdHhxt5V6q\n8IrICJzh1NWg0oDUGPxMUbDS2xT9J4BINE1n89geUE1iXOkIsAJbLxTvyGnb\naydlU5qaY7J/PoWcNtlKaQ08rrZ/Sm+ezCFp035X0I/soNRmd1jVQTEHEu9x\nAEa6upOi6bGJ0Pj3P77QiEtga/dWns2I6r6a51P/LW3izumLr156ODshIaze\naIKvQjB3FnZzfwzpLKOsRtvNnpbqFPUKYpNlVW52oXEguyB7A+93EuWn3BYQ\njF+TmtUH3PI88Dryv/vUyuxOMZX/qNTUDbDFZGtGsAerGqC3BTHOPecAC6Xk\nkmUOq0S7CgUfggRrTzax2ILEK8I0y0DOfsXFZp9GXUoDNpq0A0eQAc8xuIZu\nJYBp\r\n=Bih/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"490def2a6575f8ae6a6151f024a9af3fed1f5215","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.39cf00836.0","@material/tab":"7.0.0-canary.39cf00836.0","@material/base":"7.0.0-canary.39cf00836.0","@material/animation":"7.0.0-canary.39cf00836.0","@material/feature-targeting":"7.0.0-canary.39cf00836.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.39cf00836.0_1592938127623_0.309671914959903","host":"s3://npm-registry-packages"}},"7.0.0-canary.1bfda9e05.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.1bfda9e05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.1bfda9e05.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":"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":"6b06faaa0d2d66b119a63aae5e7094e840495059","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.1bfda9e05.0.tgz","fileCount":52,"integrity":"sha512-Pk1jntbomXXprbkn7MaRHYUsL7MOG8gRWYP29gldj9R2g5nWPJpkTnbf+FW59up7jCERZBTzXZ/NZ9fsJ9ddVw==","signatures":[{"sig":"MEQCIBUBD7W3+vgLuS9f6x4YbmQAcIV/7IkjEdqEHo35Pvl2AiBOxfDJlFsO8cMU6Z4MvgVwJUTInQVEbAQHK02f+Afs9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lF/CRA9TVsSAnZWagAAF5sP/jEfkKap27wUGH9VZnuQ\nSa5SUi0nqlJWIaTAj7FiTewRZTbttZK/5eUqvNN+Jv0CkWVmeVL1/FypYfQq\ng/T3l3OJgySVLbGaGFTggyCI5SGIGGBkFzcTS4K74vq4BuL0/ckwfBqEo2jr\nYhmg2viwyiuMhv/4Db00J5Fow6qnGk2Nh4IDacLbLxJMVq2pqLMrefM9eF7B\nd/g5gRf+fGtzEjmRgXkSp0zEJp1F2EBioqlXrzPBJxA/ToUiABYf12bDyOeY\nw6Zuud0bx94Ci0cBqS/Z+Sb3QoVicvUD704u46gul59e1dG/x6CuIdJ4fV9c\nPcCzE1cuttP5fQfd0xjfMMArN4k5p39xxtJh0TFGlDjGTtqnUaJVBimyBdAV\nscDqChbAGMfdgXTfp1NmwWvyOCpGAbVpDuMkkrAbrsdS7QnytZQwdwqOdQe5\n0fOJkoWdpfEt2P2cyneHune8/CITHcWWMBvnZVDtTX5qdf/Q1aoTlewPt/aJ\nw4TU0JC60XA1QGqXVB9H2BZTAMPAEiwAuqHXc1yMAyMkk5e0Y77YZH9yPIFl\nR6lNPj9uybS6z5Gw7Sd2qaiSdTvwrQEh13DNEgL1sFazO4EWmeiqvL3hVVqL\nQqIXzi9/X6TF/Y+kFi5sj3qgfXnlP4UFbVu9UaTeSplS378yGb6r4D4ANs4T\n6Ukl\r\n=Ul9S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d858287d263a004329d22036ef43b63b8ec8eb08","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.1bfda9e05.0","@material/tab":"7.0.0-canary.1bfda9e05.0","@material/base":"7.0.0-canary.1bfda9e05.0","@material/animation":"7.0.0-canary.1bfda9e05.0","@material/feature-targeting":"7.0.0-canary.1bfda9e05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.1bfda9e05.0_1592938879465_0.039790432309533275","host":"s3://npm-registry-packages"}},"7.0.0-canary.08731bd95.0":{"name":"@material/tab-scroller","version":"7.0.0-canary.08731bd95.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.0-canary.08731bd95.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":"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":"d24ca7e74d780709dd467bf64093f3072e411b44","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0-canary.08731bd95.0.tgz","fileCount":52,"integrity":"sha512-j+MjCRui6wr65Spv0rbyguwxtD/aVt4d/ArkEWMMYmWhmmRrN1XBn+Vt1EvRM88QSX8DxKRU6I647c+bmdNyyg==","signatures":[{"sig":"MEYCIQCr942wPFYZU54fU8WMQarSXZUe5ER77ASDEWAqKj0RKwIhAKoUpv+bu+pGgLqmSpEC+zxzz1towqqSeCdujLXJJqUq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lIUCRA9TVsSAnZWagAApPkP/09w1Z5L4VuKnGW07pJr\n2pPILM/yHLLNelyyfi4+Z3eFyrFnExNiYdGwbmVJD8uvU8aL74tyUPPqD7bX\nTQlM83hLDq4H0MosOHfRcRcM0waNBNHlPSuhix63lxtRugME5MTmolez7fkt\ndDlHk3+gLUmZJmKGvYYviLgOvtU/bVM9q316rqbyYUUpz2X4lkeG2BsIp9T9\nwVB14GCyY+Wlgl9WUGiBQLA0d2KHlrGNXtoUfqssDZKnDScMpTHDrhpgp59H\ncGydgvNaaChmMY2uGhUAqK7UlNH+6VLSEB+xEsi8H2TUw+L8alSsR0VTHw+0\n/HF4zk+VeDmKl3g2G/nYjCr3rqXB+CiF6fRzS6XtarahaFOWUf3FcodlVgeP\ncU/CJ2thFKRlkgXYWsER+DXJjW0TDw8/dmgkfzIsiLs5yu7bmaJpV0COfcws\nztA5SOUxp8KpEDNqqUs8pOGxPSsTNO0u9Gn6ZBpCYkMg/WStpAexCpvB8SIH\naD54/60zajNfcYlNxobT1lKqp4ImGCzx+/td52RzzIzdQd8rKeKg+zbqqMKu\nCWfhHQCDkpK32HMvCa9vZhszzKfoDJp+MnoIWsB+w3mVoQg5ovMdHcvtsm6Q\nFvTsVz3VzE+LBAn8kWToLgxOffWJJeHvyGloHTy1wmOt4GLvnSpV3ITpyR5g\n//zC\r\n=Hndo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8e24a4ad4b32b05eb883e0de21ddbefd3c8f641a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"7.0.0-canary.08731bd95.0","@material/tab":"7.0.0-canary.08731bd95.0","@material/base":"7.0.0-canary.08731bd95.0","@material/animation":"7.0.0-canary.08731bd95.0","@material/feature-targeting":"7.0.0-canary.08731bd95.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0-canary.08731bd95.0_1592939028279_0.8129387859065154","host":"s3://npm-registry-packages"}},"7.0.0":{"name":"@material/tab-scroller","version":"7.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@7.0.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":"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":"48d4f6aa7efd8e4f5f5cf5ef8edef088b92e621b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-7.0.0.tgz","fileCount":51,"integrity":"sha512-BnTLAqOkH1IIqF3JgkaWV8IHXSbA2yX1tgl1SzAiS+bHNmw8iUwY371MzlGA3mO2R9u0KweRc3wrCFeYjYgl+Q==","signatures":[{"sig":"MEQCIEWANmqTl+5AtENsJ5o3lt29jnAKuBrMdhRiUo2tfT79AiBh/rAgvLKnk94iyGXNVtiJqjazrxELoG7a83wCKyqmHA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":320831,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lPyCRA9TVsSAnZWagAAMEMP/j3vgBG4UuXUGjp7JjcA\nL+rPLSDr6ongP/X/63/25GIv19abEseUyRhIfzlDRUqn2WDrlNopRPrPYbgs\nFZdE6KYsJbBTIvm28BIHDRPb2dW+DgvzkceWNZU2tFJcvYYmirH4Vc78FxC9\nFyKXWs55FFygTlDxwVsyExTckjIKGQKFTvzvzX+VeyHXFSkUIzw64AxdDPs4\naVol/+8OKTwqzTjyhNjzbWLU0OzK4tJhx/vFp4hCtcQQJmVgudm/OxxHoD2t\n/c7oL0XpehoA3dBZ7CxLdXzzAAwTLPkamJTkkMFgetsZLflRJ+SruM4itnJD\nAnS9DADRh3iKpu2r6wZd10rBrw0DTx6nCy/UzwgblkBysN8mrr4O8Z5TSEQc\nNi0D6puPT/CjBrJwWODC4CRiF+rU7KMOZLmiVfnYAbw86gixs9La3x7RRQgc\n/yr7u6jyxeOilbKRnKetb3XwEQBYG0pO70kGlpQfNecNpbTGV0WesSxlyayh\nVqP0k0emQkwLmIvzHOIJRc6Qp6Srwm6WskSGW7j9rj4hmCZ8Yjrn2yMJKZb5\nGuisyeQ4SisrxbaFsBrwcxRBdwPeMbR/eb831a1qjJlGd+xgbATFWQ6TcHvW\nhJrN9ONWMtsIVMZltPZJUIPhBhUVoamQgG4O5FrkZhmD9QgSrTUcfP0D4N+r\nfSbE\r\n=/Hzx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","gitHead":"a3212b2099765947f2a41d71af2cd95fcbca4b97","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^7.0.0","@material/tab":"^7.0.0","@material/base":"^7.0.0","@material/animation":"^7.0.0","@material/feature-targeting":"^7.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_7.0.0_1592939505443_0.576533150192764","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3212b209.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a3212b209.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.a3212b209.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":"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":"f43fc352b4f44ef75ef276de834de2f5a4cd17ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a3212b209.0.tgz","fileCount":52,"integrity":"sha512-e0s3DZ4pdy6/emKkg7vCPGtAQkkA7B3FMW7cGOMn9clw+pRsAPz1AI8wyYL4OFHtaEsRdy0VVf1Lm5JqEp6Ztg==","signatures":[{"sig":"MEUCIQD9ub0FFGXbqGp5gk5Fm1gUJ8/PUWAHT/LrE/UGU9sUpQIgMDgrE45Ym5PgTrc4hrur1DK3zVXjS5MczmE45bgso8U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321646,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lQrCRA9TVsSAnZWagAAk1sP/isZ1+RfZLFwdBFd4naq\nWnWvtSVhI5ikZp3V2/Sp4W38E/PhSn2TnQrSUf9Zw8v/NivSQ2ruznDOmAWB\nFWn2HgXmsUAzoETrPBL27ndqC8hslYuIeFlX9ZkouvSwYY5OqXBysR7waVSX\ntoLCthG3/DLNR9UwyilOsVUzHl1946ROUy6WMKlQTEfr52m2DEXhpnVaXOBf\nR4gTOQuGx4V7bM1ffV3gir2KSffk/vjkf6yHPICMBHzas3QRS1/MyID3toE0\nNrpVmliOUEAHaL5lkp68qVAe9I3v/9kqE/RyWiKM5t3AbUDaucG+ZciFFwHx\nEPGCDmux8achN8GjlMK+XSDGUsZ8iQxAXHOmLgiTV3sqQIXkW8ae0/75tXQE\nSwFA9A06QI4Ayo+14yWA2egtPSpaWFdgfs6SOpu0Q+HSICLrV8z11lcxsKW3\nhjR8h8nX7W8UxJjPqZCezYGbCq0U+Uh7WPCXBRmYEVlyHgPhFS+43n6TDlsl\nQmvnF0GN5BSA3BHTzfzvxiNMsjjRwl8a1m1HCr6DC5F8zN59+LxwFzKCM+s8\nMoE6avwYKZuwzeqWfnS0luIxtKgxi+4Gx2JiRoh+SrFMcENQwmyrZtr35drn\nQ9po36BMAMbu6n8zDIuhE4FCJEsEjuWau/qSkq4Y6eOac6Ys10Lios9I3AjP\nGs+1\r\n=3Itj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c48f67451e0470c28a2a044f902a31f9fca577d4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3212b209.0","@material/tab":"8.0.0-canary.a3212b209.0","@material/base":"8.0.0-canary.a3212b209.0","@material/animation":"8.0.0-canary.a3212b209.0","@material/feature-targeting":"8.0.0-canary.a3212b209.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.a3212b209.0_1592939562996_0.9545961317830594","host":"s3://npm-registry-packages"}},"8.0.0-canary.15e81fe98.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.15e81fe98.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.15e81fe98.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":"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":"84dcaae7c32ef92a992cee0d03608c0826825830","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.15e81fe98.0.tgz","fileCount":52,"integrity":"sha512-JWX4NqwbjuR6sUcz0+DygRDHnssvilAqpQSZ5CRygFfSJeDuU9hljfvnFrCK2qjmbfOhdev1VhG6VAbGPxSCJQ==","signatures":[{"sig":"MEYCIQCPVN5GIOWyayuP4HuhJfGVc/fuFC4TWbTTm03M4JD5kwIhAJwLXCcRnJ/VcBXslDvDxSJcYx0fW9Ntk2oQ47YQ5I0o","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8lsOCRA9TVsSAnZWagAAaQMP+waAkAL+3Gzam7lNXs8J\nqM3VQciZD0bFB+zU/SkjsrEw6bhu1LYpGwpwNIbCGLIfwfLqJge3qcqHn8Xa\n4xphcgRBvD7LoE5MyPPVBq3lomufu5RiotqzrfI5trbK1z7XkpQUN/DMlm6E\nsPAFFEnaHc6PlhL72uCUu6Q6J4lnPeFMNmCUukr0jRATvK0vwUT3pkbz7C0p\nw6xKZ3wNPWNI1H8Hm7NvP2vn4s97EGf6a2vLztE96a543Bdl7O8+r7XTSwqS\n9ukLPqmgvPp50V53ri86SBHRZv5q7ah0MPNvnLVrJ12QuRmuOfLt6GgfGxGM\nQkKH4pD8LOCIUCeY558j59Skr4midwBfp1Vz7tHOkhQkSb9M/PHe66F6NHz8\n30N50nPVXjCs8DJRFJXr3K0YbaXltd0QHqnhDP0rd5j3zMhyriU1/FflFgOG\nj1r2aWd/anZaxjQUj2MoOzZNAR9NNm90dryM5fB1eDe9hQvnYVZ1T1tQ0X6B\n4IIW1swUows8mPk+ivQ8p/6H0yiuxzDi5f597gsAy/FroziPRCwK7g4jjsXg\nZwrqYe6drnzCT+jzFQtOQxsIScjyt6JWZi313l2UFN4posQsPsNNBjEn6j5g\nDI7HBL3/6pucBNXBBQ0IFHf+u1Sgf5aUJKRIeeFxJKpjLpabRuBPYZ5A00ZL\nqFh1\r\n=zJad\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"6c7873baffc445c3cff5a006913ebf1bf53617ac","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.15e81fe98.0","@material/tab":"8.0.0-canary.15e81fe98.0","@material/base":"8.0.0-canary.15e81fe98.0","@material/animation":"8.0.0-canary.15e81fe98.0","@material/feature-targeting":"8.0.0-canary.15e81fe98.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.15e81fe98.0_1592941325584_0.32686866336180187","host":"s3://npm-registry-packages"}},"8.0.0-canary.004c9d392.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.004c9d392.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.004c9d392.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":"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":"fcc019b20d24e5bf15947cc17c4af0c92e66c94d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.004c9d392.0.tgz","fileCount":52,"integrity":"sha512-A0xfCuHC4N6gzVosCE6slwuG5dFAitDIt1TdsuJueDeK7h8kbBSuvJYJpRtWuqrrilJ78scfXGPmpJMmDpEaFA==","signatures":[{"sig":"MEQCIDl49lCzyxnaHD/+l9Tpg7+HuI4IBDUxcsOpQzvvisO8AiAbDFEf5p2WGvmY4rGIwZcOsYbso375Uqka9TQsi9VkhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8oisCRA9TVsSAnZWagAAyBMQAJWv8I3dmFzqAr7X+xwp\nlP/Rm5UA6IE8dpIqeR1TnStd+gIA0sPlY8CJPWd7wSu4Vw8fLjSysghP7XHT\n8TPgMrfjcjOpin8yH6vcjG/NTCr7BCfcZj4R9YAKQRMLEjTL07cNgPBHLl/d\nNmF9QnJNEM6AkSvJTUDHTgaWgopVRIyDYtgrxIP9ZXXePEhJ3+xBTEZe7sB6\nJwJWcXdPqXiJfSkHaA3Qv5kuaO1lom/AKW2zFSmIRYcZ1RC8YRxvzw/Xtdcx\nTjjbyZ17177gx/GxDnpOaGu59PdiYusYk064HR81cr6Os9Z5/285CDineGlO\nLBnw0QsZGE+w4aD57SQshTQBoSTi0hThUphJLv+qbRg2H/LnSieSIlw+uYqs\nYKDYMLSWDwAgdSNjf+QmRbkx+IPlgiYLH3pLDO0dYAP9iD0qpbh+I2ua4o85\nulSN/Xs/g8lCczsYrIVRGCrGDuqO1ojXXy+vsZ+WV0RdpM1z9Cya8gS37HiU\nfjXFjHQV6gpCC+/hHHp79Y0WWxWJck4oblTKULL4Qyo3AlOnZo2R4vo5+e7u\nju/DiIhU3XYYEvWpH4rtaI4wi179Rkvhg6QO57IHOVD07DcqKRc12zsH3GX7\nSDmQMr39hs1RVQnueFSSGOSdHDX9vm5D9JJP4ZA4+XUd/tnmrA0xL9v755FI\nsIyM\r\n=ATac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"776ec8815215499686a6c5d2a13543285c30a7ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.004c9d392.0","@material/tab":"8.0.0-canary.004c9d392.0","@material/base":"8.0.0-canary.004c9d392.0","@material/animation":"8.0.0-canary.004c9d392.0","@material/feature-targeting":"8.0.0-canary.004c9d392.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.004c9d392.0_1592953003638_0.7098263527066839","host":"s3://npm-registry-packages"}},"8.0.0-canary.03bde00f5.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.03bde00f5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.03bde00f5.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":"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":"91ff32c7896902594cb24a8e5782ac9ff6b9a27c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.03bde00f5.0.tgz","fileCount":52,"integrity":"sha512-2mBdtxgkYgZNjtJVApb4C0bIrp+E+xNF6+BryjiMpgAWr7JRzgW7FfnZRYHo6slIfgpNagoOF234qP/Irv3rTw==","signatures":[{"sig":"MEUCIQD02JXkfJTWd+HPSeonW9HUoATTa8+prMP3SLsNYhsKxQIgesGJcwqx5RYNr7L2LbeRLlJWwVFKqmWrFilI42HU1eA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe8p8eCRA9TVsSAnZWagAA9EIQAJL+i99vWZg8J76K/32I\nsT2voh2bgAyULHtkBepHhYh2a3ENGBeCP/5o2cWuDi1KuS/y9UxeN+TgseRx\nPMHnioWb/6/qjlTwKLNT3x5RZXzqf5o4qZK90sOnXwlNKNkprv039hBB8zLm\n747aF6/6uFsfHvhz6at8R6NW5udKbIFDc7fjSfjz4w62z3AvOXKTxPEWY8gF\nM9LUY/lRqW14AONc3cRvCo4CnqYaQJvwtWaZUDEMTta/DQTINTKHqE0Wp9j7\nwDh5M+eMXfCYmhWGy+5leZUMbFCHqmGt0jujbkB4zwVFWisMdrVoWeKUOQMV\nGevX4sNy+iHFPQYUT3nFau0JzVvfr2UAzCBY8cBf4J3iPU3EvgxvxSR/wJ9r\ngZrlhMhVK5kXm7k9Z9Om9+1s4p0dptUf6/yj4sseReFxLzcaB1PPNQIwAvOy\nOZLmwg65njO04vFxkTI0o3Dc71qtU5E0T0sIRVy5HkvLMiVdG6mbPAE02HVs\nJktZQPOwvOg0fHoe2rAdND/m3q6azqc/i9bItUwBeHi1MFokjYQPeQJ2pvBw\nhV63nSZQ09v7BlxOPce9MEjokgN1vj7VHc/cTINLhbJw+yv0BDtP7YMuIlrN\no4JeZL3f+hd2aAatZWpKRsN9dLAuu9au2K5cqjRncWFgp75b+cy8zRA3yO3O\n8ZtJ\r\n=4VxX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c3937a4069800a251640cebe987bd7911de089aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.03bde00f5.0","@material/tab":"8.0.0-canary.03bde00f5.0","@material/base":"8.0.0-canary.03bde00f5.0","@material/animation":"8.0.0-canary.03bde00f5.0","@material/feature-targeting":"8.0.0-canary.03bde00f5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.03bde00f5.0_1592958749923_0.37249661176931226","host":"s3://npm-registry-packages"}},"8.0.0-canary.599b8c319.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.599b8c319.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.599b8c319.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":"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":"59cfb0666ec24bcbfc33c41c6dbfdbe7ad894821","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.599b8c319.0.tgz","fileCount":52,"integrity":"sha512-8Z8Jb6uRR099X+bQX7UhZoYyS0zkyGddxhqRkIa1y/nmcAf2mz6Mum7dzKuYu3phUdpoYnI6FagNB+/7SQWpww==","signatures":[{"sig":"MEQCIG9TWhSy9D4kANHKcdKvtMoDmrhe6e+bGlliq4VCv4peAiBQiQHYX1c0kzzKUgL0OVLbiLpeKEBlr3gErFBadc3YmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe82npCRA9TVsSAnZWagAACl8P/1jjoNfIF5LE1Ou4mIvV\nXB+c8kHBulfq34GAmzpE1jqEVA9TxY0DFcP9F4a0HW+zifWihOO+Tdl8U47S\nlSxfe1MKHdulXKwowyp+DaUHmKNAHj7Aj+ege0LV24JmVHcxrimj0H6sYQKY\n+IoRLa3qwgDBfXUbBAhoDUZbfgeCI9SVpnhv3XD0LWpa4YgwxylBBVOw1ydD\nKTgR+TvijmfaATMkQcIioZ+mDPdOe58oW7MNKAi07/ry7dBjZKC+MIzwziz1\nSwLQq5MabwGfHm7Kl4h0gOIFv/xvGuQbaZFyErnBqYbghda0DSy/Ag8efuOY\nPCs6jCLTbPry2fRqnas+3MEH1EhayjQPB6wUJwSCuvO4cpe5H4Rlo1bYvYIk\nzjtu6t9kmTQUGi1AyrdWl6ujoqgpBE7MZxpAUB6dTbHg3fDsERBQVw0ozH3v\ng0bwU/siZpzVD55XirP0ua0ShzL5n+rDCvqi0HFImv3WFwgUIX+WQJM26LDZ\nZ9wwVfmGdwbySOKRMmqlQ+OY2EfGMelUAFmhDlyQBDKGkLD3oEFS+Dh+/Vqv\n5JCAobVrZp+wJwxQmArDv0BALLnebMe1oKRKEASir81Trq2cfMqDnFmMCCfW\nfsvsMAuyCZ2YMhPtDoSZJZ8I2Y/HvjR8n5MkUUH8frwK7JJegcprXXJ7OzQr\ncMHj\r\n=9BmH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dc6dee1190cd8d60caae49aba599e9d7072433e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.599b8c319.0","@material/tab":"8.0.0-canary.599b8c319.0","@material/base":"8.0.0-canary.599b8c319.0","@material/animation":"8.0.0-canary.599b8c319.0","@material/feature-targeting":"8.0.0-canary.599b8c319.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.599b8c319.0_1593010664670_0.5139893011205858","host":"s3://npm-registry-packages"}},"8.0.0-canary.87e3be418.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.87e3be418.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.87e3be418.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":"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":"a3611585f94c25ee318fe044e63a6ae53e5b8f98","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.87e3be418.0.tgz","fileCount":52,"integrity":"sha512-Va/i8jEcAWgbv2lHEFLugG/f7W5+gKdkDuPB4i0NfWGpCZceg9B9ZzCMqmcBCKz31uRrVNn0lqLBYu0Of/yCiQ==","signatures":[{"sig":"MEUCIQC9JmBHoMpKnad4Gfz+T9Mnb5V1BmAFAyYhaXa7hSuwXAIge8+Tu9i3qXqPEQYAN2z1SCBZwhVM7anwoyd4HOCyMkc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe85NCCRA9TVsSAnZWagAAmhsP/jStI0Sfd6mZtHu33le9\n/BzB+NhX+B7xuuOIufgLgSMkP3S07hLiW63Zi8ShRza4X8b5bAO7yHwQRhYd\nIkjREhVz/n83pD9MUC5x3PEPz/cLuLFpBqrupWDF9ha/aXzaAPAg/hPSwGhk\nFvsLCoMZhJQ2e30I5+v7H4ZUMYccQHack/5Kn9oUx684gAiyf0obIvqJD7SS\nrqo/vSiyea8bSoG40Mje/iDoK/sDgtIrd54etImN07u9VlEANMPKP+G3zT35\n9JqhI7G+eC0kORc5TpPFIl26L3V1HIQR5VQ229OHo7uUoQYrkK4nlke1OA8a\nFRUBEJCs1ZFsBCkdsS+TPNX2dgA5XkYusTXZbm8UBoB5MCQrnCQpIS7pPZKM\n/zWtOtY1LdvADoClZ4D4SlnoSnraDMzuadcanUZlXTYDIDEqrWrZ58Is3ZuW\nskzM7VA2+M8TDUuTJsLfoaMqVA8zmJyZy8h4Vv5nI0cUO6Q3gWjxSZGaHJ28\nwTE4d1LC2AvGoWzUcMP224qxlYobJAANi8MuzTw3DJKSA9IZEg3e8zvDKyto\nBtfcYf9sza0IDCoJk7HxVD7vh3pm8CIBK8mncvpgOzITTcQn/O6512RsKJQo\n0aENjKW1rpjLZ50QtmaYK6Famgy1YZ3VDrAu/8/xTCs4adp1ryrDlt+YouE9\n+pu1\r\n=CDRF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4f20e6e641b48a8ec7f7916b83272bb1322a3663","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.87e3be418.0","@material/tab":"8.0.0-canary.87e3be418.0","@material/base":"8.0.0-canary.87e3be418.0","@material/animation":"8.0.0-canary.87e3be418.0","@material/feature-targeting":"8.0.0-canary.87e3be418.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.87e3be418.0_1593021249830_0.14313062771403628","host":"s3://npm-registry-packages"}},"8.0.0-canary.035cf2a6f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.035cf2a6f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.035cf2a6f.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":"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":"c9ed875513d66a4e23424dd6ccb5274b314284fd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.035cf2a6f.0.tgz","fileCount":52,"integrity":"sha512-TiDmN8u+E/omhME9Y8tjhZpbeBmirjNac72XBhlwnGaInQAjPKx6Wiq1Vs7Y5o/D5O/EfDEKnnLx47O1y5A9SA==","signatures":[{"sig":"MEQCIAj8j/La2BUmePdrArvVygks7nNXLSEUrz1R3Nkmcb+hAiA8dUFGkZwW6dDentZc7c+Ms+pOlP8mgi+JhmZafXXF9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe853fCRA9TVsSAnZWagAArQkP/A99OUK2DVXvpjZbInCY\nrXtorOWLY1GS2F490jD8OSCMRHZI+qUSfSotiIFK8YDler5CwrGr1YP/gvgA\nRbH38+g7egoyKaeuyHSLS+FF16VnQB/4cKE++cKCjXSq3bcSs1YcGIAh7Ko4\n5l7MSPfYInt6mVVvb+V9SGSGRH6s2GH+0D/cvN4pvB23sDuOgyr3cuUIHyxe\naxzAAtmNQvXCJwG0Bj+VrpfZFS3CTj7CEUw0No98EtMgRlwPd44w+cbEjUoK\nVdpvExs58AO7JeJWEecAYBgv1Kw8FptxYGSvWnv0zGqyf9ELp3OGrh5j4ZJo\n2sRdfHws3xskCkO5UXPeMRdVCtWYDWv0q7n1FfscTME3/uZG4TuLgnxMjMSG\nBF6d0SYqte/92N749e7QRNch+ycWiuQHz35Wzk46qGSAU4483FDIWNx+S24+\n5BDb1i5kI5/ZGhCLpD5eBnBCCGmkm5vwoczybdvgPtWICmYteWPmANG0nUWy\nu/lcARSq9zRlYY/YQAWaTjGRLmpQoOKWbFhmrAse4q3KfjZtN3OmZSW2bJmu\nVbHH/UUX9dmC/OVEtgf8FCkp8SEMAWWLzcgWPeEEH53oY51BQa7nncdzP25n\nT8D/LvriOxZXCWoV6JiF+qSeQ4ByTO623zh9fI29RXvK8F15p3GxLZeV1fz4\n8yN3\r\n=rK37\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b41149a9f9767b120dac2367ee34f615761dcf3d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.035cf2a6f.0","@material/tab":"8.0.0-canary.035cf2a6f.0","@material/base":"8.0.0-canary.035cf2a6f.0","@material/animation":"8.0.0-canary.035cf2a6f.0","@material/feature-targeting":"8.0.0-canary.035cf2a6f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.035cf2a6f.0_1593023967272_0.9055787543008773","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fed2c12f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2fed2c12f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.2fed2c12f.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":"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":"92434e7a5f8a6f6e23e73ba38fea4d1b2bc35aea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2fed2c12f.0.tgz","fileCount":52,"integrity":"sha512-RBIVaS+dHR5377GBA6B6iDQ7FRfZvvb9K3Byy7aZSKUxbaySjrOjDc+lSkj84ckQl1Yj+T446e5o3nWg6A6Tww==","signatures":[{"sig":"MEUCIQDRSpLtWpgnj73LmROujzCMXVim640faLmQWfEDVoMigAIgekG/ECzGL8e5x6wOP0UbwEfv4WuJpiNcGpqcPL9n0jY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9QLcCRA9TVsSAnZWagAAgfwP/2Ercp5vjFKDYpgp2MIZ\nvP5nLW2t/boXGecrsZh9GVEU0hM4HjcVdyZLU0oIIlTCbaqHCZlYJgt4LqLA\nd5+yWW2xw9w7Kh0hYd0CdUYy4cXQKRg5y7qgKKML8H4/wkgZFniPc8rdl+Pr\nK4sWxOJpI2Oy5jKBrZZkreO2pP+44M9lhF9JA60xj5UCndo8LsXNd7dbLbMN\nRPVej2zQMLTGrp3EeRA+XxZ07OmCE3KGgz9V/VsXhJ1RNnp1RplwHeF3KU6w\njJMPTP9PZuPJMv1JdGGf5hVIoXHlszJPaMe+kc+RkW7OsZm8wK5vlBO52xHN\nB7+DqdBOAqz9kXhZ3IevSRHUM+6clKxhTWGVEpakbyoSTSZaWz4GbDWqzb2o\n6qC47GAx4GPulUJ0PyJNcO0AQm+t0pG5HxmMCJY05EF3ClOCMqnvE7OMtZ6x\nj4sI5UartfLhT1kAhfH4FX2SJFAGqkeT/UWhSCBC80l6wsMAXRYXalxWnGI5\nySTrLzzrUL+o9/WXW5uOdEHlPDPjNjKSS4vTW4Qzl17jI/xRDsymKSjRN72S\nV4M0J5wZko4ZniNf3zADru7VyFilqjiZOouj72PrOiRO5J34oKbFy7Rcp8wJ\nAH7V7wh3KcK7tjfLUXXMgiT5puxlNPH5QvP1lO+y8czyx2tdCQYHrCf6kTH6\n9qJv\r\n=fMrn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9c7b4d7bb8c365a3b1a4408204f63c124455f635","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fed2c12f.0","@material/tab":"8.0.0-canary.2fed2c12f.0","@material/base":"8.0.0-canary.2fed2c12f.0","@material/animation":"8.0.0-canary.2fed2c12f.0","@material/feature-targeting":"8.0.0-canary.2fed2c12f.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.2fed2c12f.0_1593115355941_0.8790705414559035","host":"s3://npm-registry-packages"}},"8.0.0-canary.38197b443.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.38197b443.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.38197b443.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":"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":"7a8d1cc674ad8bb901821926792a2c01e28cb3d2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.38197b443.0.tgz","fileCount":52,"integrity":"sha512-ZiDeBlyhLRj2g5lWJT9qYZh+mDmrAaxzGE0e5T1qEQhUZceCOAZhbDuztVWhkdnDa9lU11+H5SuoWm5dKxLxig==","signatures":[{"sig":"MEQCICL8qfb67AkpKr706/VYfraMqXCVZTmogWQiwsAFsB7HAiBEvqsKTWFtow+2xqrSwI0hOjioyWARVRc7FPbu26BPoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9RXNCRA9TVsSAnZWagAAfCgQAJlabANVFg5Obs8Z+cpq\ndVqung5R4tZ1NlzsMFKh1t8hQhPVO/cSPHsHNYkOB9GRk847TMyq0racgxff\nDgj5jnWqe3S1S3xm2VeAwT4JdkR7rA01+5hGhOTxKrC7p+CbifJEhY4XGMF+\nvW05Z1HpoGKXdmhMciJxJ7J1VPh6mV9UgW8VV+9dZWDp65qxpxMeWluY4qFc\n6OJNr0cD+d1H5wWNfb+BrzFfD/5WTkOICz2G+kGXmVyWq8QSzFrDBCNz3/ke\nAXSkfSDdbu9wWsfQZ3RDhG3PfusrV61+RYoAeaW4DGgbD5Q/pWvncDovbYep\nG5bZ/P1XCMoSMj4LcZoNALwEE7mCpJ13aECOn5bjCO46xzwAbDt16nHDgeE+\nTtarR3UlIJgNEqmj5rcuS06iaSlQdY9X1QYyN893dR5Op8YqDLerYg9nRKJF\nFd1zhfmNn5kw5n6tlKLJLX9r/ZEObLQ7yzeJIZLRNWY/qBL91ItEI+wFlJLZ\ncrUkzYSt+yCmOrAQk0JkEk8kq2UiSGgcngguAaHjcUwU6AJLXhrbOJEJXtPd\nCq4ybUfTicjwkxrDqA4g7F12ZIYHZCHxI4zTTgSXkKZvzk8SnAThTA5E38gM\novIB6ZQBgxiwgJdpYeEnewBUhImEcKH90azHGcIVzZdHUNcg86RMpHTZaSpV\n5AZM\r\n=+tw6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d5e18162ee3d69aeff0d489d4f3f73bb1cad7b1c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38197b443.0","@material/tab":"8.0.0-canary.38197b443.0","@material/base":"8.0.0-canary.38197b443.0","@material/animation":"8.0.0-canary.38197b443.0","@material/feature-targeting":"8.0.0-canary.38197b443.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.38197b443.0_1593120204649_0.6881147833848911","host":"s3://npm-registry-packages"}},"8.0.0-canary.69a35e80c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.69a35e80c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.69a35e80c.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":"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":"e6c259e6cec132a9f6aef39cb718b3d9be2c1e00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.69a35e80c.0.tgz","fileCount":52,"integrity":"sha512-pCpWHifVjrHinTQFCnjNOUiLrnpPBHzepLpdjiONj+fHqZIQVdGvyyxMgGrCUMM/8gczw+Hl9y4aT+T3JrIMkw==","signatures":[{"sig":"MEYCIQCHMH9dUfDkpS9tGSE4cwlY5BwmeQyIj530oK4KywYg8QIhAI4je6Dsx1looU2ynB1Hw1yPrk/fNW236pab6B16GkE/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jLWCRA9TVsSAnZWagAAMRkP/jxt9sHLJ/CYdFkBzvjN\nNBlsKOC/0GmE1zmW1QHjcwlgi3thiZ7hTo19hdQA7Hc5RJ0U/21Tfy0sptag\ns3e6oBxTZslHONwxw+qdHxIYWaDhQjTLrZ31hp8aORaZLcJWp+N3u/rPmGHT\nVUS/qZ7Kk5u4ouxRGTvl5OnlGmj4+6xkXh4oEvku1nOIcPoV3AsNhla/P0oF\n/ncWC0T16Bp62U35IxUkjNod+RfKLT6ADrsggw2spJ45GqfeV3wpFp16tjO1\nXNj5VguPf24V3Eijv9ij0YenJJVXbe8bmnLx5oZfXIssljwAblTE6R0vWP24\ncCrY9KEou2hRg0b3zCuj7YsCyuq3fT77Nri4vCRJzwic5uUeZ30F4L8vjLxG\nduTqLdzJOVsr2hWl2pSajzCfI5wMftD++Rwl9bDH9bWCO5ZpBWuqOKDg9WjH\ngXnOj6GZ7r5QHqwxNyJETk4iQ5seQp9EuL4RW4ld7H/V9gnsuVQy53yjTPGK\nRu8xRc1a/8wMT8jr0YK3kQ4aRfVuuGCMRYyoiP4zLfjQIRyfraiorBlj3cWv\nC4kgcy5avik+16yHO/2WXFTDqZYI6hZG+spjQTgkLYV/S7bW1Tw0LwKKmWfi\nhgi2UFVFD+TY9p5zsI+bpujtccdN9NMP/ywzDFpv7TtOO9KmtjHeUxEEftZm\nVNJu\r\n=b2HC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"35bab77d7ad4b820da5ee4944c2cc2b7fe1533ba","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.69a35e80c.0","@material/tab":"8.0.0-canary.69a35e80c.0","@material/base":"8.0.0-canary.69a35e80c.0","@material/animation":"8.0.0-canary.69a35e80c.0","@material/feature-targeting":"8.0.0-canary.69a35e80c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.69a35e80c.0_1593193174378_0.964336057238707","host":"s3://npm-registry-packages"}},"8.0.0-canary.df7154fb3.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.df7154fb3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.df7154fb3.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":"04d31a857a38265907ee6a6d6136f5113213f20b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.df7154fb3.0.tgz","fileCount":52,"integrity":"sha512-d7yDkyoN0M/0aEuY0N4g1yri+bkGq1AUlgOmu/TiE9cXMe02VjMaLLbVrOB3lJlI+vQDYYCESVe8P8/pesLWrw==","signatures":[{"sig":"MEUCIQC+40b1MoplvXgT3MOjihS99Hal3zMmZK+MTIv4dLzkFwIgMBV4SpXjHajDfXXTsjxWyJ+44oY/TjD4yBuW6ul/SGY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9jvJCRA9TVsSAnZWagAAgHUP/ih9jLK67QOtn39XpD3m\nN9FO+yTyr7d4WBb9SPQUJSVlidxE6Rzv9PppyrqHmQRRE3GifZkKLGE1fR3C\n1uyZiIEqhIoPMBs5CgNBN1637YYRNfpgLn8WhGWtevNpx4WXxMWO/TfNGjzj\nyTZ2s2ZR9gbCT3uYm9Aop336HD009L0ot6J6l6fOdXE3lmkXHhezWNKTPYsa\nzLpIydahvrbJxf/KYYTl9hWho93qoTXHLnr0BtI02wYu2LqJgHynaDdk6mHC\nynmVwEknL/kR5vanuscMszCz5FpuNETMtKANVSdvCc2ZIAgaV4RZWU7lDVh+\nUw2KptvJoKZ5w3phbSYV8DGM0V6R+1D2sdGL9SoARnpKD4VWfTlkhZ+jLHT8\nucKBwgsKBZGng+kbFdHU2n8Tlm9cQbC+aKRbzBjH+rY0cG6gQCTta1WmKqsx\nYXy5Z3cf0xI5fTNesC3o/4wy5WbosQgTWTrh1mX34dXaVC6te9QCQzI76yNQ\nCDjm9utuPgPmBAn0mLqHDkQclgu0Cq2wJViEKnjyXuGaZPvvTiftM6MbqAJo\nqlUsy8+Fctgn2GsfBn9jdeZCPoF8qzcfGYuUURkss7Jm1F+nuUK0JH8ByHfC\nTQ8S5dIUtOKZonDUjKcATSb8XzaWqhRWQeDlhAi1DbHi+lwiF6zmoIFXSCGb\nJN5e\r\n=cXBB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9081758d517c13eb6f120c62abd9689f1fa99906","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.df7154fb3.0","@material/tab":"8.0.0-canary.df7154fb3.0","@material/base":"8.0.0-canary.df7154fb3.0","@material/animation":"8.0.0-canary.df7154fb3.0","@material/feature-targeting":"8.0.0-canary.df7154fb3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.df7154fb3.0_1593195465060_0.5093571011082116","host":"s3://npm-registry-packages"}},"8.0.0-canary.d5618602a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d5618602a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.d5618602a.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":"fe3596046ddccc522ab793334df333fa71f86d6d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d5618602a.0.tgz","fileCount":52,"integrity":"sha512-96LVjRxaXUVuICdgfVjoJKThqdtoPkXAoHP7P+DNCwj5mxWBTgQMaEREMtmKGnRKDcXu3jlNzqbLqCMoJ2mp0Q==","signatures":[{"sig":"MEUCIQDlc18LdjIFz6B7cgvfE1hf3L1GuYxxpJ1kJVhURa/dJwIgfiwCgr3cd/g+bIn7acebV2tGHhUxJHwfRK2eTRddEH8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9m1PCRA9TVsSAnZWagAAUKkP/i0ue2357hVAzKSvIwEI\nkdUxileLkjNe+r+I0Bfy8M6/TQIJMf8WZduBlC/Xf5e3krRDuDlbpBAkn7HB\nCGIZSm1+27tbGazMmx+F1uvk4QbgGEUUL+tUYwqUUj3PlqcwDkFKVHPUmlnC\ncfUN2Tza2pqaX/SIC0FPAd+2n1kPsaS/fIy1eS2b7WmPXI7S/NoYby0NjOyH\nUca0l+XQ4DARpQNlBkC4GxHJmwxIblWzVGay1PmVOlLObjIUUIdI1TfKR3oj\nMDbIcZfoeLIoYCNa+r0V+Bhdn9o9+i7Hs9hBbFiDwWpk3YLbg7CzJt12lxGd\nhfxduN8717WWqDNhkH1jKts0G8MmN68jzWqe/cb58fBu/GrPI5m+USDuiOgv\nc1HMcYNOGeYexmeEtT/05kVQ97j1iigwAh20+Dbpj6UPFetj9cWu8V/JiKdr\n02Wmc0U6BIrDzbTIDYR+kgOjEfJk/IW40fyTBL8V7QDRJ0Vhs70dPfduRovs\nof+SIXFO1lLgl2fFzg+fGXP4HoIzUJPzv6a3Pk4bRn33yQA4++ArlbQq02v6\nxawp2mCKXHWd5JRUTkohkVVgxzAHDXD13IK03ePOHvFSf814tEjQaUnw5h31\n06s4wTa9/G41f4VlxS9Bn76/tU7eo3AeDJQaP4o5D8O3k5ERD1v4S35SGW/v\nNihB\r\n=EY1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ced8c184e8043c7ac8faa813b76b9661cbe247c2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d5618602a.0","@material/tab":"8.0.0-canary.d5618602a.0","@material/base":"8.0.0-canary.d5618602a.0","@material/animation":"8.0.0-canary.d5618602a.0","@material/feature-targeting":"8.0.0-canary.d5618602a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.d5618602a.0_1593208142811_0.01923238623628576","host":"s3://npm-registry-packages"}},"8.0.0-canary.e590b376b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e590b376b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e590b376b.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":"8d5ec1695634ad778e8a5834e58ff46761978fbe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e590b376b.0.tgz","fileCount":52,"integrity":"sha512-uE2cnYk3d8CCFrsMAn0fEIixv2oUCOpWTvJ2VSdbnGnWwdqu1XD7pMv8CgzgMT6VeMxz95ApAe59yEhBb2ui5g==","signatures":[{"sig":"MEYCIQCx4RY4NUJlp3FdAeoiFeBPGnpE9K+idkBNbC7hUMHRugIhAJvrtoW/qF7KA+tsMDYPqZ9FZ/7lDTvZNCP2rW/0Ea+y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe9oOtCRA9TVsSAnZWagAA1moQAKNSxP7LHm6D/BebatWc\n6MQJsjTXYd+uXdDzolfLmMtCBKxzx8LggcKEpxKnleQhqz6oHInxsTKQf7Kd\nHWz7eEWJjH5gPofhkTZB63b6ld/htTq6/JyQTu6LNgwiwWH3pAsGhi5Nmrq+\nNV4SBFMNKj+83V6CsKGEtDIVdIJMwE1KzRgOTWZT/qoT97qTt5g8fbUgw9zH\nkHx3d5SHH5ndho3WSzXkSxQKHZ41vM3zBivQEn4d2tR/yL7jt3TZnTzY54G1\nmiT2zsZrRT9vPmbbJYizzjRi4RvXQ6NZZjyzTW0l9HaVG+d4tt9RIhGH9bM2\nyi/vRJ9/Ex8/s8gWOVQBATxZ9nrZoy8uR5NTkznXKHqJbgFgdzlanVLnrOi7\nUO6L9YKkfdTJCv0u72lMbv1YtS9gjkYGjf/UY3SrL4VpXK4e8ysnL1ESbczd\nfOEVATuhVHNIqUlUzxRFDgi4p53Xp1Dh6GUl6kQ6jT7R/uLLklpGho66sYKH\ncQxxRTnYwIraQwik1HwPHoBWw5X9kgV2UG+zACfgVcvAsuHTfg2oE15sRr6Y\n1dPBDxb4tmbPAOA9evbOZA1pigDir1LYcQLM1Q0gfmwJOKclKSEQPIvBUbIv\nKK9NYdRpNf+OSIGhCryIiI/gfPSOFSI0ttLRw0T+n2vSkSSvOj9bMSUYalbK\nXlA6\r\n=jX2Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0ddfb390b804034a98ec0b8e7741dd3f3250b5ab","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e590b376b.0","@material/tab":"8.0.0-canary.e590b376b.0","@material/base":"8.0.0-canary.e590b376b.0","@material/animation":"8.0.0-canary.e590b376b.0","@material/feature-targeting":"8.0.0-canary.e590b376b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e590b376b.0_1593213868548_0.7906501805675783","host":"s3://npm-registry-packages"}},"8.0.0-canary.0c9d6bd2d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.0c9d6bd2d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.0c9d6bd2d.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":"f9eab4a9ac5f4eaa37ca38bda9c632c9df519613","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.0c9d6bd2d.0.tgz","fileCount":52,"integrity":"sha512-07h1jX2ffiwaL8DfmxPhCwD4/FkQVTZ/3lQLcrb5bekZH9oc6Et5piNivqhPq9i+4hPl2LQDH09pLk8pGcxvRA==","signatures":[{"sig":"MEUCIQCQPmDJJgLJJQAgQAt4sEcTEOlt83JVXoVZA2yB6OT3lQIgBBLOsJeBRwoJTvzWSBcBUHfzKaUzQ+YPty6EMDEppOU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iHaCRA9TVsSAnZWagAA7xUP/2Or7GXFIcRCSZmnLQmq\ne+yAsSGgCs3sK/NfydQlHLwEoQlKX8svj71DVrNjj9AWV1V4DceHI+8oBPvF\nsJ+s8/jgUrZhtmq7w67OnxNRuHModwmIxVW8OmBr9WBpOYCbHgQ4xTYb3YNp\naQXUzXMG898FdSm+FW0UZwi7ORV83RQzrumqn1KF6DfAsYa17aynm0jSZE41\nGYOyqEqOZj16CWaVxybi6qFc1S615hsfyBceapNsnH2M8MQoj+BqgkoWnwfo\ngfML8GAVD6MVzom2FVRuUAPnLZSFEziIzVFLoqHcXNvhaavidtTaKRvT7118\n2O+9zkcGsf9LIwWKyBFhivvFOBYIf01CPMT5oftXcCUKRqlG+qmF13Vt7urG\nFKuyKbRNSY742YGxuQSy+yOszzdMIMLDsWJQY2wYsZbSyiizkL80FFr1I23J\n+AoQwEPokNUeun2ZBaL2Cs6AgbGxIBYEDc65eev7ZzrC6EcAmH9FZ567/wDX\n8UqWNcv4ynQaJ+uE/eUEsDeH8ocgcYSqSb5LfG7b0rY20e/5V/zQWqoCQZlQ\nOk2IvUl61nq+ghMjw/33wg5gd0HPwtu4/YvqVZo1JS/KujzIiZhiGKVfOns5\n4OZ3ExsfAVX+6izLw3pLIVX+13AK/i8X859ANoCUUcUB/lVT81IomCc5KRTZ\nlhzV\r\n=9Rfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4f171433da859f637823aa04bc12d72783771f90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0c9d6bd2d.0","@material/tab":"8.0.0-canary.0c9d6bd2d.0","@material/base":"8.0.0-canary.0c9d6bd2d.0","@material/animation":"8.0.0-canary.0c9d6bd2d.0","@material/feature-targeting":"8.0.0-canary.0c9d6bd2d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.0c9d6bd2d.0_1593450970276_0.8946728945916267","host":"s3://npm-registry-packages"}},"8.0.0-canary.c1fec4246.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c1fec4246.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.c1fec4246.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":"19cde6a74c67197f9731474ca4fbc8f55ad2196e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c1fec4246.0.tgz","fileCount":52,"integrity":"sha512-2ZKRpHIN8FYo7VydFeojRV8mNzrK7Yr5t79EuaUOjGQG2JbnuzquRh2YWrWtRgPJXHatW2ws39pRDAI7m5eyKg==","signatures":[{"sig":"MEUCIFHBhUNibL+PrNrwOJ+PSXoK9F1w6SOC4uMVg3EUivSrAiEA8I3zBOgUhPeSnxAsw8huOAGmTls8BZN6DCrLnX6sbEw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iV3CRA9TVsSAnZWagAAabcQAIXa04C16Z+bEYGJF8rI\n9SDJJnQUQzw3TxCFx/hnqVlZEti6BN309jkZOjRZFYneDfbct4+CCsZ+DWom\niyezfpoEGqLJIj//X47wlH592d9E2QVOlyJ9SLLmnpsn7RV9e7kNOOxEIUfU\nnLqFBrENhwzCw2Iq9BCtBUyBxVJFlJvPMFGcydI099ILlQdUcN9quxeNy85R\nm3q/akQ5/kjJpTyDXHFAgdQdFp5moTa+k1HUd9jXDT7qe6IjjVCPJt9gNfxi\n6MT9TIoER2mB8orWDxQ9I1H4ztQM/TUvxdGFmU3QvIu1epQrL9SjJrTKDQF9\ny3RvbeENwzGembUK0tkSpPw9ncg8PYyIXJy9IKZVP5A3ejfx1M9fSnfCNLzs\ng7kDhDM5TdTyD8PacVMpkv1x8fcUaqOumUtEGRsGzVZK3kNVH82MpY3d1WRS\ncu00YQ87HrcKcTgAjFAfcZ3rithVzqA4SmdzxRVIPrls0WalhaLGAd79lT5G\ngly//g2n63Z3h/DTxWT8EWI/auUNvcC0fQzHtd/mFGvZXy9Ahy3B5HOq06OM\n0TlVxXUTk8/jvrCgPVObIMz1gXFUQsJa3RlUTKjVO5h4O8G9e0q2F1nUeXj0\n0B98E1w8xmajRloYlZX3H/qDfnYQs1k+I7N64l3fu1n6WDgmyQM87vlggEyh\nT5by\r\n=ScFP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0a588e37208b314f42e946ab4add50d0ad1ebf7c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c1fec4246.0","@material/tab":"8.0.0-canary.c1fec4246.0","@material/base":"8.0.0-canary.c1fec4246.0","@material/animation":"8.0.0-canary.c1fec4246.0","@material/feature-targeting":"8.0.0-canary.c1fec4246.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.c1fec4246.0_1593451895099_0.4877659777042773","host":"s3://npm-registry-packages"}},"8.0.0-canary.c678a9d34.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c678a9d34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.c678a9d34.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":"d05d6dae47b442f19fa5a894f31b71d446b003d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c678a9d34.0.tgz","fileCount":52,"integrity":"sha512-l18DXet28PNPXj5/4vG8w4krH0qnO5z5r1ABPAumm4eNYJe8IECiIvHIjL5GbKS7RMPjjh3tsnITjNOZAWd8bw==","signatures":[{"sig":"MEUCIHRpej4O0jkAj7QCeQHm5M4Hi1MPNvT4CEvVGiPqqr49AiEA9nyUrUevtD90H10k4G92zaMknCZXY8ffCntREG/HMW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+iqCCRA9TVsSAnZWagAAOXMP/ROoxyJ83CaC8XUJTZNC\nRTjz7tptK8A09yVZlINsXDDts4Ba9HN2MR29CnQ5MLCPA7iVv6rLoTax+W+x\n8E0jRm7zYZQfWp0/k2PFCL80o7yTWQJG14J67lwPmmnLh8r5hqdXDr9j+gbn\nCEr3ima7DmRyDsKzpfj1yx7KHoicM1ag1jBawGy4QVK9+FXcVW81zIn7dA6x\nCAkAAAjwPfS2ITILmFkWQmsSdUgG0fQ4PEIvMtF/piirs8tsNWew4kVKuQHe\n/uUPGZd3qNAKEYK4xnbGetIWbWBTyc16Dh2OHVuabdi7hwM/Yo2LPfgB5cUi\noze5Wz3Gq00FVXphaw3cz4rT4AYWh10hkpOiiQ1wR2kQPdn10hQ3sYaAvdUf\nL7jjm4uJVdS610QCU6PWw7OkeIJJvlLI6x0FFDLoeX2j/Evaj/iIdC4g46Eh\n7D77e6cVuygcJvSOEf/uyH3Lf7qt+5anLvfTmt0gtzakT8vrXK1CdYLpTPLS\nDFRQ1n68aWf8sitcFeaV9uerOAaxP9V+Gf1bYGrPPRJDKsJpYAx9IUiJ0GfI\nNwka+0Q/OfXQsN2UYOFgVWo222lTdr8UpHpW58btZDvd2ADdLwnN8ZbZ6csG\niAmDYY1ru025JKLz72q6j8IFdL8mAA/p3gYf7vRqsMsx0Job4IyL5K/+C//H\nlkyr\r\n=oHdY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bc361f7c6bcb498f3a6dbbe6255c06a66b7dea5a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c678a9d34.0","@material/tab":"8.0.0-canary.c678a9d34.0","@material/base":"8.0.0-canary.c678a9d34.0","@material/animation":"8.0.0-canary.c678a9d34.0","@material/feature-targeting":"8.0.0-canary.c678a9d34.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.c678a9d34.0_1593453185703_0.7258936792493289","host":"s3://npm-registry-packages"}},"8.0.0-canary.521afaf6e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.521afaf6e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.521afaf6e.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":"44aacc0c37012007dfcf2602231d8273c8a00f00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.521afaf6e.0.tgz","fileCount":52,"integrity":"sha512-7dubsYc4qI1fy7V8nhgi5kok+V/DUa3/MGVBJoQAfPhtBHZjARygcxjWEErksEywdQr/XxyhMbl9XJ3LMp7FAQ==","signatures":[{"sig":"MEUCIQCt0UGgS5J8zVnOaUwEkFLykYgvExJwZNB+1fXQdPqoyQIgJo7YZqm4VIwPTrnGq323DtfKx9BkzBkjRpkHJHOnaW8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+1T5CRA9TVsSAnZWagAAtv8P/3axk8HarIqOJWDODKzq\nXy1NCNBXuGoFQI5Fg7CoK+7WdzyUjk+PE05v+mRqPZe7ei3vOwh2fKVfmh7D\nFPtHFkX+2w0fR1atN0oe7GxtTztprq/wwNSwf/qDynf3yQ0YZE6zwTTcUPzb\nRBNhjR3eyk9v1CRjB83SOvrxdgO67i9nV/2vpPJVx8LRkgPMFAhXxAQDtxY1\n/UQAzd62G6ZhsNOw7+VgwivybzkbrNl6DBQEPIdzQbnciQ6NFDq1n3QbPBl/\nN9YbLJIIN6fMjU8fgbwQxPaEYdg2VmEb5j0D9ZCuJXB1mwrffbzQtURQfo4a\n7vZgXHQOHwlC2e0sq2vlHjt8krZlA7f78WA09Fi8/UBg9BzxXW3Lj1bprB3B\nbIRy+FT3a4lMMsfsoG2hwtzbCzNKNtXntaEkQofdgKIbDWk05EHB914KQ2gt\nz4N1WY7wzu5/aU/4Z18iCyRLCcm/CRI6bQhx2BNMipqjt/00MoOOLMCRAgcG\nLAl3Lc1e+n5wYMdBPiZFAxns4L9CeDkpCmDTl7GVtQgCcTz7bmzfQz5Y/kCB\ntOv4/fCbwf5KjDVIWlq+IDzlWsJx7NpJ3R/2YBnaBBnoQnXaYJaaR/SRABf7\nI+kPtX/QQMf1UtDhVFq4iY+ejMELcJdisyxDQQ1TeUjkQzAQfiBrGbxo1oS2\noBZW\r\n=ob7E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7ef14e207a6031cf299541a4dd72c2eafba3ef91","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.521afaf6e.0","@material/tab":"8.0.0-canary.521afaf6e.0","@material/base":"8.0.0-canary.521afaf6e.0","@material/animation":"8.0.0-canary.521afaf6e.0","@material/feature-targeting":"8.0.0-canary.521afaf6e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.521afaf6e.0_1593529592567_0.38228971291192093","host":"s3://npm-registry-packages"}},"8.0.0-canary.a2ad48839.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a2ad48839.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.a2ad48839.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":"8e9e61ca4721875cc432279eced76470eabf23c6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a2ad48839.0.tgz","fileCount":52,"integrity":"sha512-b8w90Us9eUlCF1XllPObfJ09kTvz2N5jj7HPsn+dt23M5pOYi0g/sP1esAikECHwIotqwUlLy50wvkBp1LCezA==","signatures":[{"sig":"MEUCIQD0vvSIO3RUGnCatAllYlfUEPuCIWDpQX/9rME99ltFuwIgP0zIvfYXc3HxoXWO+IjbdhMqw0xlTVW95K32Rsu+27o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+49MCRA9TVsSAnZWagAA7twP/04Y4FhomFF/5XaDqLEA\nQvGXGqw+Bhdt+JgDi4079j7mil9n9Uz9xoZEi8Vx+ML+Nv/fll8OG9USg/sj\ndU6bj41/vM4ygeBilaG5AngC0KTApKImuIBfEc76oqkPwtbdiD1e18TBb1+l\nqk3p80CR0RhRzfvmcAMxcrs4DGHrrki8kW3PFgGf12U8gX/32oTpD4KHfLot\n6O8iTtXgTj6dIGhtHV6LxUL39EUs6M90iTi0vT6CZfQxH0Kgu8HsEpEz0qgI\ntAbuLNzamC1r8m0vZLWeaj6Wxxw6L8C8LiLwRU8pS4x7Cxh67+zaIURkykCC\ndg5BhWjSNZBLyjyBgejuc1cshmFl5o8CiN+b3PE7z2Jl82LiCHGPUJKxzHgD\n8opdJKgLrs1/uDePxbpIiLi5Y5s/dMsCcnQFE4Ej86Ei9YVPEyVSxZRJHznC\nd3kJbIlCUzNX13/s8ZAl3ICVYYsnyAFhNUZ+00Oz5fE5Pv9CUDKReGtE6Df+\n3aCetVunLMm2cX1nhVgrREjs88DMzmW+zS1TiM8kcpRLZu17cr9cnFR7zwNK\nOspE6df0gvrkN5uH/dZLLZ/T8lfV0rYlsIxjTEJx6A0sg6+Wrr4wGjR/7MC8\n4ifD0qvFJ+2HGpHW7ZleS7jae6gQTK71z2+nMLXkqtPVzVaijKeyuI04gRWz\nUGB8\r\n=5LFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f7f949a98e604fd4cce2507e8d63c145d2f34e55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a2ad48839.0","@material/tab":"8.0.0-canary.a2ad48839.0","@material/base":"8.0.0-canary.a2ad48839.0","@material/animation":"8.0.0-canary.a2ad48839.0","@material/feature-targeting":"8.0.0-canary.a2ad48839.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.a2ad48839.0_1593544524103_0.6005141636889932","host":"s3://npm-registry-packages"}},"8.0.0-canary.ec2385881.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ec2385881.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.ec2385881.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":"91b5a5e28af3d3be7796dcbe12b6e1a2f45c4f8d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ec2385881.0.tgz","fileCount":52,"integrity":"sha512-DhuKLJXCLsih6EFByUJ0UCadgYKjqRc5HQftcyWXBybsLHGRV48ZEqbDE866vs9Am4puECBn1S6TNb8hiPsfkA==","signatures":[{"sig":"MEUCIBqiAAj/vUk7447Uagz7bHKvD6+ZICye9Yi1TrSQg9r+AiEA95eLHqAzqiIHqrTo2GRGx2fuQEkkItwu/kaH7B0KwDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe+7MTCRA9TVsSAnZWagAAqxkQAJETarSRhrpyFUzQvxc2\n67bEMuVV/A4kw+VnZkClbGORUstvpc3X3nweCopm2nZKVChpufg2vn6dQH2w\nO0eib/UNZgBbJIsYUMZQHokITxmCJklutM+6HNSbOgaxhg8QUTVYPo1oGmnJ\nGUfp3/nKzAZi2HZaEU/yaiUdTFMlNoaXVLmWq7S70ryzKjfZ1/QuF04D3gg/\nU72HTaKELTgp1tL0icrzb00q7caWew0C+aiGk/7HL9nDWvSus4GCGPW64DMU\nWc8dCCqeS7tjVZ4lAFHWWPgg1l8X3dXMPCN6Mn5lf0NtL5FZaXmJmJJLKYgn\nd82x+UYVBW9S24c/5FfsICApoyegzX8NpylWir/+7EWJ2oUihjKPz4ANXhzu\nSKN2ezGcDCFgwEImtr7bw7OET5ItG5X23uU7Un8AvNDp/BpZOM3jFg2Ke/Ce\nVVvQAPJx0oGfhiKb8BtGI17a7JTQqJh6r9/arXRQmiZhrZekAKqXajPQ8rWs\nt/KQzlkHVHAXOj+EB33miKRRVrf7OtGkBMc/aoIll51veBNgPoM/zBYy520p\nrrnyNJI6oTXggfKfgyxaz64Vcx9TThHAc92gd27SOeIJyf76SfApYz2YIcuB\n1hdSCBaavfAcoxbMmcRBevmfXw+PTlpi7SYjQhPp1p4fZ7i3WO28CFW7hzS9\naTyo\r\n=RMbz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0039d314b5ff29856a2f17a5ede426f3f01c80bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ec2385881.0","@material/tab":"8.0.0-canary.ec2385881.0","@material/base":"8.0.0-canary.ec2385881.0","@material/animation":"8.0.0-canary.ec2385881.0","@material/feature-targeting":"8.0.0-canary.ec2385881.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.ec2385881.0_1593553683213_0.5505277977673522","host":"s3://npm-registry-packages"}},"8.0.0-canary.610c26c4a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.610c26c4a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.610c26c4a.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":"99dcd515bf5fefef345370047759d8efd49303f1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.610c26c4a.0.tgz","fileCount":52,"integrity":"sha512-N1ty6Ss3pQttPZx0seWHI3nOIS4Aj0iKn+lflDHckp2vgSQ1IYB6m8wVUHuBpjPS7WaDN1TeXkrSo+Uji4j5OA==","signatures":[{"sig":"MEQCIBZ9L5HnYfvoIWG9vO7JyETfVV9z6HIDrdMxSRE7/TYpAiBq38XYWETCTUnZVeugYGJomM8QxbJMAf23FAZjsuJJBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/KRGCRA9TVsSAnZWagAAr1QP/2bOceTrPHk1YhQrjF26\nL6UScAPnvvcKCJpoFM0exceCbRLIVfPD4n1eIqWvcAYVBxfiev+UOUc6ke7k\ntIcT05+dx1rEZMkxGhUz8H/SgfwIPbbtTPZdcCXEBlysc/+MmbJNhqTHcmc6\nw8U8scdXHPAO0GeD/kwRw/EoPWcJ5HXwKaem/ptR496l8kGqD3Gg2ZbWAc1N\n6i8UHDttz+OBcRc9stE6alJ1F0ybYwgOjnmM/NyeR8YyE3uk0q59luLvFiBp\ntVk+KwcSzWEQ+Qm1OkjldvoVibLKvZKDJwoJXLH/8eYhvoyfS8klr3xdyUjN\nOofOr4UpH5rtI+WoRqBghJexmpXTl6ujg5+vXAoNTrr+xKQTjyaObgEVIVT+\n3Xk1qRJclXmmUprTpicWrVoXwPM/1uHRfCa3hz3cWXExPATJXN3ZyisHuVBu\n/7Xb9Yf+q8tBaRi6kq+DvzJf1/FbQPCAPzgzFnIr4F5v5ZIAcn1wdrIe2TLy\n+drlgBYRXeSnVP08RldBYBW42TP7vpbiX1x29J0iJS1xcUWAdv8H/krdDvqw\nPKRUnBBnedGpAsY/C59JGldVEO1TABZpzav1Z4CNqDfc11zrQrHs7OkCb2Pi\nx+EvmJdjnY8cFHwyQXCj/hdTe4D0hM7BQzkqehBt9jcrwPB7Gte0YUa0p7tP\niFxY\r\n=qTXW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"84352d6873c8f275f890267635fa416189f57a3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.610c26c4a.0","@material/tab":"8.0.0-canary.610c26c4a.0","@material/base":"8.0.0-canary.610c26c4a.0","@material/animation":"8.0.0-canary.610c26c4a.0","@material/feature-targeting":"8.0.0-canary.610c26c4a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.610c26c4a.0_1593615430180_0.14118116277428627","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2ea4a99e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e2ea4a99e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e2ea4a99e.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":"0122227c5edd527fd6da0897ed30cf08293e2b48","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e2ea4a99e.0.tgz","fileCount":52,"integrity":"sha512-19jeXm1HGiAztrueMHWh48GwvD7LwEeZ65FiIDdJvDbeXsWVfseOo+MvSJaM40PTir/eJW3uLvL5a1bjBcs/gA==","signatures":[{"sig":"MEUCICwMjqONdxpj+npcuPZMfrztk5q1TS1/MdD1BifYO5SuAiEAx/1JrXOfgHhSjeYPvWcRUcWv4Oc8cr3pycUKsdE0XYc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OPDCRA9TVsSAnZWagAAdW4P/jExQ1yzfT6aLklCr7dE\n4+XFJRlajNUWItjwpoeUhNdt57VrNbR0D1CuxPvELlqst1YpQHRoOQbW+KeM\n9I8IPbu82CH8PNV5ac4c2zzPWuRqhik6+BINTogOSjbP4aeQ/6hN9ERjeMzY\nJ+J3e4wEve4+Ux4b2LSk89+KsFx9x9IRPW/e/JpbSgEvNZ5QlbuMQm6w9UA0\nYjGD/HnkTs6cZgn9zZGrehZDQ2NLaejnlXTyMpNjfP0JSgJU6YcOuiHugkj6\nHgUcglcQTyjo/AgdSeDw5ZJILON6erBLjfGSh189WmzaKXpmdmzYJnQFYK42\nEae0jQoqL40UxPH1IzPfZSbpVJ/NahdZq8AqzPknscHT6G6qSG5NMB9w4zHR\nFsjdnDXTezf8iQfrpYv77sx86JGTCYuMTr3DTs9G27H4zVk7pO8eVsCZ2y8s\n4LMnP0A6/HQEkaJitnoJ4Ay2iM3ujq/+URs9Cw2TH/ElQWnvJHpJ6oY2h2wQ\nU3ohlSeGY+sV4hc5qx8EYZWN7EYl3AH0LoQjNLQZffl/SOZJ2CZl2GJnmz9S\nRcRcpxXl+zwt302aeUYEmfws0dMJKZW4WaarNG8HCOCqGVO/KMHB4Gxrn6Eh\nZ70jmn2MSpIrE9W21K22m3jDyo2upSEct/8I6RtM4E29WDVJ/o62t2ly9a1O\n+LKf\r\n=EdW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"42e9f40d91c643a9770e5a563a204c7f36196a3b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2ea4a99e.0","@material/tab":"8.0.0-canary.e2ea4a99e.0","@material/base":"8.0.0-canary.e2ea4a99e.0","@material/animation":"8.0.0-canary.e2ea4a99e.0","@material/feature-targeting":"8.0.0-canary.e2ea4a99e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e2ea4a99e.0_1593631682714_0.365202751712675","host":"s3://npm-registry-packages"}},"8.0.0-canary.a78ceb112.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a78ceb112.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.a78ceb112.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":"393b79ed32bb6ceda87be8d4a6f64506b35e009d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a78ceb112.0.tgz","fileCount":52,"integrity":"sha512-of9L0foIN+jec1QRDnygTJ2vbK6MLGcJV1kPAFxBehObXo7MMisP8jZtxLCLaV5sdPpVvfIPdGdvvemYWUsysw==","signatures":[{"sig":"MEUCIFd/noMm8wWL0Y1RrFrFLUoFi03NbsWk8GbPvVNgLv49AiEA+2qQSMngwD3EtPnhUpwRGt3pFC22PNBYxOV2Wn1egKc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJe/OaECRA9TVsSAnZWagAAoHUP/3Cf+CbUNqS93UHsECRY\nE7tyz7KncjKgNaUhyOAio7uZ2p2jY6UMrVnAZxspkVF2RL6dCZpdzsowgQex\nvClsCuWMtPUMIMkEi4VDPp4DYItUnV2D/GWaFmAbPnIzJKRLpTiqjr7bf8c4\nXuRNUXw3Yu1qLkMT9TQAOIIQxAuT8Rh7buFuYWt8BkKR7BozPASfBafVEn8n\nRCh0F217B2QEwIuULL0ogljg2FlwNr3L6HHkAAG/u0iwMRi3+pwRWW4eYmT5\nB6vRxQ3C9FfihIrS+rrXVJxVju7gN4eA8ODnaWmAIfdKHk1CGM1vDleogCCg\nfLuFGC2NreWvCCP6blOAmEMhYFLw89Zrx/MBRDbQwluQdySBfottJHMfUkP1\niI2Mmd9KGMDbz3ohAwtuYSmnQXalhXZyR/t+AsRUDxx1ofkwoY3Y9+38uUfL\nlGHRKVb2KIWuSKJrxUvHGk3eaT/4AUVUqSYcMvw11pmXsovqgJNgriJ6d1kr\nKcDTlWXCpbt771BwNyt3cjBf7V3Iz8rizzKmgP4zLXueBFChbQbZgglrzvrB\ncdVb77TqHUxiXTzPz2jXOVM9QIJv3MI7T2NpElDN6fUDAIr91jMOTDFl1Izb\n9dka3N4GI7DWNqI+wSLrcn3EBcJqMgsgzVJYYSEhYFOgPbHaYWo/VLb6DPcq\nOONV\r\n=vAFx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3a38e39f3d172dfa99254185d8b0d4c03dcc61e3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a78ceb112.0","@material/tab":"8.0.0-canary.a78ceb112.0","@material/base":"8.0.0-canary.a78ceb112.0","@material/animation":"8.0.0-canary.a78ceb112.0","@material/feature-targeting":"8.0.0-canary.a78ceb112.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.a78ceb112.0_1593632388199_0.287444361105617","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0c456d33.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b0c456d33.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.b0c456d33.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":"a72f6d893513370ecd2415d7606127c5e08e3146","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b0c456d33.0.tgz","fileCount":52,"integrity":"sha512-ZKj+wwoci2fTP+g4w0amECCaqg8hz+GWdiQVGoV1FCydqTLDbqBjpE4SZZK+h9GG+ZAEUIty2uj1RNQZwjY+aQ==","signatures":[{"sig":"MEQCIE+Qs3xKne15PdxzVHOLdR4RR0gFc0LTPm7fpUyOCyrGAiAZwvMdFzbwDac3ejdNw8+R/X+O2FjLKModi+Kr+UHaqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfA6jOCRA9TVsSAnZWagAAXQYP/i/5oqeSJCcDwqUiw+ws\neOeGN0O50iXWf9h1ehKqGeErhJ7fAblH5Xf/kAwXSUlyX5W6xe1SuHhrvSgu\nkkm+P5cfRxD6YtT13Q3p3e8+vTtG4IPjU+romiSEIw7dbsQUonOD6uONK5gQ\njiCSdLRpy5CSnFxwSzLNcuMElV24neuDyf4GM+nXpRbKfmjtKB6Rlff1pe0I\nzdFDQqwNuCmCqvLeI/s7IuEuAgadBLbf2KWxai7pkU+xp0PMZzTjuMFfcrd3\nuk1Q7FGd/9PDnbvAY+tHK64hrCaaOOf+NokJdZCrKwzIfwrTMHvEP2u8AMcI\nbc2SNcxMqmQFWKc6l+9x0VDaaOTbmkV9yQM4jaTR5j3UdEeW2ag5MAcGT4hN\n3dqYK/MY7jX8wTUle0PwNsNOwkbxy1w0WnxMRUk5fGw/XfsAG6p2rCNNnOPK\nGvxzjtIScyh0QgZI/nZ/yBEZxyvXQMQ/QUfx464/hBx3mgdFzkFBZx1CAZNA\nGN4qc1kzX/hLiTXLDyASNGykYyjZ0XlZo60gFlor1NW+eGzpjoPb0BOjp0zR\nblQLvVMTarlo+7lvRHTCR0WymTwZf6IWozC0Vc+Fl/jTDWXAHelQ1Cv7g9HN\nPDRuSziSo6feAbz04C3EFGQ8hMmXxTQqM/XXvCMxquaOSj3g/grVBTyiQ0QQ\nY5OJ\r\n=qH26\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c9a540f1489e069a2e5cd262f5daabc034039d2a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0c456d33.0","@material/tab":"8.0.0-canary.b0c456d33.0","@material/base":"8.0.0-canary.b0c456d33.0","@material/animation":"8.0.0-canary.b0c456d33.0","@material/feature-targeting":"8.0.0-canary.b0c456d33.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.b0c456d33.0_1594075341953_0.28743112430889783","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e5711e04.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2e5711e04.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.2e5711e04.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":"f7f27ac6e122cf18aee90d40906aa6211b5ff8b4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2e5711e04.0.tgz","fileCount":52,"integrity":"sha512-hgsNedNfPrkHF0FHvGjsMQuvgTlmKC/xKOtroOTkTWGGJAmm+K4L0qvxRcMhCsK+sCsgBMpxdZeNBlQ5BjQgcg==","signatures":[{"sig":"MEYCIQDm8drySEZIbl7e/OB16Wn0pCAe7HxtGj6QItpZvibyNQIhAOFoCKrV7yN40L+JbK2b9F9lkmWEBEP1w5HEdrJZOeCm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBfkJCRA9TVsSAnZWagAAr84P/2lFf7MRw0cg4iKFrOyn\ncC3MUNDvUHPC2IVp+5vU2tOMWHVy4QsaVzWSkrTr30UnYIIySfMG2RXjnjNg\ncP+QUQ/G3RRqN3yN2EOsZ0qY5Ten1pkIcOYKGGW0tx6PshtT/8YKhGiddz54\n3YhAH1UwKg+qCcsfMcV5DTUL6F9Ely5FXZuTAwAhKKGqoufZLaaNCvY3tYjq\nAO5IdYeKygyspSdAvrMAFhB89XtNEqOKTSCJt4+7Z1EJsQw8oD0sM/DjdpBn\nU/zsQc4hl0vsFUPg924quhXmhcCUzX55BDfkGKIzlZTDclbI6bd14Izs1Y8Z\nr4vC6vT0xCpZQ6U0WMQk87rB8y9PoQrSLrQmjbY5XEU73NXyCemewClJTRwF\n2p3Sj+y3ihCf9bG0BLb32E21UVgoGqtYIgTW76YxeAPbJBZ8lt7oo3UQ5g1W\nM2ITAQNIlQrV2AnOyCiA2J8HzxgmYl0RqbipsUltwEm5oPRwhPnoxs9bL8mc\nfp0Wjx+QU6M+BBdB1vg/efacThf8p8dR8wkxMWkJmnmVsbbmzri2wK0M9jUb\nXbuPgNEpi6OjQfDxg0iZ8oY3NytpWZl6FVtqQ5FwJ0HGpPuP+645IG/wMLoj\nRaxhO0YS6MKbIf5UGu3lVbckbnIwCX8olGYEjgFTL/4wAK1zWMDGxbTfixN5\nxgzT\r\n=nyOP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4786b99e99bbd4c7b7f10a9111b884c165f1bc7d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e5711e04.0","@material/tab":"8.0.0-canary.2e5711e04.0","@material/base":"8.0.0-canary.2e5711e04.0","@material/animation":"8.0.0-canary.2e5711e04.0","@material/feature-targeting":"8.0.0-canary.2e5711e04.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.2e5711e04.0_1594226953009_0.7113952680999671","host":"s3://npm-registry-packages"}},"8.0.0-canary.811fc5d24.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.811fc5d24.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.811fc5d24.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":"802b4e8f0a742508f416221ae5408509959f6e77","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.811fc5d24.0.tgz","fileCount":52,"integrity":"sha512-2XBzPgVkXuI0oXxygeEZrjctjGCBiLaiD9hHtlc3kOmHzPHf5RR+iLL5iJ/h//xgrVZjeEe9atNc6byKUncWsQ==","signatures":[{"sig":"MEYCIQCI5EaYN9Z7MJWOHHdInIUnCcQqE+qAKr17RIpPsj7OoAIhAKhWUvELL1dpVxCFnNu6YqMlvu17wZ3WZMLcailwMJZB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBf+SCRA9TVsSAnZWagAAy9oQAJPFUyE3WTSr3XYtVRBa\ng24tMGsPNxlfIOAG141sdWbjSR9ec8IMYlI1Ss2d4k+4V0HKegMkB0xR3uHa\n79fPJJE8I1G0qBu3+DN9/zIP9qXA/hgCD+iH0AgVE71J/wmOk8jWJoLi009I\nKuAgeU1UblB+VW+IizEZdAp4ty0494Jo8wB0/8UHNQvox9aHM72/ko42oEqU\nrVTRETTmFRXWkjemOsOF1PwfX1mSX83IOfV4fChVAM/ba2kFQefcLwAtZCyK\n2HRj+LEMXw+hcY9dH/Affk6AyYH/33WspkcewIpzR7crHnnjME0CFM4dt4vq\nEdFKJaE88sUbwUruO2hnBXJG5gKaqs3qU5Yxz9DnUxjmZHGOyKh5O7NnwHhs\njsH+xMyq3qrDOkfs1N53JSrJffLOjU3HgmOpjFH/jMCvL3Zs8arjmx6+7t6r\nb/VBXX0NRBiK1Hut5uO5UH4dRbM6LAsXdJ/TgT/e7scNwemb4XbxyExbTmnn\n/R2A4+/lnTedTyipjHTEvy4xNE5eSS/qSYoBWjmqtj2f7be4hYKtWpHT9cTV\nR6vj6teId514kZGJm7X8+E/9ub3CBdHzowBVXEddLK85t1s0znBKW03EQgiG\nLZHOUI2fGlcSkC37Y1I8tvoLeb+iDzt5amTQcJSHrqP/gooD/Czsa9ivUMyg\nYsTn\r\n=OGE3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d1a1abefb8800a6dcc0cb20f74923403ee1ca66d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.811fc5d24.0","@material/tab":"8.0.0-canary.811fc5d24.0","@material/base":"8.0.0-canary.811fc5d24.0","@material/animation":"8.0.0-canary.811fc5d24.0","@material/feature-targeting":"8.0.0-canary.811fc5d24.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.811fc5d24.0_1594228625626_0.661966785576632","host":"s3://npm-registry-packages"}},"8.0.0-canary.6ed717ddd.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.6ed717ddd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.6ed717ddd.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":"9dd86ee62361e3c6d7e0f86f688f47eb4d2e7aed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.6ed717ddd.0.tgz","fileCount":52,"integrity":"sha512-m6CQSnPcQf3JCrO++kaXOxflcB+vvQgw3SDk/bsQoRh5V3NK6x4e1Pj+kVHrHTIxl7hPzAn+MNG4rHN8aX10pw==","signatures":[{"sig":"MEYCIQDS3eAPF1JbsiHY/D4ouEx4Gv7QH2n64Zkg33KHQEugNgIhAPtUG6b9xMBPIiooSUcBvjPuIxlzpbgptkRXjZmlTGts","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfBiI/CRA9TVsSAnZWagAA9M4P/j53ZKS5LIyQrJdwdPHB\nl93bGQ/ffIXTDvGQGYvNcWNi1/iEjeUOi5t27JWnKGag0t62WPZmtoK8q06+\nAcz2/noZiiApRc+nUhz+2EMPeXJ/7Vzv6BfppUforj7Tg9KJINBzsj8jm6fW\neoKl8PounTarKRzHz3kkroZYHKmrod1VrBELraErboig9W+Go4JSV5ayNhRn\n3tkFa3MY+OV/z6MnoNqndseWM5Vo7HuaNvAAxQLGpvF+UwFcpKn5y23rjLj7\ntFGzVmBVd7O6xk5SWgMW4ft0Al3GrXc9Qp/i3SB9S1HjJ8Uq2IZQXpQhBtYI\nHx8XRJYeYt36PtDnhsz+WCHL8IyXAFOIBZoA2Z7JF+P+vWnYKvqJqoVkCYs/\nmc6eFE5MPKfA5r5VIvJMguSWHEbmSFC+FgQlQJ5ciioiKrCrGfLn+cX0IuDR\nqIQ5LlF5NOO304oI88BIaw83aZKkYLEI9650gTth3RujxcYyTzVYsx5v2VRG\nDy47srSPShjTntd01fsGILctrkGiyAYjMtNeC2feZAltLIfI3pNS8Bjof6oa\n5XJq9+QKBTn4KU1wORxKKosw8E8m4rxk5POfJKQWgqUcDba+nMIyl3JD2yRH\nzb5/PPvEcavVKQqQJAGGwsEQuZuB8xZlWa4ZNjjYLNaBJwN6UfRjIs2UK2ao\nIOI7\r\n=C9Tr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7c9c6df731e0edf42938b11082973eba27e870e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6ed717ddd.0","@material/tab":"8.0.0-canary.6ed717ddd.0","@material/base":"8.0.0-canary.6ed717ddd.0","@material/animation":"8.0.0-canary.6ed717ddd.0","@material/feature-targeting":"8.0.0-canary.6ed717ddd.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.6ed717ddd.0_1594237503597_0.5803742419815026","host":"s3://npm-registry-packages"}},"8.0.0-canary.d850de590.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d850de590.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.d850de590.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":"455bca56f96a09e83482fff1f7e20dc012ac983e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d850de590.0.tgz","fileCount":52,"integrity":"sha512-5cnd19U8mBGjyIIVYD9q5IKixXNT5KLXvI40tuyhNCIRLNWchUpzs5VLJ4NbMJbFYblbTxsq9HF/xTwvu1vU7A==","signatures":[{"sig":"MEUCIQDsqJApDBa0vNwnMC8uS1gnxb/tDt4DEbXGD60cS4qsDgIgegwKXG+3K53aFdp/z899HBXz9QDqEPvqf1WqyVMke9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB1yfCRA9TVsSAnZWagAAZt0QAJhqIoTY06WRs3Rl3PlG\nwb35UL6pD2wHuXchuhlCEFs7iVhgnGljqTgt9pNQf1MWeMavFQfvM7hA0I7S\nvn3NlbSQK7DyHV4jvxfNUv4gOMeWx4oT/20LmAIy+C1zqgFyxg9AlKUkncHL\njEjLzucapi0Wwolm6UuQN7F7RBOebPg0GRHdL0snQh+YJmz6C9MiDtgmTQjk\nLEbDtPjCzp430JOPU4SGuhEIR7Zq6VlB55AnRQeiR29m4V/sRGOYNEjlSegW\nhT/dK1iW+U08oGIBrzAVShwIiNJcGJx/BA/HVjWeYtQo+fbQvRwa2Di6tcmj\neVszZDO4nW/11LoCVHVAl9nkBreA14ZkYZu1DoqbQ35rMUeLhJFF0R3Ilfof\nrHsbASMSQPCnQa9/JCF3USpNiTDyxLiXaqCRSJgygVHa3j1SIQ3FKM5BRqk4\ngfNuxw0zqrLQMU2c+NJEO4Cwfh/b+fNhjd/cT8YNXRoq0FkRgsRQfAUwpq6i\nlYumikhqbIEqu2Ng/YsvzHPv8F/CQRP/VAKBALV8YvG9hEuCoTjgM4RbLIK7\ncNGt52ramPPibfIfQGC5/8MO9S0OPwGJfjdRNi+ZTePLCnXEYqGjkR+D37Gq\n1XJ5xE2Xew+m79Bcd4OZq108zzwG/+u6s6/h7Ikmbfkxa6RR2ZNnjN00YiSe\nigkX\r\n=9Mzb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"85039ad97bde95db4d57918266320d54c581a680","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d850de590.0","@material/tab":"8.0.0-canary.d850de590.0","@material/base":"8.0.0-canary.d850de590.0","@material/animation":"8.0.0-canary.d850de590.0","@material/feature-targeting":"8.0.0-canary.d850de590.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.d850de590.0_1594317983023_0.34753978451035383","host":"s3://npm-registry-packages"}},"8.0.0-canary.e07a70841.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e07a70841.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e07a70841.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":"8368d3e8b8d227f4d144bbbea0c53270b5fc91dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e07a70841.0.tgz","fileCount":52,"integrity":"sha512-rErOz08j2sBOQz5x/IGKY2VzNXdZuukn80W5yb2m9nUapRxtBs5tC+3KejnXvP5GyHt43KKtDVAkD7btsUtsAQ==","signatures":[{"sig":"MEUCIGcVQoe9ybQVAqYgFZvoa+A8s12oq1eRXghzd0vSFtLyAiEA0Lye7yMQ5AD6D6GTvW0Q6XKYLe+qUrlARhOYWsSoC54=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB2OYCRA9TVsSAnZWagAAHbcP/iicYDbI+84BNSpzaBmt\nImqn+g/VCMqiE1JxlI7rEYx/+ZN6CLmu82iNO4IbaKi8Dbirbuk7GrbtW8TN\nKnC8p0/J/JDpuUoJ+owTaUjZn2n1aoSSifs9RGEczRxBgOJhjW8I5qw9LlHY\nqhBLtnVu6/pa+vf/F/csRICKv2yet7HKHD50870bRzP5Fq/blCYlg4HGzY8V\nfinPkvD+qHU4o9kjKN6nuUd//f/Z4swrpN9wpEtIlm583+dc9ko8FvouzDTi\nv0UCfXPs7LGwnsH9J8ekwW3tWxjosXCE3PzIkefg6Ld1HM53InhaUrGuag33\nO6A5yZ6VmUoZbScRsmczGT6JJ7+FFZgNL8d+8zp4g9qbkO/DeYe8Anm97Afw\nynTYBOBkqM9/lTE51NTXgu8QsepWoCn3jCKBMhI4dVU6QsDwZqw5/uFZhdEn\neMjH0z1KyGAoi/Z4QcDrOZBS4Wdcq37f4upK4CvnxpZJJvg7qtWkuvrPUSPr\nz0ghhbbkGAok4P/vRq6aJdFwOcH6zbUenqE7RQ0Q7B/nlDY+u5s8z3PXYVap\neP4sml8xtbmAluIa14F/mpcOeXlNmJwYKEKWsZTw3IAkv96U7/1X0H3vQYnc\n4A5bShLxLzWhTuDhkbW84QhG00nzZ6tc3j5rTD3H1ZIsMIejBdMxVDDoKZu6\ncjmm\r\n=1AXK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"105e9fd32899b2c9a4309baf6e879287104cc0e9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e07a70841.0","@material/tab":"8.0.0-canary.e07a70841.0","@material/base":"8.0.0-canary.e07a70841.0","@material/animation":"8.0.0-canary.e07a70841.0","@material/feature-targeting":"8.0.0-canary.e07a70841.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e07a70841.0_1594319767772_0.4815896606910728","host":"s3://npm-registry-packages"}},"8.0.0-canary.37947ed6c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.37947ed6c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.37947ed6c.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":"5760dc0bb06d31f035dde55bd1ed788bcea7edd9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.37947ed6c.0.tgz","fileCount":52,"integrity":"sha512-DNs3Vn/wpOf31TUkdRQXnFpw/jYliCXfk70dJC0V2Ok5yojezn7YTKt/+szPESfYt3OkRKpOUhrsmbbXbRQ0Nw==","signatures":[{"sig":"MEQCIHilYWUUyhWYZ9nQNQuHx6P/SBFBpGvd5w/glSD8bwG0AiBm6a8cz0gtNFYjBteIpcfSIcP3u4yCaSD/4VMC2Xaj4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4AHCRA9TVsSAnZWagAAmaEP/R9wZyAXVOLQFNrUfCJV\nk29zkfZafyeyk/+20klkrkscFYtuyVgat6I4KdcwGU64Fpxwho1mt1DD6pSL\nExTwQ2+Yhg31cU/ng78sY/H5e/r8nJbA02Gu9g02w8eR7Jbh4ZAbPSBqJ/9a\nvfkO6kwcW7wfVKYo3ljRgEjEAEuJj3DHAOJv5iLAxa8JFE5tV+j51FQf46S/\nwAD3ehps3LPzVpXNsoHXBQPfGo28J18pozIXCohxE5lD3nRqzaAcJ08g5KL1\n/C4gifpGHj8Je4sNEZvGqtabbn0T+xwWdURys4uj++8oMgFzRtv4KEuURoG5\n5qZH/JAZNcOzPM7OXzNCthXNkzmxP7GjM9W8TIvPsXE9DeZmI/j2KHOlzv1Y\niS9r2hku6pnumTLBm2psouJvIzp9bf4Y8N+D/g9J0EtYUxpq0sgiP6l8KCxv\nvpjT3yuOTgaqeHNXR8MBdIdcbzFFq5pZucMR9Fr5d+aH7h0hczz5ryqvCKNR\ngwCLDkXBxEg6wgmBXKsEA/vCq7yzmsZkzhppzoQphl2N8wke1gX5xGPXRXz6\nLtvsgupEvrUScnkxieaa/YGVZVhSxvxrrup7/6CXJoqKsDyHzhxInU7fA5cp\nrUzg6QjSqDTjJJRhmk+SkVyBgdyI2EB+/4WlG0WOmInQbgwU5eKY43IKTBkz\nSKDv\r\n=mJfN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"80c4a00e688d5a2b1a35ee55744d879b782effed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.37947ed6c.0","@material/tab":"8.0.0-canary.37947ed6c.0","@material/base":"8.0.0-canary.37947ed6c.0","@material/animation":"8.0.0-canary.37947ed6c.0","@material/feature-targeting":"8.0.0-canary.37947ed6c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.37947ed6c.0_1594327046830_0.89530405155262","host":"s3://npm-registry-packages"}},"8.0.0-canary.5d443afec.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5d443afec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.5d443afec.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":"5db4860f80877620b767e7a27edd8797ae696520","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5d443afec.0.tgz","fileCount":52,"integrity":"sha512-l8XOBqiocnLTVs/9qOxYevpuBeefWUhF66/ys90wAXNbVZnuV+Zs22Vz7e3zy07u61kE004KSPPN92sjg1ziQA==","signatures":[{"sig":"MEYCIQDJZEP9nskign068pTKzs/K5/FDpRmfqh7XQj/Via31uQIhAO8xkGr224biAYUISwz3DnU2CdJfmNCfnLjO/ppO3mFg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4OVCRA9TVsSAnZWagAA2C0P/RXPMUwbtNx0+DbQ5Ou7\n6SCygq6mQt9zcv/wiWC8WEp6w0nHnchRy/lrX/UCOLofXxb6WjAxxuEJ/q7p\nAt9HS3Vv/OH7txKpuaiBSKpoQiCLIZeWz9Ak8HqV1rviMLYjQv78WgI0dF2F\nIBMbhFYu8CDrlqhagKEPupJr2U4sCHzdopODBRVJVA6GvLrx1o9mBdBRarHm\n5iQdEec0qP0xDN5UKLBAK0oPloNJraCErXPco/s8nL4AkcwOh/GZXBxz22AH\n03UT9FAM5NsroK2K1RXsWvy3xLhDsgc+s63fXdj+K3FHyLIlYIgYQ1BLxTtw\naYbDLZMzdF9/tC0JjailQYnrG+df2idiDICaCUJDQGzddM3mqC0GSZNuy0Jj\nnNLPX9FzDDjUMQSKj0r7Ko6ihwAwER0rp6oEuOnKZh3eGjtBxekR9ClTXQHi\n968oR6oqxDrpfumeMDNkilYjlgtxwvevjgwNV57d9QQgnFT/yEKWHQvSKLYM\nS+C39z3fXtT6+wHx9wVh5BH2UOl3TqcvuGTfpoDH6rNfq9K6fBcZKp0SkdIl\nGsdj6pC/emmE58XTuAmFrZeCO8SnrOHAQUeyvSS5i8njcpXtSjRb0xFH5Hf2\n+5SGlFJoR57bvlkP9tVOpKB4qne2FktT2a404vOFLAqEg/7Sv/EtMpKoyiTC\nWlV4\r\n=TLAO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5c493d15f89898617c3127c53145bc51e8e60930","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5d443afec.0","@material/tab":"8.0.0-canary.5d443afec.0","@material/base":"8.0.0-canary.5d443afec.0","@material/animation":"8.0.0-canary.5d443afec.0","@material/feature-targeting":"8.0.0-canary.5d443afec.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.5d443afec.0_1594327957396_0.49012751026712476","host":"s3://npm-registry-packages"}},"8.0.0-canary.9ac1ed914.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.9ac1ed914.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.9ac1ed914.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":"ae602423524052c90b99bc2653305070388222be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.9ac1ed914.0.tgz","fileCount":52,"integrity":"sha512-iSSp+nppEEFHA/PW9wSs8zEM32SLNnZUUv+AmNhuUp65fqtMdRXq4dBVv8GOQkjPKOOCEshHrydK+br7stUhLw==","signatures":[{"sig":"MEUCICf5N8GDjWg+y36gv+RtPRpo4g9c4ZJDvNjJLSbub4PwAiEA+KtsNxx4gn1PcRTOHLDZGbr5tE5uN8fsEvNMtjo8ICU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB4pbCRA9TVsSAnZWagAAapsP/0j3vwdihUkhXpQsvFBd\nDqWyZs7vzfAJ4j8lFTGaD+nuHjVOlKEmIWKr3rklkafVsORt15t8VPXV0sVb\n8M7tQcbqFywLwC5oqdeGx3+ri6IGjX8PnLWT1SrvNM4mRK6ZTZzEVgYh5heZ\niQ6h3YVhK21Lcf0M27J9TUZYocOTFwp2XM8RbGDGZT3mH5M5SRslJeXrr15+\nxw/1JRCOtkoc9rw/0sQ9L9QRXRENvv09iCdiiBs1fB9Ck5xjWfhrJY3CISru\nzO3mWs0lXx/zND7ITFnwwTtP/VeS6EexU0mFGktVx10+pgcuNq4CP21UXpe6\neVqys7qHwblGuYU7E1tqF+ddCuZFil3A8ej22UjYyIvGdLa02qafd9kmElCh\nkbvv17U55GNy7XmZDKrfTRUlb4qvxQi+EkNhLiaGCz4o1ZsowcjJZiFJ/r0L\nZCKir9hR17pfHVanpH7DDDbLeLVW/TR16zzC2ofJnlEZVa/xs6BrENmEUUWN\n/Mn3fdViGONm9yQxEoQEhQDKycd9ho0lVsmBmsjCNy7qpbyxgzsYR9YxuKQq\nNkj9oIIka3LwZ9CZT28qwQ8KRjnSvTWm0WnwCRERRctxfGPeOML+6petQlPO\nJ/uvfclu77SIFstT1U8MtzqmB3hkYQEGiqmyZAqf3+IeI+6SweaSetnXiVGX\nryaB\r\n=W4sh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c08d3c600bb022db1bcb4efe520bed724e653a77","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9ac1ed914.0","@material/tab":"8.0.0-canary.9ac1ed914.0","@material/base":"8.0.0-canary.9ac1ed914.0","@material/animation":"8.0.0-canary.9ac1ed914.0","@material/feature-targeting":"8.0.0-canary.9ac1ed914.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.9ac1ed914.0_1594329688553_0.4608910034350988","host":"s3://npm-registry-packages"}},"8.0.0-canary.1e7cb6198.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.1e7cb6198.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.1e7cb6198.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":"32db2caecc28e2eedb76a5c064ac280de3671dba","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.1e7cb6198.0.tgz","fileCount":52,"integrity":"sha512-AfgYC+4z1bY9hMtER2lQ8q8E8xu/3qDJDwxCCmE61U6eonE8pYhp3Kn49v8kWk0iez3dljACVyPcbmtoEU4q0A==","signatures":[{"sig":"MEYCIQD2fSGFkcsnBGf7WZ8yTpZ9tX2jOK1t5lNX90hzAchLywIhAP7WoAlXPZMSxCEqD1JCQ/tluVQnNVPISczBNUrOO7Lg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfB5aDCRA9TVsSAnZWagAAWgkP/jDV/4mpL/fJI58m02e4\n/jXJqIrVRJuGSZtkNf3uEcWbdU4U2knnQpqtXy84pK8nvwvPMtBXkDdvoSe+\nPkhsMO5FqQax3lJBrN+wpf9PdFbzViyjt+sVT05GyQjrU9ptqE2EK2J/7rXV\n5WzgQjXETWC2KejDZWA4HHcyCXr3elhFOX6eyhbLtA1cBzSxr7BzwLHvuMtp\nsM19E4JTurzw5bq4deQG2b7aqnfzsOimyLDrLKD0Loubr7+4K3AEt62KkpWi\nQHIUIay+kLTNyq58tLAgd652j0RkW1A+vjADTKU+FFGTQda74PGmj8Y5GdtC\n3hCZwXADzToeyvpk5qKypFXLQgTHkVga4pZ+xUIpUq61uC3EzczIZ+eC1fUt\nML7OeC2ZF3jsUAAjtJbB8slv95sKTh8RosTBNbMIsAyLjN0kHbQ7yQDUtzqW\n/Xyjx4JkG/DcTPd+yFHr5soTbv56BGMVlyopSD7aAb7TuehTI/5XBgZ+IJ84\nI2HpjuANG2n34WwbjUIeE0efri/7mEe/z4BkYWlVCD3LzWTzPs6OKCGlz0oR\nwH/atf/MWmm+Dh6ECZ0mMG24jR8FK/08M8p0ndImmh+yNTiFE0DzkDuiqxQz\nrFIJJEMvNhdjDYZnRQwmHsKPbn8NIFebJNI3/ywE58lwsPqDk3mdgdlME/CJ\n5YJk\r\n=Q2p7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"cbdbb55d01ed2f63aeafe8d77fffd1da5fcfc011","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1e7cb6198.0","@material/tab":"8.0.0-canary.1e7cb6198.0","@material/base":"8.0.0-canary.1e7cb6198.0","@material/animation":"8.0.0-canary.1e7cb6198.0","@material/feature-targeting":"8.0.0-canary.1e7cb6198.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.1e7cb6198.0_1594332803332_0.13644671670034292","host":"s3://npm-registry-packages"}},"8.0.0-canary.843f636c0.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.843f636c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.843f636c0.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":"b0b01ff88124b48d17b037d9bbffc49287d86a6f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.843f636c0.0.tgz","fileCount":52,"integrity":"sha512-Rcd+ZKhqx89j3krhtjCTMoKFEGOZ8tRkAjtox94oFlj/HG89aLGQ2//bB9rPWl4jw1gV2rFzafYlSdAw9AbYyQ==","signatures":[{"sig":"MEYCIQCF+xuAkO7pyOVv+7P7Mdh7u2qnBwDYRiXYVuw+FQf97QIhAPaT+pbVUQmx5iR6lTAs+TJu17A8/2a1Clx5VmAIeyGU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCKjNCRA9TVsSAnZWagAAL6IP/2HlJMSryx277DFFAF1i\n3K0yWd1QD2Yv1QsD9zxaN+jQoq9L9052u3uCtgqzBAO0h2YLs37UR161tw2Q\nqvNVRblJhA7qUJmS20EfgHZOefeuxTHzJklrLn9/umZfL8bwR7s+SFP1N1yL\nszk4GYA0Bp76nGHc/2WlsK9XfsOz9LZEAYrw9KbXw1h9CAN/yc2MO2zTQh6N\nX3q0JbpdlY04WEfr4O4E4jqtvhGUYZzWKjw3A+6ojH+VHrHGC7NpyqPIuWCL\ndwu9Eo9A4wpGwxr9Kag3k0IdGNgl0SZWg36OWY6aMzSB1LwTpZgldWGwq1oK\nVbkvDNDeo3NxXa2ONBZG/cm7xNkIPDFcJlefB5l5dQ2yT5CAIna8AKHzky/l\niSqW4u+J8+qXGwwCfvtga9PfmDl2hztFMvGLf+6u5vJWigZxRpkYLQw1RndB\n8gqHpKuy1vYoC74zv29uqC3pdB+H8iIEiybIYa7Tu3Hwm42mZc9kG6By+DUy\n6vHD7cOH4grM+pZ/CsBiW5/HF+al3W92xc3JtLmbLQ40WioURWXXNqJ/RSOl\nn3G0pr3MFYx6Dd0Fw9OpTWq3At/18KJiDF7SBcn1M+FxPHLjCL2THY4JCRZK\n45DimPixIGlsGd7qE9IgbxI2YEJpu/07MSidBS21ibcXN8gZok2xuZdFjxS+\nIK+3\r\n=WSlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"641b40da40cd73b439cefa7fa18c86bfdf31e497","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.843f636c0.0","@material/tab":"8.0.0-canary.843f636c0.0","@material/base":"8.0.0-canary.843f636c0.0","@material/animation":"8.0.0-canary.843f636c0.0","@material/feature-targeting":"8.0.0-canary.843f636c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.843f636c0.0_1594403021355_0.2264543728984636","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2edaeead.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b2edaeead.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.b2edaeead.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":"73f25ec0b3424ee288c3cc4f7fe4d3264da7af82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b2edaeead.0.tgz","fileCount":52,"integrity":"sha512-l14K1j6Hofa+iguaaPK8Lg6BLjZLJj3UNG/sK7FS735+JWwsRi260rWrVxZuXwIQs2fXWErxLbCOEnq/xA9o9g==","signatures":[{"sig":"MEYCIQCAclwGMuEPDKV7QooscPm6/xfrhDlj0QKb2dXyQclVGQIhAKoqUgCu6DSfag3abvLtgMTmx46ujXy1CkLEdVvJ1j69","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfCK6KCRA9TVsSAnZWagAA3EkP/iIjaAs6ERf6DXCek4KT\n4pvW+xuFJ/nUJNXE0amXDNnChpqB3rSBHLsOIxD4gfuI5zJA9BGhEKECKI4a\nlRoMcWdvqHihOS0naJmmftfd9HRLmNcPmv3o6uN4mYarviUiUyZKe22zDCAH\nvQokF8eLrmd0HOA44GwfBEbOFyRisszTwbGWx7b7eTTEVRocyesjhGzBjG7U\nON7Tk7xWskJ4MngJOdF7SNfrSPxuIaUtZJ4uXQWd3oC22eDycFYBTl4ZDVoe\npPbMtRZrP5aJZnpgUFyUO5xaYqutKCjX2p7gyWlZANhUfHaI0sd54kzOBVfA\nQkHoM5tk515R1ujBt3idJB5GKlWW27BPnNyjeAUSIJmXOxs6vMvNS3PyP7SB\nru7PDEx30fbKd8gn7wADc9wwf+gARyUiVo6MFTkV362D7wIfu5/zNz+5k9eD\nGGKSg66s5MeCk5Aw3TFYdW1BLjW9R4+IjRHz10lbueX/pUq82Uy1CkZCJ5dS\ntCaTxwzQCobXR7V8WvbQjIr587MyZ4nG6MQTR4WGQCGEcv2W2F2XIXmJ8HKQ\namoBXCCtFfT2LG0CGrKmGxgcAQgPqNJLASniHGgPPvJATMQo75XqpzRh/yBy\nWkYceqvXT4SmWUcqPtcjjx8nxesALCwU8yfHHkzgx1EHEz4Ka//PusLAqFPT\nUboC\r\n=eODp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"874d83aed6fef221001b68d44bfceb30072cc18c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2edaeead.0","@material/tab":"8.0.0-canary.b2edaeead.0","@material/base":"8.0.0-canary.b2edaeead.0","@material/animation":"8.0.0-canary.b2edaeead.0","@material/feature-targeting":"8.0.0-canary.b2edaeead.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.b2edaeead.0_1594404489885_0.921597280071661","host":"s3://npm-registry-packages"}},"8.0.0-canary.5dac1f624.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5dac1f624.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.5dac1f624.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":"d55f71e64d35d1ac7873af80445f6490bb60136c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5dac1f624.0.tgz","fileCount":52,"integrity":"sha512-7Q+RGENWRNA+AcD/5vqRri4/7yfiBtSn7GubYD+nCKtx9yerFZQCHNItuIDp3TW/Igqn+cDrM5YkXMqtDg3bvQ==","signatures":[{"sig":"MEUCIQCtYtjcguHeo2uO+S1IiPMqz5MLe0PUvCLR+hfSHgshXQIgWosERMBTdVlA4RgvRaAAwNbm/h9FR0/IdNKG/53wmlU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDI1BCRA9TVsSAnZWagAAlQ4P/3sfRLhHMcvpAqlJm7Wy\nN3pcKr0qB37uWfPH96rCXNlW1mYR0qHgIwrINfKK1VM5imbqGI0YHl+1o64z\n4OLVYcDuRNvh6Fd/nNR38iTBoUWRPVmEL/HsI0vNr4oA2x5KiDYhGiIdbw6V\nmJ/ypSBjsIlzmuC5h+0JtpoDPzTkDdmw621pNNlvuaIPJ58fqqrbneDAPaHT\ne8FRf7jNZVoQ9evMvUTB+I4cn2RM2k8/WMOwVHpXzJkLC8XcxiQJjpJ3hzmL\nuZzcOJpQDqUzeaAoyhK+Pek4XmxnNDvGx7jyN+fK57CyKvXDKUSFDL/8YKR2\niuDf3a1e8PLMcW4qVdwvnkVAm3RqdAW6SIRC/0N+eA9athVtMp+aJFjw/Rba\nAZaNM8koGLrxnbUQG2HYnuXuZRnUX/I2WefBzF2zeOBx/lnBH/7KGe9vH3pA\nVk5ywI2K7kqSBLR3Vc0s6OyD1zN7MoYMsh3GfM6QGoGyws5VjOyFGkhc55Fh\nnFvLgmAA6NeAwQkK80YgCX8SzPcJSmHC/Dzzk98qLCjMCMaAXMG0/seqzT0w\ne2MlawP0AvZEq6YBP5eeFV/PxK+lnI0WrMjgEizctyzNP9ep6TRFw9kKW552\nOfLaJhjsx6fBKPw44Db4c9pAP/N1FPppkNegwtai5QUzo1Zti/QkBaIG5UNr\nMWw+\r\n=ojf5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3acf16b30fe876c0d319f5d1681d177bd0089cbd","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5dac1f624.0","@material/tab":"8.0.0-canary.5dac1f624.0","@material/base":"8.0.0-canary.5dac1f624.0","@material/animation":"8.0.0-canary.5dac1f624.0","@material/feature-targeting":"8.0.0-canary.5dac1f624.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.5dac1f624.0_1594658112849_0.353360214631693","host":"s3://npm-registry-packages"}},"8.0.0-canary.4497acef8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4497acef8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.4497acef8.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":"afe09240ccd47f3f5c3d63f2c0a17e8b5037f556","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4497acef8.0.tgz","fileCount":52,"integrity":"sha512-D4IfsEYF4nl6fyq2tC9n+4k0Hu43ZgMmDUzrUZKGyUdlvSq+l8RVrRIA1vlzWpI0OLVl/JDYrzYF0BgjIy1JCQ==","signatures":[{"sig":"MEUCIH4M1oqP5UKtNDsTMAeFwPwREkD8JVGlWSVw7MtelU6NAiEA5ZTvq4D1cmDhU7Pkxuvp7EMJ1RJeC4a/jpXGH/DQIO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDb9SCRA9TVsSAnZWagAA7NsP/irtEYNTMRSOvBD+/QHf\nzPrINcg+2OkOgMAW+JfX6xicUwKonerXcE5fa2zjBdvvDN0P3g2nCTFf+b9l\nfBCP/RL9hwpg8zlrdLxecsm/+bRzxmf0OROgyRPiWuqiN1H7N82WO2N/7gAN\n+G/PK5fkuujGUcAmDQ7KoTJAgqdRH2j2eKAgpV6UiMN7g4GR4nSUR4Zoalhm\nEVTOOxd2847/lNWR+2tvW+SvIleFw1ERxSt7SO00oZBIW+Jwa39thuUUeONe\nI4aIfto+yrS1nz5PK1c3nH7pFpL7GfFMZLpqrQSzswD/YkXiqf5IJW58VnFw\nQmXkMXSSQFITAFrPWhBJsRmN9hefRh97/XND5yQGYsugOgsuMXGbZocyFTtb\nvCkBYFMv9wjDdlM/g+bDtPshp1IXZuaBs3sRLq5vqdTSmqlcVlQBM9+WiDNb\n3VuM55fQVfHfTaiyJNjkjHEJNdjGkhM1In4lv03Gkd/OtOinhmkVVttQj4TD\ndeZe9beZHZqQVei4q3G2ZtezBHHLFe0IjbwAewmCyMcJEtkP528TrNujxnUP\niZBqYs/Gpdz1SFvQ4NSR9ydXVxDowc1n7rRqESIK0bgqLFMIY/3Y0TpkbZ1X\nUltJ+gW772kC3e21QuVc53+3R2gFipi/9++F7aeQ7zsXWmudWEYr2U5KOFjt\nnwVN\r\n=WsnR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dc90b63c1737c63427815af4f6de59841a57a1bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4497acef8.0","@material/tab":"8.0.0-canary.4497acef8.0","@material/base":"8.0.0-canary.4497acef8.0","@material/animation":"8.0.0-canary.4497acef8.0","@material/feature-targeting":"8.0.0-canary.4497acef8.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.4497acef8.0_1594736465691_0.3581940092605993","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6e23019d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e6e23019d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e6e23019d.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":"ff560b6e5ad65736589db27fa8433ec1a677a29c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e6e23019d.0.tgz","fileCount":52,"integrity":"sha512-Zh6pjJJK1ckTryJSTe2f9jQwgr0F0GMLi0MvtEh6xXh2DsVjQCTzEENbgioeb7DkWWaxnpOnDGJqs/YhvfAlfw==","signatures":[{"sig":"MEQCIDtigq5XBqNPgyglp7ZEAIu49cXVHNRFIS1K3o8pwZsFAiBy1jb83+sA5FAaUW5uv7gTJKKvOQ7CfEQAbNRnEciCIg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDhF0CRA9TVsSAnZWagAABFYP/jQWKcwbryaUnxU4XX+Y\ncPlAQ0+sPlokOLOaX3asqtSRz8YlU/7fwNxjV/mWB0YGUwJW5w35NdIaPkbN\nxJpoqeAOBHbCrH0Utc1QIJL2wQzBkRlSVCFPFpRN3Sd+7CX1/GXeGtrpecs7\nxiNGhvLef7o4CjwWsN6ZLfcDJEf2ZIjmvwHdzJR0Q4q0v8+iQrCIDipszgDK\n/mYg+cN2GXJJeZiCQebVCNqPerMY4vJ4lhQ1EEKlEoFeXSC+BSOCYm6umblK\nK/DHaIWLeUU5PisiO9W4cjwR+snWXfRD75gOxkemcASeDJ9obfRo5xz/a7i1\no1iXuy7kOmnO2RFBUSvwS0PdOYhWW5l+bUoCvf25429+WOKNaKrccSHxzCPO\nh3qR1xt7pbx3iyOoiN2xbD6jYpscSQ59m4pDNf4khKJ22b/ZuSw/53RIxLpS\nYxZLX7R3mXTmlTvUsF5MGWLfk69U8rtKuSrdZSlgkgXFU3UF8UJhaGpMF694\ncmyrPANwuATtRVlYPF1Z9tA3z3WkOLWkPWm0SOulhyq/UXAWw2qMLmlpZlT3\nfGWCUkKDY9LMuLSi0Xg1FldWSGY5EZBmhJjuZbWJF5Ufk46SSNVVIKltAMhz\nths0I0MetvRxenYvUNPRmi1Gt9mV0PnRRbW6Cs2I5XAS4MGDyyb9MDtA8qrf\nqe/O\r\n=1ptU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"db31520d2bb46404d9d5c364a2db4e2bc564e4f4","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6e23019d.0","@material/tab":"8.0.0-canary.e6e23019d.0","@material/base":"8.0.0-canary.e6e23019d.0","@material/animation":"8.0.0-canary.e6e23019d.0","@material/feature-targeting":"8.0.0-canary.e6e23019d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e6e23019d.0_1594757492563_0.65626454378455","host":"s3://npm-registry-packages"}},"8.0.0-canary.d548d7a92.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d548d7a92.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.d548d7a92.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":"f390a8834669c982d17ddd01e157b3252dfe73ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d548d7a92.0.tgz","fileCount":52,"integrity":"sha512-//wwicNOb0nZ7qr0TIWtYR2NKND5qvHtbyIR5QIDNSNxvhlVZrn3S/lVSVJKhVqgiNzk43raUKGNookTAtGVAQ==","signatures":[{"sig":"MEQCIGfkN4W2+YkPiKCjgsCjC4o9R+33msF53oBVowUymwB/AiAmlfFJVCt3hVJKiVg8Q/FNX1xzv/KNe0LOZsWIHtIfSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiAUCRA9TVsSAnZWagAAqr4P/3MqCH9oY/mFAsUCLcWy\nwDYH3EOoxUrgIOBqm5GzGUqxfoBLszsESBpL7VyXSTHamJ7JmwBrMwg4y4GG\nBllxfYzvP8UfmPZRSOs2YHAZo+cINBorRqA74dH8bXu+Evs7QttGQTeRheKN\nhVZ5aoXcxLwsED4DHHd9h0BUWkBTLsFTcZV2GbiciSfKw7RugGk0KT/IeeNT\nsPiaYiBdgWQIHeJAtGPXzS8fJsU7Oftm+F2MZUvCs341cVFBZubUKtcZrcDg\nPFsb9XY+4r6WqrcMhAdmCiOs9x3lF92X1K2OEl0nHM6gFGgrFyij7kRjR4Lv\n/igsasAAa9xyLkJYLQlNxeF+6X2g72sJzh2n3+2stsnlskdD2KHDFwAG8mgy\n9BYwRmPheXbt6R7t0q8is2CbJaFMulsnh40x+pghcR2GQhL+rSjTboBVlRB6\nhe8dWphCM39YQ9WoAIACI0gO5hveOzGVvM9DxCpsAtRIcNy4phlFucP6adZ2\nlc+V3c4zQzxwFeB/XnwKeWHdmOdhvLkmYt/A4jHXGuvnLPNu2MeB3JRCJSEU\n9v9WIIWANFDHKaz0dbadrUsYM+yifGbWhdGkY4wrgElLJFc7u400iK9wsf8E\nNqRa1vUhIPfCgYtLp52SKh+q5jqL7GJVs0QIsFFfOgUYBNPvi7HSzhlpzOKo\nSDex\r\n=Wtcl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9ac3956fa3f0b35d113404de60048e8aa1c1a0a9","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d548d7a92.0","@material/tab":"8.0.0-canary.d548d7a92.0","@material/base":"8.0.0-canary.d548d7a92.0","@material/animation":"8.0.0-canary.d548d7a92.0","@material/feature-targeting":"8.0.0-canary.d548d7a92.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.d548d7a92.0_1594761236198_0.6929815478887686","host":"s3://npm-registry-packages"}},"8.0.0-canary.58ce529cc.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.58ce529cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.58ce529cc.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":"2363f9bb153340f278d00eeb66001412983882dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.58ce529cc.0.tgz","fileCount":52,"integrity":"sha512-j5Oyt/xI09mE828aW/elTYBqpR+Ji8ht76AkG7jl8Hl95Qy2FQm/SHy/Bn1f/CIY3JVn3TW5/2qivjPtQKHKMw==","signatures":[{"sig":"MEUCIGU8lDRHnhoWgQMB7XR8lZkZpfUMh4lAQR4IFTn6uUaFAiEAl/VtjT65tddyCPm0dJr3+Wj2/nbMPEIS5F1+42UYT6Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiCOCRA9TVsSAnZWagAAR/4P/10jQTT9Dx/wd9tMPKIn\njQOwrNDFwxswkWakaKFj55tSJdJLwTver6+4YqN800p/3bbcirXC1/N+vdJ6\n5ZtBQkvgwPz2ouLZFZUzg2A5rFU9BExf5wU9VlhQt4olf95t/clLGXl7Wzzv\nGaJ8my8HJmoLNgT1SLxevBIlhs1aDQVX9+VTz5f4blYdgxzNjZKsTf6jr5NN\nOvNSaSFIQLwEDinUpVep0e++O5BNj0Dp0nsWxWYcJqRdHaw3F1Rd+Uv4N5DE\nzPbUSgj02brThdm4EvA6ygwc4ehoC0ISp4KZzmFnVKACQtOIAyvr7CzuvlOd\nvHh7Zycc4yY0cI9XcDbyAle5CNv6lCAWNls9TS+qucVMLrJFSl82WjBs8Ogh\nuN0GckFjcI1JqgoJ6tkMpF0CX8u03zj3cpkPWy/fvF4vVwlnv2Wb1hVx7j55\nkD1YnMgt2TmQQDNAaoaJu9rnu+isr4H8h5n/hFG+MMQqbsoEwKwLK5D6jsHv\nXUYF68W3axNuzqiXFw73g3nlnwEQVjyjSd/bKu4jUitksaqYvMAeElJsvAxr\nEdx9bRb7/jOo5AT0Yl7fq6t73lkNH9QiZQazBEEJEIQ7c3x93x1Anonk3mCZ\nqQE+VKXKCITZ3Jm6sth1fOMvpNpNkAOERTxjvdg3KRKysdhlm3xHM2bXU+/Q\nqtJF\r\n=Vlf4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c45eee764d94f6c07b8a5b3770c89c8bb4ccfeaf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58ce529cc.0","@material/tab":"8.0.0-canary.58ce529cc.0","@material/base":"8.0.0-canary.58ce529cc.0","@material/animation":"8.0.0-canary.58ce529cc.0","@material/feature-targeting":"8.0.0-canary.58ce529cc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.58ce529cc.0_1594761357938_0.9409383986207738","host":"s3://npm-registry-packages"}},"8.0.0-canary.a0f1202dc.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a0f1202dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.a0f1202dc.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":"55984785c18fb6f9bde315d5116581be2ac9aba6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a0f1202dc.0.tgz","fileCount":52,"integrity":"sha512-0lmwwk0kJFQwnpgQaM/PL+RFJL+uQ8AM/BBr2hwHtjcKHwfhiEKqU4TyD2F2nD9g16fL75YxKF1lmTqrRsFOkQ==","signatures":[{"sig":"MEUCIQDHTpSsDJifXArcMPKOzYQrwjoJCYUFZltq0M70oKX26QIgTajJuUns2kQpZHyItJWqc3U3o+PedUXOBZbQYQ21SDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDiUhCRA9TVsSAnZWagAAjOgP+gKaPH2Ri0lp90ZLpXVq\n7qu7z2+AMclxedf/U6aZEOVUaI5p1DIG+ipiPiJKrHUZ8OxjQRIb/PONa9Jd\nSZLrJVQuXa2eOWHbZxw7D4ZPpanR/W4xYhgadr6sdSXUtgRZmywEH+PhDdb3\n7HfDE7HK3ZRr0owv/OizSW3tkdJAscsH2HUm8kRi6EUSg2tjwGySJphyOYQO\nQUBshn/PQGVsVssC1UIam3i3ysXn20atmK+dSpfdQkaTAl0As14v9S8JnQNJ\nyOthCoBlv033NBzyB5j6fLi7FNu+BOYXdGGwZZ+kEvAFx2ZDqmAflOvyJa5v\nWaM2AKtmIP/pT8cnRz44ILwS7e9J4XHza9kYhV3giry6G/wFSSzqT2KT2lx5\nMMJjMv18UTnVm8XIz9JXG0EqOkrzoGFb5+Lv1iPsSeaaDCdiOx2qThi/4BAn\nk7WDYABO8AImD/XX6b+Vy8nddTLE4XjVLurL7wICJEFz+WJSCLzk/2TFIaK7\nxtlVa1scYe8Imt20PbEehubKCfnfQEWxnnyPFQyDbroep1XvQESpaC4Y70Yh\nPwstB94UCdRc2+oRLwm3Kt68vwXardEFbROD7x/Jqhtx6y5HtFtdS0RII2Cq\nJp5C8foNE896rZKeElG4xZiUwcaESCmR/QE9GyjpHErVW/bOeodW49v0DQW6\nB56m\r\n=iyun\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"93fc447a8bb5a55abbcf4b72084f1c65147f3cc3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a0f1202dc.0","@material/tab":"8.0.0-canary.a0f1202dc.0","@material/base":"8.0.0-canary.a0f1202dc.0","@material/animation":"8.0.0-canary.a0f1202dc.0","@material/feature-targeting":"8.0.0-canary.a0f1202dc.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.a0f1202dc.0_1594762528789_0.594532840493829","host":"s3://npm-registry-packages"}},"8.0.0-canary.ad4df58c1.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ad4df58c1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.ad4df58c1.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":"64e231dc0b4395acdfb8785d1980365f92b7b456","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ad4df58c1.0.tgz","fileCount":52,"integrity":"sha512-f6dzGdxc2lPV4L4ewnlzO3ZstvDK49rRRpyZ9RuQoOC9OtQU403pDKpzoy/GprVkl54CFVcacB3MiZ3XhdAmeg==","signatures":[{"sig":"MEYCIQDtjGsr1tXJqeE431TsOAsEUFFKuneeVSw7uy4OUKPLZAIhAMdWezxw30tzXe8ClIoKN+63vOX0tqR2Stmzu3kmdW6n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfDklpCRA9TVsSAnZWagAA7yQP/RIaAms74aj0gsY64Sxp\nbg7+1p89k1VyNHLtB7j2C+zYytpXuQX8LvDRzvqxV7/AfWcWLMvDbUH6ulw5\nRYkLf7ZvpCsQ6xaqEXWo9QWSxWKt+E+DhcWYwoLXN+KfskiHsqjXionzVkhx\nU+WFwSUMc4exuP5EFe0pRyV/03kfxWbjq1eWs8/uQz4k/uiSF/RxHnulefEe\n9xJFqIjKiQUQH4ODIad9NWBNrrYkmKO9y+ceKTtf4FcjS5B60TjDa1Tv4mVW\npR7VzQV5sYKZKyXtWjBzwZh7+nLI9HnEEkGpxWO/TTIDHmC5EisA4nqzDvHC\nAC0oeHG99+0BrhpQk0/Tnd9JbrzpVR7+NmKOB2i6hkoWusNtRnnFrNbRtRs/\nYUWafad9W85w0qjR1DMjhxmrlotDSwTC7UwqxtsG0TanZ2sZY0692Yfa6dt7\nKJBieqxoZbOoOGPoH0Lz+Zun1Q96t3lxN/kb3wJ+swhgbszPSzw/P3jD8mnH\nUf7bG9a4HAfhYvDlLlHBCFtYctwTjt9e2un+ECFCYzhSQxWki0W72VI4AMXx\ngBLClpXrevtLAhPh3GKrQFKnWNxZXnN/xgMNBeCXdKLudr43i0lGZ4rp+9sS\niOBva/BgvFT/7VI9w6fbbGfE20gXEEA20Utbs9k98p8JN2tiiWD3aAZRohFW\nBFv7\r\n=sQIH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f3541b13d081357419478232ca7ae0021f2a6b43","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ad4df58c1.0","@material/tab":"8.0.0-canary.ad4df58c1.0","@material/base":"8.0.0-canary.ad4df58c1.0","@material/animation":"8.0.0-canary.ad4df58c1.0","@material/feature-targeting":"8.0.0-canary.ad4df58c1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.ad4df58c1.0_1594771816646_0.8677254015424005","host":"s3://npm-registry-packages"}},"8.0.0-canary.01db89053.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.01db89053.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.01db89053.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":"bc205bcf78fe8a9533d13389d4be43057f0d1ceb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.01db89053.0.tgz","fileCount":52,"integrity":"sha512-e5Z47dXYLnBTJH0f5G9IwJe59+rfdKRlN0UTrM9wHC+7upDKDzhcqsTDRzkOMwFoy6ycMHGuj6VnowW7vnMtAg==","signatures":[{"sig":"MEYCIQDAwBisM7UjmIMW5CFvjxgcfucXVIs+LuWO21DgIfYJWgIhANcYt+FJyGCGOeQen74KukBuUU6qK3sLvn6Mcgn14UuY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfEIMDCRA9TVsSAnZWagAAuzoQAJva7+ZJOMi0ng09YiUg\nZb7SlF5OpFZlL5ANOa75+gtpSVFM2ttEwm7cYzOAgz/feVlE5Zqd3aP0GioT\nlxoz2DKldtTdwznsjRUazRlPYh9ZwRuOzJ5TuynDGxWfkfXbm9UEPtG1Lzbs\nFBvGVGUGcHwfXEOxyv8UZPNqYoyEnlWPQIfysfYBU+myx97ciy4JjSCmvglZ\nHj/dx1Tav83h7u6y/0sOrG+ok2rih+BsCQV8x9JV9rbgljFUGWbzl02kD1Z0\nfUcrYYJNDsYlyWd6q+Yqay75IRo+uXp+rbJxtyftiaYWJEcmt26A8D2Gt9gZ\nUBZD481SycNr7kjS0cXOeB5B7qY49syaRzbjZaB3Bf3oeyUjkW/PDT3/Sn4m\nlooNWV/Yo+Iz2nqZDyiLWxtxLZhIbCLfk75+/n55ZRVYWup0p36EZ34sIJMV\n9yK8gb6kIRYp0nldXV8b4gSkIoJV+XH6nWcsOk5FPSHaDy20UlXLMhmr8ReH\nmZbwpfT6yT3gHgKBRw5Sa4YZ2zBwSRo0kqEk4aXJ4s5pXwZHm2s7DpYriAIi\nTu/7lg8zYcuCdSE5ffgQccS4/mLG/BGu6+dDEUOaHOSnVqihBvWeLfrxZiXo\nDc7mjoX2k/f7OivXAojhtrpS7iRyf0Njchfq/rA8bHzCLSoDq9lm7VK9MXdK\neMJu\r\n=26K7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8780c29a82c64caee37ec22f279b264af42412b6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.01db89053.0","@material/tab":"8.0.0-canary.01db89053.0","@material/base":"8.0.0-canary.01db89053.0","@material/animation":"8.0.0-canary.01db89053.0","@material/feature-targeting":"8.0.0-canary.01db89053.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.01db89053.0_1594917635032_0.8976050582842465","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb5a4cdeb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fb5a4cdeb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.fb5a4cdeb.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":"40537e3783a670afd2080aaf552ae9b0e4c3fb7b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fb5a4cdeb.0.tgz","fileCount":52,"integrity":"sha512-SYgiU+JWNOa7T3CO2fH9VYsEZAxcs5hKiizDNfx31bDtTDMHoJKwyyPWxacF2MnLYp9uIdYAkmCrPfIr+wyzfA==","signatures":[{"sig":"MEQCIDRIJ/xW3ltP2jI5bzlUblLdSOZ+XqLJVqBLfZGVKb9OAiA8C4FH6GgBU50yYa4BMkI4btLgBjKV2Lo6qW6YMHB32w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFe6YCRA9TVsSAnZWagAAh9AP/iV9A0cCKr918D+F88tr\nmh4iRAOW6dNusMqD3EkNf7vQyT3q8Kh7eBhMWpaH3I+IGeULlPX8xS2gwn6c\num+nDOROShjgkgzMo86mejg2+U6RnMwdMr/TXc9OLjzQQ5K8s4YVEOBydqHC\nc0pFQ9lOFiNal8FP9wIZDBOGaBU0LoIJrlZpc1ysaUz5JXcqJi6bxJcjU73Z\nk6x8yUxdgQB7dgBF/pm4mCsvlcHetsoxt3AqWO6qmk6ajFCd1Nknu0zSZh3h\nbfy3ydkOqkoFrUfi0mADQfiaQN8uqWjsqQC15+UqV8uqmiCcBHcyUXmjh527\nFnY5ZZ7+WnDJatQFWleHEALOOHa2U1W7YbmNnl6kKvu0UrIooYJ8xKAzbrgs\ncvkV694fpWY8eMTV6hXwCfxSJG63x2POxrxplau5zdsnrqTvy8CJB87GFIWC\n4YPkdDMXlgVKjIZp8eaydRbd/ujyq4xR+FGUHBxgeBTujnFlrCez3zfu2e58\nRKofM5jh7YRYdefAC+YhbasgeefItstllxDVB07XEfsp9HDqJynHlWtbCaKM\nz/nnHGnT/td3nSfHnyMQRB/WRU05OnoLYIb7e1o7LOiP/SKMgFgAeM0jE1wj\nuGGiXkcYBd2tzik8t+Zn4IJYUHyNytdpU/kIfKrFNQzu4uYaunxSVQBVsQTl\naZwa\r\n=fF5P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8e80295b6b3e0ec36934f8d691b193c740458d1f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb5a4cdeb.0","@material/tab":"8.0.0-canary.fb5a4cdeb.0","@material/base":"8.0.0-canary.fb5a4cdeb.0","@material/animation":"8.0.0-canary.fb5a4cdeb.0","@material/feature-targeting":"8.0.0-canary.fb5a4cdeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.fb5a4cdeb.0_1595272856584_0.47173843122131487","host":"s3://npm-registry-packages"}},"8.0.0-canary.8df0f517c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.8df0f517c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.8df0f517c.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":"f453368e76712348728da9967792186097d17137","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.8df0f517c.0.tgz","fileCount":52,"integrity":"sha512-GUZIN41krViVh8PngWHw68L7oVPKr8jys8JeoDIuqpwAsFLj+O5r6Sk7Z/yqd4M4+caMLPgPEYgHQgv3gX0fAw==","signatures":[{"sig":"MEUCIQDFswL7woaWQa7lOJepJGow3ZiVsYTcq+r9xio3XEqC2QIgOmZPpRIHInlGEtl8b+rnz+Xg3iM+gZnt5IDfHymZv88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFi80CRA9TVsSAnZWagAAQjEP/j9sUYks/5KNOHiazlYR\nV9azpITT+Nv2ziyR3H4LEFlBQ3UOoNZTGbQypwb+t21g/ugLrB6IiGjKTe5X\nNMEuFP6BeekIJyCbNzvvz/KBS2YZ2/lJ7/Nyuve1NuZKV3HENIYd2xGHe+7E\ni0tg5Ub6Ddoxpu/jDS4iXPVm6jndNskRwyCx94ZV1eP+R2jljkW8+E40FsLD\nfU45qYB7IwTOQUt61CyfBI5vA2kV+sHgbXi+dthF5aJDKfhCOr4c1eBqnRHR\n59U6YHgafmrEQWvqV9dwXGqh0QtD+T0uwRPSZokgdaoAYNvM/2Bhq8UcMvGe\nUTxEOm663tpjnBTDwNI2WcNdw0DXqC8CYsyu+I1mk778/fUakNfNG24Zgudr\nA+egbzqm1leVLuYHmHmmPd1W9Dg9D4lJXq1QZBhQNz7W5caY383VkfkjlHMK\nqnA6EqejrqZxWSLTfursqL6aDaEN2DEio9y1jAjzr6hpXDnK9DQmqNWxMOkO\no93zy9jb52Yu8tmr5pssM4Ze6qRrm0oiq0LPfqjixgNKrGQtLpv1fv1HBr8m\nmSDKDwr2RlipIkysZRQcJerjPoC2zh1NhV4gkXW4AZSLtqjvSATjEgdYUpHI\n/SbExC+cftNJn5Gt1V4NcbORFSKA84VfFbZg1KbOEMPp1auVybw3Jx7ssoZU\nIrJQ\r\n=XBFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5fca8679b0dad51628e898ac223795eea8e54d56","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8df0f517c.0","@material/tab":"8.0.0-canary.8df0f517c.0","@material/base":"8.0.0-canary.8df0f517c.0","@material/animation":"8.0.0-canary.8df0f517c.0","@material/feature-targeting":"8.0.0-canary.8df0f517c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.8df0f517c.0_1595289396079_0.25099610515216253","host":"s3://npm-registry-packages"}},"8.0.0-canary.abcdbcfeb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.abcdbcfeb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.abcdbcfeb.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":"bb16cf0bea374202754999be39e430f03ebbb3dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.abcdbcfeb.0.tgz","fileCount":52,"integrity":"sha512-o530+cCwzLNmrsCoPuS8nFsVgqM14pNTySov8ZLQUDiZm8Bby9L4ito5vGi3lzRnqThaIMDR2UL4uzR7nAMscA==","signatures":[{"sig":"MEYCIQC7GOtVG4JJtVV+/+sB7jToKB7RBX+AtOCZdvehOoYXfAIhAIZ7o3GDByO0qY94QP+ZZR/v0/ycMusPXuVeQZ4FK0k7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFjv7CRA9TVsSAnZWagAAh+4P/2uxw33M9NiVE2wnLRk+\nby6IzZurlPu2GpMP2E97vjF0nBIfrdA31xQP1UlQ8GPFIEst57qWI5ET/+0D\nC7rlfuWf/bmRFoJTTxPgCNE+weV7AV5QeXtceM+fsz5VtelkrE7TV0hqYdT2\nClD+oVAPvqsLY8gsa9Q6mGLU7Qv91w6WVYi9uQQxLvfu+3AwNhUo1GiK/24e\n/3CG1glYVyfNbeVJegI3RHF/zWog8sCv/TlkP27Q1qoy2ttL4lDC8nDZAmQO\nD+/wPx9Tqs+fc4XqaVtGYVOZ7gxKXSlJdGaLg3Ganr1jBphUZiKh9Z8iE8AA\nJdDHCgjwZG52DQyOauC5Q8UVrinxRGTsrkqnDy5WTpmS7yX3mBBHqvN/vEIi\novm6EU6egEDyywgcsHdjrXC4e0J5ubl4RhxI1pAXzDu5JVwgc/yNXkbosIZP\nYesMHnTuFZhqYhJIVFwQ0aKSZ6OMMsU6vOq5RAb2zr5PCdYVvudkKnfwyFZg\n+d+jWvKxDKP5SCmyZbxblZGOFlML8yFlMgYffarcLPfJJ371HRtrlxaVdlgz\nicS8z/KCizYkZ5MmY0dae0gFrG9j1krDVnxDYZEuooDk3gI2FqwrHyupWS/d\n/2c166HETuDkfHhhpYiuRf9LJG21OTHitk/+67R9Bu8SQE+In1vrGdcZdeRn\nrgwG\r\n=vXdD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"946720776dd73c7539bfa072ea415124b3e08a55","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.abcdbcfeb.0","@material/tab":"8.0.0-canary.abcdbcfeb.0","@material/base":"8.0.0-canary.abcdbcfeb.0","@material/animation":"8.0.0-canary.abcdbcfeb.0","@material/feature-targeting":"8.0.0-canary.abcdbcfeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.abcdbcfeb.0_1595292666794_0.09861428475909073","host":"s3://npm-registry-packages"}},"8.0.0-canary.7bd5075de.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.7bd5075de.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.7bd5075de.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":"549c9fbce638d62bd3565078b2de4a7efd48bd35","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.7bd5075de.0.tgz","fileCount":52,"integrity":"sha512-J5gUk9N1TBDg/Nd/WehPV2AfYX6MGCzeMstXwnoQMat8McZfn/ihrml/RiI7UnEdc9OjtOCZLkusPkVyNujcjw==","signatures":[{"sig":"MEUCICKsoU7zT6p6l6wD76mpTuHfyIQyoWKEeK+4h/buRLShAiEA1d7SY++5kDuIGMu/OacF9X6UiXTqS66a4mLMstBF1NU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfFzhpCRA9TVsSAnZWagAATfMP/1AO4rL8fU+pb/38jMo2\nGbLx3U7nrjOAcXoYvEshXR+UR/vSCrDfX/W3Ug4QYZ4ehumVbhg8C9QZxuD1\n7EL/lllXf2nJ6BJcTrBeCy2od/62NFq6wjXCG8uv2IkPoI0tpgbVPrAYECQb\nyp4enG+M+eqheatVXcLVXnb2JduN5LA8LLreYCZA2RslTYXGkXGwInAsWeHZ\nIeMXUNsrrm7ZanstRjKEBbWGK6Ls7a2N1wiDymYp5HCFaP5vdBqKbISa3yxO\nGMwo7NQw+1Logpanzz9bxGrqgUoSEtFxiKlmP7CFUppiOe/Kez/4w6ua3oCs\nCl7ix4lBh2zA0TLgFd4C2TEHZchTBZfTupEZPK0eJBtdcZFzDpx/SgsUDnk7\ngJHFuG/XZf9s7e8SLwihLLXUxqC6M4e9id0slLGNSSE1QzfCV9SzgMvnnuGk\n3SdqYKB8AAy0wweR0/kv0dRLnmvd3H1dxjnOcIaPifrgJaC7bdZBi4hiRU2t\ngB9JDPpJnPksS2ZHFgCebxQrrCDgaEGR59JJ9zDqWwrGyYoaGLZqM9TqoSim\nVPBLc/+W5IYn+Aq1AHDQEwKIR2l8BxeFoBKggipiBQgj7FGF8U0Vxyk9ceJ9\nlMSsZAJD6TjbwCP93g3b3d6uwEay9G3ZNQSHN+ewCOIJ5/tSp02KPqw8d07r\nvhGB\r\n=bujz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"5ae456e961b208e98164fa21047b3ff2e3f3d8e2","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7bd5075de.0","@material/tab":"8.0.0-canary.7bd5075de.0","@material/base":"8.0.0-canary.7bd5075de.0","@material/animation":"8.0.0-canary.7bd5075de.0","@material/feature-targeting":"8.0.0-canary.7bd5075de.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.7bd5075de.0_1595357288852_0.22359349272320372","host":"s3://npm-registry-packages"}},"8.0.0-canary.405a29a20.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.405a29a20.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.405a29a20.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":"4e31b38c3c993e3915a483ebe69087e742754cee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.405a29a20.0.tgz","fileCount":52,"integrity":"sha512-9u9M9LEEslWIkE2WzNhqsZfIspLDyKv6jb+vxIpjeH2yvezq7YRZ4qKZ00xexeT0OLHWa04V1lOOfuGtZwp5lQ==","signatures":[{"sig":"MEUCIB8oonAvnTU6v5SBehNcgGjNzWnIO1ZXFRhRWzdkSvaJAiEAxzk/x1iph5fic4W69Y0/xI2sSuJoO9hMSzNZEwWPLN8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGLyRCRA9TVsSAnZWagAAq08P/RPFOdZLPSdw21o3t2vJ\nZDJojBN8mV3uETy7pyf20I5XhkQtg+1dYpbM8BmLeiIWAjm48G6OgXT/eQcT\nMLcz0BrX8Q8co4Npm5nioARcSok+ZYTUgMEMk0QAgg/Hx6gHR0AjpDAa1MbT\noTPtCHc+7nmbn95XzFg8fqg905NM1dT/tyGkfy1Wno9eWqHs7ycBHH++Sn4J\nnDxRbKsfXRnQTO3qbiQ/kJFzNFOrho+jOYiDMXzps4atqBo59Xn9VGPELBtp\nrw8DaTe0fjp0xRDxWOkhuqyhtwmIYZN06IGYiCnBN0bKSJP3PeUlQwg5yphE\nmGXdU3MSmt0w3RNrN4eAka99NF7B1S1GvzncaxVMireO5mmlNrvflSUqbn1Z\ndaclcw/NXwmOinsWK7O37V0foReTwzdvIFbLnZ3wFOM1ZA8jwGjwLMV37slL\nxHmPf0sJ8t0x8tffkxRryAN1idWTLqmobdJhYJB6lqqvbbKo/GP3+jhDAFMq\nD6888rU1+2QobdGK6AO9CdlQVJCGEPPo97OkcT+sGu9MqovB79gHm+V7B4y0\nofpcrnJeZdfF4sbI9qfIpspbhwCLrCyY2toEyvU0BNmWnFRFTzhymFFGknDg\n5nJ/Ty2WRs5NDc4oCW4fBc8GsncT99nRYbd02MRb0XEcF8E+FBliUBtAqaze\ni8DI\r\n=pFsW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"02c4f49285e8229cf49d9e4a0df213ff914b949f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.405a29a20.0","@material/tab":"8.0.0-canary.405a29a20.0","@material/base":"8.0.0-canary.405a29a20.0","@material/animation":"8.0.0-canary.405a29a20.0","@material/feature-targeting":"8.0.0-canary.405a29a20.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.405a29a20.0_1595456657389_0.38269199857459557","host":"s3://npm-registry-packages"}},"8.0.0-canary.f3693ac4c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f3693ac4c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.f3693ac4c.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":"b5db91786af090e138af971673abcf9f9cfcc3e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f3693ac4c.0.tgz","fileCount":52,"integrity":"sha512-nDM+OVNfy9wLrFuphkz8yuGYYmRlFrLdScruHqggZQXis/oTOIPwkYXOzEO8OUtypANX5K7Qz9hntkFdize5sA==","signatures":[{"sig":"MEQCIBsj5HEP18uVoYTX3YKP3wfxU3jBhzaVcKalMseD+pHmAiAS+llZbywElweG3uMugN5FTXur1SPVCDjNlBHw6mYQvQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGL8ACRA9TVsSAnZWagAAbNcP/jxMe2M3HPEpDsu/cLNu\no+r6S0Hx3/pzgLsigjiIKJVeOBUyJE4umtjAufO0xIwm/jzO4IuPUYk7WetC\ncNYzPEyWJ0sshmH6R0aMVGB4+9oYmPN8+72z1R3I89bpIbdrpNjhE6H/HWyN\nu3q8m0DE2vStyvTcarjPSDnPS8KJFCV/asdnhYlznCDyyc+YeDbsgjCwQX7E\nYWBvISNja9kPT3FRSkoHTm2LrYiQSVOAYYpljphVObuNSiHoOA9SHXOlbnP/\nQMPtALQkPAGS2qZ6DRgdfqlWzr6+gmnBoNfXNR9kX3VmCBDun8ySj/NKCuA8\nxs/lJnAvc3U2uH7VpiDnFvFSgzp3VZ/Dwhnr6DBj4+Do0TxXbMYtG9gmA/LA\npLKBiEHyQlEyhBerlYbw1is+1SM0U0VXLy8mWhe0mG/vQBmoN+p7ARdbYkrp\nqMJSDDnBI5Hn3QQtmzz2CVMmMWfdZj4i2vs2Ka5GyINjAy7x4UxI5EdhuPqU\nxZXNiTN28JHb/xP+Y+I5MMW8FWUY5UtAolbZ9B8gMH065Ba2NyQoYu84NnqA\nn9tqq8RMi7NR1hjFggXQaQUIMPYVHywbCbSy9Q4KG2gfYuu7T3N70Sr653Rg\nbBu72Pb3uK/LKoactnTBfY6vNtgML7V0ffZiMzcKmZn4YI8H8ywqTbWf3PWY\nF//q\r\n=FAoD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d3170e3936d96d26a6ca17df46c1febcfc33078f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f3693ac4c.0","@material/tab":"8.0.0-canary.f3693ac4c.0","@material/base":"8.0.0-canary.f3693ac4c.0","@material/animation":"8.0.0-canary.f3693ac4c.0","@material/feature-targeting":"8.0.0-canary.f3693ac4c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.f3693ac4c.0_1595457280506_0.9030442738944","host":"s3://npm-registry-packages"}},"8.0.0-canary.12a109680.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.12a109680.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.12a109680.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":"74e58d66c9a332c45b6189a8e0eab5739212bdef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.12a109680.0.tgz","fileCount":52,"integrity":"sha512-sQ1x6Pm/qSnl5w3T4++/m8aixagoJYD9f40IxYcfZ9FbHWYgOHm6aADSfEzHTgEaR28XkN9GrpVcoEANilSXmg==","signatures":[{"sig":"MEUCIGA75Y3kaQvOaueAabLESzRvoOCtov6tRQAKEnN9x2ggAiEA2Kzt7GclXIotOzmcR5x+2+K3KjDObe5kSmgVJMLZZfs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321320,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGMX7CRA9TVsSAnZWagAAqVkP/iXjp82Q9tbQ46FhZv56\n3DstITNVp6H6DR4hbGcJgHPg/4vcjQTKaQLdbXK9luMFtomf/OTocqa65kXZ\nci4tcYJrrIMTLnspNQUQXZIjwyxSRCwh2mgR7c5OmOvUiL0K/1CAzufu2EXy\nPREQRHypCI5WP0al+3TCL0HBVEn3vcwNls7bw5dmfC5kFlHS8Z5jAwAw51/Q\nzw+h1Iz3BYMrQjM6D7Ez0QPin52iJ+vLOGBgGIVi4jvvSzzz7qIo66DF/nut\nVpZMNTZdeDHC/KXLfmuBN265EKY56nXNe+kpNhh8qxl10Jhj0KTyqGD1tZZ5\naYil0UbqbgRLHyprLwnJhi50NZZgh5NxPCYSN5HvF0XIJk5qWGYgrOPukfEj\naWUSa7dSJT/L2Y3q46iOITIttx+ukV6z6VcN3b+qKDJhcF9/ZzfPkYw4RKVj\n9dS93fNZjwQ1a7J6PN8nb3jihcOd73qlnAAYS7ziR86jEIEYuRbwd2Mc0nvz\nGY2yKmBg4ktIQlSh4xXRilRpfJaB04IqdvYJURgLyBWK6LB8LKtEMrvFlujO\n205yxC4LTU9e+UUHid6WmkEvGzaRi92vyevkfLzqkIFiNmrp9bkd7cQ9fTkd\ncmmXF5d5FlLUDm184SXsmx6+SbGusZBIC9esY/hUvF/9hXuFSltHqd6XSFPL\n3OMQ\r\n=jmMX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a403e743d7da095028c3ba6d0a66ef2f7812aa8e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.12a109680.0","@material/tab":"8.0.0-canary.12a109680.0","@material/base":"8.0.0-canary.12a109680.0","@material/animation":"8.0.0-canary.12a109680.0","@material/feature-targeting":"8.0.0-canary.12a109680.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.12a109680.0_1595459067191_0.46499954883158345","host":"s3://npm-registry-packages"}},"8.0.0-canary.bbd06696e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.bbd06696e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.bbd06696e.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":"ae745d75bf11f01c0994dd4a05d444f3de156435","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.bbd06696e.0.tgz","fileCount":52,"integrity":"sha512-RVwEts71ZhFfH4iUwzWjjZb0wqY+iJfRlCeJpaDd5PnHoGh3jB0/jkjI7OUlx5yqUDayw2SBfCZuOqMzX0Vj5w==","signatures":[{"sig":"MEYCIQCIuKLq/wJlseGfUnvGbmAUaS0QacMNZS9toNL9npNbJgIhALnHwVszOC3rIibxLJNvVaCoQ7FxBBy1BmNiA+O0qcBu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGNGTCRA9TVsSAnZWagAAXA4QAJEAqCYy0naFKW4GdR9a\nJ4R3QC/1OObGdLf6AhtLQJza7fxcDNbL9kaj+hwNE+4St8aOjE+lc+HcbW4F\nT6qCsJYXd9uDeG2U7rAyc57lGjKLgX2KP2DUIxm9kqH8QHyLWb8n2vGsIBnn\nGeuXYBTr54LS+uuuL/wIbOk7oaULIBDKzfN5rCe4LDMDQzJ4eGYJNkaN8PYJ\neeRHTKtF7N3Q8piKYXY/ZY/Ge0FF43AoowF973aKRbeJH8HX3JVDUU+TZF9f\nkRfHVzDqyn42ViKQJbl9kkhmI454j+EWmCRHWkjgKhP1txAZyKXGyH9CxnHn\n30yj4Ptbi+hXjazG8sO+/WmqP9jrMYDuSescqtZwSRslXceGr0t2Rmueye+Y\nwQzn0R4yqwXLcwxZNChLSA2oIDyHlDfV6HM2d8y/HN3oHwqQTz0nq720s5Wt\nFpzAPnoKF00DiacLG75ssaRf3FtGkvOZKpjQawSy9ZmfZs/pWlGWfIvmSK0c\nOZjNuf7n/2uVhELaznK3D5ZTvszqqql3DYqggebnQg1hazzldoS7O71rsRD2\nRW+0cjSk0tp3VGEKHrjOHoIZeerW664vfvA9nSjCVO3DPNx1cDAerMmRrVjm\nKThds6PY1qeh9VPqpsHVKxl+iTI2s8+M1+GRWbqAZyhD8dDTjWaIzI3P9WF0\nPDxm\r\n=7yMs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1d34a386a37996e326b9ca18440ff1cda261f3aa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bbd06696e.0","@material/tab":"8.0.0-canary.bbd06696e.0","@material/base":"8.0.0-canary.bbd06696e.0","@material/animation":"8.0.0-canary.bbd06696e.0","@material/feature-targeting":"8.0.0-canary.bbd06696e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.bbd06696e.0_1595462035185_0.2007647495692395","host":"s3://npm-registry-packages"}},"8.0.0-canary.4951e7651.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4951e7651.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.4951e7651.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":"891893a904166bbdaf26448ed7453b01997af954","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4951e7651.0.tgz","fileCount":52,"integrity":"sha512-j6KCINPAsncMdrSI7rHhYywi71eBfea61mcg63eyRjrOXJpAbx7S2BmqMFWNKHl6DDy2dA05dSEFO1y3iqW76Q==","signatures":[{"sig":"MEUCIQDw4L1eIpCP21XCZJap7AUB9yUq3lu4tg7IU33OhaHMkAIgffdBNQlKHJcRXxZ55/6rBZXwY53hmBRFF07BW8GZMWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGOzyCRA9TVsSAnZWagAA+QcQAIxJONP2seDOGrSROOTE\n925UeFg5uKV8MkWhukFynKUG6VGvKzLbmJtQPEa6YOU9U7KaX5Re+mUbqcO7\ngs9mJeXEH0wPFlzXlfUvkdcBb4o9C47yzeBDw4uEEX1ZJrA0eJKkoVWxpzH+\niqr/ukDu+tFJ4IQEGN91yJTIzNAhushb8hEBp6lbmxpg96rDJVyix5a76WXi\n6PkI8IQjNJ9/mJ+lE1Ji80ImOUez2N3Y4uQSRCianjHswa75F2pIW5j884OH\n8h9u8132V86wnrH9/ufHPtasd6G2RZbMRCQCs3IeeDfCglfOCuXOz+lHglk8\naNjn0zdrgg7BA39EYuVoGQI9LtuPZd3vXavK6q+KM2+7E4T93zwhsPAK1Lhq\nY2GY3AZwSg5x8S4m+enmgrnkW56J5c+bqZ93U5fCeM/ECGBG6o6oxAVckTTN\nuO9vtQTeQloU+THJ6h1UPyYiKcECvity1mI8eB30Cfh/3ydhd2vdiI75sH8I\nB863geyZ1CXPLSkWYRIkCQncLaI9GSNWjsr5SjJUDrQESpUHqDSGUMhKm8C2\nzLAsilbThZrC199bVkg9ibTplIvpDTnUp+wzsj7DYw/xaZcSjhnQkX/GW5ZU\nU0N+DyWeBkBW/o8lbke0TgsQ0l55zK7oaTBBOtI+8hktL1JzepGGelndT9+Q\nOzm/\r\n=uz9V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"32ca9cc0ab948e59f91965e96adf325a142b8336","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4951e7651.0","@material/tab":"8.0.0-canary.4951e7651.0","@material/base":"8.0.0-canary.4951e7651.0","@material/animation":"8.0.0-canary.4951e7651.0","@material/feature-targeting":"8.0.0-canary.4951e7651.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.4951e7651.0_1595469041960_0.4245802110506054","host":"s3://npm-registry-packages"}},"8.0.0-canary.75deebbef.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.75deebbef.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.75deebbef.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":"730456d3541555bd11aa8bb0155edfc6124ddd14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.75deebbef.0.tgz","fileCount":52,"integrity":"sha512-2QZrKGc5QMMvNzIoWf236Y1EC2igm/xv2zKIQHJq16IXD1P+Th+w0XxCQ3p1/1kzipscx9WjeT+3qGex5Yvmuw==","signatures":[{"sig":"MEUCIF46m2sY3rNb99Sdkrj3PBF5rZ4myjwR3fuZvAOYxURFAiEAq6gqIVmLns8wQfX5JffZj7kizzZmx5fRndD92ok2yZQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322096,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGc1aCRA9TVsSAnZWagAA3WwQAJZIIcayWvsIDmyzn/Tz\nqsbklD6sldwOJcYaNLVdpkp62GS/UzwabrrDrWNpeZsIfDJbGRp3V+aGMByg\nR3muLfo4g6Lhdux3FAjL/hy/l6rWEgfhQQ7KLt5wJ9opgGKFAR8M+0neMR1O\nH/CEorL4rGlHlVvJohFRI3Hbsk6LYwMpIjQA6EqhmLKCZSA6gxPMZ++knW4T\n8Z+nO94WKrVfbkMq9hacvQ42n69r8kYVKEMMDUwxJPTBKq5670J6sxJQOxTQ\niLpB/4OAwsjivtA/S4Oxdyn1PQ3lqfAmzYPWZ7B+7uzKcLZ/jKFw0fw0HxML\nPt+A1i7+nDKj+mhs4MUEl05xBIAVN238xLfg6CCZA8HqpsAFRhAqvY1DPddd\n3d0XMV1BcRm0R3NWmu4t5YeooPVNBQTUIFhs2mXC7eD6e/OBav7El+3TFdUE\neX/+Noz3g8RHCSr1HBYqcHUnhhMO8KAMr0TkrF1w39F6NT8x1LcmKjweNS/R\nRKJR41w7ymH3mBMqXE5Lleb2EvINuUNBIo/0ZuqP2QcQH1j+I1yXu4m4aGD+\npKee4putrHxVskVDr01xpJplVRsMtXwmyGNzqJarnoRGq8YUN03xDjOI9Dbq\nBA4H+pugdSgWvzBotd/19cMCkhOaWtkPaTcswJhcOkUU+5dmdmM0zi1fKB+y\nDNhp\r\n=m2dG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3df5ec3c8a254202fe3ba9017528cce3d5d906ed","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75deebbef.0","@material/tab":"8.0.0-canary.75deebbef.0","@material/base":"8.0.0-canary.75deebbef.0","@material/animation":"8.0.0-canary.75deebbef.0","@material/feature-targeting":"8.0.0-canary.75deebbef.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.75deebbef.0_1595526490245_0.009254814224740837","host":"s3://npm-registry-packages"}},"8.0.0-canary.95aff33ee.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.95aff33ee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.95aff33ee.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":"332164b55f31b204ca301f09999246173c9b1d65","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.95aff33ee.0.tgz","fileCount":52,"integrity":"sha512-YfjJ9+C4/zjP1DaGhu5KWEhY9ezRr74O22fTfG5L2xqFOKYjQiv2Z7+9bZL8W+S/sklBXdMJQxigY+t2l4KGzw==","signatures":[{"sig":"MEYCIQCJv+td1Tk/n/i95oBbr8WpabzLdAek3ykOKciJKlYBLgIhANoH+ctE+tcgBUB7aD0GQCmcIGckzb2n5MWOYrdm16lp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321224,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGdt4CRA9TVsSAnZWagAAN2IP/idsRBOjWBKMKtUT6WC7\nLADe2n+HmviZp50fUzHdKnx/oRXLJ0M7ZsYKFwRwycZ7U9M0Y8hFrIe68lCM\nJ1O50p2J6XcBedO//EbrxZnzHGxCFntwYmUOXEBzdCzqqOlFvZRyvPiummvS\n7u5D7Srd/6KQ4ajeKgbSEK9Qc9ppQTy4dYR+4pmT93mE838GaIHIYfW1kiP0\n412bzLF+4Qgjp5nx+oG1B59uA8ThVryOffUPFS9O35d7wStNrEJeXaEt1sor\nc5VPVudfengOxhRbkgg/UwnzhjcJYP4PdiMTaGI6KgVlG4m8YiBNPen6LryF\n7bSg/sO+OB/dCksOQu+m3Xwjil75d3eJ6TSbC51yyVqcm0Mn73B4LnffnjYl\n1e8ufupdAjgjD/dQ02jmJx5bWui0F9fzEvkDZxkO2xFHTzDp9VXpNd2IhnHi\nDmCH7gyUnzQcbPKDFaVIsJr+IL87iRjgONB2l1Tef6Y+DD64/ZqRpVxM3xPf\nvQA52wkEReJLEYqqKKGHOym0J7GNAz0hn1hSx3x0nh+apptPhdc3tJZKhGBf\nvg16skCLVhZjY8hp1qUQZAin+t8odCtjBBzmpjaZR2I4V/Rv4C7mpRvZJCAE\nKWISh2uhxuGztiSa+cWAJUlEWPQYnCg9/A6NxXUcUO2djZ3NkPZ1DZwrBF3i\nbR/f\r\n=sn4U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0343ebd62969f5d4315e249ad81f2837fdbaa096","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95aff33ee.0","@material/tab":"8.0.0-canary.95aff33ee.0","@material/base":"8.0.0-canary.95aff33ee.0","@material/animation":"8.0.0-canary.95aff33ee.0","@material/feature-targeting":"8.0.0-canary.95aff33ee.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.95aff33ee.0_1595530103685_0.7654279190808595","host":"s3://npm-registry-packages"}},"8.0.0-canary.9d9f47473.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.9d9f47473.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.9d9f47473.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":"e3898497f91fbd239c3c793d5d5eb5bd7c9ba30b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.9d9f47473.0.tgz","fileCount":52,"integrity":"sha512-pgszD4q6GLAnM0cs0APwOOwYScdkerCoVkSpkuXC4xZUcD4m9rfKL2iZz/zk93jUkldeQ39qNqPnoDupHBeaow==","signatures":[{"sig":"MEQCIB2+1RxNnz1JCET+78+GFMQ2eKQwADeREEt4wNRG8i79AiBP7i9vdDS/q2u5N/NQAIkdsj4P6UI7v6SDlqRbdqNHNg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGewwCRA9TVsSAnZWagAAseQP/jsO+h0zBaxcF54w1JEC\nl8xIzEv5bJY1ZQhwx/J8tZ+SO5+ehGH/PfHk8weadlgarAwdiJ4gjLlYyJ8f\nSPjzlPh0U5L0iDxlaXfZSw5Os9BwuqYhISBXzyEhdBynn9Y+/WBq+hUVfenT\nr92o59nfKfVEMM2RdSsMlrQK9ZjGZ2hKOjKBIxvkwCBu3GFRvHwqH4Aw4oCs\nskpEYyQqx8jiwxQjUj7PkUCRZCKMDq3FI/reR/lyY0fe+eNUZgGO1vbCVS+F\nvBhuI/gDjcHklJkGU4jtbRVFd73yl5Ea9wIV2jUhEzF81Dl+tLPAm2aGt+YT\nDsCh5rNisRhTkiTn3FWitJuGpZHcZ8SNQC80ujxXwUvzx1yzUwd7F6E3rIxV\n5vs2lST3Y6q5ZViFAonrlRVi5JT9ciMw1/f6ilbj3ZxtbCDZdS/8kqzAIrSy\nqHuOc3qGtNj+g2llyMyb16NbMM6qw2wBG4oMkk2N+NJrt93hPVZpbT3XRVAj\nvtDoOxXox2624aGPGjAUlmSrlll1pS6EjTqkRduAD/t7u/J4I+v46Bq/y6cF\nUubSQXUWoANYn6psLAMCHOZn4XtShA1qr6QtTIn5a8FmPuGjxlk57tIcgnlX\nlMSL/+r1EZAxNfxfFoDYcFmlEGOQ4+2c4XIM2p3nIEoeI+n7T/Mf6VRzEAx0\nmBRz\r\n=+HDK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b21be0611a45dd7df8e3b48a3fd0aab09d6cb236","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9d9f47473.0","@material/tab":"8.0.0-canary.9d9f47473.0","@material/base":"8.0.0-canary.9d9f47473.0","@material/animation":"8.0.0-canary.9d9f47473.0","@material/feature-targeting":"8.0.0-canary.9d9f47473.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.9d9f47473.0_1595534383942_0.43972033771845176","host":"s3://npm-registry-packages"}},"8.0.0-canary.00dfbf6be.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.00dfbf6be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.00dfbf6be.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":"496fdb24c4e9379b786f11786328a14386504e1d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.00dfbf6be.0.tgz","fileCount":52,"integrity":"sha512-Ou9er6B5f4zu9FRn1lJCOXhx4LU8uLhXmXi+b6EBjecz7sr/IkgmPy0NE8qUw3RDxi2qM9Zu0SNP9DNyLm20SQ==","signatures":[{"sig":"MEQCIH1QwyEd9hJA/NC6jIJiPTjkglCrmgDXJo4KdkeUlxydAiAgBm76Ohs4htoq8446UZhT/2y/33adm6Rs5wpZJFm/Sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGfp9CRA9TVsSAnZWagAAFGYP/RlquWNvcwK5zapNnOLG\nTDYGaDDVS6+Feh0xfFABPROLAYXvWoaM2h1AbI7fGjfzcaXuBfCS3HuNLLQA\nlIpnOTWDCdC8F/lQkS7f3z6Uw5cK0CBNhZLe5XQVmZ0i5XpHVasQWOrMK/xv\n4kJ4o9Yt4sLF4QeM074B166G/kKgPFd/V0ebkoYqZFcSR2BtgyLUIYSernXE\nsOyCgw4/fY4ZUKQOu6bQIUBYv0/zIDnMGxNioihv6jKqzl7udCJ3rmptFxqA\nSDm3qWGQFQk3EG5HCtOn6UpFM1MFWdd5pegYVxOGv/lOxrFIeoTA7k3uMBwV\nuSy34yuK3vQt7OIF9QlE3Fas8WZcrTGsoB4QyQDdHq5o0ivzN4wDRyOK8Twv\nShcSJAAJ+Ugu1CoHvPgVyMvhcpEz/HRrgcBGsDXUTJ8/JdNzsAAY6owRLeLg\njoEFd5IfW7NmAEwnLx64FvtDENO648g2ve5/TKYohWOuzgUK75t2GKb/CJmE\nBpEOFTTDkrwNr4WBK2V2avOj3aL+AGfidcjdC6HUwu6x9waW+2irI/XuQUwl\nz51JHBrCmnJbPu7c3bJTzffiAhpXbI33xCoF/5eBd8VjX1K1vmRZ7Tqo5i0O\nSRgIiiJjcIPFp0yZdjJc1Q0Z8T+FrnDd5u68XrcPt6pDxESwtHPteSn0ScdW\n4hXp\r\n=8zXi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e4a97455c736fab77028e52beabb53323eb60ed3","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.00dfbf6be.0","@material/tab":"8.0.0-canary.00dfbf6be.0","@material/base":"8.0.0-canary.00dfbf6be.0","@material/animation":"8.0.0-canary.00dfbf6be.0","@material/feature-targeting":"8.0.0-canary.00dfbf6be.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.00dfbf6be.0_1595538045132_0.419232104786341","host":"s3://npm-registry-packages"}},"8.0.0-canary.b87e522d2.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b87e522d2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.b87e522d2.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":"309723dadfdb31a2c06f16216b88e79af2efaa98","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b87e522d2.0.tgz","fileCount":52,"integrity":"sha512-oKuVI9Y9U3YSt7Yba6GA4Y7JKwZnRO5h43WTjeEB+y+enBLSvx/dzw1K0d4XnDqU/BCeETw/YUYWB75T2t9RDg==","signatures":[{"sig":"MEYCIQC+QOUKItpzHkD3n4b+/D09e1ZMvRue0zHG7UYtKH1NPAIhAKU68Xd7LwxU6LgDB9O4c6fEaYHIVKNCr2CVnjvjWon/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGgAWCRA9TVsSAnZWagAATn0P/2y+9Ae2E6pzfvEbJNdv\n3Bm/JF5sRZ/8XmNMBZFllOI0XKGZrXItDyCsVhcsDx3ccwAsxeLWHYt65kv6\n0+wLsAYhnJEnvtsaEWhWE8QcgZrOI+sP4q0QfNsdym6sSic3Hxe5L/5fcEJT\n6shJJyzHT6oJpsTIo508m8IPbKTWuKOsL9HlSucGKwRkaslbMKWo/AbdU0V2\nyiY/kYRxlW9B197dOWnMAFxTAP1Mk8Ea9Zvl8nqHOEXj9CDwzGCvBvtJGM99\nGuvtuNwpHFIbjRBOoAUVcR743m34HVuoW6zgYfI7OOP6m+o+UPou4WGggUVB\nRkFjpILSWx9hiU+vbLGS2ScEytwQUcB8MbSQqpPlkC2lBr5qCizGEGgRx13/\n1IeAhGsSwoPtZt989Huw1nwuqTvTKYOLS4i4ngq5D1GuLCaglzPwFDvHRRXG\nz7JyOYJl2whJCT5BB/Tm0I6Zt0F/4lQ2jH3JHfLqp/Pg7FFDjUVmaTPGT2zo\nvPMLtA6jrzWsLJIUZBdT952kxJHN+mNES4I+Oqjrcp/ieNABBg1nNevDCL57\nNcyRCjfMlnHNjPVRk2XBzeJo/SczURIpxXMJFkf29VWbL0Uhd7pCIUoTnzKS\nNbt2iuw5CCWnt36T4z/sRMXhiOzWahJy8hGqCkC8DTgpM4SgI2TwjjpjpyfX\nC0ll\r\n=w8Ja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c6b4bba75848a4cc1d6ee29d1b67848ff11a8ba6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b87e522d2.0","@material/tab":"8.0.0-canary.b87e522d2.0","@material/base":"8.0.0-canary.b87e522d2.0","@material/animation":"8.0.0-canary.b87e522d2.0","@material/feature-targeting":"8.0.0-canary.b87e522d2.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.b87e522d2.0_1595539478182_0.8589140932022219","host":"s3://npm-registry-packages"}},"8.0.0-canary.5b3e150e5.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5b3e150e5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.5b3e150e5.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":"1251a25703c292a280ce4d73721b7cdcf94eede5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5b3e150e5.0.tgz","fileCount":52,"integrity":"sha512-RJGafhBOAMcrFznLWURcsoKWGldXyPqqiDNSrmq1l1w054WRiZpRmyJfyzyXlIhn0n6PBg8g31/+3kGhHGrKSQ==","signatures":[{"sig":"MEYCIQD3+kR7w7RiCo1wcA8A8BXKgvoqsQTROLyhd2PLPDkOLQIhAJ0UlsNS6xp/wQBNJ3LZ2tj+ODR1Hv9ZDW/pDILL7dey","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321178,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGjhoCRA9TVsSAnZWagAAnqwQAJotyObm/TXJm/vEe7Ra\n541qsiKhYvGcv179YBjI5gH2UqlF0Gn9RAZye2f3rkOlZlsdedH7ytcn4FsH\ny6gRip4v249r8TnS00dhZRoLRbaX17M+v1Pj3o1Q3XtFxudmbfDTOrju9IlC\n8C0LZFkBsWmvgShfBEoneM834sBZDg1mNbbNETy3/MQ9NCwZIK9wze98kv9g\nd35P00PnmTAJhmonwuGkgVVY/CXI0Wj9bthUzsAXbLwM70zkAwJkFOkotO45\n1poBc6Ucwy1z4j6h+wBMok0jpuWfXAHu1aL6qYayBMRJlo37bgg4KiE7bgVu\ni6ZV5ZAuojRKw7vTs2Nxy3Gvlck3i6JrHjlraYQWxLSWpLtwdsW8+go39tuD\nEMb/zE+NWfwresqLny+ZavQ8K3hFkX3erQaq8Re4ULkJmEqlNJUrSzNBEH09\n/VUjlI9eUWC/qd7qBxuX1VdWWjdYRyidSBS6tkHnmGeE4aDnihdkc8E0yYvX\nOcLPzxdNbVsGRDh5YYHOPPVLdVn2vdtkELJ7FD4XcKVyUa7G0qEkOjxBuNQa\nv9CozdqN47wkV+lfAg1+Z6O/rGZ/bRgY57FMGNyRGu9xo8c+EiVs5ss7wiR2\nFQYl3rQ0XKRjEjPm6DC2Ho3CACo4Upl29dTr+xWWPKABEibiUV4KpZNN40x7\nh96g\r\n=+bNx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"bdcd04000450742ddf94918c2953ff0bbfdfe9cc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5b3e150e5.0","@material/tab":"8.0.0-canary.5b3e150e5.0","@material/base":"8.0.0-canary.5b3e150e5.0","@material/animation":"8.0.0-canary.5b3e150e5.0","@material/feature-targeting":"8.0.0-canary.5b3e150e5.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.5b3e150e5.0_1595553896073_0.2855817248207735","host":"s3://npm-registry-packages"}},"8.0.0-canary.f0ae11786.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f0ae11786.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.f0ae11786.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":"9f4f3ad77b04449925b75942e592d4dbb2a5d8f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f0ae11786.0.tgz","fileCount":52,"integrity":"sha512-TD3kVOFzwDySQ1QpUjBEoqRRs7dGpYobX0rGnQcucQvlAGSjLTGwqW6COURclSum/2aBNDaScn1RfiCPZtAyhQ==","signatures":[{"sig":"MEYCIQCdpFXoXhyLIhyCT71zOgi0AEoPTc5qP94hI+9XndrZjQIhALL2VmyD8y/b9UDNtLg7ifllYMoDznXvF6KLujHmTZKc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGj0LCRA9TVsSAnZWagAAa+MP/j+VN9vd+jLn/OY4C+WR\nkSuyEDH9kgg97bLDhk3aIos/eKV1lFjQ5DK+fLVXOBbg61Kx2a1FVhQtMEix\nDIKOQE1l23sM0Sb8YVd7UknhxyQ4fQGF6yr2+cH70CFVhWL9k0MzQEj402EV\n5pQbTs17wXE5Q2fCdcHzIN7V2yGGKq6/RTingWAz5tXQYWGsAGl3tzx9c9IV\nc8gVJ+v6J8VtEERS3WD91Kus8v6gza5pFjYWHKawFGdCzoYfbGzwaKbRJ0mn\njhSPtnUn7681k2C3zPENwRSQfRWuWrihiLOEVE9sH9ceRIuP+UtI6L9zMeaF\ngDo7QKWjlCCHK5NtzwoYL28OqG1M5vHmHVhWxQ6TzixQIMsa9yokCCrypvRb\nRS/qlF59vKixNOx6aOUPpME6Z99rPvFXjGGoi45fzaqvjO4ZOZj5NU+rWltq\nrmhux+gojd1didIyCkib8BtOCOhX3URy1V8QFTn19fZkv1fTiEdZMb+BbL4n\nZNetWjgd+TzJY1Ixt0JizYoVEyY9BNZAQ+CEm2AkCOUUhYaYetAACqtVVhwE\nEGLrRICK53aW0bmyyoz2ZSIMMiGSwpusEuEfHREYqXPa6GaVgyOOiKpmwuEc\nFZGs2t5Q08upvm5UYKoAMZo3EuNrqN+pdMZvdX0drsXfYMMPb58938QtCk7A\n9uB+\r\n=GRsZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"2f6df990a3e45b1985740da9e55bce17882e69d6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f0ae11786.0","@material/tab":"8.0.0-canary.f0ae11786.0","@material/base":"8.0.0-canary.f0ae11786.0","@material/animation":"8.0.0-canary.f0ae11786.0","@material/feature-targeting":"8.0.0-canary.f0ae11786.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.f0ae11786.0_1595555083503_0.9520456152898615","host":"s3://npm-registry-packages"}},"8.0.0-canary.fb4ee66c0.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fb4ee66c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.fb4ee66c0.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":"89768db4510c23f5efd7cde1afdd68395f2a3b14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fb4ee66c0.0.tgz","fileCount":52,"integrity":"sha512-H00WEosue2GZ3wboN1lNSjysVEsALXHRIJ6Z53aXl1YldKo1BS3Tq39fJjtgTlOAsfJu4HzE95WxlW6Gu9Mcow==","signatures":[{"sig":"MEYCIQCtSaUZ4EIuKuZbuMKoGks1qDFW1O8HVWI61ZUKbRcwDwIhAJYrl3DSAMH1YD4UtD5BUJMMXzle1lIK2mLwxcOCxc4I","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGkNcCRA9TVsSAnZWagAACjsQAKURE0w27v1OjBm2iPjP\no2si6CzNietAjKsToSA7i2yPuee0R7MWNAErFcjofRony0ob40c10Q47ghqE\nM6MRj29nN1ndRrkfEqyNsfogXglXpp36nMUBBVGa/HPaw+NosZi3oLxfNo8W\nAljSU4nrUybGiMrtCRrJ9HLXzLcoJZZUVJuuxE6Tt5C6wt8dW7KXZOEFebnr\nL4KP8Mbw8OBImLXGNEDDAIy+8T5u87VhiBj3UJuTyVFhSY4lGN3dumVR3Uno\nnaAndMyhZSUX44gAy0V7gGaqi6w/SL8M899b7TgX3yQEPSC/KBrZnM/P9xKA\nUSLnc+0sQL8ZyfZtvQhgkdRaMbb9dbbO7UNQOOOf0WXrSPlO8g9aDhulIb33\nQXBe5E2XpHueNfzi1PtaRBJ7ZeyDuBHPRQfSXb5PF61fBSiFTvp8+4D+TfAA\nq+nVbTX2kIYxwPb80HdCFLezwudAGe8b0JxvAuoWqzB30i2Z3yksN5U+utQL\nX5ZJS5jvoVTaAbbNdRmiORXqxsuPkzc1erloQY3ad2sbVuxXptsUvRgNaRGu\nW5NGArROWnwnNXrIp83rlWdlOz0c1btzznF27a1uK9aoHMw5Zggzjes/wl7p\n5Uy8KUJrGln38qEzAMknsu+Nt/vR/th842AnsvHhqROEIxxuVAqFYBY54QVz\nX9jf\r\n=PKf7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"38a9d8f8bf46aca600cb4ba84272480ece6c67bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fb4ee66c0.0","@material/tab":"8.0.0-canary.fb4ee66c0.0","@material/base":"8.0.0-canary.fb4ee66c0.0","@material/animation":"8.0.0-canary.fb4ee66c0.0","@material/feature-targeting":"8.0.0-canary.fb4ee66c0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.fb4ee66c0.0_1595556700547_0.9194415353498884","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511e0aeb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5511e0aeb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.5511e0aeb.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":"c87799c437c69e34a08511f7e8f02a70b789c12b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5511e0aeb.0.tgz","fileCount":52,"integrity":"sha512-hrzOjBBsTFxdrkqE6BzB4IQcNP+9XhF5UZJLlaMLiHgYFuXMny2Ujzi2OvVKJihgq4dyKSt/WaZekAz1pYon0A==","signatures":[{"sig":"MEUCIQCpbAUwifcZfB8NLNYA/s9p5y50FNikq5xld0+cjv75OwIgQpUZXXHhceq+9w0dIHCd47/G2D5o5HDT+TwO05FBXWM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfGxMMCRA9TVsSAnZWagAAZJMP/3ofOe08RSAkQJXnJfyK\nxLc7N/3JtWGbZe/Xn96tyD4Lqn/kjEaicgMQf1h7BnltNscJl/JoZCz17EVL\nKuMDcKQvHwQCOW5h6SO9jnY5QMNa805Lgy0RTaEXJeX9eyR0qXw8yqnS/F7N\neaU3uI2UwAqMINmxgnF04GHHaBvdMb0TDuGNdRrSo+bTM7BpwMiMPaJK0G6m\nzHOarm48p7jWAr6zkYujSgg5eprealXqdK6PCvAyqcnTYpc16YnP+mJdtvEY\nhecVAc2mU8r0oLEEKK+7fyChMbUTrXVvHdAxyFneIuBSwab55WuviGb+D/FH\n41lfTdbQuL3lSG7UKiXtiotB8q6kxdDrEKTsLQFkKjhDBp6Ihn1oukXOeQ2N\nA0+zFrU9NYIixjp5G05ohzFhUSQ7GBHyeGqxG9TF7IXiK2u3zx+SRniBXwMd\ntvlIecAdhIBoeCPXu/4DrzUTgmoZpw1WojlPuU4m9uURdo/ZV7bex1qhqRVp\nK/MTPDD+I3I1SprTar/gt/OWEP5Ct3eAB8RPDMIz+gf0R13WCIFu1iZMCAbz\niTh/AFycHTbDJAQezIK7Zat0l5gWrqdTBzq+RPk98JP2vrczCG71rzUVg7kO\nFn6IMgFXeZ5QOFIeO6kf7w/f+xi8V7gLW8ot5b2UFo+tfzMLbk/9yCS01JdB\nvtj0\r\n=0QWr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"dc830dbf81ef9cb796c66b2d35b70355ca46a37e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511e0aeb.0","@material/tab":"8.0.0-canary.5511e0aeb.0","@material/base":"8.0.0-canary.5511e0aeb.0","@material/animation":"8.0.0-canary.5511e0aeb.0","@material/feature-targeting":"8.0.0-canary.5511e0aeb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.5511e0aeb.0_1595609868226_0.9683530915858736","host":"s3://npm-registry-packages"}},"8.0.0-canary.8388a9bf6.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.8388a9bf6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.8388a9bf6.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":"23429d717a5ce48caa5d5639e406b9bf206cc2ec","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.8388a9bf6.0.tgz","fileCount":52,"integrity":"sha512-Pov3iwxtvvgnn4Y2SeL+Ufx+Ic+nTr9hBqZiuTu0dCwV7pkFriA6gOJBDa5CVwu7TmbBLPvQ2dtqsHNqDrxJgw==","signatures":[{"sig":"MEUCIHbfdjJOCIIWMMYKeTgmhQQxnawOhJ7VISS+DB4mYwE6AiEAw5H9lx5ANsjaHs7Lt0dL6RYzIH/8dDKaQCKM6GRT/qU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfG0EdCRA9TVsSAnZWagAA1Q0P/j/w6C+bv4NRoI0hMJn9\ne6sXz2dsL96s4t0gC8x2+4+yzzUwAJTP413TQN+XQRYHk9SOBorZV6EMsUBn\n2V775TJwNKUer78R4DAgrdLOo7uzl7/yHY6LH/o6mnGRMnCBJGH8Jswcw2d4\n3Vt4Q2p3PVoF0K+LdL9UvqV6kfnda0dXfEekY+febxVBZ09GBhsFl9BHdVSz\nEjzieXJZ/DJ9ufNtHhwD1dbxWEawknrJfnlQLOyHloEIIcC6745a8vsW06fV\nT0nNh/+97NJ1UwdbsTONUlFKMTE8HEMM9RowTX1fGNiQevrWyqhLXOtR1Lij\nPwSLdfPG8E7VqNkYOhAscNVUMc+E4T030pZ96q/MQqWyCd57z3jGSl7ZjX7m\n5aL0wqc7hp0JDhRlMkODqtdBqJy900UUtBG2AcpwdPcWizN0dijZ6V+8z3Mf\n5O4WEg/2o2FXt0fsEFJ1Q5r4EDXHBWiTYt2YI0Sqy+q/U0PlY8ShUW3uGfuP\nucMBEHmYyrQ1rz5Xd6QywoNs1zCXH0qjI7Qd990eCWgzhIihyTYIHwoMomB8\n9UNOGCo9XjGKS3mXp2iyryKLOypUIlmSo99Cd2YmVPkvIYO6y/BXOfPf2zFw\nhCCYHWRt570o0FpnIY5TBK+WLDu9LHNFtqFBiYj2rQvQejMRH2iff+gWlXe1\nM6M7\r\n=h1CX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f2188ad8c46b8f947761bceed0fcdfd08019e97f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8388a9bf6.0","@material/tab":"8.0.0-canary.8388a9bf6.0","@material/base":"8.0.0-canary.8388a9bf6.0","@material/animation":"8.0.0-canary.8388a9bf6.0","@material/feature-targeting":"8.0.0-canary.8388a9bf6.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.8388a9bf6.0_1595621660757_0.6328733877098607","host":"s3://npm-registry-packages"}},"8.0.0-canary.ac405eae1.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ac405eae1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.ac405eae1.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":"cd3de96e89d598addde44daef4c17615ae83feee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ac405eae1.0.tgz","fileCount":52,"integrity":"sha512-Gk4Pk8oU6PD4RltZpbOiwDWDoo1YH5luFL1LdhpJhCFi3Mwq/qCYYc26iYx4P1JHGd+q/VkErgjJmkkiE17++A==","signatures":[{"sig":"MEQCIC0UHvPhOJ+EB6K9DVMi25grzIpRBV/G5hkwH+u5+bApAiBg0go4kKsdZr8V5LyA0gEn9fIry3Pkzz7+tfQvraZMxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu28CRA9TVsSAnZWagAANMcP/1HT2ZFC4WVkCo3SanU/\niKzSEBNJBDEVTmGSGe+hxPn0KRErqljVbpAtbrrW94zUIDEfwcNeuWr4dPKy\nzRTDyDGRAIwP1sqp1IsKizqL9C6b4pfzxrfv8RbWL9o0XLiM/MIvWA0v1pQb\nL5aDEJ4pPwtNh7vYHAO0+00D6GmFORyx1Dp91cJ2m1ZjR+vMpiJQsnze3X8B\nKCVwGZbVRvcrrMrb+BqmKOAIU08vPkmbz68qvWWWIa+I8dwBEED9iSBsFAej\nUCjFJMumTUaboyTN7y41PoH8fOi8/BeSHu6Ich6McbnP47VojPqLcmwc1+8w\nRcVgz5oCpLA0BnPZKEcqGaMcRjYoa0yMqc3ivOh2dxza0dGIvLQzDDIPlif7\n8ITcjxadWqNAoMNypWbDC2R7W6NNj5KwdNghkVniRYvG/QF0IgY6qMa7PtOv\nZepQR4s2T1q3uk0tH9qB8K7r9M56+shqQ7Y+SJ6YjjE30Bj/qXm0odhLQjZM\nRJw4YEbiduIBEhDIW8K8PcJPKCWWtuTdtt8Sb7EZe6DZGaYRSRNaPmwB6OXU\ns9a78ibGoJUr3IeQvOyL2l1ibAG1nQT3EZtAQMReRZHsqHPmO3DK5rqbtJ0Q\nPAz/rbQG3mCda8dr6VXCyZqAFukjzG7wXr5N5SoA6tsE98SETeQ6/UF1XhAi\ngus6\r\n=jPwQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c4f229736a36f17b97137adbdd4b59901eeac852","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ac405eae1.0","@material/tab":"8.0.0-canary.ac405eae1.0","@material/base":"8.0.0-canary.ac405eae1.0","@material/animation":"8.0.0-canary.ac405eae1.0","@material/feature-targeting":"8.0.0-canary.ac405eae1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.ac405eae1.0_1595862459760_0.7972337968705157","host":"s3://npm-registry-packages"}},"8.0.0-canary.75553837c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.75553837c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.75553837c.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":"d38a2c7b73efb66384be5155a932dc7b6239ebd4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.75553837c.0.tgz","fileCount":52,"integrity":"sha512-znd9bb/UOLNnfPd+xDFO4qUl5x3JRdgZ6CdmPBJ3xoyjzJ66BSw/TFed52QBW/9ISEVNVrn86hPwW2xuyuvkUw==","signatures":[{"sig":"MEYCIQCxOeeMNH1Ruh5r3tYfQpuOQdg4AZB5Mlk9HWLtSb8kYgIhAMW3xF2qVnmSgWZn8FSOOOqKhHWIRcAtZz95phThs4va","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHu8aCRA9TVsSAnZWagAACkQP/jwTiK2zcgaFBMw4pVL4\nobd+lSHuXzOOxp1eNAPpvqZwicSsmzHpucPImk/RptglYYJFBabUfW2wV2ys\n/xHG3GInzOnr7XTa/AClDOtoJ9xIsE0Dn0PZl1v8OjwmvuKL5wmSDjlLc87/\nO8lwA/D7PhtwTOWMBkfmMVF+V7EvjsJS/yOqH7QyGMirXSzllW1VB/Btvijq\nQw9A1xeM9qy7FOh8RWh1+F68Cj6kELX/xLN6qvi0INq9dxyuquY3CgzZQha8\nWMtwVQBcOrSJA+rP8OKnrEaIvjzgikpcEOCS8iTqK0STwv78AskROzZ4WW/4\nwrUboF8JF7Lhs6Ewa0ASYAAdfZ0DHgQSZo7IVcwZujvdusOgnPTynL6nF07t\nDI4fA2zUl28PuBCYW6Tt/rpDXbq8tPrV5PvGxdOvNbU+ioPvEUnJUMNzRKPa\njnlG7knx1axxgHusNkbDpVR5rK4G6E5ELReECX9GffkoSB4TOIwqxfXoDAV2\n7WDPJzl+pGU8rJqRn4gOWPaP+sp7ofcdCJ21UcVc79sCCxT/jAhgZBoXMCP7\nouJ9Yiaa+Ie/F4C4W7m5onLlvq5SI9Mq/od2zVKQt5+Nv+vBcSA6wea2c4q5\nXs8Igjy0xXnSgpr4hwz33/Z8tEx1uSwRsvn9Xl0p6KncvIj8HUN0W4cYH6aP\ngsfW\r\n=vyfg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"18c0e52ebb63979ca614d6df13d96e2c1cc93216","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.75553837c.0","@material/tab":"8.0.0-canary.75553837c.0","@material/base":"8.0.0-canary.75553837c.0","@material/animation":"8.0.0-canary.75553837c.0","@material/feature-targeting":"8.0.0-canary.75553837c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.75553837c.0_1595862809759_0.8243353505330915","host":"s3://npm-registry-packages"}},"8.0.0-canary.b96fbfc7a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b96fbfc7a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.b96fbfc7a.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":"fb1ce61ff93a5eabdd7b78f012974e496dd7ee81","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b96fbfc7a.0.tgz","fileCount":52,"integrity":"sha512-M2Q+f2wLerRHqmagOjpwOnunUsDw0894aEHcyhphC9p3Swtea/9XZXTG3SCMntfd6VRlFaArvjVYCAbla4NKFg==","signatures":[{"sig":"MEYCIQCCK30lIBA8HM7XKAQP8FombDUgpERBS39S/6nXk1CUkwIhAJMqCtdr8R/qsWU382opaIW2JR24S9jo0Ed9gvqAJOBS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvUZCRA9TVsSAnZWagAAbmcQAICu+jZzSXCFPuJofN3R\nJweh7oc35ykP26VduT/kEr0YNxCbkOoZzU/P0AXYD3BzyvN80bxI1bHxS81v\nigPUqfCWo43GzptV8pJI++x42QcIWXBOoIqtKAdzVA7oU0po7MQ9F/1H9CZ0\nErYkmY2Xt196YI5VitklxJ3/ptj7AqEPJIsBeMxSai7k64dTzP5ngM2bxSaW\n7fSeZe63fh5R47nzVpk58SSgXiqt4bgDRT3Sg9KkiRl+/NC8C4HFLm9DJhaa\n1C7fXcG+Bk0aIPq+HsfbbhyKz/nRQHK9kgB/cIOB5lZ0r24p33XggObJAW17\npo2xNRS3aWMAiSit65won8Ub2MDfp3j936zLuwaEYTFF2IGTW4ouKUznaKR1\nhdiPq2ghcWxabxaoy/Gfpsm2QSWUJPhjhckp+nOsKbLd2G4YPSCyJRXak/n6\nlilhW6anCdaAxqrn5pfs7Z1ETNe5EmWGsVAO76myd0PPILzWZQxmmbU6XsTj\nPahw04SFqzIMSk5HaUjtPgVrraOAwdOc5Vg74nJYHEr8mkQvQlRVuqyHf8mL\nBrzjuH//76mViDnDGcypVEPcOoyY5lcot/WMbiRarc88O2HN8GemPO3wRmhR\ngx0h6VVfgMIacRiHGC5vhDp1kktMN7aE1xlmZajwkJENv+cKQ8SROQMGxkBh\ncjH6\r\n=eUH8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0e9c13ddacae3f3bc09bd4f168d276110fb5677e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b96fbfc7a.0","@material/tab":"8.0.0-canary.b96fbfc7a.0","@material/base":"8.0.0-canary.b96fbfc7a.0","@material/animation":"8.0.0-canary.b96fbfc7a.0","@material/feature-targeting":"8.0.0-canary.b96fbfc7a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.b96fbfc7a.0_1595864344805_0.39046825034065336","host":"s3://npm-registry-packages"}},"8.0.0-canary.61f1a8d85.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.61f1a8d85.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.61f1a8d85.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":"36e1e73af06a0a99e83a2e3f6e4454a318ed6736","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.61f1a8d85.0.tgz","fileCount":52,"integrity":"sha512-gRlvNxGH1sojQxcunB473ICZpi16yQlO/YhikeAm8RRwrOg1jNyN4oQhMBjmqt54pvfbhuMsvKzViwYHuzoDBg==","signatures":[{"sig":"MEYCIQDMrT5kGrIqBoz/rWqHOJfEQcjHLbhkRENy1/y1zbG1agIhAO7sRPauY5Lj/fuwOnv2sc+4/EegJW1X8O6vXxsNH74a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvc4CRA9TVsSAnZWagAAtakP+gOIhUZHD0iusuLUxqCc\nussVdPtAB/HO5XlYLvTzLZfT+D3tkBxisLz3qeDXQ53Sto5LgzRAV7LRtkDO\nWk0IMQv/iatWU6JRWgyJEXaZ5Uqwytxrow8vz+hJycKgZBeI/+RyyqkTVBCB\n+X90jpW3ptV5gIZ8avWcNhq3i0YFM1a+0aLZtWsyEx+piEqgRvo6bwHCccty\nRfhqxicFkwb8KVT7IIIA8/5TcHoDic2yMeAMX7hT2qY8+NSmkO3YVkMMG35E\n/1aoagFkB/1B7168T2+DL+ybFPWPDw09Kah3EDIzoCPPXscQj8iwG2B5XLHo\nIMiv9N673vv4TxFpBXr6tZ20G8IHkChY0SqHOMZTj9cxT2ptZ3fsFTaDQvAs\n+QjAJEQZ5zRGyTKoMCBO7z7LOnMdE5fURoirngsKZ513/dKpVFqLZa+obaIW\niF94QRmEuCbWg4wa7PkrhFeeZ1vuxjR9MSwvO9ZaTKM6oktjy+SIdZ9FZ8ab\noh4aKJzlXNVaFVP7EUtSjttPO3wTgNyWGLlvzFYCvhtMUIzOnwCQTLOlduvA\nxsNudPZ5/H/fhRg7Sj/q0xXL3QyXCVUSCYBHXkdcVYPy7EIvzRJ8E+EV8ERS\nXmy3hQvqbC+KE5xoAFaXV6dgs4n1K0SqV9hB2euXD2+AJih3boqYhMqDlNdu\nlfIA\r\n=c/oX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"71b0bdc987ed1b1b5ad827abc78149cd4efadb89","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.61f1a8d85.0","@material/tab":"8.0.0-canary.61f1a8d85.0","@material/base":"8.0.0-canary.61f1a8d85.0","@material/animation":"8.0.0-canary.61f1a8d85.0","@material/feature-targeting":"8.0.0-canary.61f1a8d85.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.61f1a8d85.0_1595864888190_0.9803334965876431","host":"s3://npm-registry-packages"}},"8.0.0-canary.81dc33377.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.81dc33377.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.81dc33377.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":"8018470edd255d3479c40ebbf0ef507faa5a3392","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.81dc33377.0.tgz","fileCount":52,"integrity":"sha512-Ki9nQEwIyj+mFb4OU79oxVogyRqN5ezOA07/pLgmcwMXbIEDyR6IiQANDx3vkc9BLcCneELbXE6ugWdg8l0XIQ==","signatures":[{"sig":"MEUCIQChw9/Ty6XfO2mBhbM6hPdzc9OS6ELzo1h0ivih8JENAwIgZjC+dJyRy8X2ICZou07i1Usf/CBPWIVAESC7RKWFWis=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHvoQCRA9TVsSAnZWagAAV0EP/jT48AFmYycfg1eI1p93\n57ZZxx7RpmtMAwXTKvuMnvDpsywNswJIIXXtEm411KZdsZvbBFR56Ki+SKyn\nUl4pYK4qM8ZHatRHrFWt/Q8Sd1tMFDJNklJy7P866UYaHAtKRri4askaNqbI\nEPWlWLjDPt2INuoUT7AhVkCXPHQRgzmucU1NtC6RshYcumbiLgNWWSmgjzpb\nRjpDMCjoJtTYwWRZonvTcP/HRpaa3EQ1XX9Fqx1+dhmLiF0gjEgZbGpv86dq\nV07QzJBOuwAiEb11mtzsWqxXRx9iS7Z/hOc0lHWjil1CW6FmKsmGbXLWbssw\n+OrD8qCaaBHZJCVbfa4D9SbuclKsRaCJ8cXswvIWFmI57Cr6ySyVZpPD9YOb\nNP/h1suzW3l9dOhoHitjiNTkLRXSVDNqiuLf1YnSHKO90gbxjBtm96ZnM2Qo\nbvVlRyko1oAWW1oCO6UVa1GIil1asmbV7mCeIHk0/5aOU75HX+RmIJ+ZxA0t\ns0uI6xVKyk9X+udDpfqHI1gd9pdn9QVgLuEqfn+MB+Kiwc+HC6LOUIkNqk5I\nxc/CGPgG7o2vgBjBG6C4m5+XgrVObv7YUEI0LTkCpi5FtVsWRRhN1Y4l8+Mx\n7/cgUt9BNbAWpwLVswr2hIcSAfiQ1vkT2xt1DTgWXGr2mGEUzwMj9o2Kndy3\nU5us\r\n=Csmp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"14e4858d309a20ecb69620f07c8f427bda0821ad","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.81dc33377.0","@material/tab":"8.0.0-canary.81dc33377.0","@material/base":"8.0.0-canary.81dc33377.0","@material/animation":"8.0.0-canary.81dc33377.0","@material/feature-targeting":"8.0.0-canary.81dc33377.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.81dc33377.0_1595865615981_0.3051220052919328","host":"s3://npm-registry-packages"}},"8.0.0-canary.ffd9ede58.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ffd9ede58.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.ffd9ede58.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":"ad8509421721b2a492c901044eda628cb0201a95","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ffd9ede58.0.tgz","fileCount":52,"integrity":"sha512-DwqyrxVsSTC4ix8d8kW6rKa1KZ1/Fv2UB7n8aDV2RW9G1V0JD2aggMeiXNjTqTLXhqhMZ76ZKvohET3MY5BpBQ==","signatures":[{"sig":"MEYCIQD3szpNEcGSUsrajTJlVWN9GYFsXHY2Q1cnXHBfV7tLDAIhAKfkKCXs04iwnsi3Md4dzOsGjJC++FOgWnOe6pG+S8wr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwHgCRA9TVsSAnZWagAAyDwQAJdtCY8mV8dggpFnuQUO\nTihQzx9s/lNPcqS+laFH2E2Tdq2UjbRX6ZKiDWI6PTD1KM1yYFj+tZeOkrky\niHzu8niY58ZBPMN/61skL7cuSneGFBzLkZvopfsmOA1gw6DIDex6/bVp9L0n\nyqW8LOPzFPSANN6PUEwzehg6iHq71oyP8AxaDy/1aPMrkh9AgSP+cvMawow9\nldsW9zPfFjxNSmfA0uPyv6sRnpgGhSOjHbg40zjGlX+E/LT30uYitxG5LuhS\njWu3jdQp7FtvuIJ8NtMn5l1wMsfME9IN0MvDve6/7LV8dMIyHf2f4U0Pw9rx\nsdD9r0XzYhWgdkxeBdMYW+HR9qHHGlT8iarbM/Q5qHQpUSGbeoQyo4aQe8Bw\njGbN9ymcCxeD/6VYOKlFvh6Bn61xW0cRdQDdrQCrkq1jYISz4iy0AeAyeJNs\nVcnV7W7Uh38eF4e6ImPzuhdJR2d6ggb0dHCGK79ZcpL7+uwFFLl51FntUVbu\nANV6owmgF5R3gQcAcw9CjxnU1UTxMnLEp66nygUX5iyUOZWnXk9ymF1uIaIr\nsqO7QsFxJP2y0fnJUqg9Ns90REa27cfreE84ST3uO93jXr8pBKANu0FSFooA\nug26LSVgqmG8SkfsPVvffzrAvX0K/izjmaDYelocCd7pgxl9+YF1HhacUBic\nXYwb\r\n=qqV/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"8a029ef9963cd4799ffbf7dd03908a696d110f7f","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ffd9ede58.0","@material/tab":"8.0.0-canary.ffd9ede58.0","@material/base":"8.0.0-canary.ffd9ede58.0","@material/animation":"8.0.0-canary.ffd9ede58.0","@material/feature-targeting":"8.0.0-canary.ffd9ede58.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.ffd9ede58.0_1595867615724_0.4709595753161251","host":"s3://npm-registry-packages"}},"8.0.0-canary.52dc55acf.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.52dc55acf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.52dc55acf.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":"2fcf23f152829c8c45a363ff42568ce7280cdbab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.52dc55acf.0.tgz","fileCount":52,"integrity":"sha512-gPFXAAJrkiflUEGbCU0vFPRIdaBXrFQiDlQWA15s6Ku4vTtWBjY9AQxAJyGGQG1WHxe/AVmvnKcs3K51+rWY5w==","signatures":[{"sig":"MEQCIAu+qcDKBpDgK0OeUslRy2mrq4986E2HbN8EfnWsgA09AiAqUcjLcQB5ksZIcBxNyI4ghOeXEG1DPTdR/lHqejZDPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321116,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHwpLCRA9TVsSAnZWagAAIDAP/A7THBATsCI7WVZOS4fR\nHlPvFOw68MU9gjvMQqjrFq4Eoacekh3ci7tzqJNM+wG2rjuFedMnlcIt2GB0\nwixnEiP0vNZJchI7l5hac/0P+K6+KjbCDiguNFXY0DQZlqSqNmzT3+b7QB7E\n1ZiTM6h9xdeyBGhVTw0sQ2NXooFBc1QPyusL/mIDuC8h/G7BZ9S7FQuh2mV4\nUvCXnUsm5ONiNa87aKssTheKPvV3Yd02F3CvRBL4vz2wFpzeWeAgDv17kBsh\n91kyHTNcgo6lgzzFvKO4LnAzydE53Pk5Olni6rQYX7tE3Xku1oWAifH5zJqm\nPNCVRorL+dnDYZ9FJ4l8FjOEW7HArYYHUyg7f8n8vmOwOWOtdCyxJyykz1IC\nGLoghhiDup49hlNm7d1OBZb9OQfg5JF2CmgIToBLG1E5tH7kbrGGFURVRW1F\n8qC5ruEQIQ8vEU0dxWk53DCwm4z5D37NexTt5tRHC4s/m4VZb4FpQTNd8tNG\n7Jt5bSTRbW+2Bx4Wo6gWNqWlzltEOduPp0JW4UQmk88r+d2CwonNrIaXUG1G\nG49VecpY4/GYd+CdS8tXb0Y5niEhqTops4XkdhMUCnmzJUa3AmtkEyaVaVBO\nmDdAUmaN5UmZgOZ7w4AwGbJziqhnkxPVVc22HOa/CJciyTTiEpwokiTDEhdt\nRjF/\r\n=SbnD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b5253c9af3b0721aeb0cd096ac48b4c113801757","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.52dc55acf.0","@material/tab":"8.0.0-canary.52dc55acf.0","@material/base":"8.0.0-canary.52dc55acf.0","@material/animation":"8.0.0-canary.52dc55acf.0","@material/feature-targeting":"8.0.0-canary.52dc55acf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.52dc55acf.0_1595869770706_0.23712938224400948","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4274ff05.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d4274ff05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.d4274ff05.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":"713fa8c4b4fcbabf407ee2cd74a2c0c7897c948d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d4274ff05.0.tgz","fileCount":52,"integrity":"sha512-zmCDpBtszNVyBvfTsob3skYUGjUwFdqUzQ38XWBePbmrTF9dLiPPdwUCnAT/yLAfmVwnIYmWhCAP9Qr7eptMtw==","signatures":[{"sig":"MEUCIH4w2PxiM3sEPEvugz9fc/sAdEy0ZahiIzC6iBWWkl2FAiEApJta9IRDByRZ7QZ+kxkJgAVzudhtKw3x7/+UGOzao1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzB9CRA9TVsSAnZWagAAIxUP/1zXRpcZiWyF7QsvAE6E\ntWJotjHW4z7uBhX410WxVeXm7hrCKmtBDqCRw6Zlx2TEY+mwsukG/DYidip+\nScYF/8IOsW+gtsGzVAbFhUAHx5qf8bDH/4aDOdLYE/kOoZIi0DMWG3KFUDp3\np6wBDxWnolA8/eSwlqyYqz6sS98NmY7ESYlcyQ8kWQnaITJ2ST8p5BOX7Sqr\n+6WSpditChB8HUp9Ie/WvXJl/Y5Iu1eQA0316Um+M8YUf5lGDq+dZwDjFCy1\nBmo+UwnkkZZW6y0YJ1QN9AkOJaaD0mE1l4AL9+cvEcBlPebk0O2TbNwyPREP\nfvNBs0V08VlhhZASWGYHtICCODSFs6PX4Weg7HlMBkJqcCTf6gnzWyPWJymK\nrxw0EB4u/dKwR4GoGP5DFFS/AzEQmEypBLdGbB8HlzBeBtQcTjcTYKqW8pe6\ndy/A3r1KZwbjmBEaHSeLBnHhEtl0N8gQfIQJBfIvzMIRiF9FACaWaMylXWYQ\n4nkcMT074vAgNNeCdclYnivUUT2I3EuvUiisjO1OmXO9MYjVmiSmO1xq6O/f\nkMLYczRDeswp//Q7eQuz4ciKOQQh2cRhJmp+6y3FS1GJLSBOd4BECXS4QNoa\n2a7OHujzhV25epRlfZQJvtH772CgMSxRSWTC5s0ZA3LlSwFcJgvnWif6qnGp\ne72X\r\n=l2he\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b4607e708cfd7069d540b1fd6042775c4599855e","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4274ff05.0","@material/tab":"8.0.0-canary.d4274ff05.0","@material/base":"8.0.0-canary.d4274ff05.0","@material/animation":"8.0.0-canary.d4274ff05.0","@material/feature-targeting":"8.0.0-canary.d4274ff05.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.d4274ff05.0_1595879549300_0.60814582441964","host":"s3://npm-registry-packages"}},"8.0.0-canary.b82d0696d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b82d0696d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.b82d0696d.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":"17001255237c63622b6d136714fba2e68c2259aa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b82d0696d.0.tgz","fileCount":52,"integrity":"sha512-44JwSfh5Xz4ttY0q3PwcH0tCahJXi0U9eiGFCIYgQYX5qz3Ac+dfWtuOufSIMtaGY0kvONtjNGKk5d0pQWUJuQ==","signatures":[{"sig":"MEUCIQD9QfDTixV0bAUW8Jpx51UW9Vto6mvNHR0mmCMHu+UMYgIgT3aIe+QBzLV6iMk0ResOjXV6cAM2+bCRw2lb7re1qEc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfHzIOCRA9TVsSAnZWagAAYS4P/jheF85vlMRinFIR0D1y\neBZSwgfLo7J3iXx0rh4diyufiFXbOIzBxHLJOreJvd/qkd7bLdJQjgKyzaCV\nW9EGlSYy37tiPdAz6raKpE+ZK1jgXqJ+H6jGzabi8+TUnngv4z9xyj+DLjM8\nggEFvnbr2qfJaPD4rmf9ELl61v4dB2KxtASxxBpJrMHfbgbxDb0RDvdJIxiW\ng0wprYTxntubbvx74/9jbJqVqjFuyj+7iOj9or2SCrPs1BorRK3zhbDYODMB\nlpO4c1qwpdYBGFi49pQya2m2r+KPuOrKh8xr26Y6OKTBW6VqAlK1O2pvKDqn\nwAuLf6YOEc+RawbLwTlLMKflP3TLicMxSP2B1r6LhseY3XJdqGj0vZ2VR+0m\nAIxU6SO7kDFXypPDIBmUAMoP5rua1fdeiuZSZstGHMAxm1Uec5lywIesvhHR\ncX2xqxthYJ9FuSf86EQXOEzK9O3/qOFATCx9hRXD7W0Tn33qnnqtqpX3IGfm\nMVpTiMzvw03d4UNag66uRZTloHskuW8ruffGcRvfBhE8Z98xqL3uexmWE0fz\n7vxhFx1Ufl5y/eycX3Tw8jS4lfsJKUuI9qhP6RD3lCsOUv/f7DQ4Pj5cMXhG\nLfsn3hgHwj56o2yWjOyfNDPcfUfPKpWGjHG+dqncBUk8BsZ9EUUXjYoem0LN\n55ic\r\n=OJ95\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"914e71226c9aee0625b5bd1fff56b887e3c924d7","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b82d0696d.0","@material/tab":"8.0.0-canary.b82d0696d.0","@material/base":"8.0.0-canary.b82d0696d.0","@material/animation":"8.0.0-canary.b82d0696d.0","@material/feature-targeting":"8.0.0-canary.b82d0696d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.b82d0696d.0_1595879950135_0.42522950442287066","host":"s3://npm-registry-packages"}},"8.0.0-canary.c2852000d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c2852000d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.c2852000d.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":"8cec2626319eb2e74aaf3b5144eee39eca5bc476","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c2852000d.0.tgz","fileCount":52,"integrity":"sha512-0+rYfJ4y9FP76oCQFU4olqC4s6/o7L8Dep5B+2bYOsAy4GEGhiq3IMALRq3uv4lQEKiUCf2UigbqMQNnqw3Q+g==","signatures":[{"sig":"MEUCIBynFpYMLkofJOXXstof9LczZsxNdMwnl9dHDJhKVk/gAiEAm2qAvW3k91LYK8sWytMFnoRUi+Xfj+duSz0aq7gsx0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321114,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH0A0CRA9TVsSAnZWagAASj0P/3+YXVDPFQRrydP1Vk1m\nj+ofvBWqWmApflUoiyleh7JEMJAdr7iQdxU3bIL5Ou6XIVitZkeGQkNyQQHH\nN1nFpsyAjjxfAkcgfMDskTlwlgkn0AN7tLyEaPcmbzLC0KlARcvoKColntPH\ni5E2xpeJu5amlwNo+kD7w1kE0Cg0MgizUcN3gNBi9/PhU0K0HKXioot3JuJX\nI894+IafEZwCgXFvFcMwC8K7Ykt5QHjBqDyqcJrUNyVAQ7srMZwPnQvhPSEb\nG10LlUhJHhIFEpdXeDWAGMFdofFEblHfih4QUZnSY0KEqscKybuNvvGJ89oH\nUoAvX2AY0zfuaxmImpvUNqdFxh3cRni/unfrN5KkokT+vPX1UcaV5WxqFJwG\nprX8LoEvHpH2jYAhRgnhk6JihmSMiOrroCeguxhXtbSoKdsB/YxpodSr7X5y\nJa30ho8F18fHZho03pwkm9MS/2M/0pktsHKpc/a4mFSlQRtoLwDXSqA8aMFq\nFPUWABl5fpvjPH67jqrtMH+yLqBLwS4pSpQCpXeX5DTVb3LQCI2VJwj4Rn8M\nGOThb69HKp4f544JX5QW6G0yWHfhqGSbQ1uWoiqRedkaP7NzRvo1Og4C+zDq\ne9aofu2xDj7YkuWpumMyCJFipCdz6QcPNQ8waRoALRaws8fxk6HQ0Qi/cgMR\n4zi1\r\n=oRDw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"53080ff99f83ab326fefffad16cd09e449e79f27","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c2852000d.0","@material/tab":"8.0.0-canary.c2852000d.0","@material/base":"8.0.0-canary.c2852000d.0","@material/animation":"8.0.0-canary.c2852000d.0","@material/feature-targeting":"8.0.0-canary.c2852000d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.c2852000d.0_1595883571869_0.7167372985004967","host":"s3://npm-registry-packages"}},"8.0.0-canary.f86f83f54.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f86f83f54.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.f86f83f54.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":"8d7d2f1b18f91221edbf34c4f5c3756bb45d5f66","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f86f83f54.0.tgz","fileCount":52,"integrity":"sha512-CY/cXq3MZaLkmKv7gd3i8TBSinWiFl7EVKK1rTRJiyd6wOBL+bnVYuOBY8FZZ0Oj6Nx4LO0xUsqKAxRQLmgs2g==","signatures":[{"sig":"MEUCIQCTm+9lIlAC3P80yWBdJDsgXBQk40dP9lTNnz4BdIOh4wIgf3XA/vxOHJfI2Z+avT73cFq/1JkAT5PwbmKg3ZHDbFI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfH005CRA9TVsSAnZWagAA4hIP/RUFTJ9jXShgiIriVOdW\nmq2E7b2KFW7GDWyYIoiDI0aIdpft/vcTQUn2plLcIrwUOTL4ePlYHzT9Ho9E\n0M8EqBy/ylrCkfzN6yuTbdCLZifst59EPV/nz9D9zPb3tYfdT5SQ0fPgOWi+\ncJGIh6tjze76jNutXJDC5HMtiFQeHUdgT+rjSQmIQnEkULDCTnSGDOw00xVE\nihSpNKZbTl8XuO+ZnAgmNZRUR1eOa+oS8lBVCH2PF2DvVWWckvdrUv4ap03z\n8DdZMgd2GpGMUPQ/6J0/+eO+2rVGMXiTkrdUsQtvJUWkci1sbXAX5fyheqyU\nqa2G4WvWQQ5krMAAo9j66Qb1RqqjNf5qqMHn7+AVPGNhdKFyYr1m2u5ptBnE\n8AAaqD94fu8XSjFEnztdSuh4LYx1VkmEBB8wo+s5PdYvBcRBH/XKSlsc5opo\n6+7CRx+cuzIjnd4D8cjcYYJmmdDTH9SFoz668e/gp40V1qPaLCBGBK/TOQm1\ndgVzHulC/m3jm1eRKejvzG83R3DZJm9x7j5tlpK9Lt/EUmfFAdcgeZm659S2\nigTveaUBcYABt5qdn5ScGmaLmthw4pkgwt14DJiKwgpFNY17gPlcn++lMjib\nPccfMdUZ2vhapPjNzd7XL8pfBhx+9WbUSCSJfiF45Wu7pSFWtW3zf8ra/Gm9\nh2cG\r\n=8mlz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3c8abc334934dd33ace7aec681868717a4e26d0b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f86f83f54.0","@material/tab":"8.0.0-canary.f86f83f54.0","@material/base":"8.0.0-canary.f86f83f54.0","@material/animation":"8.0.0-canary.f86f83f54.0","@material/feature-targeting":"8.0.0-canary.f86f83f54.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.f86f83f54.0_1595886905419_0.8500101156735069","host":"s3://npm-registry-packages"}},"8.0.0-canary.41eb1684c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.41eb1684c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.41eb1684c.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":"73f940d60d6dc3fccc70cf743477161fe9f4d9e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.41eb1684c.0.tgz","fileCount":52,"integrity":"sha512-Uo+Vxz+BdexY+ZD8rY/QEmixF1Dk6d57Vi6KtNphlQbFI3nYWlch6nacM2+y5utoQozary1f0HDwIm+3n+5tVw==","signatures":[{"sig":"MEUCIQDvTqR+m6hK6o0LAvW7UFfpd4ZrCF5t9/lpT9hC7R+8NwIgHvk/b6fmDWCoy+1Kgpj6smDsw0Lq3w5Yr2pzPY+sxrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIGWhCRA9TVsSAnZWagAAti0P/1jBvh6kFxpqnGGgSL97\nz5PPbKD+TwinSUGofrx5usaO7FS1JXaTtZp3ogsFQSc33R8x9dH8GobH2jzF\nomXBSNjpnij8jnV9Qm7gEm+pIIEfd5pEJchS4kjfPsgYSMPk9OpiZqB0UlmS\nzL07Rg0sPWrqMNC+by/uo7djf4F329ZQh79jXtz0zzOq6avrJjz5PAoLp8xF\nGaloB7HeRaKiW5Yjkl3Jo6VZb1sw1hJ3HUNLUidCYdZ422uQ28jTHoSWXUt+\nFfzmkVom4Uf+2ZUDlNkGidNTgTfoyU7xx9Q0a87JYwnLZ727ti4CrzenbEiJ\nnk9C67E9Y3c581gVHYNsLRyBeY2d4KOXQZ0mOX8gOPh1UseJylmN+tatDgjE\nKYrSHh1qLWtHJZHEUlvwKwyy1Rh5szWdl5a6McaiMXDMWjTIFHoKUMM6S4gP\nw1HqbmtZTTbgNci864fIHVBQ4cn7Qy7bURX5sFl/hxtuoTEaNxj8LjjTxUZZ\nE1A20eEEaILl9HYm/kmPSquXpqA+kjSr8i00Wa/TvlIOIWQp8GyQRdEpu76W\nVy4c6MLkxXOf5/yOwqs+zQV31LEvMbsTu4B/gsf9hyA7tEWjyQhoiEdV7FQx\nG3WuPLZDWqqpEYv/k56laxewwxTKSO+MPmifXJeMcc6ap96l+hiR1ek8z0cu\n0qYP\r\n=SM32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ca556c545f0bd908ba57eb0e24e99d142cc05b1b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.41eb1684c.0","@material/tab":"8.0.0-canary.41eb1684c.0","@material/base":"8.0.0-canary.41eb1684c.0","@material/animation":"8.0.0-canary.41eb1684c.0","@material/feature-targeting":"8.0.0-canary.41eb1684c.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.41eb1684c.0_1595958688441_0.9577105037985474","host":"s3://npm-registry-packages"}},"8.0.0-canary.9e2f6c450.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.9e2f6c450.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.9e2f6c450.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":"8c6cfb94fbfdb57878b571cc5c44319a109af06b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.9e2f6c450.0.tgz","fileCount":52,"integrity":"sha512-fE/v2nKhEMIWTCEArTo3Dp9Y22cy1OgMBTi8n0b9SgFsd/j5F7aP0coWD6FZPma0H1ssUy67PsZKvabuf+DEmg==","signatures":[{"sig":"MEYCIQC+1gwu3rXPLyjmq51Ea9vZzmZoRthWY5Y4CwDS/qEYwAIhAOVyinbrld8IpK8Dvkj5ZO8hei6LPWRO2Ihxgf86/+GH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKlUCRA9TVsSAnZWagAARTkP/AwgdhJLUzMCYS3LIbik\navtMN+UKpN9ub3uV0WiTf3qn6GsfzWKfw5P2/IMH7X9UrbAhIiGWc35GGrjC\nHYzAHKm+N7wfOstgXWHEW+4hKVIAeYj4qCvSXkI4gv9XnlqZSYbbVGUcaQLL\nupF0ijNLlarItjb5qgGI+idjEuqeb2N1NDWVFhBW+CcYgqAoviprqzKJG84X\nbEX9n8qTGckbVKe5LVMiQbuYZzzThPG61CxXapRcVElw0sE5hBXDY0mUOc7r\nqclVX2rweNOQJyh9XdlFN7tepw81dKNw/isn8aOs38YxPyIWPw5yBuOpG6iO\niQXcHGEIPejbvoIPtdAiucc9HYBzV/IcqhfAZSAuTRcOdrqYFOfFjlwlWim7\nD+ioxLkvKIWobON3zdUIZxOpbhLvd27nnAkPQOPuu+eeqL2SgGj7gdBj14Fm\nubVogy7u5facF0VY2yNtkZ3VWX2h2ZEdsKn1edj6nDob56ggjff0VC0zl57G\nm32NGv9/ALUquFm5OTtp9/Y29dUIo+aOD3AXktwX8h7uvUC14WezlQheEk6f\n7aR0AOXpL/9azSmA4prp9Kw8b6EraEos5hRQfLFRMiaXAB5zYyG/qb/LkqR2\nZAvEnBLJ6PM4y4KSt9Znl1MUEKel1xKNyD0zyZOaN63mdOPnWheRm59hRnRR\nHjCe\r\n=x062\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"20a3870f861650ab884eeffe1d7657aa376a8ee0","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9e2f6c450.0","@material/tab":"8.0.0-canary.9e2f6c450.0","@material/base":"8.0.0-canary.9e2f6c450.0","@material/animation":"8.0.0-canary.9e2f6c450.0","@material/feature-targeting":"8.0.0-canary.9e2f6c450.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.9e2f6c450.0_1595976019464_0.17627930068057784","host":"s3://npm-registry-packages"}},"8.0.0-canary.e6950b55a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e6950b55a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e6950b55a.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":"f7cca38a1ba849cc67f1089d7cea371390264bc3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e6950b55a.0.tgz","fileCount":52,"integrity":"sha512-YTGL55ME5SnV+5DhYRUG2jZW6E0zAwqTzcK9L7jyhBgUpAaQK1/35BeavOMEHsPgpm0jQp4bzIANAzRRVQvhUQ==","signatures":[{"sig":"MEYCIQCnenc7rU7fJg78FSklElpo7FM8fUL/aQA3sd/JKhtY8AIhAPSIL2xWxu3ssdCUBpdy8DqIYFXu4SuSEt2I+mVjOrnl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIKx8CRA9TVsSAnZWagAAnkIP/3DL9MvaYL3XFLl5KIvA\nVZFPiQYbepWQFkxkfKsxCe/DjBVcfBHJ/IrRGXE0tv5tbGVV+yxZea9i6JFZ\nqVbPLcOGQ0/NpJls+BHWcGaH28EJNasnDfwuSWz3sVLYt4mFRkqQ15QGpUyX\nacgM8+aPT1Es6Qxti3UHLHfPVEnYaxvOz/acdTO/y+zBanAlVs+xjFtlNWD1\n4BW3eNH1sTW3ounwddfLUF5lVdQ9a8/0zRdfIzQQigFrzjsTHDBWfhsR1MQS\n/+02hGIH5I49XY0iFeqBi8s9c0o7MC0R613sW4cTRe1eeUOMEhw5HEMybbJV\niQdogbctOr6Pxm0+zDNgLlCnxaJ0kd0IKoFPrOS6oPHaHo9hfwusYUMbPmhG\nkE5xGwQrTUHiIhCeMY2czV/1ntwQyztfWUQGmOVjYky0D2y1n64I6SK3HTap\nGMt5ci0/zaAPQMvD8Us77nqsue6mOGHOSmGPKl6ccyFaRvPgfUtwbNIJ5i9F\nzkC6G3vtUavB0CXQ+DfcLpUy9D7wptKf1VCNu6IzHdCEt8ZJZIyumv4VV7QZ\nPOiwqrzrCiPIwoEJSBAl0dFfH+7+MV/rikx8Lhajn1FOuQhEiCQKQK9VAWqF\n3zCwKsBnqCJYBPYqebGXZnabKtckn8phbIl6U9rZO03XYMi47htwGHB3Y4J6\nZNRE\r\n=XUCZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"c71461d7d95f313de3fe5609fac67c2302432c36","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e6950b55a.0","@material/tab":"8.0.0-canary.e6950b55a.0","@material/base":"8.0.0-canary.e6950b55a.0","@material/animation":"8.0.0-canary.e6950b55a.0","@material/feature-targeting":"8.0.0-canary.e6950b55a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e6950b55a.0_1595976827729_0.8224664168587803","host":"s3://npm-registry-packages"}},"8.0.0-canary.5e51ee38e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5e51ee38e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.5e51ee38e.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":"f08ecf7d1bfbbb0516249b74f523fff07729cab6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5e51ee38e.0.tgz","fileCount":52,"integrity":"sha512-o5kMxF3M0oVwulyFbZ5DgZDnj3YsyGd4lyQc+wOPZyI07fF2whfW9B1zYYSsB2MZy6Yp7uFZPH5crIMjxfmmHQ==","signatures":[{"sig":"MEQCIGsyCRyWT8zv5WrfYokRL75lGw8Ms4zQQuIV7qCO7NZNAiAg291axAXHNERIeBAsdcTzKmu0uAeBILHCCEI5uQJdNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfILHtCRA9TVsSAnZWagAABf0P/jB+VHmJ8/to5A+QCUjk\n2P1FYgnMMAbMA8z0z8jsav8O0UJhneBPNqYTdabwdoBkG5RAb09P3VcFJ9RO\nqDN+IBv0ZU09Wxhb9N+xOa4AtX9sHFNidkblyumQsVUXzfV8U9+F5Ut/+C4j\nQBQVphVvt7uOsGqeS416QhFx1ZmEaTDRF+/uRb9WembOnTxjlZtsf2/XbXL3\nCNSl89YtJwHzvKmYfFNQTqX6qJ1x/AlXxR2w1orPrOM/+8QHAMrQjbAxeLLv\nJQ1nalU5Bq5yH4F9JocoU+y+rQTqILMY2E0XRJN6ip0ZAxxOmnOXE+9IDRYD\nkYy8p//B84i9Z8k1DfHdx/Pd5mzAchiHCR8auCk6hT4vgkMZxj0WE5gkkqu4\nllPrXiZ1tWUuHMnCPZtHZb1X6/8pHfK8xSybYizNTzRrKhWlBS73BP5jJhe4\nelgh1AkStV6Qp8vWz3BF9ijKUUUOXPvkCJ0kRio8Oz/glyZAPwPjEZoPHvUE\niy9tP8crWRrKx+iAGt7zrnZex70VAVd8Oj1epXhnxTsVv0lx4q8XWUANSIlb\nuN/wWYr5sChQ/O37A6TatnlOZjSV925nAXYCvISGMyhu5vVyhbflYc92Othj\ngaizVTFKhIys7CTSO6Kmv5RVltWKCFrHla5m2PWF3IhVMFVlCxUjmWHU0ZD8\n/JIf\r\n=V13x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"a7ac25d06cd849dbb8b1620235e913c46f5d7849","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5e51ee38e.0","@material/tab":"8.0.0-canary.5e51ee38e.0","@material/base":"8.0.0-canary.5e51ee38e.0","@material/animation":"8.0.0-canary.5e51ee38e.0","@material/feature-targeting":"8.0.0-canary.5e51ee38e.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.5e51ee38e.0_1595978221003_0.15423617382472132","host":"s3://npm-registry-packages"}},"8.0.0-canary.a3898ffcf.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a3898ffcf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.a3898ffcf.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":"1cb848fb61e81b1bf19c2e24e79fe95cb790d9cc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a3898ffcf.0.tgz","fileCount":52,"integrity":"sha512-OtCTOpJaDJkmfIfvumsbBqaASkvW1bWQmouUhIzf6NfaxsvCQQ8N1yrcey2UnWaKvaACqoibmbCB+y8rmpOPDw==","signatures":[{"sig":"MEQCIHjx+buVk/LRz5rOdGJqn1zMDBAgzCtQYAcSAn/kJVH9AiBk5WE5JxuvrBXStBNzcr6Mz0PeLknmCpP4B67lxJv3UQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMTFCRA9TVsSAnZWagAAjKQP/AoSYwsHD5YwwqPnPRLw\nN4SZDzgChcj2UFilBn/u/VwHuNrdyPfS5HYs7OpvZd/7jqQa1I7cM1POTfh3\nwx4ZF8CEiTkky+aUCGqY4SJlRs8jnaNBoLZQxn4vxh7uzpG2cuy6ckND68Rt\n71PtqipLDSa2Xzt6u//b8fkqiT6Ib1mjCsVtzW4Jxia2+euRBb8beMEwycq3\nu3wasVgnnoNaRPP1shmVJ6XfHMDjPi1SychLbb1ChLkArHOdAiTuuqQYQrtw\nwkMUDMjoq9KiyiHeY8ecMgFfMOwmtGWH3SebXpJ3y5IUWykb4zWsEtMd+CYy\n6uWXv0eo/Gf9+gym3K9qeRH1bxV8flMZW+hhwIolSJ4eIrRrHDPXabzvcTg4\nMR1KiGa/nGbta/girJhGsh0+ibZZoa4Zwosqa3ueCZWXJ/pSrFqEChN/Kn0w\n9pwjrE3e+BTXExA/TeiDKKcTuFYILN6JcfksfOmmAqwpbecTk9K3ROrQ6vTq\n74cLQl2dRps7GEMPePGANyIxliq41pOxB7lPepVVbZTCvG6UZqDalyEwbUZc\n+kBsj1zzvGCjgWx+WCfpPtJhZd45WubcOole6bizhiZb1jgZGMoIRr/tZSa0\nYVhzVnfQRQaAWNcFOpQtzAjVB75nIJHdRIx84G4DsCAl04ugg3DrpOaeuCN+\n3hBZ\r\n=ogxZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4382580dcbfc3da31d5107a92231aa87122f3f30","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a3898ffcf.0","@material/tab":"8.0.0-canary.a3898ffcf.0","@material/base":"8.0.0-canary.a3898ffcf.0","@material/animation":"8.0.0-canary.a3898ffcf.0","@material/feature-targeting":"8.0.0-canary.a3898ffcf.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.a3898ffcf.0_1595983045406_0.9358117896592171","host":"s3://npm-registry-packages"}},"8.0.0-canary.bc5cc6c96.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.bc5cc6c96.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.bc5cc6c96.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":"fb9646cd634ab6daf571d70e51d39db968671529","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.bc5cc6c96.0.tgz","fileCount":52,"integrity":"sha512-hJa/8a3aRls4o3T0WIhw7lHOnanMUQQr0W8ogxiFG/7reUPtHQR26uO0DZeAtrbbQzI0jHBRzb6et2Y+L94VYg==","signatures":[{"sig":"MEQCIC20jcUv+VxxLaGBpGperViR3wvnfeld8V44kQdgo6wNAiAK/KXvCarXQbjAyuqN5IwlcksT7/MaC4dPzhpgsa0X3w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIMfJCRA9TVsSAnZWagAAyYwP/RVSBUSMh/7mWxuFhmGY\nZFgMMwIPiqS5NeHezgE9T/10vPd5dkGUj6WYTBgf3RKnwsWrM9jY+p1rrfVK\ni/EY27WaGo/dqSCa/0+drc/jNr/LV0pFDliOaWt8U9rzqSuGyYrfUSNpgt2T\nCURiP7c6oJrBYDwwc8NmzGkad5wTVfUodnVX40BqfObfpqMO/yS6dHn7Zvou\nU46oZ88PDOVOwiNEJ3+2PIxDuxAPeZjGogV8PBBgzlFFKPv3Q8WlTVuWfTMA\na1S3/tARwuv9O8gj0nWe3ffoQJk9Sxd3ErxLfyyCL4NKEwozL5MY0VEi+Doq\n4H3ojnt4ETsj1KSQEsywzvJyKFWhRFnlRlEfU4i6enUvg6dUcGvRjG8UhwRA\nC/hGAO0GtyS8d/qPLv9+QIcjvME5SprVcYIfLEo1e8NxuX0eqt+2CFdHgQeF\nppE7sQJMAbc2jtKaW+mLje3ydY/j7zXv72ICR61Z3SYP2chhHjhsDNrH+Kuj\nS1podXCHZueacG7mSNSF28Ie2rOuRCWNFbrz8UJExWg95h4qoaXJINpiOSu1\n1mXHUKZnrNFvCgCbfPR/uW6LXIIEaeMiizW8+xMMtTAIfCC640kE+NYu2Y+q\nRKJsScrmp3ZLnnIDfVMwpmKQCwEDysX73DFFSUOnsx/9kR1kAaQR0CV2KODz\n8R60\r\n=uVUD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ef5b32f85df29f3c19f5f6960f0f2e58025012da","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bc5cc6c96.0","@material/tab":"8.0.0-canary.bc5cc6c96.0","@material/base":"8.0.0-canary.bc5cc6c96.0","@material/animation":"8.0.0-canary.bc5cc6c96.0","@material/feature-targeting":"8.0.0-canary.bc5cc6c96.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.bc5cc6c96.0_1595983816864_0.4088856635633331","host":"s3://npm-registry-packages"}},"8.0.0-canary.9bdeaf928.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.9bdeaf928.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.9bdeaf928.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":"bf9c2f5cf1f47256e8555475533b94051b443f9e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.9bdeaf928.0.tgz","fileCount":52,"integrity":"sha512-61tAac/Y7HiYPIcogKAlmpnozHCRpdWL/MogmbFklw8wS9B0Ifp4gUZYwf60G49sW4QoF1lcHKjkfHpBBJSWBQ==","signatures":[{"sig":"MEYCIQClqkaPxVtLfLU84+0hBnCi9LsooHpLfvYu87ZRbNVdfgIhAJba1U2JhwT2aNL028H0bMIQgNYdmFMtoQxnJxTKZKm4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321642,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIM8uCRA9TVsSAnZWagAAcHsQAJwauPcEgOe9cNt4SBoY\nc1S1T66tzOmD+OV+2RBYniAizF/6tCc+hOnRUsEfXph4i02nuTFAjHJa+g8B\nbMsDWOp7yoSgYClwSbSEr7WdkZPmkZ1i0q8tzas7eHkFgEU0cO3lB2cVLYR7\nT5L4QiNilhrFBlK9BHDrRIsasX1lVkPhmNXKfsqDP1u2WzZsnEA8kZ3laiLz\nqaxRn1UBqhTcpqaAKm5hT68Vp4jE6DITGyFQSK1NX2Ozd0JSi5Cq7qLQNXro\nhn8HoAarataW8Q9bGQJQSG5o6Cs/k5buxTS85NR/+7i1VVYjBa+a7T8t9dBo\nZ+DLlstuubE6NueY8D6FlyGPE1m7//Ii1B4JL6wq1m/FuXB3G4Zm7YyPDWEh\nnbejUWO8WyO539w1MVyoQSibtc6beUdweYDaacJScDZCiVI2ZFUj5RrfIL+u\nDA3fBmpU1G0nRGKPBerj3ib6Wpyd1XpuZNzsvQW3fFnFP2ACsGT3JSiDvCQE\nUU60DKcosjnYQ1bjbcHE4vyNIfcjNUoCucXBfYyHyoFm8W/dTqHolQNWm8yA\niazzvo6WZ+Cqi/j34TawCRAzQKkLPf1YVMRyaZhungBjaGuzk9sFFG5uzAS9\nfP1KBeM15hgUTrSW8JbamWlvw69i7YLSoIkQcFwIM23h47HdvLX5E7dxGC52\nHPyA\r\n=9RhO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"0fd3de7a6a462365d56e724dcf32c2c1890f553c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9bdeaf928.0","@material/tab":"8.0.0-canary.9bdeaf928.0","@material/base":"8.0.0-canary.9bdeaf928.0","@material/animation":"8.0.0-canary.9bdeaf928.0","@material/feature-targeting":"8.0.0-canary.9bdeaf928.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.9bdeaf928.0_1595985710074_0.0922232635330551","host":"s3://npm-registry-packages"}},"8.0.0-canary.fde2c1f9d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fde2c1f9d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.fde2c1f9d.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":"7f912ad8179e5542f775440fe8a805c6b7e6d7b0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fde2c1f9d.0.tgz","fileCount":52,"integrity":"sha512-Q+VFG2VFu9JQttz1YlAJCI/ejZOI3HJU4NnUaXU/z/LXxo/xY5qdKX2Dauya22Ab9vZK/oqY8vG+cgQ1tXwEVQ==","signatures":[{"sig":"MEYCIQCKyCgGrX5MoWp18cIh93S5MWoxVfQPj0McEjUan9jEuwIhAPlmOy/MCvTDqG+5pwgQPd7Tmi2quUnvCiA5+wrvDYNp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINKECRA9TVsSAnZWagAAgVUP/2F84pP5Rq+PHlk5+Ad/\nPG1A3Yv52QPbGNdGwFgLoyn9pdk3hw9G2pe8qHiXS2YhYAdAfE8Dc8+SYAL4\nJh5es+OHE6nnrhO6u+WnO4TinhPDfWGz7VQFYGjuAx1cm1U90ho2eCIMDItG\nJsIVpcxLr10yLgkJ1OmZoU8rUb8uEdvtl6ziKbJ5xPqp2+RFwbTNVDl56m2m\nW6AAdQekKQypqw2BubYyU84QVcGZSoBggBEn2G1C1ayw+QtyFzGI/gBAoM4j\n1pGkxvEHzXXrpZ6prYW7S/78D0W7otfLvZVpwHMCMXMH+f+a50jF1ll9JUNH\n5dK+NkShAe1ZWOGbxjYedHqrL7G4mqm9vgIFUDrqNJxhEUN4M/lmG6FPxfvI\nlJmDr46R8muzMlUFonBsWhrbgFToPZIs65CHDte6vZb+cCTfYuv0mvcI2XLW\nJLAtk+ie2AdEF7kuzTXTieRCOUSt2NmH9oLfBA9zIa4bFp1lQ2QBshpPzUWY\n4jENM3T+E+Q0WzG2brqGqqUDRLeBN6tEoAMd+Uc8ddTKcVcrfvWa5naqH/VW\n9v6B26YEq0qY3/1u+80QSfH2P+AMC7U1aCODjx2ieg2Xd0+Zt584A2s4grII\nqRJfNcV2ftT1AnfLPYzVso/ovm6rmftZVIgHcX9HgeF9Ii2Ld8DWrICwlssF\ni0Fc\r\n=dQxu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f2de51610533bd781edd8339c8555a3c03546e3a","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fde2c1f9d.0","@material/tab":"8.0.0-canary.fde2c1f9d.0","@material/base":"8.0.0-canary.fde2c1f9d.0","@material/animation":"8.0.0-canary.fde2c1f9d.0","@material/feature-targeting":"8.0.0-canary.fde2c1f9d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.fde2c1f9d.0_1595986564004_0.1524899085363296","host":"s3://npm-registry-packages"}},"8.0.0-canary.6b3876d5d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.6b3876d5d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.6b3876d5d.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":"1579ca8027330699f80c6338b15a9d94858d0837","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.6b3876d5d.0.tgz","fileCount":52,"integrity":"sha512-vUJflWOvBV0iO4ezbv0NqhqLF9yBzqudESaEofD3LUJXESFT+uXgfKewHzilo274JFg1AKz/9hNrGyoO8WK28g==","signatures":[{"sig":"MEYCIQDkXIYziEPgW5W1oaaU5i9QQms7vHElbVym7Q8rqUouwQIhAMjK2LLq8jI85/wrhoCohHJlOagzE955vAQsxMXkJ6Bk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfINNpCRA9TVsSAnZWagAAa2YP/2V8ndwLCclr3/wW6ySv\nioC8wrTbb+PXTTused5pshObGSRLCoqB7dz28cbbtogfGNzXjwuUXepA0wi4\nV4QEdEVZ22aE8OWAICT0AnwDvWaCbnnMvBZDhWpHNhgQo30F1xckO3z2VuyP\nT4QmGFd2EQ6Hm/sorovEruJLqQJiaNvLQasdFK1ng+0sE+mVUgvhaP9FgFZR\nCi6nPzXBvhv1pRlUvNMwpzbITgXrlcsdvKVoIgc+XuAmKd8Js6jRzudJb1JU\nsLu1j5+yAlKWOQQchqS2BjMDsaJ670Z7JfadyhNLQbvweRPeGztdUjF9fGt/\niBTK4aIsS7ZLRy2oLuc0YG21gza+fQ7ZosY3DxQFNnnq1mAE2n1gVyt+6tH+\nvRGCuLCNW3ufQQvz+K6lBdzEe4GjH1uV7/RfW5N+vs3bfsptK6iylBmPfNGX\nVifig3/L6eMEXq9qNOaikr8H/tcZzf/GwZfsz2q1ByvEX8SJidteel+BnDLw\n8XehSsnkgYlV82HtWKLUMZy2fcuyMICqUyRbPnirCYqODT359hA6n3v8PLnW\nGZLRW6oEGoSDfRvApWcuy2NoF6qvps1cGYPNTixMscvrNWIuHM3VcoWpOeI0\nJG2Q+NvcglbdV3iTUbsB6xitP66lSFxs2JNUehREZbnTyMnaxUzo9BNldEF+\nc5V+\r\n=XSM8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3559342f661baeb39f2e70f1172040aba07dbc1d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6b3876d5d.0","@material/tab":"8.0.0-canary.6b3876d5d.0","@material/base":"8.0.0-canary.6b3876d5d.0","@material/animation":"8.0.0-canary.6b3876d5d.0","@material/feature-targeting":"8.0.0-canary.6b3876d5d.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.6b3876d5d.0_1595986793063_0.7669239584872405","host":"s3://npm-registry-packages"}},"8.0.0-canary.30ce17873.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.30ce17873.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.30ce17873.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":"56438261581eb3ae985d72297646cbca65556259","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.30ce17873.0.tgz","fileCount":52,"integrity":"sha512-+/Tod9O3nmo/sSoNqI7pmlbTPrn/211InVXUbLGkpJAclsg+ZGR/rgBTzbVBx38gUanukSWShXrwgRcT+UeUww==","signatures":[{"sig":"MEQCIG4Z7+BgJlMzjpdmik1WGXf3RmHGZ7Vf6pGJ4erZsrw8AiBGcG0JPZeZ3P/w4ONOPxKUFd1MDEcdHmaWavrk/Dri9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIa7WCRA9TVsSAnZWagAAPmkP/0XgFRJfB5d9FtYpMJnx\nop3xuTTQWOeuQMmLDHkJtTl2C5MCjTMGmTK+ZLQ4PiznyzE5z4Yat5IDdeDC\n9jk5KkVlGSV0ekI+W50Bi2+Jx+FyQIyVQv3EnxhUeq0EhZdwazkoq2zmNbam\nIFHMp4j5RjUhJit3bwgYi8mQ58jwhFN2C0PlYhzXbC09FcS/dct/m90pf5QR\nk4959Xr3OOOwkA3MSjxsGSf8m1Hpca/6SD7kxKMgielzZnSxbnsbxjb6k39g\nmIs3cU0IvCr0Z7kCY7GGZ1R4znuwJOKt5HyVRHgC0BzfIZgr3HJPByB/4M++\n2WxNvf8gjtjoSOc3dFv0cj5QdCZDBPBiAD1EHDG10Zlyi0sWtHXe9sSsfAhY\np2DOZXUTz7O9iO6nbv2hI3XLEQXZ3JiGa5DxLHyrCVHEEVQXGPZZE5G4CB7J\np2k4h0C0xjISXupiOkXYXMFWTNUQZOnrxbskRq0Cw+uht/v2eA+ElqqBfMgH\nmTcyLO+EMvq7qs+iRibgmad+bMTCpQTVyvOXp8hcj7djKZU8bHKzKuQ0VaXl\nakEJJRiXXivkeAQ1rKQayFUir6IJC/iVHTTSdbWgYwz+yQ7JYh9Mw1GWtQQD\nok0zvAcx0eWViUjdUQNFNysoLuT5/dLcv6KJ+wuvThFgRT3xbWyeOL5SsR1f\n+fXn\r\n=rh4s\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"88fa0309b6185f09fffdbd61d0c3e16f53c2530d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.30ce17873.0","@material/tab":"8.0.0-canary.30ce17873.0","@material/base":"8.0.0-canary.30ce17873.0","@material/animation":"8.0.0-canary.30ce17873.0","@material/feature-targeting":"8.0.0-canary.30ce17873.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.30ce17873.0_1596042966095_0.33970091564946303","host":"s3://npm-registry-packages"}},"8.0.0-canary.f6bb43bf0.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f6bb43bf0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.f6bb43bf0.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":"651e0bfeb48b3dbeb45f27d25ca87088734c06a3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f6bb43bf0.0.tgz","fileCount":52,"integrity":"sha512-7JLkN+X0HB3W6gXNLbhryngZvWm/iBKZry1eESuH1PmhzqCN5YPmUvYj4sR/pDwsSWDwBvsFnmwmOYCTMVupfg==","signatures":[{"sig":"MEYCIQD4cea+rU6gLf0E/223T79KZzkPLWyDRoIYifyYczmynAIhAJWdFYylJ5xxV4NOOgnNHnAgMXKPtrkvDMs9tdgOwbIa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIb9WCRA9TVsSAnZWagAAhZcQAJgd52+xQSa7ErUKyH49\nDDZYFPRmPycEix1V1HlHhrrVgNnR1BxcVXUpQYbD4QKPV0JkimI3zpIkZh25\nCZ2xTSAoEVstmOWMTBuD78gHGg6QiXtdIbMGdgsEFuAzRcR9xNpujDhczfUr\n5QBwKFZ+yYPO/XHoIIDSpwuHnivNepkHLJB+3WTF16wVQAGak7IDgF8gZsN+\nSyi34TuvgDfUlyOTTbx3F7N+xOmrI2VZ9r9q6xLkdl874LLhv4lb5ORbRXT0\nPYKZ/HV5lMpgV206sz+GTqmE54qvy9ER+BWoL76P6+0yoF4Z27ujDIezVnb8\nCLqiOX/is1empQ204alQR1J8+kAc2BUfnhGKC8Qp3vLqM+FH0PnTi0FZ6i94\nPqEBTr4dE4HJNAwtEc/USOADRW4u01CiO975GjWPduv4Gz/GTxy204dAh3u0\nY94XfE+uj7I03ln3sUk+bzO35pvLZwe61z3zcq0aaNcUgfdxYm6Mf/kIIT0W\nap+hpxLYrT/IMWm7NJ4H3Cp2nClgxOMgRojGLteOPqdre0uHXiDkJQoJQpKn\n1MqVsuXnHUaeXXBvtT38AtUqogCqgltwhocB8vQD3hdHJkNRHWOaz69OX1m8\nXAIdA7RRU1AhMthwupEySO4PZJOJYGIzVyg7I+e2M02aJxhgvsGk+6mD96L/\nnSve\r\n=pVMp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d511f86ad9ca4460730b732c04ab497fd558d515","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f6bb43bf0.0","@material/tab":"8.0.0-canary.f6bb43bf0.0","@material/base":"8.0.0-canary.f6bb43bf0.0","@material/animation":"8.0.0-canary.f6bb43bf0.0","@material/feature-targeting":"8.0.0-canary.f6bb43bf0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.f6bb43bf0.0_1596047189608_0.0036268527716525334","host":"s3://npm-registry-packages"}},"8.0.0-canary.6af75f6ab.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.6af75f6ab.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.6af75f6ab.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":"739e839e9151786c052228267c8630db4246edd5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.6af75f6ab.0.tgz","fileCount":52,"integrity":"sha512-md1XBDzUJ/3mmqSY+F/w7UjF5iYy2IVZbkyFkxqPj3Lg4gBWRE2eHknhHPupxDJzwrZkbo3snEDaPlkfnWjz8g==","signatures":[{"sig":"MEUCIFwIJ6on/bgx5e6cjrnbmLnXU8/ORnNhmomoiHTnu4S3AiEAtO735xezEZH+dz63HVgZzOnscVjnelIxhWG4MsM2dkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIg4VCRA9TVsSAnZWagAAQjAQAJwffYdi195AO7pQ7Qru\nWBtLxFt0TQXQUmY5a7IQCPzRFPL0ACdVlbd7Lf7tlFoRpJO2VQaVv+M+d0v4\npw5dgiUlRXSH6O38wUvNrFb+3RzfhDozrSr0BUIaAW7epeSctGJIICqHEJ8d\nxSnNL6HXubaMvip0xzxpr2fh+8+/O3cVmu+jvXm2sce1kusxiHUqpT7fd8ui\nrgFeGt6TEXh8KXJP3dKR1WEbvMWs8ZjEdyeuqpWCjK3jTQetbiBWiN4czWNC\n04p1+85u3F49lKvIvipq9JMYzCPnW/C1hhcSNRkIHS1xIplKO0MFcSAvv+lD\nWQV+ASOZSn4W7uGmpq1n3JcFxqsgyu8g5oMBspISe15o0z/CBgQ5yLvJjDzi\n3/OSja1xdFZMf5ltJcKt9jyqjxL4y6eLTEXQGYNVLIZWUBcXTFcaIx+OtYIO\nK8GVpzfdL6rqvKOaK7ggj4fa26BTY3Vtj8Wa9fzApijIRcHWyuK2v1fKs84Z\nB2krUWXxwTWlL/MJiPaGSEgUCjfEeis6qpbv4qtdOxNQ7bPoZ1rFaGQ4MHw4\nLEVDD345dNLPi5U8Xx55BLIQQmyp/G3O1pWJSiBSKKOE1XrGCS9Dm25Gf3XO\n37geWq+2QBMI1Zy6/LmQBn8bzbV6XbrXeSMrvwQFLYuR7+roHRBajBO2MI5v\nKI/F\r\n=u26l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"44ee60f895715b8f7c0a7da67637babfd33452cf","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6af75f6ab.0","@material/tab":"8.0.0-canary.6af75f6ab.0","@material/base":"8.0.0-canary.6af75f6ab.0","@material/animation":"8.0.0-canary.6af75f6ab.0","@material/feature-targeting":"8.0.0-canary.6af75f6ab.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.6af75f6ab.0_1596067349379_0.04291971249976845","host":"s3://npm-registry-packages"}},"8.0.0-canary.42d7a65aa.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.42d7a65aa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.42d7a65aa.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":"19a0a603d7022677a65989147c0648b89072e7c8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.42d7a65aa.0.tgz","fileCount":52,"integrity":"sha512-vkVCmGqfBSMl4xNS/REyibp+Y3j3F+lIjaDgfSnWI23UJ9uGKKyIYvcksS20HefkINMh80wzFvdinLQrFCSSRw==","signatures":[{"sig":"MEQCIBt/FjqEQ5bZtm9k4oqv18VNIZYF7VMw3cE7cFeDsDRtAiBfjDnRNDidYdY/M6aJE/OubtnIK+SwTJpPXcMWQznbDw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhA6CRA9TVsSAnZWagAAfQIP/0yj/xHSzu5dEk269fJz\nWte4dmcN8+7w1urpeoI1ZL3RJbAFcey6+7XZUlwk/TkWOq09O6tUakexj/8h\nWtx4ON7FjxBZx6YIiJKr883U6bSq9Ed3jvtA5aBpVbBT8s7NedTfTyU0g9NT\nZ7nuixMLOGvmX1rB8XEopzczH0bSZO6h7aVFuBBfZdgfkA4IQQNbtstr6LwT\nLFkZQg5H/7aG6ql9SOAV66fwEwfXa/LRWnNI8yGRz+3cEpNu+/780TvnYTYh\nyLQfM8tzpw5XTWKp9erzEe5YSsnbPNoPmRsTe3Vz7CmUOBldaJoXj1Rk7O2G\nML+qoWTohXm9zzh/ParXkWrym27tCS/+T6hfRhlwW2JHNzKz9F6FdnyEXX2y\n0CoFlRi2mA3umd61fSGXaqR/mbG/72sC4uVMG8sm0+i1DHV+SeeN4umyF8Ba\nyFiMt/DatCDzlYQCcRGKltl6UYeNVL1Y9Ijq3ASRNbDzKFt0NODLhycg2sxE\nzA51FQvLMLzT7vEHWW255fWAcarayDEJdF+nADL7N+8+9RdwGr2G7IbKtH2m\niIvqxsHyHTDPA2iaAW8OROE5hIfbx9/cU8Iy67Kfpma6DvKitm8nkdZjsIvx\neTRm2as9VESTqm2NWPr22l+HZnvcaOUnDlHEvnrLQ9OyI4GN4Gn6w8QO/Ags\nqnFx\r\n=hWje\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"b6645573c0460e7bc8187d1a21ef306b674e1017","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.42d7a65aa.0","@material/tab":"8.0.0-canary.42d7a65aa.0","@material/base":"8.0.0-canary.42d7a65aa.0","@material/animation":"8.0.0-canary.42d7a65aa.0","@material/feature-targeting":"8.0.0-canary.42d7a65aa.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.42d7a65aa.0_1596067897652_0.2677439475499508","host":"s3://npm-registry-packages"}},"8.0.0-canary.85abdabb7.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.85abdabb7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.85abdabb7.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":"06c26e1aeca62342b661b2c5f2a18a8966f05222","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.85abdabb7.0.tgz","fileCount":52,"integrity":"sha512-ZpkA1LE+WkwIMuV/FL0Th093oTyyJ6uzZ4Xrs30WJFHwfYTzOIhzcc2gqPW9TBXs9YLSO1gANgRhJYqqROFheA==","signatures":[{"sig":"MEYCIQD5o7jTmA+52Cc9hIrbVEAbbz35IG70gXNFIa2RYdeABQIhAKCAvHA1zEmV5fdM/g3ktKF+wa72LYsQWyLeYm5VSXEX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIhFTCRA9TVsSAnZWagAAuvkP/iqRyy3EzWFCTpPuxpcX\n+QQse6c8Kl3WZdgH4r2EbmQ6dU0/XIJKjZF0DsPnErhZ8HyWTGp7pg5hlTFN\nmZizbrPvGuntsp42M3yShw5idWZ/2BB3jTY0fOE9vCXcUJeWa9onSTCzOsFN\ncdsXbfW4/rwDaD5rN3uA569A66rH+1Y6JYOOtgSOXxZ1IdqXO8ZqrkHk1i0o\njjuSQDZ0yjFJDOgT6XH9wwKdfuaBhGIJ6JBI9B5L01XxvNTbhX1Zo2zF5/Vd\nep85etAh0UWQ2NjEFy32TEOtFwtY6Fscnu35pCoq7c2etU1Q2DZ6UNp3c+M2\nibx1kNwLL2pQjgH1wSPX0jm5C7IY9Er782iCTYGUzpnTCTA964FEyWtOgrkF\ndEf39CmCUh5yXZFtYKsEQX9FxhnDTC8vUaM3HiHcDHgGyTN30R1MAG1BxfeD\nJg/9vcgI+zA1CrjDbx9vyv2dlzJoxlEH8ganVJXZdLsFuhgt1dwoUc5gaR+I\nt2mLkJ6CXPPYCDuyMrPouiBOtgE12UYph2bi4LteGoAJkeFGzpIWMZvvCGwT\nltIq2yb2pDLH2fF2s7B7aiy86KiR9BTMlPdtyt6kiwz3I1znxgJeDlHYusZ3\n1cU6ElbeHtnTn/UPw7h0cs0Bf8PJCOiXuJUWQCKHfWA0AILoroiaNlQNfNMi\noLXz\r\n=+Wux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"4686052ff6039efa085c0d360393374ff4b2143c","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85abdabb7.0","@material/tab":"8.0.0-canary.85abdabb7.0","@material/base":"8.0.0-canary.85abdabb7.0","@material/animation":"8.0.0-canary.85abdabb7.0","@material/feature-targeting":"8.0.0-canary.85abdabb7.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.85abdabb7.0_1596068179333_0.6164938240433073","host":"s3://npm-registry-packages"}},"8.0.0-canary.49fb20ca3.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.49fb20ca3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.49fb20ca3.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":"b3d3d53c9cbd72cc6175edd0281304a633c7769e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.49fb20ca3.0.tgz","fileCount":52,"integrity":"sha512-UrpbT8rO5JDqSehDpBg6J9emRjEL9yCvX6+zrLKtXWJEfL8PeWy3QY8pfAj96DsC7erqLp9yYjxkY6c7sEEp4g==","signatures":[{"sig":"MEUCIQC0d2lgxswHmRE30JTgweXGLSx7owlYlyM1Lh6VNRU49gIgQ8Hq+KOFywc4EyrF0BfciDrkdwyoURAQqndS911pXic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIiJHCRA9TVsSAnZWagAADX0P+wTmPHQb0W8bzyAnZ8ab\nD6ITHU0fDeHTIyI79HxhVwcMdsOvvEo1DbM2zFQn3kNjsIdCClOzgyZjv4XJ\n027bhcAo/u4a7+dhEXY0QL1E529z3LMyZrZZ6UvoqPulD1deIB2WPFn96sIS\npKEIEZfpvVczIE2aDPVDJ+l6icUI5gH3qetZnrE48U239bYPz+eiEiovJscQ\nDle/h9QOuB+ILdoDxXjgvCtnnZdm7ZDBcKNuwEYHJbvCWxOSdk8LtjuUExL5\n9NggrMcXajh5pdC6pzybW7vGWXy8dUnZGSVm74lhbOnA/UJdbHHnmm+phfkb\nM2Fm2N050OUWUgplIgqU60YutcGZ5UsgmQwkpFaAGUtuyLB6dNnUjvEvnwnU\nq3ayQZJvQoeXOZLgQABn2srmv+SJGXZGQMso77nF3j/Cir8cjByWB73A5t1Y\nFFz1kQ7bhcRXaMr53fHM0qpGJpjfSa8trYCN2ZKlX/mpyxbcwXJTnTQGb7AM\n/mr1q8dzeaEccnjQpZEjR8Av1f0drQN+ZrqgGj2mETebPXWpyi4ClGUyMcHY\nZDETHqud9OI0o4i5ygvGCGzjaXN24JB6Firri+4Lg+kCzYfi7pG76HF20Phr\nFNInv0I5hlr6DbLOHkb7iyW86bGwcjcrEMH50RAiKVwxaqdz28EPpJUwgzxQ\nzyiu\r\n=tWxV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"9c66ae7fdf6570d9cf334102b5004c5a04b628fa","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.21.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.21.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.49fb20ca3.0","@material/tab":"8.0.0-canary.49fb20ca3.0","@material/base":"8.0.0-canary.49fb20ca3.0","@material/animation":"8.0.0-canary.49fb20ca3.0","@material/feature-targeting":"8.0.0-canary.49fb20ca3.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.49fb20ca3.0_1596072519467_0.9664483915802449","host":"s3://npm-registry-packages"}},"8.0.0-canary.962d4abbb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.962d4abbb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.962d4abbb.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":"4e4cd5752283bb718cf57a27db7b69f87ca628bc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.962d4abbb.0.tgz","fileCount":52,"integrity":"sha512-srDXRoR7bTFQAkCZ6bx5rSdX6ValAvLzgY0zbL6YPul0bc1ieuaqjaCSFcS3IqIROetpO4Sl5U8JekfW78FS3g==","signatures":[{"sig":"MEYCIQCCOy8IRw2D7z5DYlJ1MTWN+nw3jHkoXXvJuQ9CiywBSgIhAMKRpSA5XEQ0Iv6iqr/HMcGmDnJ4/j9ELRf4OecsFE/1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIvEkCRA9TVsSAnZWagAAVXUP/1knOSlx9EXStuOAl0Yl\nZ9BdBqNuXuJPXpkAK4n40y4ZstHSeDOh+gVwceh85uv6Dff/24eHiEIzhVNS\nH6HujnO7FzSAaSIiKfdqxaFR9ZVoskjELmZxwcnMjxs4ZN4L6QuiPSOOj/D6\nzjLdD70HsDLFVQvwz5Iq7Qa1zycukskPSg6lU24ovbCBIRpUZvNr7CN6YABr\nX7m5GEDTY/mzDXPkEADBkl6amNr/iQeJuausnxin39EzGXrSdR3kXaYhtc98\nP7DyRPJA4h++mNZZRbpvwUOjIk50dL2oscyh2jVzKZ+8cqU8RucYH/r4bGli\nFAvaGjM0qvIcdn7GZQbsua9kkVFLPwTUQpR5thy/HKI1dmh8wXEfRTKmAxS4\nS8tOwtLpZ4v/p2RkhKvhYfJAE/g4UkufdgfKcfPktyfiM2zU0ANfcgoGI0O2\nlamGubFqfN9iGgbU+GeH4BQ4VPGu07b7bycrSUyNygwRd7vaiExb6Mv7TY+k\nlTSg9NfCdrngEw4KiBdQlLSHTpJQadUap6G4z2BUqWGcsPn0w9Zz7wKfrrJB\n6uUZfgD/oiPv4h7794j8jy8WSfCSKcU440474kJwk33uEEP9EdqjBiy+07Za\nQK5QLNMMhnwKQkmALdK5dXrzrhTVAt4mrBwLzv15OeI4SFNHoYHgY20Ex0j8\nY+cH\r\n=BJoS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"d373d2867180ff5f61fc4d7afb88a8825cb5cc9b","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.962d4abbb.0","@material/tab":"8.0.0-canary.962d4abbb.0","@material/base":"8.0.0-canary.962d4abbb.0","@material/animation":"8.0.0-canary.962d4abbb.0","@material/feature-targeting":"8.0.0-canary.962d4abbb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.962d4abbb.0_1596125475665_0.34644806773769776","host":"s3://npm-registry-packages"}},"8.0.0-canary.2fcee40cb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2fcee40cb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.2fcee40cb.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":"7f1e7c47e87d5d8a674f4764306bf1c93899b046","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2fcee40cb.0.tgz","fileCount":52,"integrity":"sha512-d+lYn44BY3hmLFeeJFSUokpb+7qBjnSRi+1F9Dm+CKS/4r9U2OhKDW0xGkg2ZgcUznDtYsem0wGIQICrId+few==","signatures":[{"sig":"MEYCIQCGQWSNpBlhR4nuxmjX+Z4e7CGLqOvj8tpUJZJElzCa/gIhAO9TnU8K7GlpOJmSCmX4xMxqZL/bH6eo6KcqpgkLe9+q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwHUCRA9TVsSAnZWagAA/mEP/A5PMICs2SJPHXm4TJAV\nbDJ6/tRQUDmnn9BJDgVcRNTIR8hkAPeXJzmhsFmBzEDG4vcBMCSOUVcAuJCF\npnXxBwb1eLCKFgP9S547do708qpro+pCJabK5slEB5TsvM1fZikRXs9aC/9/\nY0SLl5FeZJNe5sZXRgwj85928+XOyRX2AP5KFl2tVjnWw+fm0FfTa49XzgfL\nv/0sPE8jQ6jhojVEOc0eu0XQzqiXYsC4X3WTqqij6duwpMFtws3Z9IpPaV6F\n63o64MQCl+ZPN0tWm2bo95JwrtpeAOmkUQCrprBAh3sVMIrMBJSFQmg6UDp6\ne485qkq3wCNP9ClQKw1l71pfYnyp9T8rupC8vR+dh4be9s19YDvSQXG7olyH\nh//3ZbylosgE994BIc2jRTvGUcP6yjqO4eH6/2Th1yvKJB6cj2chY43iBlDM\nP9CsgzEQ+8KRGJgiLXRiOxLLpMPCPgmDi1pBXrMRv5nJBmssQ/woUtyjAi4V\nMhe7kN07zk4Ej1s64uV2hTQ/UxHyt/LUNNLB16RXxj78YXgI7Z7In7xCbQug\ntW7vVzLwbeeF3XrIP5wNe+7NzWoeC/b7iO5fnUSNAahq7OB+AHUFWGIit51k\nb/Hnnp5fSySG1mzR+V9jKkM1IRRA29/yBHczcotI8aeCLRtcrB+66Mz3Fgwh\nI+OR\r\n=+kQU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"f769a8a60e9cefb9e0e6306a96914e8e4b4c0c90","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2fcee40cb.0","@material/tab":"8.0.0-canary.2fcee40cb.0","@material/base":"8.0.0-canary.2fcee40cb.0","@material/animation":"8.0.0-canary.2fcee40cb.0","@material/feature-targeting":"8.0.0-canary.2fcee40cb.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.2fcee40cb.0_1596129747754_0.052468773274086056","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd5987f5a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.bd5987f5a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.bd5987f5a.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":"00f10e288a73e709e1fdcabbc1e4fbe990e560e8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.bd5987f5a.0.tgz","fileCount":52,"integrity":"sha512-UqsDCTkBdN5C+sySO0o9ZWeA28S0FzxmxJj9Rs3eXlXbESWmf0R6xqXX2O8YFcGkE53frfSN+ww7cJrDJax8UA==","signatures":[{"sig":"MEQCIFJrenLUs6fduiUMqqD1NxEwGN81q+a5mr5gH/Rn8J4uAiBJoumwytm86KJYhJju+MUNJE+tWAzdaMK0nMqZhufyXw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwejCRA9TVsSAnZWagAAdtoP/2W3EgFxEdFYMvQZsz/I\nksaZbBt5S+KZSEFvHDrgSc3pLlP45KghEOD1Ra38iZJMXH5eNGkSIWfQwDoJ\nflOH1RNUWRh4gK6U4Tb/hEFDq1t3a25FoUaBMSw1oy8su0p+aUNhdA0fy5cb\nStBwAPL2kjwKn/IO3GHEEKAXVp1VyK+oyWljEkT/OtaQvwwmLqId+MeQMOVL\n2yA47HbVyoEX7bn7+91KrFGgM8ATyMezoesa8CvUVnBsucDu+RMx7/PJpcFc\nDByD+TMTihUgM3oarCQydt/cTjj8F5LrcgYjBbb61CywvXZu/cQs4xTZT/xg\nN2VTpn0fkavQAT1HrrZ6ENs2IP9gP/jRrDZdoAxHfnRXztMPjMQHI+Cth1oU\n/PhLAoh3in/Z97J9QgoUB8MJ0czAOSiphvvyvKC/ZZKDCoZB2EKTeQbRV9i7\nxVRJS7iNMMCOEnIiNutbxqoOgLL443jsMKCT2ZSCbvOVX+cR7O1cXnRgX3LT\nC8b7U/JZGBndBBErdVIPSkUNwYs5tM4Mo2Xi4EliRbOFEEWiMxqfRH5OHM3N\nzR67dvECzKJ+0lXvEYpFdoXR9aFh39BjcnJ8bVqz4ycGvodIr3LWv8Krpg0I\niFlfTeT1k5PXuAnBZvtp0hk/0yol3JBaP7U4NNkLIiC8qXcKwWnRipTkHyzK\nWOBU\r\n=Yjdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7825c698a6686a8ea967272c1f150363b3845900","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd5987f5a.0","@material/tab":"8.0.0-canary.bd5987f5a.0","@material/base":"8.0.0-canary.bd5987f5a.0","@material/animation":"8.0.0-canary.bd5987f5a.0","@material/feature-targeting":"8.0.0-canary.bd5987f5a.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.bd5987f5a.0_1596131235317_0.614831409674182","host":"s3://npm-registry-packages"}},"8.0.0-canary.005e86a9b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.005e86a9b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.005e86a9b.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":"90527d413865c553913e8c77cfb34c9e29223b3d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.005e86a9b.0.tgz","fileCount":52,"integrity":"sha512-6pnKyG7cD100GjsQWQYitAFbea3/v0vnKQQu16oKZWbU2Gc6O047p4mUknNwK6mrsjCiGv1EThxb/KcIiHg3GQ==","signatures":[{"sig":"MEYCIQCFKP9QDQYIY0M1gFOZHLIlokLyvU9ID/ZC6YAfgDbxYwIhAJcsBbxuedUYGSoKD25iEEY46qC2MI2OzoWqCSVATfIG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwrlCRA9TVsSAnZWagAAn2YP/RbEsntuPgyeA1ykJFsu\n+D78RFR9rfwVhX3nYTYuPW8x3d2FRR1WLDcCGWtnzkCSqCv9HKfToE0W8d+e\nmNqjCQ72BNgjKbXnSmohQ5S40q4epP+XleTIg3TuITmVAJw6AHK+5BwRbswr\nq8Drg7xk2bEU20/qynZOlSYvpNHwJEjo1wGFO4D6hDgf+MO9q7ohNscm5DPY\nDv+J3eg7kvqrrEYxzMFB8QNmasYr6kU3EjhVTB+9FK1+vlVsJub5IBR2bwlz\nAny9/EawFw128s4fH//JjjZ/2IpUzO84ZxlDg7HjDjdbS142aYntnvBwdSWl\nfG0g01y3hWBMEzkpgE1yzNaOvgHn5f/3V0+bcrzmQgG2P1AaH/WhbQsjw1y6\nFjJ0l5mAlVnr6/7NSnsLpYPUagGlULHF35isUwAIMW9msIzLd2ZBOeU3J8P2\nYOvDS7SRer8dq0KqhBgkVHIT4VnefG1QKf14MnOE6hsCBqZrrrSK0j82Dflw\n3Ap9/60K59HC0HjDuH8CIwqyLWPaD8hpmNLDEhyvtnF0pvbUmN5JRtzIrPfS\nMH31ELIKF+Q09Tt99xGMFYGnHKf+vwhSUsyIs4tEmH8gQtI8UKsOYLMdcntV\nFk075jmNS4MdrKqj3wxZxbQRpk7kXOUdt4onMoGnVvf/FCC9ptRIo/6HeGBQ\n/EZf\r\n=GoZQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"1c429f861ddbb35ec8588ea55cb1845296ab0218","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.005e86a9b.0","@material/tab":"8.0.0-canary.005e86a9b.0","@material/base":"8.0.0-canary.005e86a9b.0","@material/animation":"8.0.0-canary.005e86a9b.0","@material/feature-targeting":"8.0.0-canary.005e86a9b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.005e86a9b.0_1596132068964_0.12085676936031575","host":"s3://npm-registry-packages"}},"8.0.0-canary.e309c7c68.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e309c7c68.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e309c7c68.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":"b71fc4ac142f10b875bdbcfc5319ce9a1833032a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e309c7c68.0.tgz","fileCount":52,"integrity":"sha512-WAWr9LkLfqt8TVdPf3gMKKqHkqPcF+VrFVSE8ACEq1RGK2McjYiE1iwA2HohGMjnfFGp5t5x36+tEWDZzfyZxA==","signatures":[{"sig":"MEYCIQD6cGATNdgRh8uz5t/xZMymUIEPC4HTuXMB7fIqZGZjKgIhAIb0v+aa01O8txRwmF3K2ACnuYPiAcxvzq23U8LvBKet","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIwz7CRA9TVsSAnZWagAAMhQP/RTbpkuO22bgViITBbzu\nfOODJmIMWCzJY/j9gM6gfFR+4f7H1odSydRI+lYUwXwsEbRIsknVkZd/c3/d\nLMpygu4Llu6UsyrLakqZjpemkuIsiMLhvzQ48269I58mnTZ/sy9FtqVaAbo6\nh8iED8tSWsOTCTsvzEm6LGKlgsWJkWQuGczsUwyDfrGQtSupAMnFbwjR/ubY\ns71tOSUZr1KXdlk6/1TB4tJCBC/opAOQY9HFtjbCy7EHFkiFvkmWbP75BWAf\nTdTJB96RPRLHeztux0OROHWDzwiuaISO0+fe2Nukl6+M9pQp7pOForVkekrj\nC39ikGblD68wPunWFjzpSSNoovXnDnbso5vy144oq1PA5BjNAlg0jJ4jtS9h\n3J3gJX3UuMKS1aXA71ihNgtgxp7a0nDuwfI3XvDZYwXT3VGQMRzyvxMTomK2\nNYhTu4ov7uyhyZjVBJvWNUbnAhkfkp8eEijHl/BWZs43YdJtucPUAT0cVIaE\nVxIBnf/NLK2tGcBlnyUeCaBmqTC15VRzZB9+T+nN5py+myWgpRvCpKPssimp\nyxTxOwer9bYX0N+q0K6NXPVMNjLPtAxAkrQq0KDHcsxudZZkj2MU5NZF9hlN\no/WFB9+GghLOMewGaNPaTYZ2ZMQqxTxEubneReuVYuzs5CVuLcNFnwcnFPGw\n0lLE\r\n=Bl5N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"3ea460933f859061781daca3ae127802388c28bb","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e309c7c68.0","@material/tab":"8.0.0-canary.e309c7c68.0","@material/base":"8.0.0-canary.e309c7c68.0","@material/animation":"8.0.0-canary.e309c7c68.0","@material/feature-targeting":"8.0.0-canary.e309c7c68.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e309c7c68.0_1596132603251_0.3587721907950505","host":"s3://npm-registry-packages"}},"8.0.0-canary.935a51cc0.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.935a51cc0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.935a51cc0.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":"b130a01f988b5fe7d8be370ea3efde3948633065","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.935a51cc0.0.tgz","fileCount":52,"integrity":"sha512-CfSdq7wBvlaqC6Q80rfRnNprtGCyfRCPsxtq5iBdRCdRThcCpI7/VOnoS7KUeU+OtrKRoqlaj1DlJGib3el+HQ==","signatures":[{"sig":"MEYCIQDHjiYFUNxOTP61/9p+mdCUiFrvSdZ2BxoPwxn+q5feeQIhAMBvjK/B2N6KRPTk1y/vxloZtGnGwz3maKOOqHdcrDFO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIw+mCRA9TVsSAnZWagAAAeYP/iuMho68kneKnc0lCF8J\nZsKG3SDAfUzxULBqWDSPP43CZ4y2dEQGAGWvRvZtcsOb2Iglx9fh7Wl2skjg\n0QYLaDAQ5yBxbfwanHlAbjspHGmLcC5n1u3hu8iFLS0r76jOf9vLKyB1SDaZ\n3wbKzsxrBu/5qlAKmsZhvNo4+L9q8Dgropa4hD8vQMLVOoHGvpKZxy/ddtCc\nqeayUBxWM/EvSh3jpKBZf/TJFdNuKvGYrNGinEApHmY1GlIaHg8+ZubknNT8\noFHdAse5gAgscVf0xQ7XW916YCmTZ88pHJ/bEg4tj3pXnAI9qZHUmWdsBIsF\nGsXjbDBziKeuU5mVfiax1MMe5bFLlwNuuE4Lql5eZOKSrAr8SiDonbjJfHSQ\nSZ4rTuISbctQG1UuweD/NXH2/cYFy5u/akoqdoHZsRgdocWoVUnm9dil21W6\nqmHXSwWvaruoVLb1WdYuS9+yZ4OOTdZgR7+hLBj6Ulw9e6v1qBbTY0MVfsZd\n4ZZ2YswpsFfE9NVtWVZK5mguGH1S96/4PqFGFVxyhDdhajANNjGhAtHgy67e\nz2TYO4A223fpwB/W8cFrpiODE9jb5ufXNeKnhIvKBnja+aR8kn7FvfOS5/br\nyYjdXvmAoRpvgD5iFj3Srddp3B2Q3Ap2DXkAkIUvbJ6uPJEH2hLtk3u7WYjd\nl/rz\r\n=hZWL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"79622070723d97d5c4052839435f92189e8fb6e6","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.935a51cc0.0","@material/tab":"8.0.0-canary.935a51cc0.0","@material/base":"8.0.0-canary.935a51cc0.0","@material/animation":"8.0.0-canary.935a51cc0.0","@material/feature-targeting":"8.0.0-canary.935a51cc0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.935a51cc0.0_1596133285437_0.04987968756558647","host":"s3://npm-registry-packages"}},"8.0.0-canary.74839da7b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.74839da7b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.74839da7b.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":"90ff6821b4f6735a55042e14fd362f1809ae3a71","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.74839da7b.0.tgz","fileCount":52,"integrity":"sha512-4BHJwcSuq23ZsamOblCAe2AwHTYnomvOMhiSt9e7lpNzX921Q2bCA/xLD+HsMr08R38JQLbO9Li7QA8vwIV1LQ==","signatures":[{"sig":"MEQCIAStK2zpPjDIe+yfGmPEMQR3IW9bvHe13PRs4uNarK96AiBF8KokmSr9NYkD4cWZlHP1gys4bXIX5p37mcQS5jOMeg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfIxJACRA9TVsSAnZWagAAf0EP/2l/CRnUsEKHYHM7P8lC\nToih/UWNewmbIIN26JeHn73eiOV1Tl30nwc7qQ3+K/LpdNSgWp56vAU2//WX\nlzKiMvQP2HwCEsPheJdZ1Kqi6R+9zzvRVQlVKE4y7hp/aF7eDMhTaeDFKLoY\na01/C80h9DNybtAFeVciBWDyMnlQNEv74YlOg1k2WhqpJYYhfKL78Uhae2mz\nb9Hove+B0XIwH4g4Dq4F//ZbPE0lCqWQpeV6szb+/lRlyI/Qut/3fjUgYJM2\n/er0fgbSEQbz1QDQvoEllzg/YogVMBqAnI7Q6cVIxy40BnsIFPXuorpYII7Q\n5Zj0s7b/KeCkobtPi2uvs6An71c0GO3qVPAC4ylyzBjVm7W5QFRkOvfk0QdP\nuJNp9dAFIhCjNHxDSumaAgtSFeJPRPqJKDDkI+n6UUHv3uKPC/yng1WSyChW\nyFsfxc2TjOvcCHNtPzBIyXeAZTl0kKjahm5hByFxBIbswzbw7YD78Fdf8xs8\n65ENAn2avbCVIHn0PibC1mRozrdkieVgGKC2vwf4PxMIn+N5QgVK9HZMiZeX\nHL3FNZLHloSeL9pIyUbyvqDjA36FBV9xqfYY3PMll1UvbUgBC+ixNoOr3kQ0\nsD1qvqYEv0qLw25gv1mxsJQ5PFZrO99nQRUrSkS0hyhTTbpcy72r2iFhflWG\naQ9l\r\n=Z+FO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"ad186768bb65467a86f70e827e74fee089e25811","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.74839da7b.0","@material/tab":"8.0.0-canary.74839da7b.0","@material/base":"8.0.0-canary.74839da7b.0","@material/animation":"8.0.0-canary.74839da7b.0","@material/feature-targeting":"8.0.0-canary.74839da7b.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.74839da7b.0_1596133952556_0.16697597567154498","host":"s3://npm-registry-packages"}},"8.0.0-canary.f041a48c9.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f041a48c9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.f041a48c9.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":"6b73fba391fc768a1b44042e449780161401cf51","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f041a48c9.0.tgz","fileCount":52,"integrity":"sha512-hdoCSTnNUtR/9LO+IWGhYn/eX2cL2L34TBIFPdynw1zoIRkXkryFzzKyt4QT1FnjNKWSo1jIS2nbR6XXhtzjXw==","signatures":[{"sig":"MEUCIQCBQnTaCv06IkDyhb/MjQsTKmbNGsHqzLi5YTqtJ3KrnAIgfUujLSmXaf4hzolpeaJpHTQowwgCqgf5DoYwouOKSBY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfI1EiCRA9TVsSAnZWagAAo/sP/jeZ7g/PdQ5NT+LRlk0U\n2izUtnKsiJVWf6x6rTQD0j8yhB1eLa8slS03DAQ9WZ0QYqSUuCB+zfQ3MriO\nFQBFDFVxKIUlUDfstW8oI4oSc10vxY5YpPA/Pn/YDmuMvxj3sSL59Fm1qI3Y\nQgV1erMEVI5bgLiin6KI2h0FBgQ9uamtKMveLVTgX5Gf6ejMMTGJLDP05Vai\nCZr/zyeXM5K6m17/Q5lrdG7oKBTKsys6iQUIhqQ1cPyvhOK1CURV7ZayvypE\nCJQIOSM7iM+/HEMIbY0yKWQp3Yvp/Lao0de0HZ0mexGKm7v9KO1sYYPAuvVe\n0nMW7hxaQ7OB9DZ/aVkx0zZUJ1WUDHUSbG8zSe1nivVsLvNJv2T9xrsF8Q4g\nF8wTNjYsVbyBY/bLjl2vwWrd2V2EEUyN7kdeTKYEGmq6bWGwVLwTT27itGF8\nvfBiEBGZ4F6wJ1trApRja8TUV+boujSwqjViTJavlRqWeDyn8rNuJN1FHKcL\nDyju5X/qaY6t26RWRptd07JxQkGGG3BYbCBtSenLb/0iN52jkjD4Zspwp4ZQ\nBoTTUOwSoMI2HN74tjCn/NVGnP5P+5ERxpt+inye6fzZB1XjoY6KnFJyN+PM\nKJM6xQZ3awE5MZyvmnpkXvJuXlB4Hv60EogrW+4Paf6Eik1fzjzpkotRlSu8\nQECQ\r\n=Ot3L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"e37611a41628785b7c1266cd53abdd9da0208c00","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f041a48c9.0","@material/tab":"8.0.0-canary.f041a48c9.0","@material/base":"8.0.0-canary.f041a48c9.0","@material/animation":"8.0.0-canary.f041a48c9.0","@material/feature-targeting":"8.0.0-canary.f041a48c9.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.f041a48c9.0_1596150050223_0.10166734007328437","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbb1381e1.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fbb1381e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.fbb1381e1.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":"865e95a0d91f170fbfe8e2ef6d284a60dab80f7d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fbb1381e1.0.tgz","fileCount":52,"integrity":"sha512-Aq8DDCBkt1pRl7X1VNymDgO7ZOB5ZGY5SM6m0uaDgLuFIfro/mlu+wY3Dv2uDNVDkh/M6QVhjfXs6Bi6eIMY+Q==","signatures":[{"sig":"MEUCIAqQDWTPhijhp5RwujwXPfc4L5cd4Wr/BKZZ4KIVxdjLAiEAv9jq/v4lsIaKJvC1nFl3j4VJShLAoHSoOImTcrhX2nw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJD3+CRA9TVsSAnZWagAAMDYQAJCqk7wDQHeVm/fuSSQQ\nZTlGvESqSvt19QieoMflgwcrtL8aYA2osDTPYyaJ2CgE5kRf4f0JOmgkUvW2\n77WBWkrrrAU2ljHEG5lLpCIZeJfY+xHWzOoFfNIRPcTd0VoyFfvvTQrW+Kg8\nBOKwFggxdUCaEvClAIwZ2lNgS/JS2kXeMat48xiItIVeGsz+9nE/FJtr+Fun\ntDM/Y0uqRNFXSVJto6lO55j+QT3DNIZGq81jflZBrJ4sVQvnQbQu2qcXGRO/\nlEuwcnAUg+xwkndL5FAyyE7A4DG6NkYWcVzaHqJ5yIuq1ZA6dIyDiq7tQvQw\nEmg0o3pRsvFk/dBxUvSo0HpQfSZETj7ayQY8dhxgT5t0JW46CP3DNN8T1HFQ\nX90l3lGXDFAyC9vCroDlkgg5jGTyUum2USEq1BjaogSr3K5/6K8NND1pXUUa\nw6+/K2TBZcLtFDbwfmfeNKAfWVVAKjJwBSUkWqr3xoDCPRC77NJnA4rdenSd\n1KgdmSR2L+Z3jTnGkZAo7KDzfZXqLNo4+a4o3SQQGocv6BAGARyXroQp/zgN\nCRGDoyIGYHMuO8ke7H1v+8b7YO2nkDf3PLJ4J7jefeCrgpFPfY5gEZr89JyB\nvVlJgxY/2gUqO1kbfKtfrMv6d704FYrQLnKNg+lN/dEiromwfV/rNJoZhkM2\n0LOU\r\n=La/G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"7c42a890f9b5f1bce3c7986f37f806066e6e30bc","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbb1381e1.0","@material/tab":"8.0.0-canary.fbb1381e1.0","@material/base":"8.0.0-canary.fbb1381e1.0","@material/animation":"8.0.0-canary.fbb1381e1.0","@material/feature-targeting":"8.0.0-canary.fbb1381e1.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.fbb1381e1.0_1596210685905_0.11476340971129217","host":"s3://npm-registry-packages"}},"8.0.0-canary.7f61d5785.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.7f61d5785.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.7f61d5785.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":"6355db61c6d6eb2158f4381d5fe69c892f909ee2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.7f61d5785.0.tgz","fileCount":52,"integrity":"sha512-E7ubYcpfiV/o9Qy3UXg1ez0zSY1pbKwepXXF2D0o41BsYYRaM5D+muG5c7RfAbbNpWyGoHxzMGRT92lPc9bz5g==","signatures":[{"sig":"MEUCIQDehuOb5kpWRJ7XOxQZ+5WdZSU0OM8I9ouzyVzWPgAvrQIgZg1JJ/uSCPCI0anBXaX343e4iRMPxXZnlkvSxbT6vG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfJFOwCRA9TVsSAnZWagAApUwP+wcQSZ6OU1JEmRv3Vmb9\nKdOkdZ9w5KHe8j905/5j7LoS8Z+uWLknx4SuNxl7YB3SAjNwnP+9BJKV0MBn\n/sSrCWoKd8FC/JbViFwnQIecNSi10aiLF1GFvNVSTuQBgElnd8Sl5M5iO7G2\nBMtefwQGgbbDftmCGBvmJf+NcnO0S+B7TjJ5Zn0IsVxGWr6GU6bVAVJw0lrY\n3F1qjBHqP2dkYjFesPgiMyCy1j6q9/jZQlXpS4es8mK4uVfG8giyQUvIV1Ma\nW7BR6hF386bNsqkrDx0BG8eU0r9+Exf2h1JUWpFBEo2j58Zxd+5A1Ik4llb5\nz6SjDmrB4fia+QahoBwNpACYKEhsQwHCUDZeRGVirp8vcjDqYrZspuwVgBmo\n9BLyaMQmwMNuNpL3rgYkYpuzdtGd1dLnh5dpj/6bv1ccZNbgy2hNWbuPqZTW\nvbzejri+Lt4oDddLEkG2xUZdNEQWnl70Gr5ZckMalCtrt9oa9jMMBt0hHw1A\nMS934jhcdnb9imZZn5wDzUeiX8/mgvxeI+EsGjED3Q9yTM8BLQpHrPoCZ2OP\n559VZcAgOhu0Bk5wKZlEwrkTcvEgjsvQL6yWx5NuwHN0PPEQuXenLQpBgHKv\nBrbdWsXF9cgl19mp30bztqwcleEB3ktnVVzdo8kNtfR3EXtYiN4W+O+vr5u2\nOE8e\r\n=9emU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","gitHead":"beb77eaf7ccf3f03c6d830f96485010ea9e3d47d","_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"repository":{"url":"git+https://github.com/material-components/material-components-web.git","type":"git","directory":"packages/mdc-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7f61d5785.0","@material/tab":"8.0.0-canary.7f61d5785.0","@material/base":"8.0.0-canary.7f61d5785.0","@material/animation":"8.0.0-canary.7f61d5785.0","@material/feature-targeting":"8.0.0-canary.7f61d5785.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.7f61d5785.0_1596216239959_0.0003013399579854248","host":"s3://npm-registry-packages"}},"8.0.0-canary.e1bc84d10.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e1bc84d10.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@8.0.0-canary.e1bc84d10.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":"57a7de6b603bcdb829bffe1d7f7ddc1254ffa0b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e1bc84d10.0.tgz","fileCount":52,"integrity":"sha512-8DfgQsijg50nS9RHxe/0nOB22evoMZkEk6MB1yVRko2Wh8etgBb04msDpuajuEIXh2Mlhh46iVq4dgwisgoclQ==","signatures":[{"sig":"MEQCICraIwrrsFi2ianUQcUFZGr8bfaYDZ7NcrQt/J8JqwNUAiALbY2FauXUrACXukAunKZYqcYHQfh14UdwXm9ed+lVkw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE7QCRA9TVsSAnZWagAASs8P/jktzXvJYF1sDq3+D4+U\nHrjPOypX0yO4ARZCC+FycswwrsrMMZh0M36Xqlf4dy7dPkHzkq9UimRtg9xm\nkI4tZpIe9ATDtzyU6wUQrS9gWhGq1vJA/b/s/8WeDahejDwlYaD5571Az24V\nsCP6p8T1zFeqZU8FqgVmqg1LL7WiNZu7kQPJ+cxyxDBUAxph1vJZtgCciWsl\n+b2Bm77h47WfnW6v1+2Mq7wViR+fULKsBxPlXsx/u2uXTqqB074i8LVzDlFF\n2U26eQ1ajT6He8s5CciMWEPSEVJBWkmTn1ta5j4OkZsT50Ee4gyc0SQ8hDU4\n6/pk6C0hJkfk20e1Yvb3utBBvc8DnqvyZs9fAiEivjzp904gOmXWYGHfKPz9\nowolIPnLnydIFvi9py2+fxGiZ6nHQGKrSCyQfNNZoZicczdlL2Is0peMdcGb\nbGtTiq9Mv6hAcoDXkIvKwwfafJz/qwWsFybLKCD8JlKJA4j94B+5q1q2FQdr\n+aTU9SLwwKX+wGWyyM4UJJR7UNys892a3zlI8iX8cQCvsIk7Xceq1d5TG4Ct\nj7GJsGz5h8mcC3hzl0DLik7/T2/cuGWuKcWBEfn5Ya94Jwy20FN25MzQtWb2\nBTe3yY4rczkvrFWrHmnX49EB2cfIA+gS26NkxYnNSCNnunJ0bpkrARCKwghJ\nMo9U\r\n=6fLg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\n","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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e1bc84d10.0","@material/tab":"8.0.0-canary.e1bc84d10.0","@material/base":"8.0.0-canary.e1bc84d10.0","@material/animation":"8.0.0-canary.e1bc84d10.0","@material/feature-targeting":"8.0.0-canary.e1bc84d10.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"readmeFilename":"README.md","_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0-canary.e1bc84d10.0_1596477135809_0.8693665183929671","host":"s3://npm-registry-packages"}},"8.0.0-canary.096a7a066.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.096a7a066.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"53adf9ca6a39153d3113ebd647e573c9029a0ca0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.096a7a066.0.tgz","fileCount":52,"integrity":"sha512-IbAd2Zvvk1jQbXr0CeRJYbl0fHCvvZOtlGOeGtn7FYL7bMKEbKJojtymzuNPNhfaqhDBE3ON5Cnr7g0uYE4OEQ==","signatures":[{"sig":"MEQCIBc8hcW38pz6g+3VQ/L9ywx+z3V+g+mt9iENpy6QlZv+AiA/aJ+hBP3pVxvoh0MAIjexoBvB2OBNug0pIczLPHwycw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+FCRA9TVsSAnZWagAAezkP/i6rnXFIv40YxkVnIAdH\nLei0iZw8nXtjY6EHmsuo+2UfxWDWipwoYLtmi0r8ldVmNhhznbnL5BsxOCQP\nb3dmQLKR6BARNwvZQp1iHSuGWziPJ4VRrkdKBvpm68fwB7e+L9LifiKmfXzw\n/mgZvOkedcB3YPhhuAagO5BvIt/UYBv4CcXChni5HzTtrmNVS79FcpaROMmj\nIH3Ol5uH4e3VgqZ4Ux2rMljjMbgTBY6AuSkMgPIhxN32d94cAxMD+AQ+s7F/\nYguaaQAuFAj9tq0KSFXZrrKGK0o37v7WgYA5BwrRH01yGR1D4b0bDMOsSCOm\nO2EmsJPlosWKBoBIViUmXikW72Z344t8uQkJZu8/1rJIFFPWPzoedCyp2Spd\nquB9G9iIkI6EECWnuvygifpqco5SxxIBj/7Twc55a1p1dTvsGkE+JNKNAkzO\nogz8L5Q6SRKdV5v3JgJIkxDZEUVfzCYahj+DsOxWF06FW45zvtjPYDnzP9Tq\n06yFhMNSUlPw4GWuMFkEdeywKsUGRVKFUK/DlCIXB156ohtF5rtx8MMBWVFM\nGED+S0HZAnecbDKUH4GwyR2Igs3IVVk/n+51q842e08Os/SXrfKaEa566HaR\niPZDwtzQT2Gwox7zvsQ0kcBnkF7/BzU4dl0BhMEVG7AY/y9Qquyj4VUoZMuI\nL+P4\r\n=+T1U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.096a7a066.0","@material/tab":"8.0.0-canary.096a7a066.0","@material/base":"8.0.0-canary.096a7a066.0","@material/animation":"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/tab-scroller_8.0.0-canary.096a7a066.0_1596477316680_0.27688209305574873","host":"s3://npm-registry-packages"}},"8.0.0-canary.aa3a3e5a4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.aa3a3e5a4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7639a12ba22e73a074bc29d40b7ba5712e6933c9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.aa3a3e5a4.0.tgz","fileCount":52,"integrity":"sha512-ZdgRMtNwCSxPcVNDimhQxRmOV4czCtK2y81ei8Kxz6I+yC/8SjnR3czPbubl1FNmKydv9eYy5Bde2V47vtPWZQ==","signatures":[{"sig":"MEQCIDZGvUdG5IGEmDp4mvghUhdCKKH2BvPSpcoyW+UeoACsAiB3IokkQWkiJ+0CrqEhrBI0zuDLyMNwjDGZhmyHEfajRQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+YCRA9TVsSAnZWagAAur4P/1IeyVk1o7Vhi8uEUrR3\nYZTXopLep5w9KqPgAygXhxwuGtXDZzIssdTS7CZx7nVkwO7PoG6hMQ6Ojd0b\nRPufnPfcnHrF+8RGvJGu/Qt6x7Lv0gZiZFZeKOQyFMrbQbLJDehL6yPM57gZ\nJcEJltFsxZFG+IeIWJDthfaWeO3ZCOEVKt7uwJ+hgnomWSeAExuhC/bAUkSA\n2X5QUUYmgkXpM/S4tH3FB+dF9rOqNlL240ddu4UAn43nVbCCbXDuuKYVnxO4\nFtogof+WTDU83pC98GXE1v/uAZUaTtmV57qj8ef8vdWlF8kSK5j2zvsPjm5b\n5iNsTI5LDeQ72BllOzaaTXRIpxpK2+U3YqC7wlHyNOLr1CGHZK8Y9mQlKc1+\nUC3Nm1HZCN6OHVuIzyGPFvJV3YqrdW7/lEL/s/9DdPgjq51gxIcm8gKbj+wH\ngIhgYAJ5huJatMIShikeOK+v8NeU/dEPBaDBM2hlFWnui6opDwepB9lH2yK/\nyS8cZSnJU90bCHL9kSORW+N0VrYl+w2ZQfbXkiz52/jJ2xkg1wn1H8ntxlbH\n2brfyqobN3LXS91H0fCuNUD6e2toN7tK0n5LDSCgmyQfOjb0c7NcmcxFD7Sf\nVEwigv47/1RNjcTqevX5hfwUEJ2rdgic51gmHrjnPY44iXGtH9e1Mon2ANj+\nIqlK\r\n=K65V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.aa3a3e5a4.0","@material/tab":"8.0.0-canary.aa3a3e5a4.0","@material/base":"8.0.0-canary.aa3a3e5a4.0","@material/animation":"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/tab-scroller_8.0.0-canary.aa3a3e5a4.0_1596477336158_0.5355216420319104","host":"s3://npm-registry-packages"}},"8.0.0-canary.5903d39af.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5903d39af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"81b3ba16ee6835e5e288199bb86058ecc60c4258","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5903d39af.0.tgz","fileCount":52,"integrity":"sha512-4eJASRsvQgQJnaUvX/ZfUNrLxzrPPEsglTXmWFQhMY9DG/kB1bWwcbooDoxdTAWciwez0yrhbnifC3yS1J1hng==","signatures":[{"sig":"MEYCIQCS6OqU7OBAMxS3+n82oOlFkDfHq4ftVdhgAf5aqaKlpQIhALSVzI2+0dOT53fyT5jvMtp3+zTqdImY/Ce6CNqsU2Af","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKE+sCRA9TVsSAnZWagAAPowP/1flsAshiZXBOCWtyyiy\nkFywHAViGp9Fmge4pThojupPZC7QxDuJ2Bs3LUvnkRbyHR1eMfUrW5YaqLLy\nzaP+g3Mmm1NO533PL68mpMwpWbuxnifZ8rRfNiAgeHKfy7Q+K8plg+f+eCUf\ngr1u6xtGlYHKLrEubZEab8hch+Vf4hHVH2SM23Pl5Cv2dolNwtdzDd6yPv+x\njF+jkL4XrU6VaepvyzQsuiT4CadTBzrIt1lwBMRQQYBU+GzkI7b7mg72J3dI\nJ8fHOeuoDoXuAU9x4OdaGPUuQuOV5y4wUDM34ja65TZAWjM9ubTnGl05pN2n\nxIDrcM2/offSIcL5S7HFQ6HLh5O+jGbeAQNWIbrWPnNQMRPWk/dp+qwnX92N\nE3AWFOAspMrlqoq7crmHpcF3rSZdKhFA/fXAU/6DliLSNIFLb7SoHa5v1faR\nF51gunriJCOWqBHFzyJW/p55RewzWAV3JhhIXv3lZ39FN6yXmuKSESwT5MAF\nvk7MsRHrjqMeXgjVQ64Eflwd++8SjfuBKM6jhuRuqAS71PWMTYLJn2BeozR6\nrrN+5exp6hPaCxnGW4naSeEqSzpYTMVRize4Tjn5FKn+/z260gVPa4QSiRmC\n2TeKuSpAFzRSEcHf+H2EuC8wP0JxLXav2sVuAyvmnkeLCtcQf8RS9mOs6k5M\niHUD\r\n=c88Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5903d39af.0","@material/tab":"8.0.0-canary.5903d39af.0","@material/base":"8.0.0-canary.5903d39af.0","@material/animation":"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/tab-scroller_8.0.0-canary.5903d39af.0_1596477356436_0.48980403468248745","host":"s3://npm-registry-packages"}},"8.0.0-canary.72258f898.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.72258f898.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0a7c42c89db0e9f56ade2f90d5a30c53096e5ddb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.72258f898.0.tgz","fileCount":52,"integrity":"sha512-d2c8I8LwrlVL4Oo3En9F6uMWEvdHPOjp9u6CfQog/N0t30VA2j6kKTa0BgcBIIeHWbYDCm0Zc5H/GypHVjcoYw==","signatures":[{"sig":"MEYCIQCFlez4ZtAmtfUDlIEuM12fntWiO95Ihh8OqA1e0b7/SAIhALosI2bCG+w3zs8z0+QjV4qNAC9fcHesoBz+iLMIceim","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKLdjCRA9TVsSAnZWagAAa4MP/iE7QaPc9LdcD9zS/ZUI\nuyrSVHNLjOKsmDZRw8zqJG3sofS5gY2T4HrQEh60H5Tjhr+k0otqkDG2SuRp\nBKIdrg8K6FF2/ubF6V4cE1904+e2Jmo6w98nmt5AgSUiqKElpgFKuW+hog8y\nCpMkbglniY9LO2oNjeqmj6tjuJXOgkEr2VAHOWPgJV8nitqxmOjK+kAGN8MV\nBtyXxxCnn6wKGV9YofJeWkMS2N2C1pSMJFiKtUO2rAKNk49D+pQkvzozvFpf\nukFQZE3usAvFl7SviFMBY7VVjjpwV7k6Ba6lCfm2ypoQXUhwD6/v9tqyVbxd\nC9qOsTaiGVM4eUqJxel2zgjKyLoodzi+Q6RcXCZaX+0zxtV79Q1DNEDcIBkf\njAxiiCGqtYylsgrqxVyUq1baO/470m+O4vaf7ZjU/yN731lkoWoEPd35Stku\ndSiCbK50oTSDZnele/a4C5m36bzQ11zvRn/C6zmO7NqY9S2o/+EEL3rrxygG\n4iglSbnQMSYon/sKdkF966/cot1UBiOmLcV+oNZ7RBHQ16AeFjuP8viRQV4U\nrXKyrd71SV81xv+RE859cuMuzF+7XHdBY1NBTfJ0+iH/zPT6ANeBf9ynoFjN\n2sLX02uLGlP/0YLchD6OeoWxP0ZFbZdV71KRSQ9R4UxwhMdnO5w05Wcr3cME\n9oY4\r\n=gYCo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.72258f898.0","@material/tab":"8.0.0-canary.72258f898.0","@material/base":"8.0.0-canary.72258f898.0","@material/animation":"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/tab-scroller_8.0.0-canary.72258f898.0_1596503906638_0.2889119197039989","host":"s3://npm-registry-packages"}},"8.0.0-canary.1b44b43c8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.1b44b43c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7dc4881ab8d63f5d706de49294e6f9354ca2ad5d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.1b44b43c8.0.tgz","fileCount":52,"integrity":"sha512-qO1irdbFrGKgpw5P8J34HwxUnQTKP+yNPMpa4FTtocaU/Tidg3SdsOFN+zLtqeDFK59HwdNQXYVrxfL5d6qTfg==","signatures":[{"sig":"MEUCIQDUVbwf78x8QcwOrFxuGkaMHczYpD+t8Zug9vPKtn5vsgIgW6EM2nVGUvDREqGXA56KjrGCuIx2qnfOLQKjK4Ialcw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKZGfCRA9TVsSAnZWagAAyWwP/34giq3VoCa28RBPyKQX\nLfUk7WvNJGWMnLREIvFMc2zUYaMYzYh3RPnvA8zxnQ0mYf8yHDL6TVwtcnC6\nV3sDz6dW1XPX/l2gJPqWIpc7y8bv2hGUJTPXsu8vZoqNe1lWinDUBBQ5jXvu\nuVRXqLSuF+J6tv4fepDDpjWxVg6dvcbUqcP2YFIKJTIJpChSpdWc9rdO8o8z\nxx5x86RKJERCWwmD6AZ3sv0m6GzmZVqg62utdylZwzE9c/iolA4EOyYnuflj\nN4O6QAa3Rz4/Z9Sf8uvOKsWJ9TZl6oYs2zVERZBIRFY6FFWfUXn+cx0NiDLI\nyXfolt8gPCQZRftuCIMM7cHw9o1EOWu5Phj98+tFxZH/ngPO8XtWDCXW/iny\nyy6TKMccxPMvdsXC2bjFz5acIebhQ5lDagtDu1Mbbfe86t0lf4+vk5VOrk4f\nZZkEeXbaJAAW+jDAejLD23nmDLQMCVsgF1D3J3Ai3wx9uwosxDbdh4hMhZHM\n/dxgEIYlt1ZhE2ICo8MBU57TvFXNx7mhmSLwIo500iVY+ktEavuZduPS+Wwt\nmBcdf+LDq+cv9YMYP+0m7sPiUg1ex/aR/bgfmpgNanSFzW4exPrLDMhOT7Jg\n9pordbE80M/OAx1VydwlA6r/ZoUgXjo+a91f3R8cJPFGajPR0X8vViKe2CLR\nbx4/\r\n=V9qf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1b44b43c8.0","@material/tab":"8.0.0-canary.1b44b43c8.0","@material/base":"8.0.0-canary.1b44b43c8.0","@material/animation":"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/tab-scroller_8.0.0-canary.1b44b43c8.0_1596559775416_0.24829599019232274","host":"s3://npm-registry-packages"}},"8.0.0-canary.e9d2e2f96.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e9d2e2f96.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"039e7b7aca30c69a5075972fb996b6beb56dd7af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e9d2e2f96.0.tgz","fileCount":52,"integrity":"sha512-7wrHIVUz30c8RFphAi/TuxNMfUQTA9wcZgB9EOOERuB5RdGQEYABVPH1lkB0Eqs1gpDAAMnHBapx/enaTuXXZA==","signatures":[{"sig":"MEUCIDQFvqhkqk4KZFgwj0vPEGQoydd2VuQsochQeMEPofrDAiEA5WIVj4CVOmq3d4vQBdD5ZbHh3TJpTahekrMwdcshtaY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKcQsCRA9TVsSAnZWagAAFg8QAJgq+sj9VBF27iKE65iu\n8kZGW3gHQ91HvDbo3/lTWL9jix8Hct9UCwz/8TSBjz9DZdsFnARWDYNxdR2k\nskRcUdmCRGf1xUIoH2dIdO/bHt7Y4cnlNsOYRY9CZITdr7DqYKuL2Duqw+37\nZYAEdVH0GXHzXv9Kaaj7FZbFaFDerjyTs7ndgn1aI/u5zID2u2X7KuYDb7KQ\nus5ldY+99oYJvvfovGXekYLVxYEkNBxrzy0WwiGLUHEZ57jZvd2BmVu6ezTi\nfQBSNQrAOqgwR2J5nii1BdAcceXUqXo18DHjIdl1c8RX2f3lmUnVahaQU1zP\n41ILvV5CclDl9UvNc9H5PRGG10L4uCvGfjnzZxUu0okJFSyKTugtFDpkcTVI\nln6LVW2sKAM3Cn8+xLnoKTakBNJgVxx43afDoEPqUfwhQH0L7nE9F5BXkk8U\nfOhSOsqeWV5uk3ChHOhV/qhutWST0rYubgCJxr/ToDkNtWDZ6AohwElDBdFY\nx8jWDF7VLqdhcqHOlKuC0yIPeq0rO6bSZ0vl3iuyXDhTN2GZMZgN8Y/czR9Y\n3GK4zCZ5e3Hwt1T0rGqWDNoahFrPEWJu8FbXYADNUwcZfvz/LGVwiYB68iIk\n6j7clW3+jXeFoqFcxrFL4qg8gf40CAD8uF7zrRI7VsRQYwS+hfGLScRHkmsl\nd6OS\r\n=c6f+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e9d2e2f96.0","@material/tab":"8.0.0-canary.e9d2e2f96.0","@material/base":"8.0.0-canary.e9d2e2f96.0","@material/animation":"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/tab-scroller_8.0.0-canary.e9d2e2f96.0_1596572716206_0.6395758458575551","host":"s3://npm-registry-packages"}},"8.0.0-canary.b9dff0a19.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b9dff0a19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d67a97125e682f6a5ef67a92758808e39294fd49","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b9dff0a19.0.tgz","fileCount":52,"integrity":"sha512-JiOHTqt+2ceBves0qAw61e5+UbFjy7po9xK6G+vGsXiPRtrB2VYE9jF9/DmNptyYxUQreqoHVfLcMIZcZinrNw==","signatures":[{"sig":"MEUCICzNYB8ZJ1jMHmDj/hBTdKLXDX29pDXMvLui/kda4gTIAiEA34tC3pPezSjNSWJPRXflfyEazADWVXbeiwkuRdFcW68=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKixnCRA9TVsSAnZWagAAzh0QAJ42X+Uzf2epRExUZHMZ\nt8RUOzBUJ43ELRkQVNzBXEYEAs/BoDQJPoViQ50/c6IwF8sL3mXipIvc42Ei\nw+nLGOQfumlbP1Di8MHQ/HpK3so8QHECntBGCbNH4nAp0JZXobSsaoTC6HNA\nMQwBZIpppLdXEwvElbil20XM4hG4OGx4JSpgV4HwGfR5wkIvQ+GrgBjCTt6F\nc/3RgkEqDDYk/ynLAQcfG9dErS6+qTbZQpEdLJR6Aby2ONi74HcpG5F4PwFB\nArOV3wUA5i5K55YfknPuA5eZJBuCPOqoEIYrqbBd3QxsD9l1MSsT0o5dFjiD\n9p/9cM9ahNY+To/spTj1Kq8UVE0nlNOc01RgR9gD+wYYhtUDEtGyN28d7hiy\nCp3nkHmlrm4pyS0dYBZ/cgNlPIG0nt/Dff5B3YeeT15S6H3+vIVWAqSNgmjb\nq7+qXcGHBLpEHrlWPNBPSPWfgiVy9wGmpdCr8MHuuU/mH54hpjJ1G0vPrdC4\nf49RRbTC1omOIDo5it1fzVSvv6KiCpjhGClCyU4ikK8Gfdc4T0xSzilw5KiX\nKmpGY8lSYLkDWudLQYSWEAkbnqZX2tWQRvbJKAuZXk26/Far0qIgW2eRKECx\nGjPyVbrbLhgg1q9Yt0cpNLRau2eW4Yi2BpraicXgnoavHETJoR3So65EMoOm\nYY+A\r\n=+U6V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b9dff0a19.0","@material/tab":"8.0.0-canary.b9dff0a19.0","@material/base":"8.0.0-canary.b9dff0a19.0","@material/animation":"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/tab-scroller_8.0.0-canary.b9dff0a19.0_1596599399226_0.6092235235513137","host":"s3://npm-registry-packages"}},"8.0.0-canary.2bd09a706.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2bd09a706.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7069c6dedd9d2423d175df2462d29477317fe393","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2bd09a706.0.tgz","fileCount":52,"integrity":"sha512-28TYr+32Ake8VfW9WpwtS6YFeuXPHO3UizEkuYM6kmKSNWSY08cxv4hIJMheq00iLXxLKUKyqx+9hKonTEvnog==","signatures":[{"sig":"MEUCIQCNDenkQTBupRoHMDdf6t3rovHUpm9SYpWKodamr+KqRAIgSvxV/NxszX9ENhB7zjIITMP6JVUuaG+vVT/86XIYti8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKi2fCRA9TVsSAnZWagAAv7gQAJMxrZ/Aekj139JoGGcX\nIb4vg9cd7z8EK4lIZ1zFYKb0NYN/PbNW+KenegoGtGNKpZkac+bl1XdM9TT9\n2rxXzfTw5kenh70c46SevgBJp8yI+KCB1thJZM2wPWBGiW/ArQY4YchCzKUk\nzNONzFRnphwTlH0ZiRTTfGwk1FaPAZ9swaKYSyX3rayaiM/nbFHbDFOYsB3M\nDvKdvMTFeGWrVghpeDjmhXMRYSSbnjqMV4jx3oB9lTV7RRd0wEPjzS40hbDy\nIhGAf2G3WqTvEnGcRTDOukn77e5Sh1eiohSUWxccy3VM8S0+joxTIOaTubVm\niRSIzFKGoNu42YkPM29hvrNf4W9KnTLFIbe8oAe+1ZzALkUCLUFm+9g2v5RY\nzhzv0zFmnJ5rIy5Rignqb1y7/aDdlKKVcKZ8TXdTMM/O7gwB3E7onzJcXCsB\ngau+OOItbnxOWhLObyH/bku9tpYJuNlq5F2sWQM2m6W3GTGhgTAmv+ySessg\n6jDYmBnNkgr6bjyZny+COVNnX/pIzyWq2fQNZBvzIPb1f/CI4g8NjUD0OaMB\nPVKx/8h7XxUGckYxD78JYDm8QEMi6snh/GbmltgR3QepW4pBOfpLbH81lUs/\nWP+cW+IJTNYEdyMo8Y9lT9m+bNFgotNgK1UxoN61RU6APBUuYazx2ohi62Aq\nCGOG\r\n=Avk5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2bd09a706.0","@material/tab":"8.0.0-canary.2bd09a706.0","@material/base":"8.0.0-canary.2bd09a706.0","@material/animation":"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/tab-scroller_8.0.0-canary.2bd09a706.0_1596599711534_0.7212997858181149","host":"s3://npm-registry-packages"}},"8.0.0-canary.e0560522f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e0560522f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a85fcb4e7f2701854e5c087ccb3660277edeca63","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e0560522f.0.tgz","fileCount":52,"integrity":"sha512-NEzO2bRzDVK6eDZDHv+q86kvo+V6GglK1Pk0lCW2r1UsX3ng3ejAiea5n/yZUwLf1ttPiuCRU0pFMEp25541fQ==","signatures":[{"sig":"MEUCIEOIa7Ia+1t6flAoC+VDTHmYlLYRJbex8ycVvCb4gcetAiEAo1zRVFCix18LYcJ9PRriyB2GFC3UlmDFmaSwzKX4oX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKuqDCRA9TVsSAnZWagAAky8P/2hVjTyo1ikfRQkJTK4v\nWM7nxR04cWkos4uIX4RRs5lQyKzSTjH/xZEPhJETsBxc/Q9i9p/9w0O0v7E6\nn2lb+vkbUibEVYO9sD7Q4QPR2wxVf6L2O0/A3d7fJ8pc1uHcn98AUaj13xs7\nGrH0IyXcr4QYcceWqQstWw+6N/soLqlawFyY8G9ziqblt+oSnxaOVBM7y+3y\nbd3wZM2hoSfuVoA+j2LgDWcWbxtMQJ8IZFbVeniPeHf2bTAvS92C5dIkRAnG\nMaWWFOCvgpShO48sw5XCX9ZXRVx6niIHzcno5lwXbFf/IcTTsX3lt72BgrfU\nauOQMyhRH4rUT5StIKrOooFeuPU7R5TTsZzpwp2ElFb01e0M8fJ8bSlDLFf1\nTxuaTXy37vvy1jlviMCWaXnKSQDenWPyULDXPpfku8P3ShbC67aarGVgXipg\nR42iBLW3Ba6a3NLQV9pJc4tXE+/ZzwGmsg24kwAK8RWII5Ws0iKrXlK/sHzM\nCF6RcWv0Y803SPY1pN/cPbfNaiqqhoftIMC7MvBrpdAaDkYrecqbvJudYutM\norOrWXUljeAHBajgysp2n/5J4rEC0Rd5tqrv6zRbQO98V3rySqM9dEmZPKwC\nF4vZjOHQk1ifanyd6OIYH1BIZUH4BpW/tlWn42Wpi9Mo5JzTlw5n8nhW6fWa\nRrDp\r\n=9cHK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e0560522f.0","@material/tab":"8.0.0-canary.e0560522f.0","@material/base":"8.0.0-canary.e0560522f.0","@material/animation":"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/tab-scroller_8.0.0-canary.e0560522f.0_1596648067507_0.487063234317898","host":"s3://npm-registry-packages"}},"8.0.0-canary.08ca4d0ec.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.08ca4d0ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b0787f75fb2b2b45116c3edbe7fb8c8b0f2dd6dc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.08ca4d0ec.0.tgz","fileCount":52,"integrity":"sha512-h8ZYrCqOQiaopeLAvJf2ej3FpK7qfmfzE/cbaCgIPCneOHuoRJKEuMGC/sqj5lptG7PnA0uzSCk6TSQx1pY91A==","signatures":[{"sig":"MEUCIQCU0lxCJWm0I9cgaXn0c+IkOiJZPTbHGon2V0CtLc742AIgICtH4NrgM33fQSYOjBfTfJ/g2bJdo61f3XzyI63fq00=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfKu8HCRA9TVsSAnZWagAA3lgP/jqrDv5WOQEeyRcbARZU\nkM+YbVZEXdwptR2sER8UIGrMh/0S6AiB2++bEHLQeZxfFXFhbpHyuMtA1R1r\nUMKYKLudaBQr19+J5/Safv4ly1EqpDYzwQ/l5BW/SUZe8SAah/Q2SFpK48x9\nr18TMMV9g7p2/o14zuxMHzFWFEuFrMxh147d18GMhpRpaU1SRVTbC7uE7njd\nJVK0aOavLg6EvaDBd46JjjYo5X2n7QGTaZQdvN6uvfsf7M9hx3VE4CoEDvlE\nXjZurrdr/aXLvwfguuKmcBqywaDT/9cNymLEnbTpwdqdOeiU1l7Du2ke50cL\n0ptPfSj4ku5H+eyLogfo7VlOtVEBtARiS4L378GvVemxUuFY1fYY9Wh+O0lt\nqnE/j4D2sU/mTrfN4pPWWfHDFLHyJn59ItLknWpKew4pKKogWGuye3lEfLkv\nPNgOP0GkPQAHBHBu0ch8LWKTW0onYCO/Bzt3mC2amPoEwGRw2dor45CDp8/B\nQaL5e65ah5myW2lblGL00afALdLiJSW9Cu9AOzGp8WjWDasjvxt47WhTL+3P\nHhl/UEYrRqmXnO2yH6wg2yTvQzKtou3Uz++yaOT6YOiFpgPVrUlLZs5rEdiR\nj2pcST+DUaXvnT1MfP9lkvX5Fmt3l+YQ/t3gBfHsakqvPMzr+SGcL2FAof9L\nQ1IH\r\n=WObs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08ca4d0ec.0","@material/tab":"8.0.0-canary.08ca4d0ec.0","@material/base":"8.0.0-canary.08ca4d0ec.0","@material/animation":"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/tab-scroller_8.0.0-canary.08ca4d0ec.0_1596649223469_0.2031296958761606","host":"s3://npm-registry-packages"}},"8.0.0-canary.08090126b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.08090126b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"00ab7aace2d5a037862ba308ade58e7ef4e0d2f5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.08090126b.0.tgz","fileCount":52,"integrity":"sha512-J3GABaadTYOQ3ybyuvmf3Wa6CMmpcYSHBTx5TbVv+hbQtQ3V898jEUdZqpW1OpXZ7XYW/sey3WWly8hVu/CWWA==","signatures":[{"sig":"MEYCIQCHKaiK5qUOERASmTPHboLdAgZqbXq7/p3t3qC1/fphZAIhAIavNHsdvzOs5XkyWoj/EDkqxgBSFoTpd7E1w87FFBwg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLFsTCRA9TVsSAnZWagAA6MQP+gPJhgKN5IkvN0a+NTgs\nwI3IRQshKjEuMNevSTzcolzJuh6GUCWdAiBAzk1jVikwb/BYc5OMvn8bWkWa\nzt2gRWTCkQZMDZ2QLNB+IqM4PvvsLF/LmcEjCZLXQMwxXRruQp+7OiG6qYDL\nDn9RbrRnqq099xPWGS+LYi08B8jgJFJnKKOgkndsAHl2D0Q65CqDlXxPQOs4\ngkgLIzKckr4vvvaBuAiP5614GPjgdI7ogkc8EOHgZtheSC8fQgCcOadrMDYB\nrJ+OhRJ2tWoZSEZ5yVCLkuLB6aPw8UOZi7bzPFyHHUMsmOp3zzme/q3GX2Xi\n4IoCaCSftKijmH2aWKJiW+ZYF1fRIOmnDpuAP6XZp/fNgi6f4JCSueo5Gfmn\nKGqCYDMOjEW6D3KDvBwyen4eRUGZpTeXIoHH9GnZ4yHjxPdME9FdyQD23raj\naP2uKlG1XZtMzmfxFuCn3OP8fpMEE66Jcq34sTftzsU0x7WlKbqDUSchoH49\nHf6kfqJKcFpgDvn97sFqBxefztWZ9kE0KqYSs7q9nn1D4arXZfB93Ih5auAv\nX+YyBvSy4vW01KseehhUzVA5We9FrrSIGof6Hx2vJnIe2QfIDqQpVjZfq9xQ\nSXzkKITB6Pq0qEb0f21uT6bkwEp3Z5XphuJ+lx6B6uh8LtpOmdGIx1L5Ueaa\n8jhk\r\n=0hiU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.08090126b.0","@material/tab":"8.0.0-canary.08090126b.0","@material/base":"8.0.0-canary.08090126b.0","@material/animation":"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/tab-scroller_8.0.0-canary.08090126b.0_1596742418696_0.18297243379881056","host":"s3://npm-registry-packages"}},"8.0.0-canary.e8bf5b2ac.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e8bf5b2ac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"649db5ee228f0fcd830661906425b77ccb7be2dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e8bf5b2ac.0.tgz","fileCount":52,"integrity":"sha512-EZFNc2xk04jhZbQSjNtaxhBJIN0vwDwFTyXVHxNCKmnlB+5Auv/0E+WYjBwYvOfzutPLRaNR8GvlLi8mjMwqng==","signatures":[{"sig":"MEQCICDefvtoW6Zo0LQEn+kaAlNBP8FCVhe4uU9HPk5pAqZhAiAbi69l5Io1KWwCTXiMUJVUJ8fU4bLWAJaKreM+rcouMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLHtJCRA9TVsSAnZWagAAxrwP/RQheUlLk7jRnB57xoPy\nzGJLLRbUMaCuPVzbFyO2hQPCRGGJYGJqy6z7AnUASaS2XnauewuV4kaupGYk\nhW17n3ip5rGQhP8Z3kdpnZ7snlA1mRv6aEGtHp5UubffiBdAL2Q7DmI33582\nU3vk+8CbsHOu48GuFgrSBROgFB4zneRBCe2kA9/ldqj47eg3BWycgzuiA/a4\nnYSl1UDiW/cABfNFT4PF2agvr6HUpnlU42vxB0/4mqAgtfyDbbsbDptd15Xu\nyP7kcv81954Vp+FGZDWAEAwKVgU7DitUjrVV01bKmRhv/D6Tt73d3YLN97sr\nKSwFJ1waEWvyRK75PJBSTBFzxw0do3iQP4Euq6UjqTuigK2xciXg5xtodCr4\n7+cyXPfJiQKqh135/KqfCkbG8WqSPBIecgESQzULHM7qZ17/5IFzhFy0nAXi\nkUa60WWHGxUca+PGdHtmodpEWr2ophNr8rMUhEV8iwhBbRJ3fltrIIitKhh5\n/N3ptB2xlpfSaJjVIuNQJAo1XmQJCjl372GNlqabmaZDxwLl1lloi2bCWgX6\nLr2N5f7XtYgATQ+cBMlSG3ukhNt6AiX1fyrvstd6bvRSMGhHpZQOW4uqYlrp\nJXlL9sdZgVN7Qlf8lcwoAlTViXqOFY9IlORW6pgu3qS1lxRaxCxZloKwh7sk\ncY5/\r\n=NZfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e8bf5b2ac.0","@material/tab":"8.0.0-canary.e8bf5b2ac.0","@material/base":"8.0.0-canary.e8bf5b2ac.0","@material/animation":"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/tab-scroller_8.0.0-canary.e8bf5b2ac.0_1596750664886_0.49419413174525206","host":"s3://npm-registry-packages"}},"8.0.0-canary.e3b746208.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e3b746208.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e942aa78872f6670f5b2a5d5f21ecbd76a359410","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e3b746208.0.tgz","fileCount":52,"integrity":"sha512-HsRzENcCjS5VKHMNvakYfY0i2ZNLshwg+4sCANmqe0R+OUlsiCRK0mbk90fQKYMHoTTZLJlvK5+ayGN8BtadvQ==","signatures":[{"sig":"MEQCIFGuCB8C2GIRDs45A/SMU7IfgwWFCCPFwq0E7y5lgDtVAiAgBIWlfzF8v2OkhKpYJU1trfYbGaFZ20Ez6lwXFxcv/w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIPlCRA9TVsSAnZWagAAq48P+gLkpFAzseXR35yuEipi\nVCt7fd3/bAOl75aZb/yJll0BtxfAXXQmKxPKtrddJBar/lnFJ0YwSt4HbjEl\nqmMHXhBz5Bknf0JIHmvOnuurNJf5ctgyh5QF1REVXrfx/xNdMDUPUzt6gRE6\ncFAXhSrhSlFWg2PINkM7wKn9Fa4M9moEf+kziuL9G+p9qI80c2jGOYY/2aoG\n5/ltZ9IyDimgsJ2w/37lrYm1xG42u1a3kjiz6uyc/Yd31JNet5FdmdfABeyn\n6PA7Tsrx8sbvveemWR7l0LmFHwTnCdtc/OBWNSiTpSJmaY1WVEJ3Rw+Ln5Lk\nZtrh1G7Dksv4BwMzXNiYFop+sttSUCcEfZ45TR6lUXeyTIDbBn9nzTf9t42o\nVv3TeVZ+CZwp4Uhzp1WCMzWYgS100IZkq9GjIL2DMGTAwEd2r5tHkmp+qFav\n2WdanwXkh+spHsYh2UGTTK4LxR7LWtAQX3aIDivwcrpJUp/pvjgK5XHWnqlv\nXbuBPp75HIFEOQxhTgjBvL24xRPoKsx3xHOwUEH8m2PIzexoQKizSdog4u0f\ncMhrCt4xz0vqZjr4y1HtXMSlNYJ7GG29dyCJe49XKSX654tPRbUPSGF2s05Y\nrvYPRcDOdUCa+iSM4oimP5tAeGUX2J5LCckFVBw0wi0S3Doj1v8r/BtJyTM1\nPzCb\r\n=B9hK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e3b746208.0","@material/tab":"8.0.0-canary.e3b746208.0","@material/base":"8.0.0-canary.e3b746208.0","@material/animation":"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/tab-scroller_8.0.0-canary.e3b746208.0_1596752868617_0.4792252603094811","host":"s3://npm-registry-packages"}},"8.0.0-canary.96a640534.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.96a640534.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"90caec9d0fc5d28e17b44b250e18e202d1dd1663","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.96a640534.0.tgz","fileCount":52,"integrity":"sha512-WLlLCxvvS+F+AI7AsFZFkIbLGhs73ujKiNw5v+Rd5+LeoWT4ssKjUrRnx7a45qdiojw/XXc9SJ20zfQfWfi1Ng==","signatures":[{"sig":"MEUCIQC830uFG1K+AY2ze3tIyQDx6sF10gfwGsSGMhpX3aquyQIgbkUvFlsAr/BhnyzH+rM7pqD+jAgvBBmHKRfOUI7cC1A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLIdYCRA9TVsSAnZWagAAK70P/A/Soj6yuA3VlPQhwsph\n60LeBxKzdFxtK9y2RuWxexsANsQop2kEoa0ciZIUkF1eR3MguBLnPP6+Rely\n44klyDXWlAttDjkLyiEAAakS57jfcKf432HEgZ3jqcZ2mH+uwrEpWmMzB4qZ\nuIyj5YgXKvdnsy5eMaml6zGtPJD14ly6r04469KztNUlIqSC07uuu1pqCjZp\nE6D7PuPzH7FhvtZAQZYzjC3cns9ubi7kaPTBbhddUN9tszm++QyPkHo+PDsz\nXSOeHNQTscHCKzy2Fjk7HIGUFonUDzpwLMu833kMSnUjrTFNQxeH7xL/GFLW\ndICatNK45vIjr7B0y4XcadFoC+xLaT9EGnhykoUWv0Vd65IiAM0hjCj23Zh3\nWs2W5smjy8FBJQ18UAE9PsUJgnNU6fbbDDAoxAyMLXK/8DIWyUtlBJZRGkBZ\n/+S53aQLx4HTkKX8zGZX86r/IdHIC0jvnDP0Yil8Zkk0nu2d3sk5qvTXyelf\n8ynqqlaioVIp3/zURarTBXEAFEjN5B8mdfEn09cEbqVFx1Nne661JYjuXqY4\nX4n4kojTOIzA3TUi6EQOzTWWH1DJwxNOmf2hmeRLh0iyTrwld7/5303x2DNm\nCGrsN7FjQpluzu4aauNUOAdv/XHm27LtBQlLBEwNe5GSkAwxp/R8vE12GqWh\nwJ8S\r\n=tdLh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.96a640534.0","@material/tab":"8.0.0-canary.96a640534.0","@material/base":"8.0.0-canary.96a640534.0","@material/animation":"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/tab-scroller_8.0.0-canary.96a640534.0_1596753752146_0.5578055836420854","host":"s3://npm-registry-packages"}},"8.0.0-canary.9f9aac825.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.9f9aac825.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63741fc0971d53771dfc2309fa81032cc1df6046","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.9f9aac825.0.tgz","fileCount":52,"integrity":"sha512-/Vtd0Wc8CLvrPF05ZFr15xdLQV0xD45i6n9zwKBkPPWDyOQPqOJjLd9aR7hx5LE6HE6uxXi0I/TRZmXAENfm9A==","signatures":[{"sig":"MEUCIAh/jZBxA7aJFGC10CSLwdlTHNl9zUJfGMGw6ZeBzR7YAiEApL08VNUilNNjxxsfPCN3N+SHJte3RLRi7up2qyK4LoI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfLb8ICRA9TVsSAnZWagAA3RUQAIszDmChJCyPYvindiCU\n6pnBxc1ofVnQo17mBiQZceUE3uBwXvWJJ4PG5gFaC75ZNzZzHBRHwWK37+3/\nz+9B1tSvQDYBPhRWKwYa9ITBHW0tH3nJ+QfSyG3MMAD92srlUMAU1Ap3D/zM\nEMxG2xFYqfUArNiaUMLpg1sBHzj0WGu59ZSJIBqo+Y+kem9PA8StSz6dLGao\nsJF+TOjjf9cnVvTX60XKJC7N+7kW0rK24EvkeQIqYpy640MRfAciFeEpLdS3\n50JbDNKb1PKFAakONrUiY7L8i5GfW0q12pdzPizd8slbYpG5R+1FzTJZF87t\ntURPe12ZKu7hLK1UMpX37bo6fPum+9dCXLM0eGHnTMnqrhY4wOT3aHqSerIs\nEWUCPLkpbLLVa0ZZjl1ZZij4Y1AycX3Rl/qWSjLG2nu9DaHmpZG4Jkvw6dXl\nC175FuPp29MCI5qn3WRWZQimAGvJpBqm31sFpXcMkTCWejj2XEyLrJzX1Fzx\nOBgYWl8gdJo/j9PJUnIcZD8Gi480v4aCOiC8P88vasdDv/lxs/1nzMso/l2v\n7TmLbCc9i/bBaJ1OWRvMhubQ3Jd5EMjIycw1R9pt3xK6GKafAkpplbOnrR8u\nH2HRXTQ7iRRayVJS16eC/bvfInf/TNxTf+L3SteeMf07aPwx3kPbW2qe2l7z\niBIx\r\n=93WD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.9f9aac825.0","@material/tab":"8.0.0-canary.9f9aac825.0","@material/base":"8.0.0-canary.9f9aac825.0","@material/animation":"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/tab-scroller_8.0.0-canary.9f9aac825.0_1596833543718_0.8944299994299316","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc65fd00b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fc65fd00b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f352374ab35ee97bc81cd70683de157703c6874e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fc65fd00b.0.tgz","fileCount":52,"integrity":"sha512-Hk27TDhD/hz2cqSd9aBCuN5MFn5cxW3aZvwiMrEsIwcbt1NMHMoMfDc+kV7F3/CFDEeK4rj9mLnmquN6B5bmog==","signatures":[{"sig":"MEUCIQD62afqtUhfY+dO8iffLJuf5ko7GoVz6Bk0X6Xu+ZmPhgIgeMfCoAfvmjULVwr4WmB78eKY2eLco642v2AKncILFak=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWYbCRA9TVsSAnZWagAAAagQAIgM1rIGhNEC9lj2reMq\noZLVIe2hDI/TNvucyBzucJl4+Mlv3eyU7Lg6v+uf6QGNdi8UI5Uaik9Wm1ig\nGWLbOY6M9syRb0pACw5qov+6agH8/PJVjGAZbNUA92aRmfVrK//27pRqepFU\nEnE7nxEysyMnbsPsPb3lFRV7v4Y8T6eHNPuZt9LvmiITWsoZPV6eevIACP9G\nh1IpNvuJuPqB4W8ENAL5EXSeO4RFcrC2rBJyFStfQGdHCQWGp/iJvYBZqFtC\na/ElFon8xOYkEd6IunU5XJOR4cykHVjRALoRoZdLXCPX/6DXtEwgFZJq4A+O\nPoouit3VCRS72A481o7CUaXD1Y2cNY75uy9DtjcazgBQD/v8L3UKZXNkfsMR\nbv7t/edQ+2hgzZdWq+8+nwRQaxgD7GbaqZRlhzS3mKioVQ59TIvEySuvGBG3\n6ENRDCRr65w+oj9Y90+2HLIuUUo6n/3bn9JkFsDtlNW7u4UkRLOLijDbk6Bt\nBFVKh4U1UCJAA+L30pvp2JYced9vsX1UYN22axcbXJhb1IyfHUws64vo+oHW\neknOLhgqYVY09NsN95269Ir6+F+ipRv80GQGkWTMw12DNL5GaVl7mEpU43JL\nKe3C7auEba3hqt+zprPmkm/Ul7w3pWquQivv05XIsR8T5JJ3Ep13zjU4zbAL\nCYBE\r\n=QsI8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc65fd00b.0","@material/tab":"8.0.0-canary.fc65fd00b.0","@material/base":"8.0.0-canary.fc65fd00b.0","@material/animation":"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/tab-scroller_8.0.0-canary.fc65fd00b.0_1597072923148_0.1976439848116487","host":"s3://npm-registry-packages"}},"8.0.0-canary.02e372c5f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.02e372c5f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b134f543378249b6d4cdd50a4dd72a2f707253b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.02e372c5f.0.tgz","fileCount":52,"integrity":"sha512-hoCOAd5rxUMfjA6cpyZzu1+X3vN7/m/GBQQzmeyRzanwg1K6295da77X7klQbb5CFqaBJWAK60itkia62h03KQ==","signatures":[{"sig":"MEQCIEexf4T5GvybeI96wjQd1G0KkmMhlrdYOU/X+qgR2oOSAiBAlH2b+Wku9IhVbw6Yc9o9hzGVTlwZ9yoPdzqrQodzzg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMWyZCRA9TVsSAnZWagAApn0P/16ZRTzQ3+H2P95Sz5D+\ntJOroin6V4nborD3Iw09FIvxopvR7ZtwOiRfhhMGt8a4dHaZO24pvFR51/tq\nlI2t1yNI/aHeKAE2qMzwZ+429jjjJmaBH9HFgN1M/L2FhfRfTYBC4dC/wFlB\nPUGqtSguUagToqdyAwvWiL4zUxGqZsKn8q/SrJE/KtUbMIIs+V0/R1WeNknc\n6+k8GNmgJIlKD6MqtXy2GQ4zLNctuLfvPmWYAokFmWodwFk+tf5m1fvTp8zK\ngC/Q7RfACVMRvW05Ob9+I2alLrzsCnBujT5PJEEDrfpKPYYPuCBnoWZxaRzw\nvSRxDhimhrPS7a9yB+uWpRGhNpNNqLjEfx44jsfBEEqNp2wTW8LH7tian92p\nZqxTudX9U1oVpXC17SSaeqruCwy9wekp9s3K3L11DU1XkFXJysWY5LSkkGpL\nEu4xsT8wo37+jfi1fStdinLLs+OphkHUt1mfIO4t4vj8hawcFaUVeaM0ByOB\nbUoXaT2EUylNyFggr3TWKfr2jdlx2OsKiVdK8mSvCR+jrHsIp0z0hiMvyLAw\nFp6rIgyp/D/AgAnx0X4cuZx8pZJyEvOWty50z94RrwEHFGye0T0Pd1WfXYAI\n07ySOr1jcvo0iTG5Pe/6AQ/LM11/UOU8A81E60gjiZtfLPdbOSI7vT0M1eAY\now/L\r\n=ZaMY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.02e372c5f.0","@material/tab":"8.0.0-canary.02e372c5f.0","@material/base":"8.0.0-canary.02e372c5f.0","@material/animation":"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/tab-scroller_8.0.0-canary.02e372c5f.0_1597074584779_0.566228116658406","host":"s3://npm-registry-packages"}},"8.0.0-canary.66669e3b6.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.66669e3b6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c6bd37e37323b7f7de41a490f230dce273e8f19d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.66669e3b6.0.tgz","fileCount":52,"integrity":"sha512-uDuTjxid+ZWeozRsKVk2mXll4ICE64DNBwpuuihli+4S7VkO/UkAgzfoZa4z0SdEtQcRhk6Kuql8HpoCCs/Abg==","signatures":[{"sig":"MEUCIQDTXqTAfoWOa1Gg3e9DbEP99nGVRUPeXvGO/eETF2MCgwIgfg0UGFBhNABtMhqaOv2VcAKQMQkFFOZjj25Gx7IfTRU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMW2HCRA9TVsSAnZWagAAyDYP/ApV0GYNcc6DEHRl+dzK\nu9zfMuU5b8rROFBssV0+nCRKEQBcZC5M8iybd3GDxAzeS0e84uO1saaKQZfo\ndU8pAIt8ja+kGOZI50bp8YpZKg2Smf64qGQ38MMNMnXHVWHMV5RgJhP47kfl\nQbDneTOyplAkPlyZUrfVxT3uLA7bKkC9pHAIdQqt+ioQYbRcdH7Z29Y7m3jD\nW/1duMlpuZye1+24073wjYakKtGf0Ol+mvld8gs/y+s5NgAxY673+pAPESJ6\ncn3kBeKB+zY1UKBRvlG3OOK37rGxSSHnmKY6gbIehiNXBk/rewNPfGcmoKat\nYmlqz5q87+xUGJR8G1TEu1Dz2FGeZsRFqXUUJ5MZU95GDkW/a7mibgODvOHO\nImQ16mjW93UotBdMpgZCmRX5oZFD7XjIxO70CSYxRKxYzraFrIGvC67UXjxp\nlK2YQzt0/o895p+hXyZwoSOb8gRz8wyApeyLYQMgxFp9lM+kSD0Jq5n+gUMS\nP0vXISduzv8JR8fqBJKsG0SsRD+lZPsXFo90zvWXb7+UAc7W8xQtQdwUFeVQ\narAiOVIPf8GVSOljslAhIij80iJ9CJDmR5eFf5x/+4EY3C+NsIG6Ftm+/ECt\npCpV8W0PTgcOF6hSkiQu1SJfPHtapcHag+PohS0C1eeVcnUqOWsdfQY4Tr6t\nQkCs\r\n=EXxL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66669e3b6.0","@material/tab":"8.0.0-canary.66669e3b6.0","@material/base":"8.0.0-canary.66669e3b6.0","@material/animation":"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/tab-scroller_8.0.0-canary.66669e3b6.0_1597074822826_0.58675184813308","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d1ea9761.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.6d1ea9761.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d5620de978b05a0dd30c7f7363175dd91d474286","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.6d1ea9761.0.tgz","fileCount":52,"integrity":"sha512-5m6FsMkph4lT6magUO6vH6svTZ9NEaZxSVJNl4F7l6ofUIXvbKn+QGJAIoIQi1xAHzzf/4vbjs+mziBla0tW+Q==","signatures":[{"sig":"MEYCIQDzECPI37hkumbj9/SN2tCIeiaSXXnj78l5+My4RVHclQIhAOacLDDu113TO6MdeJC6qipDonxddIomzvkzB4aOYxq4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMqvYCRA9TVsSAnZWagAAz4gP/ic9nx3hb9J2tYqh/8Ho\nwKa1EqkAOVEUAhMifflyEHSK8AYGcZB42UR7lrwcVt5GwNLQjXGqaRqjnwEn\nQH+aYRr60I06cu0mAfpfJXLL+N5DyZNWTwyI3rZr9upJlscVU/k4Ppo1LX8j\nLBLCO/cjHREs1KL5xBaTwldU40S6au92g7TON3jyG18TS9MmQUzN5qnYbK5x\nkC1PW9U/mhCC/3u9+aCIVe6VKZln2HMIpezOx9reVBynEcw/qbEu/9s/6qLA\nEFeuTwFSkqJk6jlqHdF288/WmpOfuLqBRM+wSt7o4I4SBo6Mi3pHPM7bEfAg\nOQWL86szFa9/O9OXOdAn07nwT3qStdJxU9cIik49v15JdAVPldS6q0esZt/q\nTuvC2uUcNXSPg5C8VGm0OXZ+6+Re5FolQPSxFQ1OlnIXIH8JCV+rM9+ZaJ6o\nVLGdWhY2LBP+4z/n4ZyHtzi3/eINXdbpKVHH2Qqej3gmZYtXPIWBf5sotS2n\nFoKXrCo3/JywRaNS1wv2TzdxAwuUCZ65EOxLr30h3sOHrqux7f10MhSD2bjM\nRrjyzzXNG9/llG2/qDTKi7BAbf57L4P/Feb07Z4H/2YI6prLdLUZ00sZF12Y\ntVLM2VgAFCq41RnQfv2AgkBx8VKd8vXNixZw/9svuPho/zcMhxFvwelerlYF\nG8VG\r\n=yLVO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d1ea9761.0","@material/tab":"8.0.0-canary.6d1ea9761.0","@material/base":"8.0.0-canary.6d1ea9761.0","@material/animation":"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/tab-scroller_8.0.0-canary.6d1ea9761.0_1597156312353_0.3285021745258403","host":"s3://npm-registry-packages"}},"8.0.0-canary.79414bf9f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.79414bf9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f953db13e4799d0a06af941d12ee5ffe4adc8f05","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.79414bf9f.0.tgz","fileCount":52,"integrity":"sha512-3w2NR8SKjMSlXzpeddeS8lF1HUbUICb0DThvJA2kCwbsOMNw3stAaB7D0BzLORO8WV2n68xCCjZvfkkICafFuA==","signatures":[{"sig":"MEYCIQCshU0fnjFN3/XuvCvT/sZp110nmsFukY8F698Y5R8hbgIhAMDepjoNnNt8db78c8mepT2pbIbxFJhk4fo4wl1KYmWt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMutnCRA9TVsSAnZWagAAAZ8P/i3AYJq82xWRfCHpeFO0\njCdQSJQXIhkJmF5vEHc7H+lomLMYT743ku7hMzgRnhwFiylos4YiMqwIFsmY\nBewE4LZKU3ZfcxW6L70ZjisNAnYPYwxY8ThcovYT6pUu5ea/gtH6pQvCVkzv\nVqgKE1kjhiXow0MgDRKwOIHTqj3DUlb9g3MOQbxQlGnv58tY+3dGkf5k1OtZ\nBBEvBeU4hfNSaqO2QxdK5BZg/9HYkv7N+FDjPgeTHfF4vKDyJyHPSizEieoh\nk4Im+yBDM5hhszASDOVPm5CQoSrEq8wVi3hEigZL8Lt14EJnFIPQFrtyLb2g\nzdi7LcXOmZTpcFvTOxck1fTM2B1ZtbIbmX3kH2BeVcMiQF5nwhugJVadfGQD\ncAOryX7R7vTD+l+cLvu7MyTvbgpPiRs6Dizzg7IjMbPzYLpC0qY0RCORjB+p\nF5fx99+Hl78mi5Hymi6BvR3KFhS+OlmAsGaKKyBymPW0hoNr+89hjAesROhL\n53pozQhvdljKiauh+zyrMEd38/A/CHZP3KDF90fLoXg++qtZ4QYcdd6tvJaV\nvWQuRZ6p0S8tDnWZWlobUVrz5mp4f62OLmTNk2hKN/D1zRKFzum7B9oImnyI\njeWJDjTtLkeygM6w4Po2r7/aenfVZmE/jvsH/sQYlmeYpgVeidvX2oeErFu6\n1b5n\r\n=yM0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.79414bf9f.0","@material/tab":"8.0.0-canary.79414bf9f.0","@material/base":"8.0.0-canary.79414bf9f.0","@material/animation":"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/tab-scroller_8.0.0-canary.79414bf9f.0_1597172582525_0.6892086353582736","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a5272df.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.85a5272df.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f91f404c2036f3ef6d67b130244e2c80e01a60c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.85a5272df.0.tgz","fileCount":52,"integrity":"sha512-djV3Ss1V0I328F0Ve0wdPBDM4taGypItgpBY3u3tOuJ1YOxoZJOUBBksfF6ff3EJvIiV0okcYdzowkiXmPgGpw==","signatures":[{"sig":"MEUCIQC3re37LPr/7oKiAt4mRQux6WG5RvqQvRw4zJWycUboJQIgHxcJACVVwq+llmdRF+7WMdE4w8UYYahzLvJD+elkAIo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfMvrrCRA9TVsSAnZWagAAAJYQAIRZe4BpyVIYErzNqrP/\nxOCpN8YMoU1JWkwS92xJSWiaQQcM4EzPy+mdkYRpuLVF91vFdexqZJXSsss+\nruBt+/dLa9RMoUri7c9sFFEE/5fdAL/koT2fBv8bXKUGTCds9z1Bfbr0U6P+\nCABGEmuk62aShNCiUPe6rPPRA80Xjh2N2nVjO6ux1n1r+mlFxLdWjnpZWsUG\nmZpUNsbADmOSG5X1/njauOYOcVt6pR4GzLv1rGjpR7X1s56y/cqiupWpQvLC\nCbRkdQ55Eeidd0gt9TyHHsjQzx6TvcMwybcKwfyQYLfVMmXuKL3kYQAZ3262\nmwdI8RmkgTcwnurvryGpahePZB6A1t+WYzOVr8CahVI5PxxorpVqV0KYwvNe\n/5CSG0C8mbdpDUnDGMMksmeZIxP3L9PDr7i+k3ZoV/X+/QoSNxJ2Ybg3ubik\ntm8TXh/ViQtN2TM8l5sq6rMqKJtI1Qoqjxm5xcBN2Ig5avvElRXLpArYwGdt\nE+agx5VPbtWdpIw4SxYU1AFwsdppUGGUkSpS5h2J0Z8jMMHZ4ltCjSmI4QSK\nYeygU7eVA1wc4T3FjUPh21+qTJvu2mfh4qKYMtkpZ3LvwsFIRkiefrnOV9N6\n9Z6xBMMx9NmzX9lslU9cB9QJhdY7D8VeQLzmPZT4WCkMLV6DYtJLzgPEzbTt\nbH6Z\r\n=u9aM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a5272df.0","@material/tab":"8.0.0-canary.85a5272df.0","@material/base":"8.0.0-canary.85a5272df.0","@material/animation":"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/tab-scroller_8.0.0-canary.85a5272df.0_1597176555104_0.3953500734893507","host":"s3://npm-registry-packages"}},"8.0.0-canary.fda053eb8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fda053eb8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"537d936f1be876214b18b320b8fc8cf7787bc653","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fda053eb8.0.tgz","fileCount":52,"integrity":"sha512-yEmLm6e/9+6PExyAK3UloOMLPE00Drj6RkdL1zqnjsoPPBvGFC5oKz1Dim3FvZ6E0LgFQYHh3hSScS2u3ZkREA==","signatures":[{"sig":"MEUCIB0T3CDINnGCUXVgthnNcruYNoo/jpOoxCFpc5bE/SxyAiEAyeo/XlLSikflPDNfmkE7mZ9eMNo39r203KR8MMmns9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNEt7CRA9TVsSAnZWagAAcU0P/izGpDFOP0yKxtv0+KVC\nwte7yj3fu93Na20p3a7RFCUcQtBZ/WrQfCrsJjfP/YqwVz700Pn1Ye2pc9aJ\nFwT+3OK4SmsucH9Z0BChGKD27DDlqK6Fk4PkA7cSXWdv3pevsS3UoQjPErnm\nWhv6DGlEgXRup8aMnWRWv9vivwY0CDvnl5H8pBuPZm1frngczDRwt150aCiq\ntIUEJdAuOfDJCjzbRnP8q6mSQ1k+KlUBbmuODouwDBfFVtrBhwY0vbfL4S3i\nUICAC1ds1aZOT1m4ViCpVSis8E4If+6o3IEA8IIcSJg8UkWxCE3z7Npz/AtG\n8E9uM6y164G4MsD7peKFE5nQryNQ4+yaEzK2HhH1t4BcCD/J9HcrzegGKNKu\nqOXX4aCemWQf+gtRQgJoLd1fpA2DxIuJk1xLICr4vQpiftuu22b70nqG6ycQ\nCixVRiwzEps3eoucoYeDx6DFTPFxmFFNXVJyiZfRtSp7/yiPJuAab31Ag9Yw\nwtuYr1OAHK28KGhDZAwrLYCb3YruYnNfMBRitOeeEQ3j0VbKsh2K0Fc6xk12\nA2Wr9rHiYgMEgmINEVGnRQV2OuX+S63JN/O3OU56VU7iboO3VejxZSoKV2Vp\nf8hJC5v17RoAA8z9bq94HOzsIudizrgLAYblxUX1mkFDB/L9c+OT/wQXN+LY\n7zjS\r\n=AVqv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fda053eb8.0","@material/tab":"8.0.0-canary.fda053eb8.0","@material/base":"8.0.0-canary.fda053eb8.0","@material/animation":"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/tab-scroller_8.0.0-canary.fda053eb8.0_1597262715077_0.031183254598219134","host":"s3://npm-registry-packages"}},"8.0.0-canary.760873445.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.760873445.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0e32207e4a5ded8837b9f03f26e61c7afce49b41","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.760873445.0.tgz","fileCount":52,"integrity":"sha512-kwItocm7NKYvtuMeuR1o0lNUB8vqGqdTXTiNfwTRQxLNIIPgy9ujr3ZcqZvQrw8E5ocqH8C6gO+BN1leSLyMMw==","signatures":[{"sig":"MEQCIFV5px0CIAF7b/YQGD1dlbsRKqreMveo79SavgM1Tr2MAiAA9b5P2+S7RxI+2wZSzGtU++FCa7HPVP+3tMn7DBQ2iA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGKvCRA9TVsSAnZWagAAFc8QAIE8kfRHHeXOD5H3WIX5\ntpVMgkesnTIVP7a4WolWvDBUIX95Tt2uCtdsVBSK68stly+VKDjLgRoRdZ6x\nPlaFjOi7XxNEDctvOe7dMdlRlfv/EFjq7/8/eu0/r2uO/R9EW8K5SWGazvbp\n9yVt4NoxajP//E7ySBs3UagpmWcJ4RCKsnIx6y0133CKyd2uBrTL+YhEnn+n\nVV+z/8WpzDyHTuToL2Yw6d8xSGfYx+kgGzb3TSUQw2quGtAn53ItY/Shj2QK\nRN4jcup6lbAYvzrQ8Whb4NIm+i+BPZE0OMPK0xBmhjBZBxWv58BW8RVdoFX3\nib1mHV34VNn4w3vyASaCxwmaG6OFx1eR5em778yi6KOF6aOTfPvJfxyq0FXt\nDaa7p6N3NtaZkd60JnAzdejVDm3+y4WYKhTtl7mLR+UJeHRbmUsVR4fC2aCx\nEygRAN4EhX25Mvm8Rr313v5P2CKfkZ1oo82PEOs4FLqtEJ7r00blRjz/9GAJ\nuSM19zYSg34ECpdKUqC64ed3SpISIfmZOh6FqezRuOeEICEfL9WvacE05IQr\nVKRFEu3uZLi13fRX4/OhOR/lXPJ2FLrd+4heZLcHSfrSkuHq+8fHGKyNCTKF\niiYHU76paJQ1DttCClm0qmVxQMkVW3aUvaeAXxyq7vo5sWHTW0RvUOW5JTyy\nJ3Pp\r\n=PK4f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.760873445.0","@material/tab":"8.0.0-canary.760873445.0","@material/base":"8.0.0-canary.760873445.0","@material/animation":"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/tab-scroller_8.0.0-canary.760873445.0_1597268655416_0.8899089291450755","host":"s3://npm-registry-packages"}},"8.0.0-canary.2f4711a30.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2f4711a30.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"562b793313eaf29d5b196c440b01044fe3ee4c74","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2f4711a30.0.tgz","fileCount":52,"integrity":"sha512-NSVJsVRRhFplFVQORZ/yVtosxf3+XlUZVQyDhgrSSY2528tJfwTs/ma4ZOeTyEOynR2InwDMRkbPAirI2PK3Cg==","signatures":[{"sig":"MEUCIQDSZQiOCYwv3Ztg+QLnDBqHyImlW5npVnOCtA0P/y2SBQIgBld/w0B+vfyqAiXqN0kRjP4BrSlFqMhlt8GYPVvsQCQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGUKCRA9TVsSAnZWagAA8wYP+QFV+B5qpBzlx9vN+3qr\nISCMTFRKEdKvAhb6HE6oYbfxLw5rkRTDdIsDB6RZbWE4tJC+miHWsffFAR5i\nca5Ty37JYEF/PueeLvW8aiU/Spk8YGOEVT2EsE6xCCGMOHlRzOXlFcpo4nXP\nfqKhq5zMsO3q8mruYh6WHAfufGyMGYrrEXZ/jqtynf1jSZk8JnfFYCFM+ejq\nFCN7Hmn4mhgN47iyW24C/sG/EFsIwYU5B+YYKJY0YB21k7kIBVSlyR9KVc+2\nlXfCSR39Rt1lw752dLaCPmlza0IDM+N+hMZTdL3c7O+5Lc7+v3g4vKMG2BvS\nkvfGpjf9mWSnWg9cNqE37/i0PMRyzrp2J9iNQlR2VqbZqmjjI3M/cZkOgxv/\neIR3TBMbLXSubMPrxQixyvzvs63rxu+7wTFKfFsvrEHsI9LuyguHsU9/FR/f\nFkodJf1ULxhDsmCFdfuTAPF20EGvIDKqxrsr+tMAipANwIMrRHLFheAftakE\nxTRxzU7UaUl6RsfvSWsoU7YhlNyxm8OU3RXEU77QyBptF8BMmc70xx/CyKfA\nuOWXOl8477NkrPAH10rgwHyLcU30N8tRYKofiwnBam04saOZ/1layWVDZMim\nKd8IDhMbzOm5Km804O5oeMDzxQcPCYG7jpH/NZalOJWvuZgfVB4mzCzMcO0D\nWqv0\r\n=bRwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2f4711a30.0","@material/tab":"8.0.0-canary.2f4711a30.0","@material/base":"8.0.0-canary.2f4711a30.0","@material/animation":"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/tab-scroller_8.0.0-canary.2f4711a30.0_1597269257885_0.945261463107022","host":"s3://npm-registry-packages"}},"8.0.0-canary.2d72f3659.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2d72f3659.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"499aa5017ecc5b6e0a21ff9d225db60afa45f05d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2d72f3659.0.tgz","fileCount":52,"integrity":"sha512-KzpUo9bJbcM6qliS9SweyIbJWulCjT8sQRmnKmYAujNrqPYSV7wcGVi8hf2GHbb9tiDWatBQbfrILBITkZM/Bw==","signatures":[{"sig":"MEYCIQD9jlUCdq1uChehSjY6xZzObSHiS/8tIH9ZyGQ0VGh7agIhAISStrDuYjapJsqpNF9ztrRq6vKTRThuD2v02XUw8I8G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNGbNCRA9TVsSAnZWagAA914P/izvEcTdXnkZO/jM8rrz\nJDC8ImCYp810zpNyHdYeqrpHeNBC5p8+ikKlGKAJmwOit0fqWkQwRsar7jUX\nIxQliwqx/1zfIbWQDiS2BoBARzhZAPSqJuS/HNTayP/yKiWuO72Ofpl5AAlq\nfpUrxZv1VEFyUK8Twhlimn+P7n712BDd8klwJdRvKiwUv3RhrreR2paT4+ZR\n6iAJzxcKK5HK2FyIrqmHOHhHh7j2/FoWCoaD9YP9fbuTE5uXy3rdaOVM/wde\nxM0WQ4zlS87EYmxwefEB/qHZb75A3rdI7tZmcf74WYV3I3so70RVk6XLDNZj\nqUP3JnHz3dhha6jHCfIzIe/pN8DpBNK9Ld6fe6zIoeeW4vfu5sbtLKKd3/wv\nHO59KM4vQOQZGM1fsgHB9s/XoUb1Pm9Dy/GVJpCgFSGyi2inKEyyVFohIGUY\nX+qoPvqmVIwo1XeDqZTD+fAHYwAynLJu3CwgsM5xhJZng2QkI8AJKM0l7SE/\nHhRtjE64K6HRsUHj29Ls7hk6Q738H+ZZpUkcy/6bh5dFJ6ZA679ZDn68fZDr\nNCKg7w89fI9Xxzh/7In1Fj2Mh+msA60ArIYObKFVRfNGbT47MUg6hGA02Kkr\n5QJ6YshYBPtXT6VASKd4RuBbgfwusnfv08w7oWvdbi37uySbtcySISUzi1Hz\nEwF8\r\n=+cnh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2d72f3659.0","@material/tab":"8.0.0-canary.2d72f3659.0","@material/base":"8.0.0-canary.2d72f3659.0","@material/animation":"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/tab-scroller_8.0.0-canary.2d72f3659.0_1597269708264_0.48586052099261234","host":"s3://npm-registry-packages"}},"8.0.0-canary.1fee70a5e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.1fee70a5e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"91bd734ee0cfb60b538b5a8e13d55eb86d2dc901","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.1fee70a5e.0.tgz","fileCount":52,"integrity":"sha512-/FDqhuiDAwJSmeTxCy6MZPkDdE/gKvf5bH0iHUGlL5Smqt2XCSL1JPxRIWZZSHiHTx3Esh89YBItJMOvtqeTkg==","signatures":[{"sig":"MEQCIEtBQrP7L+eBDjUNWIl+2h7TBSglAVMngiT8Jkk21vuZAiA9/3ScaocyMJL+hcP0sMoy6pHvjBzO6VNUa05HioKzwQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNHtpCRA9TVsSAnZWagAA118P/A/UFZNq3QrZVI5DUeMs\nEE2SBkCZer3HIY+88BbeAZhNiJ7SQD4KY5O2PFODkUgQ84+iU4kXyjexCkDk\nS++P9VGGD4o5xP645vsnsGX7PQWqsBp5xp37ZrxE0+rZKKDpaT9VQk3IZ8eQ\nHpG9Vx6gv0vaC4DDbR5uQkP8fbpwZVNbVoTzycrpoxTLItc95RywD9zgWiuU\n2Ps/gk1pyq+ykyVUVJ4YfdYu/BPaM862sWPodVM0CQYVJSsMYGgK4L/pWesb\nBoUkyYZi7r/thlykUm/XtdagpL/9P2/O8G/ir6py+3VK/Itv3vbfEJhyyFH6\nDkpaEqRAKQF1vBm5SexaKxfN4x9AlwlwiMI20Qzq0DF1KqZq5qQq8NxkJDcR\npwNrIky4swJ0KoyGQoGYvrjR7cRjeTnlbtqIjxmu28jbC/R/vLgqUHaKA6Ao\nwi3kDr4BD2D/ZUcvvlRzzB0Jj1tvEka9gJyTaXskPI200FhQ2ZWMKWCJzyWJ\n1JD8rFi8X9Kc4rAWU+pZKQ0kaZP4eX4oMyYT/E2Lcp/7EcsY+Jz7Bqu9Egwt\nlhdeobT01B5rAVAa31S+0Ksp6mRVG5Bei24fLNaj1eTWu47K+1OESm7wwqQO\nBim0MX9fNdehqJVqlBei/dpvQZvfb98Oy85wRG+xb/LyB8K13SvgbKxxcgZX\n4mOO\r\n=vdWJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.1fee70a5e.0","@material/tab":"8.0.0-canary.1fee70a5e.0","@material/base":"8.0.0-canary.1fee70a5e.0","@material/animation":"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/tab-scroller_8.0.0-canary.1fee70a5e.0_1597274984281_0.9195467050366797","host":"s3://npm-registry-packages"}},"8.0.0-canary.023f3fa34.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.023f3fa34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"47a4333681206ce1191ada4014eb7fadd31fa3e2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.023f3fa34.0.tgz","fileCount":52,"integrity":"sha512-j2oy2s4DyyX/GVH3CGlk6x/8Fw5RCqVNkUr/xlki2Yytr+/RjYQGqjOLkBn36GjYTCTXUQwvZE03ZP88dYg4aw==","signatures":[{"sig":"MEUCIQCzbgwnF9SbsJWeeHaaYlvZS661+SUKk19Wh14Ss5RqTQIgYZLAuBo1jRfa+SBeLXE+aOxW/x1JYoZk5bkGs7m3DLQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJO2CRA9TVsSAnZWagAATqsP/1IQ6sSLQnv2XAGoP1KM\nRSEsB7VYuPkEUaUrt6CQfb8+IExhAH9U0kv0C7d/5hFrUn3/Zb+ZoD00ifAX\nsCfmrwUKdDoHnzqgvH5ipiRCO8kb7FJYLycvkH3DUDoE2nHdZAfFd/19Hu6R\nDmNawJEKFL6uL92wT4nsj4ZbFJyfXV8EtD/rqOKdNiQbRII4e+fN0W/gq1wx\nrVsG+YFNTMbOrUVxW8NuDsF6eI2yQ/Qa3e0M3bdS2yrJaZpKx/3dq6ZnkJpf\nJuEp0xfbPmwur4mQFCNGt2d9Jzw4vpl3sdwrnOzBwiQjT2aqWkJthkeBdtNh\ne04q2no1PQHKe7yRMjj0ftQpAahKLZUmbMeIRNiteR6ECdlolj4sTaagCFSs\nGYQL1GgsiG/uIQTeCBRDd0y7UhEzXkV5fbUneuFkGtGChhkfYejldUDfq62R\n9sQp+KR5b1aia5ZuoKfaylQHE/eC1gi/PpdMvoFzIqz8jdPLv+TiE71fUvQL\n0oQUDzLjB14WwhE8y+D2AFdKPK4AQZTRLetcaAfiug423irjgbhuDLSt+C+h\nx9YdPNHI2gODnTXrw4eegzWGgqD649Oam5RcbYbrI8VznuHK0Vow6qnAE8rT\nTW0NyWV/yEwLMsw+pVuaIWPZO1eKueXqho+frIKerpOdgvdC5ZwpDXHnqrp/\nUJGX\r\n=j/5x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.023f3fa34.0","@material/tab":"8.0.0-canary.023f3fa34.0","@material/base":"8.0.0-canary.023f3fa34.0","@material/animation":"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/tab-scroller_8.0.0-canary.023f3fa34.0_1597281206090_0.8685376736004982","host":"s3://npm-registry-packages"}},"8.0.0-canary.80f3a9e5d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.80f3a9e5d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"36f14576a752ec6e1d18f064526c16e970714c58","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.80f3a9e5d.0.tgz","fileCount":52,"integrity":"sha512-PNE8H1e328J/cMgasL9oaR7fEt+E5+s+FwmWBA6Z+R4Zdpx7va6Sanaup3w/k0pdTD5WgF8oJ4XP3nfRGi6RQQ==","signatures":[{"sig":"MEUCIQDLm9U4poiE+8shUAyt5PvCw+wLr9CCVzpXauWAk1agUQIgPrN9pAJci4Uts79J7LjZXSjFyCANvl8MxLAUGuxSRD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNJefCRA9TVsSAnZWagAAEwYP/0KGPbDxFjpR0yjwdqPu\nN2X84gvCZFxAuaScxVwL6suBONvuu/Qa43nojoxUUs3u16gjBHIX0sCLH38m\nAlSd27+rrjpN/GNWl4XADZKO/PLS+qXmZNIrfLxn1uZJH1IXKgDCjuHA2Zd7\nQVu2KSJa+ysmPLSfoJSNgkZoIIWRKkiaVMVutZmNyj+FFvjzXelXu7OQiyR3\nFoW7ys4ALA+4XDXOAQhKRGYdZjh/OvRW6avVCCT9o+azxXa/YcPT8xrAzOpu\nK0j5K7YBjWsPVRzxi6xhVCcEeVgTIqix1caIc92yeqk0g5stsLa44fO69+ak\nMxWeo2RZPTC3+R2ajsWo4McK6OyfEkFfuonBKKxizbDV8DaOA7bN9MfBj2SC\n8Mp3hnC78h1hsNPx25ifJxiJPCHvYcK+rP+JqTypYQdhkA9TX3Ji7CLYmJzp\nP9SJTw/Y2ZQq/84TfjOm9ix6cnEqamgnhBpEQdfD/QNFr5kCqU5qqNs7FyGA\nRFB4re+RIkXyIIMZjkKxxfyCqVc2qfFwrjoBtnwU4/FQaprtz/OkZvKdCS03\napcMw1dZ0F/L0M9cPF/YSqr9jnw/TSTGTqW/asUBbF1iyA3pFOb7M5muuEFi\nOgxemm9pmJshzrmIQDpsSkNS6J0dW2k3desCIb2sCLq2Rs6P/SgJB85jCNXP\nqqG9\r\n=59ti\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.80f3a9e5d.0","@material/tab":"8.0.0-canary.80f3a9e5d.0","@material/base":"8.0.0-canary.80f3a9e5d.0","@material/animation":"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/tab-scroller_8.0.0-canary.80f3a9e5d.0_1597282206856_0.01753147620483242","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1dcfe97c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a1dcfe97c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4dec4ebe1eeacb2b4362cba20a9e4f857214a752","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a1dcfe97c.0.tgz","fileCount":52,"integrity":"sha512-KKR4f9YFzYDFg4Egwk/2ro34F9EvuxreYHEOOhQhPdE6PCjXb9TSR1Nq2NXJBWrd1du3h2jwAOimdTGDnromiw==","signatures":[{"sig":"MEQCIBjTz2KNMp6AhlOxCiIa7aJOGfElgtQREq+M7HWnqnjbAiBl3iO/msfaj+Q/7jALva+yq2jlvuWqkEF+eToZUsHvfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321594,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNP8TCRA9TVsSAnZWagAAGcYP/1ppH/QRyzXlZlRVml8h\nyUFz7PCMttvE9D/MJBIGGmjgLRPlibeNOWnUSzEDfu/BbYhqkFX1bTGd5dm9\neud9bk0GxSHC5ZAbqzCyXYea79C9fozK/Uc2uW2oc7s5tsgR0kjzWvSxn8fz\nTqMQYuV4jj70hhxA9f+EUPOQBGEVkk5Zvft+DAM9raSCUQmvcbC6FD+v9bD7\nw5+FFA4n2WAEFvJCrlt4/RiDAhjiehOWjwk5nRXtn+j1wr9l1Hp6WuH2TMQG\nJLcMK953WazW0nuNy28QY0ov3K3Be2y2DTz3p91bEGC8Ry/vwdULBKQrHmu/\n/Bv4pjiC8PR//jPSDr70y5X3pSfUmLNToeZWGn3qqrmmhfagKvz+TbSqC6Yy\nwrVzLlOEyXeUISjo4XRcvliD+WPaiuFP8o4LsDkOx1YvciSu7qOvQaX83IlO\nUyqRPQl/PGcdmVQ1t7VyicrhSnYeSu0i4FKjaFD51N3dZ97igdE3nrjDnfoM\nUoFYZypOCgO1+kI0FxawaS0Zi/wJEI8RdTLrWHvAdA/IkgCORQNtNT+pCmF3\nHCPcz7kcvS2CVH6pXY/dLAOxEkJoExKasQyqweRstZHncd88xfjIXthrTDzA\n/uM9CZ/Ii3S0qBcWPYYVXeNfyXi/WxlR5NUXOIU1Cwswhg2p99Z+FBupavGJ\nu0qJ\r\n=hk7b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1dcfe97c.0","@material/tab":"8.0.0-canary.a1dcfe97c.0","@material/base":"8.0.0-canary.a1dcfe97c.0","@material/animation":"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/tab-scroller_8.0.0-canary.a1dcfe97c.0_1597308691280_0.869646824748288","host":"s3://npm-registry-packages"}},"8.0.0-canary.af332d5be.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.af332d5be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5aadef6fec1ca8047d5d236718b784c9db4ef2ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.af332d5be.0.tgz","fileCount":52,"integrity":"sha512-GGLjlcRMFa0JE35lm97M8mYkg7EOWy5UBoOsNt0NiYz+f4WcmTQzoJMDHcrXtvCWHcbnEAXs/us6gTxItQTB4g==","signatures":[{"sig":"MEUCIQDCMVk3i+H7cvTccRioBmrZrzvrNlKzaUxzndLyM+TufwIgO7TTMHgO+5ElPBLMTZ4qwrXfF4EA+nSJX8JNA8HEmzA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNa43CRA9TVsSAnZWagAAVMIP/3x9B4MVdN/IaJLxVkyK\n9ASjgpCoyx9+vNpH76ZmtR5hGNJjqh16IKlqFItJRrCVZ04c36FvarFICxsX\nCZPx5ZdyiXFlbwVfYLq80CZE1ONo8lTnVO3iT4Bm3aYtvSah7lTbjBnOqTtj\nqePxW5TY6rrioz4d9XsnWuXaHbZOYOwxhC5k6lIGylnj+civHF4OJTJbEoHN\nROpMWZiWbC/xakoL5LmgPBPOs/xdk5tnen25Wx6kmqnQ6QxO3ND5+mHFki1C\nTpyud5X5IhZXfkIqLmAbJPjfF358qyfNvMGIt+upctXHNSRw9DOiljvdsJys\nz59jW2vXctqj+iBvIKuFM8eXv+GuoGt0AI3vCkAmLH/L2R72KDGfxNoqo2hr\n311091o0tRo7k209bD2+ITCQ7LiZbkZBFQZj11m3KMFYR9I2n5ZgvyqaaZWy\nrOUjI2bdu2jKF7mVjNeg4gF69JZuIu4rDoq9aWqifMqoIbKZa1XIiQMb2yKO\nPq82fp4HnEp/+wchdIbQxntPmcXUnGzljlXSu3D9Pytn4djOKGPAbQxU9PLw\nILOJEJKYzXXktWLAw1/qOqhgbeVYqKeQ7ZSuvhxIJgcDZGBix0zOx6VR9Enw\nNAK+1o4ybbceHRtihwEop0F6k9Yiqk/IQ9/33M//1BAQltizY9X+kodcwjEt\nA44W\r\n=KiwY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.af332d5be.0","@material/tab":"8.0.0-canary.af332d5be.0","@material/base":"8.0.0-canary.af332d5be.0","@material/animation":"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/tab-scroller_8.0.0-canary.af332d5be.0_1597353526920_0.2475794821346169","host":"s3://npm-registry-packages"}},"8.0.0-canary.7dd4567c4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.7dd4567c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d8e07cc9335ce17f59eba13699e59ae0dd562976","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.7dd4567c4.0.tgz","fileCount":52,"integrity":"sha512-xM12WVIbieHV7oisuI8/1VgYxJ9pMc+8TzsxAMPuH9aAyYRcR8jfbj4j8r7vVULlVB05zvVf389Z0hEWu98HAQ==","signatures":[{"sig":"MEQCIFPkDSgZpKqQyvDSQ6KcCTHKSV4jvxQBMiah4njnTLp/AiBeFFUGoo2Raj+g5MfzEqJ4LE/S8pbYUoqaRHFZTkJhMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeA5CRA9TVsSAnZWagAAWYQQAIvhXG9ehhnE46a6dxXH\nVxcCZ3LVpRGnhsQGUnEn8q0pd/uaabcqHkHr1I5AcpKfxaZTzH7TSoadcgfk\nIMFcYPB6WX+6CBATawAL6QTxch/LARhwJq5jgW6Hwuekb0gqYfPoOLj6vQTK\nSURHaCf0/EjfajMN2kabB3k9VSJuqcdk28xrucFvaXT0D0wcdsJDE5T7sCeE\nC3UyLQF+T4x/fDbi8t51U1sEEy7BvRmxgOgBex6vt2csRAdJJ/4pBENovR4+\ny71FIpzgoC9ehjuKJjcIWrUrjDMCYSs4IZyGgjz2z1Ww4/RZTIgQLodSr5iw\nfMX5CsAKf8MaS9NdFQlx3BnRnQgCCHgEuqxqIFPKVGlpbhfmcntXTXeXy2jE\nd1bArx48kUE3qfnoh30qp0IhvY0OSpyNf/mc7pi5n6fP639BdcW5DOzXTR5M\nYE9jU+Qi/3KhFTK5imUYfg6+MzyYFh4hNAs8oC6U7GAjFcxN0/M85N5hyStg\naRQrOSs81TfW5SdDSf0H8eiFx0CFolbSMPTRWyAhcVolsUoI+9QlfWQ6NaHR\nKHS72d2dHnEgrdZX6bhUMsaADEc13eoQQowCkndy8CCTv5LJyV04dlT/7lWq\nWYU6cQp/hj6JvL6ILO8LvLEx2RwtNHaJ16nWfWqhlhumR/ACRdZbMh/kKxES\nD6HM\r\n=ewUA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7dd4567c4.0","@material/tab":"8.0.0-canary.7dd4567c4.0","@material/base":"8.0.0-canary.7dd4567c4.0","@material/animation":"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/tab-scroller_8.0.0-canary.7dd4567c4.0_1597366328687_0.5031826303964704","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff870005a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ff870005a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"145ad6a6dafe6aa5785423b05220379c4b027884","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ff870005a.0.tgz","fileCount":52,"integrity":"sha512-AueWYRQdk3mBsVHx65Ne7PXojKxXQ0GZr4EjCSxzodZx0Ia1v728v2m+qQyWY5Q6q7Vuk/bPUg6g0KF6hUFDkQ==","signatures":[{"sig":"MEQCIBMT+MSwcpz/yZuHl+KUu2ckdujb3C3JjYKtx5StPPa+AiApBP52VY3Djp4iZUpjuk5z48GcTFP1Uowass0PPStOxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNeYZCRA9TVsSAnZWagAAA3IQAISWVIUbZJ1uZohUPmWu\nYfCu+ieNPBy+9s/ETNS75J5KtxETmM7ghwHe0YchBepnvafXJvqvJMSzFPl8\npviPd8fdLB727ugjbQZRcFN/tQdhQDJuRiSk03X3GcG3UIs9+4YSiN3qQcmC\nIn0mzhF3rUXizVM6uJQBt9QvsroppfjiX1BkqW8N4SflQYIWD+AD+TikCa9y\nb4Hb216TJ5a2Zp8ECzF5okZBVxSLXN+I5RGkuNWJhkO0+byzUF71iWzdiVa/\nB8qJrHn8OrNDWKTOM/k35SEFtijdrZFeB/3EnwMqMaZAg9T4eGb+5QMsGIW5\n2Zgeo4IXRrL8WeinBSUnTGjaGmrl4ecFfnOxa3GNToDBcvLJWqzuw7OoC7jN\nQTuKq26Xl79gyrOz+WzuM3KVoVWOsT1Yf+RZb0F6LEYnIMaplPIbTqN+VaR5\nG1waMn7JlPRE2u7tlT1QvuLHRr9tASEcJf4YAdHnD98iHzPXgDV0E9IW5T3O\nGwDZM8zkIY6804cc50xFAbDnE+pYuYNej2FlqYltPFg6n9R2P9TAvuRTPVna\nFyUjh+dfHTprRYpGgAVE5SzBogQ/wsvzWU4bP0Gmy9O1SBCbxTPfo1pP/dWN\naB2QhvfI8SnPkxsNVSZBVcgoRAJPeazeHwrBZE3UjRNkcrvMOgODL1QhgfQB\nlyOJ\r\n=HBAL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff870005a.0","@material/tab":"8.0.0-canary.ff870005a.0","@material/base":"8.0.0-canary.ff870005a.0","@material/animation":"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/tab-scroller_8.0.0-canary.ff870005a.0_1597367833045_0.20743194108807117","host":"s3://npm-registry-packages"}},"8.0.0-canary.150f427a0.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.150f427a0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e53810f7fbacbbb5e8794eb740090fb63c6ca311","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.150f427a0.0.tgz","fileCount":52,"integrity":"sha512-7EfbrIf7RLFgvcNo3nAgztHZ43rDBdB6ve9l3boyq1p8g1KmgBRBykEiKqgV0lth+9+lGomTWyh5C4QGCDP5ZQ==","signatures":[{"sig":"MEUCIQCe/ovNSiRgRNyN4IgXtK6IFZr2JbIsIdCP2Oz81y6/pgIgGWZvo+mq3Guibe4SDl/IdwaH1+I7fQV82Wz8rFw3/ZY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNpIXCRA9TVsSAnZWagAAikcQAKUFV6ziAtcNELZIYkbv\n/ovCjQAV3DRPr4C2YOjgS2L5mx+/RRbyulBnkSH2UvZw4PsTk5aP4uDgTqzM\nhNz3XgDF5iQN/umuX7rdL1bjtPug6w+dNWhP0jTVxxYVtckR4QguzujdwaO/\n+Pi+FIJeSH5RuunYEFIxvmR9turQstEYG6JFLRj/c/jtQK2FS31lUlgZYN+o\nXq5eusFDuRjINhsvjVLJF7v7qb7mvTRSxXs3BD3Ob57OfVQ7Jv5gI8jip/a6\n8+uxWeVat7LlB19T0xPDVmdUqTCyFby1K86unMTyVhksTTYJCqYN9OSdV2Fc\nst7W1qGazrLFapRNuXOxU+BqeguUg2Fgdjgca6igv58TGTh1VRj3gJGLWD7+\nHddsn70ivETVQM9xGWY5Z50ephWITxVHd1Kzya7uACY/GnyR+n+VyQdazjtW\nPDNoVtVfPlwrbSwi4h7GE+0QvVPEzFPjhzUk2nBy8yvc1wtoAE7g/y1nzwFL\ng6LvQpYNnmP511DUkeRwc8DGR/nthulJUcVeFghHnXMi5ZZxikTwZ3ss6Nus\nTQZTLIBPmFkMNyTpj5cZQJhMG5g3rmoI7o0/EbWo6kgBV8z/7i6DaCGoTdrB\ngcvTnKWzp/nSw0RCN5Oc52rR5r/G9KX8muXQtU8+5dW3W6yQlp9StXrPYoZc\nlk69\r\n=w2CQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.150f427a0.0","@material/tab":"8.0.0-canary.150f427a0.0","@material/base":"8.0.0-canary.150f427a0.0","@material/animation":"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/tab-scroller_8.0.0-canary.150f427a0.0_1597411862410_0.43479797715565405","host":"s3://npm-registry-packages"}},"8.0.0-canary.bcc58290a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.bcc58290a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6d833fa853596b59cdf7f3bcaddea2896113007a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.bcc58290a.0.tgz","fileCount":52,"integrity":"sha512-+AOKem55b8Iz3firUxU5ge9+9otS2KBjc1NoCeMWzZ/geaZ9WVtmffb3oKTifmly3rtqBEG7LOmqqZwpLnGWpQ==","signatures":[{"sig":"MEQCICb287cWSaIG3yxrSVWhuZI1k9d10KHdZmXA4PY+yWj0AiAl2Uw/AePlIobGr1QS7QBQLlumBEH/r1wNSU7IFzkmJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfNxzzCRA9TVsSAnZWagAATYIP/iLhap/oj4PfW2e3nX4m\nrYlF3j04+2+ZmziU9nIa42gRAyZWplhfvbS6ONWQfSL/t5OdB+s4AYnlYcE3\nrWEemfN3Vn6NNdiQM/pNl1Ozgns2SatjtNJO8kMNk3MIJdfqRUvrjopdnePL\nqAbkYwBPG0n/yDXUo7X2qLKxEqZHi2Gbm9P3vWlc84ueXd31WefllpRxR9EW\nb0lpc+6UbTUwxdNcJxQzOIiXqc+nXa3neEOL+1TCEU2u7ahYorW0+1j1LHGh\nal91u0gvm1hkHZtakavD3Nto9T/RVqyu9UYMFIZRTYJ1P1br4WJGpIuLiVOd\ns/578uqt3SX3arEsrIDhiTNC6/aJ86f2CRuNSMkQaqfQtSIV0URu8sn9pyxj\n78YODDjGqgLxcXYAy2MZMDkx2+l7KNbs9EdRSXYQxmzbyBgPX/+MuUsnTJnS\nuSAX6RQ8lxOfQcZQ74vzR2lOGfNChlPX3vWYRnEi01RcBOfUj6EKDrd22VHZ\n6OyfMm2IXDaPhwKNpG3Q8uTjj4eKjHd3bSoi/8dPYxStHSJHbkHWJbttf4Ga\nYF9fncWRV///e1OiTqmHg5hrTjTFB2ePsezWQFP+3OI5tIeHtqyP+9uV+0jZ\nA+YmpMJOYDau60B/4hCgSZcoG6J0HOTV6PdVBf26uecHvQ210RTr7TEqr/SS\nM6ne\r\n=9JgA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bcc58290a.0","@material/tab":"8.0.0-canary.bcc58290a.0","@material/base":"8.0.0-canary.bcc58290a.0","@material/animation":"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/tab-scroller_8.0.0-canary.bcc58290a.0_1597447410771_0.4657607198276772","host":"s3://npm-registry-packages"}},"8.0.0-canary.4f55400bb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4f55400bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e954346c0fc24603e5be36bbe41d3e6f3a26d4d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4f55400bb.0.tgz","fileCount":52,"integrity":"sha512-sYe0ouF5m/rm+AjGXhqD2h5H2J94WeY/U9CxXvGB/ucOwLlyF+ib1RmTn52v3Uz7bx3CEXMSZK+j0NkTb0L8+g==","signatures":[{"sig":"MEUCIFQ37HbLjqAKEvF7uzvMwuayk7fBBIqUtX+f5E9Nu+rxAiEAuJo78xzXIIRnVGjX7VIOmhwqqONxIGomwivi8hWIMIw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrLFCRA9TVsSAnZWagAA/+cP/0fr224POffF5KYNQecU\nGq0EeMFTd3ufrKCo4VYA1ubhz2LKISOPVGJ9N1PihAaBrbD1PYhgtXa1Et1K\nmsmpura35L89ywFh2PRfl7TMs6M2sD5GKRUiR+4eyjtx2Pz4ptjmobDBc1fg\nctlV/wSgD4r9IJAh+Rbc8uRzf2iMUVWradD3PCFg2mfQVyig/W26siBgLf9R\no5AxVzC6gBNneA9MQBszV+iFUePqfg4DVeZkQFaXMFi4LDUnQjuvK3w1PI6s\nOZbgEEta03hhMtiFUfHhjTlNG7geclPg1gEJGIlTeeKGuQJ2V97PKRz7TXIa\n9C3pj6CxELc6YpSJZYytdFsBHdyUpPNJTflQf4zQBMNdKMspdYB7Z/EeiUX2\nCvYQpdKdk3Kpf7qRCVwcoN9mAAK4DBOoIq5gD/1chIdjZc+tcGNN4VUZ35ir\nGE/gNxzqdYyUePy4xWlByHWTA6zgdTK/xAdse68cH9/P+t6vsHn6gQqusPUr\nG9Q5u6D9n0/Q3+SCT6Sit5XTOD+AVQnv2LzJgblTGL+h8AbS8EMB+XSRYpTK\nv4HF5GPq+j4I1tbHdxIgkdgTopQtkwP/mNLwC8gx/WmM5WFjz+fbmjfshAl2\ngth/LPjKxCpKnrxIP7RLV40OI6mFUHNSLZGa3rsMaajaCUkSHedqPZsJAQVs\nPtQ+\r\n=G9nL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4f55400bb.0","@material/tab":"8.0.0-canary.4f55400bb.0","@material/base":"8.0.0-canary.4f55400bb.0","@material/animation":"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/tab-scroller_8.0.0-canary.4f55400bb.0_1597682373089_0.019030804112604605","host":"s3://npm-registry-packages"}},"8.0.0-canary.000d64815.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.000d64815.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39b6d4864e3cded904ca16c5233e41a721471d21","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.000d64815.0.tgz","fileCount":52,"integrity":"sha512-/7Yf5naegTi897UdHaMvURNo83m3AIu6hgMci1VZJ/ulLbFmCsVKuvHnL3FCqEpcLtyzafcvQfPs8AGvKBVrGw==","signatures":[{"sig":"MEYCIQCLB/e6vWxXCQfPRUjVfwxKAdWo9EXOIfv9tEHP1FN+egIhAL1KyZZ8sQ6O8Vlt1bjpP6/PID3VmmKvkkxFY2JLQjYG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOrjSCRA9TVsSAnZWagAATpMP/j2eUa9jKRbOH/wMF1dD\nK2P2pihFZl/dHWWMY5zd+gNTx7xz/ifllbJBU3EKe5YPLGCDK0LqNemlSjWw\nEyYgc0Ylm6pVn1SKS+mtlfex/U9r//6RfzWi2/ZXrD6ilhDeVk1RMB7KlO32\nQE6+K7ukldYp3JuLfhNXEOLGRdnYGWg45F2ahh8++vMw2yR2p6dam20F5nOy\n9IyQhrXtopCra5f7QvWLE37YjM2Sw09xvoWugjtD2aEcuY9roTEFb1rYe7XP\nX9tGwthKPvWXbW8kqvnsvY5c2Xa2/AQJaM2lasonGR2Ln9/NgXmqOMz5bpG4\no+3g9md/RgWtaZgiDKpD10aPPXzS2Gg9nUXMixHPsMbgw1qUuLgsDqjIKeOZ\nPQ1QjZuUnJuuP8DJaULdsQJtDDOPAaI449Fu/pX0RaZObHUTfQwyQs6OV0s/\nfks+mSMKP/XeLv1+H44rq8zOP87b63pdNacGCFXrqPwm8rw5Tc9yTcIxYoL8\nYE8yB0aqmMXhMDQRlhxHGHOluWheB1yb9If0jEsjHBKqkhc81LVOI+mbVeQy\nZnH4H/vDPd5t/jrG4OjYZgiLDgJ02vuHXD/AE/90UHqQL7SEw5Yn58VCa/+6\n0lk0Z5UgNf2gehEWQun/WDWpsNp+wWc1/ixt7u2GHgIh6n+7Lj5bOhUtVyxe\nOOwx\r\n=Fvpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.000d64815.0","@material/tab":"8.0.0-canary.000d64815.0","@material/base":"8.0.0-canary.000d64815.0","@material/animation":"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/tab-scroller_8.0.0-canary.000d64815.0_1597683922429_0.9665979010725005","host":"s3://npm-registry-packages"}},"8.0.0-canary.defa599a8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.defa599a8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a78b0d1cb18a0a0deb6e15424b607249475087b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.defa599a8.0.tgz","fileCount":52,"integrity":"sha512-TlZEXAuCqE4QM9HzLOyjBR1GizExeqRKA7UCA9wqye2TsIRjH+3PeslM/yPCUOMI7wO9B0QP2LsbrRftdyXOoQ==","signatures":[{"sig":"MEUCIAUPeq2emZYmccqSKxGzdS+WZIanB9pwnF7lmkJGDeluAiEAmJ/moGcEsiYRWtaZWTmelug3AROxANVEMEVkShPIyoY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfOul8CRA9TVsSAnZWagAA+zQQAJJojMA8UR7cIDgJE4p3\n5RrFR9O2BmgQH7EztQqlFf7N0qRR+FUqk17BfSPE717zmmjkkalc6Qy1X7eX\nv+6G7JKuf+2hElV1YBY3vDQyK1+X4VOgUjvr38Ba82U4eiHx/YxZMxGJBh1O\nLwCGdMBQpGaVbu+LdjzofKA/59IbS+F3TNAXqTXwgtXWFS+Dl7Eb6mrC4G1E\n0ORMTbOD1QkLDJEhypHcmFL8S2Z1ojq/lBXs9pEGRGlXaGRtY/diG+3C3MzN\nrvCjWv8wEKMkPcSvxugqYWjYsWVHlk/nEW3FoFYTqdHsAuL8D9I5Wwo+o3yW\nhmoEPsGl9ug/GSbs/CjW7Ai+4EXpGdoD9yy9K2Vwa+z1IoFQ4/z2f+E+I8rZ\nKKzAaOJz3TyHy2L2g3NDkZHTgUiy/LA9WHa089GWZ45L0OtRpZvUVgmeSAVX\ndRgeUQX6hnqtze9pkuEyIlqgMv8yptv9vzv2tGzvUXCxoHwmPar8riIu+4eP\nxNFFacRd5MBgGuR3dIiMwIaHdMQoZXSJvuvAGm49zWlaiHNCBub/4+vqSUW3\nugDJ25MJmLZZHrBUgdlx6KPZzVvq0YHa83YnMurTvy6PAX3oF+HL97uD4eQP\np+akbgFkKrjNuSIjqbQNareO3tvX6ZWixo+/4RFu23ftjKTBAAyZtfoXqpW3\nzZbW\r\n=/TMK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.defa599a8.0","@material/tab":"8.0.0-canary.defa599a8.0","@material/base":"8.0.0-canary.defa599a8.0","@material/animation":"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/tab-scroller_8.0.0-canary.defa599a8.0_1597696379880_0.1803839561477507","host":"s3://npm-registry-packages"}},"8.0.0-canary.66b8ed7e6.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.66b8ed7e6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"265218d9c49f15a881aab455676c7f77a97251a1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.66b8ed7e6.0.tgz","fileCount":52,"integrity":"sha512-ifD7hDsYaLzAvhDhUpCM8iNXiDbBuhCTV25m6RTawK407iMblURP8gbXPtyfjAC+bTujrfixp3f2F+YsYPV/dA==","signatures":[{"sig":"MEUCIQDs9ZoM7GzMiWcRhu2VDwLHU+2GLf7r0BQWn7QCVa3S+AIgJZMj66XYbn06xlUmbLtJb5KjukRwkCg2tpAt7lcGMI4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPCACCRA9TVsSAnZWagAAi+QP/ioeY0FcarhW0TTuErtU\nOIfsVTeQtPC3CD7O5yQRiJTZeZ/8iRFat2t9AIFELyzNtlLx/+CQ9SKhppOw\nx8JBPg4kwjXkIhp1iqxu4CV/JGgpI5KvfWE9zJdYHnrkdM9/L7UBk0YiI78Y\nKg1iGMac/5fKdLq8CLDeIbbZeVYP/E+mb3uNdcfyRd8UH7+qtIteO2wvIQ+9\nGLFTvXq1cA9Vqx7cq5d3YzBxWx75SBhrPbIVTRhsoHBLat1eXMUhNrnunSWh\nWD873T6TLlr51fjqF4hVdUJGyrNqpQwx+YcrZS0wKtws6aVj4mFia8RReohu\ndqtiS0vyDWmN2zqTUw6DFnYbk/jz53JzFsINQDk90yu+OHUFpOy7hNkoxWwu\nNxS55cKRG3ZIQoQQq7imEngsGVyNV4Xn/beCForps0Xt4KIGm9JHsNu4fUFO\n7Z25pd0EUN3THXUaNB0GM18NKUQ2JBtP0F+DyYlAp2oEcgsGRxHzJZrsv2j+\n/SS+4J2lJEjMmLdO6pOsSpBnmGJ0pPgCUVRuXkhnqb79cnC58b2MZZy2+cFU\nSBNKDd4O6WELSxuJFLjzIg2HNmz4EUjd/NCRm5f19367KrETB0Nf544DPDPM\nraEwylAsctoaldH4Em1YQ7Lc8LDytt5b6hkFSzJ+3BOBy6RUc8NIIoKTRzSq\nLvr2\r\n=mlTk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.66b8ed7e6.0","@material/tab":"8.0.0-canary.66b8ed7e6.0","@material/base":"8.0.0-canary.66b8ed7e6.0","@material/animation":"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/tab-scroller_8.0.0-canary.66b8ed7e6.0_1597775873376_0.45968419684620865","host":"s3://npm-registry-packages"}},"8.0.0-canary.e2b1033df.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e2b1033df.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4124e3e17cca05f6c358ba7e91c9221acdff3591","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e2b1033df.0.tgz","fileCount":52,"integrity":"sha512-C98QL94FzZrjhYRVCcJuJaceh5QhC2olZWFVk3nqQIbA1PrhphK2MYpqAvoCDWmR72Z91R+9jjgRgwATDDzq4Q==","signatures":[{"sig":"MEUCIHDivPdD7/1E2Rmmj595n3mfWZ/yeBoWwTkicv/BEGR1AiEArC3DqW6fX+BfZJWgVQ9xibM88FkpOKFjabnT39lWGZM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXK9CRA9TVsSAnZWagAA0L4P/09nB1dj/3whEHVyvUxO\nZGNBTYhkhxRLGoH4gEbxIsUPb59x4lyEEGXvMewCY3FVdvVKRSEtOrIMlvvc\neE/VBoc/A+AZFSfBmqUzRebXO0aOw2aeOAtQPCC+o4K6OPtkUtsODyVJGkB8\n6jBxHQWGolMtwrJ4mi+XZT8d0qwYJvZ5tRc8Iqn4cZxEih/5xdxK5XTeBIdr\nbPMDyBC+HPADTixOP2Pc+rmLphO0Mlj7GcG3NnIYOHTf+e59l/Yc+KWVQnnX\nz77OKdhCHvprr80dmkLqebPgjZj0EPHkT992v6EDyr9PTf+EtOOZIB60Encj\nYqcyZdzql23JhQgwpJvRhJ1kWl2I0S7YNurKsGAWTlZUQOVjsZrntYYBgvNL\nN/GyQoJrAFnJwxML+RVDrzhb2OdeQFXmcZNHttUsGUstdd4/w4liwz+oGjZp\nSjT7uUDLBBo/QEo18WTGklXaSELYj/9EbUJONKbGGwv5VOIZyixUd6Hzm2/I\nyOWdsBSI0oH6acZZXH7RtIUF5vJ6h3YoSfJ0ycm7ep6gRzORZmh6lhNkeuye\nr2/Zf6Q4t5/nr/yajc2tNwgNVO8KIH6YGXOPfNMhz7YeiKr7tvC4xockkj/b\n5neBvAQgv1E4R/9VJeEXmJfruDExId+K5A0r2io8Hf2kjfGImQKqEH5/J3wX\nP+ck\r\n=HVii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e2b1033df.0","@material/tab":"8.0.0-canary.e2b1033df.0","@material/base":"8.0.0-canary.e2b1033df.0","@material/animation":"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/tab-scroller_8.0.0-canary.e2b1033df.0_1597862588818_0.6552852696733695","host":"s3://npm-registry-packages"}},"8.0.0-canary.2e8c3dd2e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2e8c3dd2e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6d4c3129bba0b88fada48d376b7e3d8637f4608f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2e8c3dd2e.0.tgz","fileCount":52,"integrity":"sha512-w05iEoARAcyZ5KeA+Kr/lHJOEAUwv1GmDKhFLxsVAtyRuw9+qtiCi4aGp7dGqmUW0UuZIF/kYNIHIOI3AQnFlQ==","signatures":[{"sig":"MEUCIH63VRQ+PyvLh3Qozl8FXT83TzbqzzTRFVG5bZ8eGla1AiEA0bwl/lTgRMxPPMjkGwgjevLpkpXSFFU0M7g4eWsY+S4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPXyLCRA9TVsSAnZWagAA7d8P/jPwwRIHzfWdTq5H6BYP\n+lLldGMrQkTxxMEdU3CmwbR69twvKlREWClzIQBFw1N8zti8PkmaEbj6EapW\nRSbAGv0w2fgPU0R9uQsyxfk278zImo+FogkqhAVVkHZpy6YE2UX3r9UyqEBY\ndx98XZQhmqawtrrefmkNZlwmlfO4nv1Tw3uG8cX09Og8EqDyzAXghlT0fDsS\nP1weP6w1/sTk4TZ0VAxbQd6mB1KI0C6DnsORkiyf8IfoGjD4hQikoy8M1mmg\nRJuVjpS4BVW+qCgOJP8CyLokgEH7QWNXZlawviDx0P9Ocl1hysN1Osf/UAHi\nZXBlnvV9mVclrTB79AvN+RW19Twqqeq8VsAwb6scB0UG0Qzs3plNfKHAqtnA\nvNwjVdYXjb5oikkNZOPvpnYr1edbsQkrW4HN6r59FCwEwHqx2sa66ynDUg1d\nV9/sLCZG+atYFw2GKrBbA+LkYkCEXRNChhkmn+8UlKcaPIbMfqWab/j2P7RO\n+0o/E2fKE4iXt2XLT17kS3MFTqyPiDXYM5tb3iBbTy5S/KHLHXHH598ViYGr\nHNvQAT+Zhx94iu0y410mC2dvg98JtYiPUcLYKyzTIzjiC/vO5RU4LkOpBsof\nFpVrhUAe3Kioun/0eUimhrLEh5yjt5OhauKGUNZl/v7bBqxC8p7x+IpUw0KW\nVcKV\r\n=uAqu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2e8c3dd2e.0","@material/tab":"8.0.0-canary.2e8c3dd2e.0","@material/base":"8.0.0-canary.2e8c3dd2e.0","@material/animation":"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/tab-scroller_8.0.0-canary.2e8c3dd2e.0_1597865098753_0.13979117095090388","host":"s3://npm-registry-packages"}},"8.0.0-canary.b2e80a5d9.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b2e80a5d9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8114a0d4772885754e17b319d145571dc302da93","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b2e80a5d9.0.tgz","fileCount":52,"integrity":"sha512-TwQYqQZM52vX0r5cFAXqcIPEMmby9IuF+a7Qc8fNaFepolP3EdNcHYR92C9n5jSJEt3hNsA0sKhQd5akvxH7sQ==","signatures":[{"sig":"MEYCIQC2XgIqUyDwd+u8qTbNdKUhG2YcN8xC4GtNICwaJBubsAIhAL/z8KxfZsFVXBiYJTmCtJoBaX8GimkNLl1+7HqT/f91","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPaYNCRA9TVsSAnZWagAAvKAQAIW8sqKqgGbN7ussnsEP\nhxxP0QmuShUqmK8AXzXae5LnFp0iEm9+qS3Gh59lSEeUMqfK0gUJ4ycWwv+o\nGtMVfD7KXvut7XD90so93RSVyJrUnxrBlnUbhNzvoRHn1MiG+fVSPp92uu1W\nAqGDqIti64og0j0Af4FF6rwy4DQumy/IlYRqqLphGgRuEuOB3MP0yyKWeU7F\nksU1Xd+mnpfGQbHw9IxM6jDVoJowGxIiZCr8lV17IX5yJp0mqul+WNAsYM1f\neoYRFM4eGVXYeUglhpHhtfVnf/s5+0ClMasol6e81ivIxendo3obGnuw4IC3\nm9i63YWL4pe1urKuLxyGpH4nV4XX0ZSKIJEWFkceTygTVxDscir/ejqJTCRd\nvRiEZJv9U8BHjJ2XwmMVj3s9UcnstUXgmmzhlns1NIsBBreNyb2hk0k9+2os\nI72d+CL4mVrZPruG/TdbMEibpZLn0sZWP6hpxUFKpO/Fj+FRPJBYpM2P1knF\nNDsss5KwQT5VWQ66SgmXWH28Hf8PzJHjMXxNgMHjnp0YEdy/Q0pnLBasEd7X\nnjXwfL+gsoUIaex1uOVyREmcYwb30ZWBXLT1ayyhtL++vI2FU92uI79mqY4z\n1P4e4UYdCsrQ/c/O+4XXpo4jXBGnyRdghLOn2xXjyGApOBKf++POcANhCN7F\nKojO\r\n=oHvL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b2e80a5d9.0","@material/tab":"8.0.0-canary.b2e80a5d9.0","@material/base":"8.0.0-canary.b2e80a5d9.0","@material/animation":"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/tab-scroller_8.0.0-canary.b2e80a5d9.0_1597875724643_0.575042535303594","host":"s3://npm-registry-packages"}},"8.0.0-canary.ff88df637.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ff88df637.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a86701d9fe315f15a9aa41f3d1dcba174b547a97","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ff88df637.0.tgz","fileCount":52,"integrity":"sha512-xn+0fNg9/eo39kRwLsYpE8/T/Stw8hYMN+gWWDnjflJie68jzjW7FhKxzzNynPtoYA3II1y5wB4pz13vSCk4hg==","signatures":[{"sig":"MEUCIQDjVzLq71TJLCs0qW9J2pPHm7/3jvJB1cS9bq7JgQj/ngIgaFXIMkdm4M7S1CAtvYUG8EYr7YwOGtDeuHGXuHlBXnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPajfCRA9TVsSAnZWagAAjh8QAJYkd6+s0TwrcOdNMKb3\nn0bzFr6W+ZbDpazMgqnSX7oxIEIsQuZu3Rl9Z+Z4lXxGsv5QeIQU12I5ELat\nojxJY2MNUNmDcD8aIYw4I/YBOm/0A7ztJJSZ9I/AI6fVMNQac9LuYsgxR1Jb\n5H0uI+eIFeHYLBEyBHM41wNFBcZe1paNb686e896jViohZFDaqXB911wyUIP\nuB6fKNzerqxXI1R3ygr1BmNasn4kcRDxl5DYYDPBuzS3p3eOR7Cs9EEPsBJ1\nN0lg+IavD2ybx6/ZlIDvEggnwSfamlooHUSw27ySPohFQ06Toz4xS7tCmArF\nESTXBIlACiILnYpLthYEr/dJajp/Ut4GzOJbUdR73imAKiwwRE2I3PwJ32ca\nCY9dK0dVvxNRzaWHCDZYypXWRKChlf3l821JOZ9JtJYXaTRaWrjsPw3epVil\nhCya/GOh1R2QBEXdwji5DNG7YyE6qpJAMPosKu2nbuTJpx6YQLUJRoLQKr7W\ne6FPcfOhlcHdMMGeUNchfki78wzvJ5dBQEA9A0csBUjbAzsN+4jgW909GoeE\n1qv5K8Y4wkoS4nUtHVqOGl+Xo7x8UH5y+JO6JzqLxUQ3m6zrI3w/YHPIJGN/\n5gBaMsagxBrvFKl3JKiTO5HNFVIpZ4dZt20pl8gvL5P4BxA9T7ZfTBcwravI\nn3fd\r\n=kVE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ff88df637.0","@material/tab":"8.0.0-canary.ff88df637.0","@material/base":"8.0.0-canary.ff88df637.0","@material/animation":"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/tab-scroller_8.0.0-canary.ff88df637.0_1597876447437_0.41820185018695355","host":"s3://npm-registry-packages"}},"8.0.0-canary.32fb314cd.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.32fb314cd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"525b169cd4db9ef2dc46ddb638b309eb21c0c0af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.32fb314cd.0.tgz","fileCount":52,"integrity":"sha512-n1jesi1FaWzCZzAOAEdIAV8XmHYAAKKdOHL25eBJxjCWq0kjeLyZAvTVPX3tA3sMA56LiGx3z1NdIsgm8VGY/A==","signatures":[{"sig":"MEUCIQDHcMOYn/xgws60wkNlSZVjzXNhnTGVeXKJEB5aDGUCbAIgNrt3dzZTTSdb91eb+gAPRW1yj4mo5fxc2ijAvVu6mKM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPlK3CRA9TVsSAnZWagAAsWwQAKKhnMwbzzj4Z+SxS4G8\nusGDktFZBuv/KtJv01nr1EulqoYMowqm80LWypHSVRJJxidaCpVJC6o2mIlR\nlKAz1nfu661TXKz8YbWnsz5YIQetRUnGKZfhnuEGFHsAbyf8tX4KOffwMt2E\nlSlOOmxJHTeNGi9vVBY42AYSZEzqNRmq8iRPH0NPEEfRYs8wBroVBKdqENoz\nWAtmYiX42ePakLCWNOC2tqz+ho6POX1JoDCLSPtXlgcXtci0TeogYoQVgEQ6\nLIsoAXulu8rpVRl3x7IUnhjSj7+bxr1g8fvcyKAVYohtRbII7DCbg6tLg0OC\nnuNwVBSAZnR5QrZtkvR4J4q2nlfsMgnVF/A2YbJEyOXQyAFRGaqwXiFIqytd\n5BEgSxw/gc1LRCbjWu7PkrZzJEhCPGhCd0B4oXYsj9gD2oezyAKy7Mz5pqDq\nnPGkgaeEdP+zcLfX+XaPznkLRZg2s1ZDK4mJNKMcj4pdGVGy+baqfklWp1Z8\nYQ5VrB3dLmf9zUySHgyxZtYBRgikehGUzH9mv0NfPpBMPIqbOE5I5voMjM1h\nCDO9wK82fCg+w0DQIGX3RFYRGNYpKsZxHrj4UqYwBx4s/kaLV0ilphFoVm5t\nXCOMtQbKE2XaBjlzJLrJyVoISY3uzPkgJv7tiTo/kTPbaI+LnZTAVmomLFmK\n/CyS\r\n=PEmC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.32fb314cd.0","@material/tab":"8.0.0-canary.32fb314cd.0","@material/base":"8.0.0-canary.32fb314cd.0","@material/animation":"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/tab-scroller_8.0.0-canary.32fb314cd.0_1597919927016_0.7731779954595965","host":"s3://npm-registry-packages"}},"8.0.0-canary.546277d32.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.546277d32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7a73be9c80e414c8e3082bbd1a98193384ab89ea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.546277d32.0.tgz","fileCount":52,"integrity":"sha512-pWDW8MnJqeoaB/eONdA0VHnD7ZEjm3/mi9EfBhJ3kPIqXGC6MEf3FEarJQj9FKku3FK939n7/L/GbVuUmlYN1g==","signatures":[{"sig":"MEUCIQD8gdZ0IPIxyrFA8eLbcskuuplNcy9IFjNZhg7N/g+zgAIgWHVMGp2o7vn5UqftQPAzK6VUMJBdOabsxJVupmQ3iFY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPqiQCRA9TVsSAnZWagAAHrkQAJVG6+p8wwSDxO1qpyPg\nGo+D+TigcD5zB4DYJQPwj7dV6z0SQ5e0JdiZO8smC5DEs+Pbe4SMdy9IyJjW\nAOZL7/7wD4/AbiVlOI+GeDpqc66O4Wdvxz5KBMUfKvunZIQ+rV5VX/8H0S0I\nejfrc9tXqigIw+m6NoJ9+e9Nib4pM8qn9sx64Z5DjI81x/mMeAMKGXWjwdtm\nqYGx9BptFxnbpfKOqp8MeZAWYr6vOqIDj5jGXcditzn3RLTRp8qOyPjEI+7O\nWJEeS7kGxozexeAicnZRnslH2F9HPT8+GgbOPy/7BadWxPJGLZXMadmxReYM\n9Xsw35guvQ3mQrtFKFHQTn2Fqrj3SO7tWE4jMgobMVATh0pcur323hjPR9fz\ngA08SgsWt64c/nEV9ETl0oERSogH3orwO4iROEaQ1suKz93nXsD1C3/tJdDV\nmJwql6E/iXZriq6ZH562MaLUv+olCoOGtZ3tI+bUtOKqnW/ScBU8q276uIWc\nH/xWdh5MKLB5nkVLZ+g8Jt5a3oWVID/Me/oUt89LTA2F3AX6i9wp3KPOIHEQ\nVM7++0r6NnHW7dqKQi6UQdBPG9KJaGNeaehsGT2AJLn3LOFdf/Sdc1vXBvxe\nMQFi4+Ajz9srDvT9fLQe8ZaziupwSIMiTI4GmlhotUlynJsPPRDz3ohKvpm6\n1cq+\r\n=i+GU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.546277d32.0","@material/tab":"8.0.0-canary.546277d32.0","@material/base":"8.0.0-canary.546277d32.0","@material/animation":"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/tab-scroller_8.0.0-canary.546277d32.0_1597941903902_0.2037200373974135","host":"s3://npm-registry-packages"}},"8.0.0-canary.da72839f4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.da72839f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"95cb535e916073234e85b7d2e3340fb45b3aeb5f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.da72839f4.0.tgz","fileCount":52,"integrity":"sha512-7eDyImUja7A3OKlSUdVRC0yK+3nlfYserMbu/aqkWNROgqF+4Mf0J1P/NJnInJunG/8LjQ/7Dgwb4qCaD9ZCTw==","signatures":[{"sig":"MEQCIBsFGrgji5IVC7ko5iV1WQff0hvzTDQHP4l9dFvrItd5AiALB74gh3wUELVArIFtuozQZyChXEAuVVCt3a0uK9imQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPrpnCRA9TVsSAnZWagAARawP/1bFTgXCrVQ6tY+DJ0d+\n6Db12pcScuoxM4M4X6S/hjTlp8mHbggHx3kTG3NeVyeCTRdxVe6qtCuws87i\nl5ishpqnIR+8XDsWwivlV7PH5D4MyeuXx8ZonN2KSnrMSYntngm/cExxf09t\nbbBz7e/ssIMKmFe0XxgybpQw88YXJ75LEQWWiRq9XCqv4o4utQoBVuZjakiR\n3jd/ufpCLT4+kebRi+WrobUyH1N0un+rTou8ZG/QJL778j0h1bbXePABqdBw\nOSJw8lp3oMoYIFOk8eDsxCZKhIjw+vUGXUYuUH0Oyk94afMydtEJ9rf7+33v\nvJDOfupK2Q1G05+epzOCjaQyylIT3qF3YpzO4fvRFPCqxAy5E4xV8A1BuSO3\n2/76LJDBZ7L0TEhVrtIPi92C1dZ+21PsRnaxbUvMFfK8SjFgs5FiTikxn6Jx\n6WfWjeHCYQgy/8MjVDSw+8Zcv9Bm2cDlSnC23q4HcB7ED+Wy2Oh6h7vXgx5m\nA/Zv14GiaEQso5aJ2u6yE/9Rm+Hr9rbZln8CfrjgMQ/qxwiizV1yRsRHlyr7\nqR4g2IfBsJf8N2vPCn8GNtucsPDo2stAujNAIbQc2AKzYfrSbEbZyuvyPMMQ\nNju1S/JUVuWrr0Exkmu7HhK7MZgaXMPDDAmaBDj8x2x+PFs0Eo5sbbMcW68F\n83/b\r\n=vNiX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.da72839f4.0","@material/tab":"8.0.0-canary.da72839f4.0","@material/base":"8.0.0-canary.da72839f4.0","@material/animation":"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/tab-scroller_8.0.0-canary.da72839f4.0_1597946470929_0.4658993084104188","host":"s3://npm-registry-packages"}},"8.0.0-canary.346069ccb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.346069ccb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dbe52fc1f64041eee3baa805bed7d66db3efbb93","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.346069ccb.0.tgz","fileCount":52,"integrity":"sha512-BvvigmAW/5k6nlAOkswN1GwanY5tKIF1ZyL8IOn3DizL+SYDukUd6vuLlg007VrHqa9KqUOUsVWnFNcdPqB7+w==","signatures":[{"sig":"MEUCIHKKbuRplR4Q8ez3i2nXqFSMcZ97uI5RKy6mmBZpy6g5AiEA73yOqkX2sjbTCYdYtV0eDA1ToxExbv33loTu6rVhLJQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPr64CRA9TVsSAnZWagAAKvYQAIHrKAoWx1Ko8DFga1ju\nUtDUdOt8A9O0ie2hAEWhOD9ZhmGcSrWhuGZ8Q3M1kBzzVnQslNS3cBBCIVB5\nzNnkr2pFRHohofrMV/HmjRcFNZhXrfgnUlTMd57vZthMKnAqmtcav8hVaX4u\n1N/76DRu5naRnGMzJJ4YmU0zJAlcFFtw2xdPAl+G/43BRqE5hOCVXFPk8FU6\nvsNTVlq0crSLIzuwaBzrWrwnCYdYuJnfI40MToxgo4YNXxj/x9wTgXNRfzuu\niSeBTzMA2VlDcikmbFTKyCgnlqJDqi6z3hLIkit40MoZZg/pq+DBC32MeY+f\ndHnBlp3OlYXeoBlMxn0QzlZNCx1jdglHN70cZXEyN1ZoA8YTjtWAUt3kWeh4\nirlhHgNV/xW84VGNYxKZwo1BmEP3anx82OytjdpcNvt668tkzT1mGgQVopNu\nJfPYDOLGb++sRJQxJHj9TnsxEfKX9RSuNlYIxGKPZ9D1i0VdjVV1XtiHBR7E\nx6WJU+q92eDuwzmwNt9eYD8RhOqZFojQfrzTjWjvabw38+BcC0Et58je5U7n\nQBrhFeSM9NIL+GvYpPL8EOoDgPSpySOfKoDvV2hTVXpS7QYTcFk/sBRGJJoN\nIWpvzxFdUFCJBKLgL6m9kYpJ2NAJQYRG/pllrUZgN8rvJL3/u9jBxYtfgXwC\nmJiS\r\n=om8T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.346069ccb.0","@material/tab":"8.0.0-canary.346069ccb.0","@material/base":"8.0.0-canary.346069ccb.0","@material/animation":"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/tab-scroller_8.0.0-canary.346069ccb.0_1597947575636_0.6533268840207307","host":"s3://npm-registry-packages"}},"8.0.0-canary.e27c5802f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e27c5802f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8c21e7e7fc98e22f4b0f61e7553d308ccbeb3b16","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e27c5802f.0.tgz","fileCount":52,"integrity":"sha512-K5KrZ1AyoREylD5RfYeNnfuEk5cIFl0ct3FZqu6MWzA/B86jw3amQtIElB6oE+pBeZvwMkxwobaSdLaTYGyavg==","signatures":[{"sig":"MEQCIFCugk/0OGDoykTRUQ7c8gKCjOdo7Z8EveNwibZL/1KjAiAJ+GOBkZr6cFVLN9xFdbHuTG8ajv5edMlovomykX+T2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPswACRA9TVsSAnZWagAARogP+QHvOEmTvahvL4wVPZrC\ncg2YywepJQ7loczL9Di+e+GO4H/Kn3uUo15D9sGCpNEBS8cHF23BeDPx0Y5r\ns1l8FClTBZyb4uNmbPZ9E9Gw8Y9iy7+GGFTobyhBwQ1mY/Fq+dh4n8PSpt2L\n1xZF/ofdPaNVbJiSf1eInnsHORJEi9iqop/fp1iAiZpWiKRUMBMGjlq04add\npQtKBff7uIE+reNIS7lxcxGrHjKR+totpOoyV7ILF/n98qkKUoRvLwHXyn2q\nKAsproifSDTCV67zB442QiEzCGx5lVKIQC0KetUZjy+jplMIXtvpIYgkg/a8\nrGWsOywC1Zb0LXaa7pkoOKGBd90At3M4fVFrAWn5S/DwChgSJWi0goMWx3jz\nP1Woq48R6UI7p0xyOSeO8rP7qgoaFJTuGaiL1+jFnlwa+3+NYNn0n8iOzXBL\ni5jKADi+t9ezyfckYDx2iTB5h8X1Ma+2h49tUT6vjqB4RHHQjcY+e9xZFAI5\nDbjKifgxXfEOXFUE95XL6dcCQLY9F7sRwu7CxiYKhxmbCnIfBIw8SrsZGf38\nCGBFFiEssMEKeuHOAIDhjNnJrIetQhjInA+d+0ddUE4sAvDCyUdGWVM/o+79\nA0kQT+ncWyEAZgHfOl5a98vgkj08I6TmTBqJySEhOdQ44IC+50CHPOyLDILz\n6F/D\r\n=YuRJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e27c5802f.0","@material/tab":"8.0.0-canary.e27c5802f.0","@material/base":"8.0.0-canary.e27c5802f.0","@material/animation":"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/tab-scroller_8.0.0-canary.e27c5802f.0_1597950976017_0.6349114861660674","host":"s3://npm-registry-packages"}},"8.0.0-canary.f4532b9c8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.f4532b9c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6aa55587b98557f951a91e8334d444005609843c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.f4532b9c8.0.tgz","fileCount":52,"integrity":"sha512-Dr0kMpWbXEz1uOH70YxSBBGaLLL1SIAZdrILXegCDgEu7vLTOhNmHG7MmT9F5XLdC1rbP6goLlV6CuTyMeq8kA==","signatures":[{"sig":"MEYCIQCnA0kQxQ6SaH+UDHu9oHUMItfMgYWOWoIRlevSSLGFnwIhAIZ6XKizTZbTlY21MJyaz+5GEqsIsXjDawH5WgC3jVpR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPtX0CRA9TVsSAnZWagAAm9wP/2XGl5d6dcurGaf+KmpX\nngkgQbETUPohrSnoyORlw9xZ5HVdts14kZPiggp9/AWKOjZlJJT6UpTIqz6F\nXcwWcWgDDEEWqUfF2NZ47XltvhuVICKHFdSj8vLb7bYbaPuZUE24T0KRBzR5\neagkh6SZGRyigqzOMolhbo8QE7KNGTgpVsbcNvN5N9usuOrAc3+NFoGOvSSM\n2Tlln/tfU2+BtmRcC7JbWrLzh7kyMaHOyGhsnWGG46j2T0rmqC2R4FtUjdy9\nhRRdePJG1xm2ab/kJZO6XY7BQnhZBdcb05KvBs++ug4rHVSpP1ewgMewj0Ta\n++aAuVH8YCMvkKuq+C3z3F+yfv+KVYAjOAkyAy3ybIjdCD75t9wOCj0iXYA/\n6N9LCf4bHOwOceCAhzLXJchKlEzWxBUfMhyvFolPlSlUxn8qVW0/ubOAJQCS\n91jmYCuQ23A6LqZRr/iwKqPp6paYhCHoBvFhCH3uG4MJL8SQW1i4XtMF8BN+\nbaMrKrkjSXwxVK10FQ6ZbABhb61r6qjgJvLkbd1En+5yQpZ4gF9QGi0iM3oy\nhqDKPdzZlMRLkhZkNWGvVCAag2ZFPNzpYdRAiUK0RtVcgYrz2qZu5Nv9R4zI\nwwBWq7T+fkTGSXvzoEcnd/+H+7AL5krSpJg1dLDMFcx8hTn9zWhjH3j9X+fC\nSSPF\r\n=ze0q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.f4532b9c8.0","@material/tab":"8.0.0-canary.f4532b9c8.0","@material/base":"8.0.0-canary.f4532b9c8.0","@material/animation":"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/tab-scroller_8.0.0-canary.f4532b9c8.0_1597953523744_0.5734705842352952","host":"s3://npm-registry-packages"}},"8.0.0-canary.fbf73c2a6.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fbf73c2a6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6ddd9f0fd8c4ad398a2fe8eb2c9286544b7b2ad8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fbf73c2a6.0.tgz","fileCount":52,"integrity":"sha512-sK8Xi1a3J5WsnLJcNWbd3hA2qiDkfWfXW0eV8I8zdUgqMYPHFqPUBOXhJcq/J/yGoS1kzqHE9Spqay91LhEXpg==","signatures":[{"sig":"MEUCICnqqH0VvGPvq3AKxt1MSy10u1r0jIizVtw8hlVx7LtaAiEA+/jpLmik2+ZLLOvadHuNCUJifKQTCp0BP0A/RC1qYz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPuYUCRA9TVsSAnZWagAAP5kP/0SGZFqy8o1H+JtCPZaX\nEHszIKU4pQrei7qtuU1yrXT6Vheo3cpCXtRPhSNsmZ8F7vOJuHOCFG3h6HNd\ngJtoex+v3afvCwpCPfQR6XVjiO0Q5V0LzxD422MVFjebpXT85YizWFfs7p1T\nN2QazukkUIlcY5pv19BsT8MIBzHB799DwjnSOQbgWNShDhM+Dnulstzmk55o\nbjeiqcj8Jgov3Srcdh0KP63wubEbzkgVluwtkhSZyAxyUvAMIR9Evr4pJfP4\nOfd+XvvLAH//5DcwTsnjPIJWe4QI6OBxX4WOPZN18LV7fUwaUSdoVyXbHOBq\nWLtg7E0/w85halmBt0xa48NE/uo0nGEWJCPJCqFiKKSQHMQ4G/o+dpV5o/cy\nO96dgir6wYChyFGv0CrRgLi+cEES14Q5Tpdz/RSLisAjS9ntp9rLMjzFdLc9\nX11+0wb6JlECc7c7zg3hJndoGnZYsHkWA/C7A7pNQay6TjVHkVe1asK2u2zD\ntbDhPpFS4ECiq+YOSFr5zhJDVipyxC11wcMD/Qsa7/gXe6WgbUobvPVX9IG5\nwv7d9IC/cA7i4L5r67RJAebpdZm9D/6120Tq1CqzFZTY1C4qVKMXCxJ0tkRN\nRKYeLj09bsxrqmgFIQgM0girBcdamEw5mKKlA33gjH1YpMq4CUlU6/cvJkqE\n61DM\r\n=O4nB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fbf73c2a6.0","@material/tab":"8.0.0-canary.fbf73c2a6.0","@material/base":"8.0.0-canary.fbf73c2a6.0","@material/animation":"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/tab-scroller_8.0.0-canary.fbf73c2a6.0_1597957651688_0.36401979932570616","host":"s3://npm-registry-packages"}},"8.0.0-canary.cf800124f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.cf800124f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"35576ff728e675be9fc3dcfef0c54d70526add5e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.cf800124f.0.tgz","fileCount":52,"integrity":"sha512-vwBR5Km3ImkIogq7XZQxz9B6f1jl1KUVQpa4eXmTqStfFeHCVOWrQc6VPYy/gnpVEoPIiuRuH/+Krm5B0lyeHg==","signatures":[{"sig":"MEYCIQDjfQtov6R5bKCVPzXvX4qFtfs0ah2N47hmI6q7JzT3uQIhAOFH5DQETtSJqmpgndj1sUz2KRb4Qemez0YEhbJ3rWEK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321602,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPvDrCRA9TVsSAnZWagAAGQEP+wWv2RLUh13ybzDgcAHt\nutEbtIaIIJijnp+tYur12Ow7/9Oghr+fb5QnbzoxRbn9aTIhkuDDln8S2NGE\nzVHcs5vm2TYmd0leP9kTFWDm+oqzq3T9q3snA924mEAw9SKya/rHGY2CRkj3\nP8pnIZljeN6V+u13aCp+0DPrUyRzMcGDJMx7x8tTKMelVEhrWjhyZXQXsIpB\nWEZaaG+E/p7pYmB0LzAqjeQVzmP3yopbiOQcBud6qQMeN1392550e7Xh4y7x\nj5zl6BUFT4UchJu8tKLOZQgpSoSV8Mxz69U5tVAIYgIsa4fzrb2VK8RAkmuF\nL5QdhSWbkwGAXMfSE7UYC4v5207IQsyjx99gDQVwbdziip/ctptPKXV1E+X1\nEm1obOlztG/KPAKbYvIkuUPWcuxBQ/NCNJ1lPQ8GwZs7+lkcJm7ASFno3wvJ\num6epv+sapxX/UU6tFSUko/IIts1+4Hj3Oxzz1m2AepaT6CjQghZt4JWpesK\nTi+kNaoEvIIQ+li0yeyg6FVmH/bfVxx1khTTytUQwTDznWiuzypz7h9/cV30\npG1SfcGl88rPQ6lBCXjM1hGQQTvcdNzpSX3bo7s9V8LaJKJ6jOeAO4K/CQnP\nL2VPPI1cidMej8abMsokmm1PL+aTk4zyqYeanY017aFlaVQomyVDp8hO0m7+\ntSQM\r\n=yk+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.cf800124f.0","@material/tab":"8.0.0-canary.cf800124f.0","@material/base":"8.0.0-canary.cf800124f.0","@material/animation":"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/tab-scroller_8.0.0-canary.cf800124f.0_1597960427166_0.648248213775475","host":"s3://npm-registry-packages"}},"8.0.0-canary.95e4eeea7.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.95e4eeea7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ebc9830c360b96d90133c00eb69bf1983fb1c4b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.95e4eeea7.0.tgz","fileCount":52,"integrity":"sha512-d+rgrvvVaoOAYJZnTle2MTgiH7nCuCvZx+s9N5fQKgjw3h/b6w5xX52y1Y2Ty9wGM/lAcIjturFjaogYE8MkXg==","signatures":[{"sig":"MEYCIQCh0jTSN3Ubvv1ZRq59OXoMlsGs7HTK25ZGcaSFKmSYXgIhAO4vhlYK32rdzfWBqjOc/OKHXot2zsw1tlJPM77YHMSB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfPwdwCRA9TVsSAnZWagAAum4P/i6WtFgIzgWApiH7Fcfn\nyjxZ0h9LfstCF0GpPYAa+jLxoec6QM6jfdF0u8Lun49liqeSbuBTtu5CoZnl\nKEQSfw//A4s3DkuStP40r0pFWpr/0LLPgAqzIVeouyJdZodxz0rxWyhzTpJ1\nwl6WjCmrJMHRntIQfKfx3JNmo4Ft45CcHa3uT+rzpOOVZ6LFVjQ03ZzvCucl\nMVucqr45rFdOaDp2DvKGPBysN5NDu0xnMgYmLiJJlNN6jzkN3njeuV6hw1rT\nq7yPDeHDmq4Hc5hrqCSU5Cu4lVCb+TxtgNuXX1GR4P/XY42aSoT1+VRZzxfa\nmtXVNfrwcsjk929NbprpLyNPcFV5x60qyszreSVwfMLDUTTE96eioUGywjLm\nJX4FWNyEYyqUbXstgvZR3LkeMdsdIyjKQ+LgrIAW5DvqnndFCSjVs/eGoHmg\nSJhlxoll2DWJ8z+yay89do2E7sE2gls7f9BknWKmEw+s7RmmgegRs2JpRwrH\nRv9YwMzTl9YL0snNeym24cKJ1pmhiFEBtF91oPi9G1RT7xFscBE52Aw9SprL\n2/zQAl1VT8ezTJ8v9TbcSwii/ymdPhsa/XbJTH/0GQrOnSioND69B4lZkSyu\n70kCgnAcyCGvGEm+5QYundZ6IYU8ltrl+EU2r7UCojZAtPFDcV2wHGpex0qi\nnvQk\r\n=tRp7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.95e4eeea7.0","@material/tab":"8.0.0-canary.95e4eeea7.0","@material/base":"8.0.0-canary.95e4eeea7.0","@material/animation":"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/tab-scroller_8.0.0-canary.95e4eeea7.0_1597966192380_0.1148763147613252","host":"s3://npm-registry-packages"}},"8.0.0-canary.91ab1c62a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.91ab1c62a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ff3bc5a0e25595f5e64abae35da0774497c95d4b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.91ab1c62a.0.tgz","fileCount":52,"integrity":"sha512-LhJ/JESm56vc/qpWLfaHo75y0f3teS5VfzUc9F4Nw2JIAupFohEDwpbJ3lvsl3v6Mxe/1q1uIXH2FkarHQsXfQ==","signatures":[{"sig":"MEUCIDo4f8qynTQ0cV8oHNWGiaP5oiUna62ve/AqhZPvOBaHAiEA9UUCA/LYcgF/z+0ONkH7YvGGfDw6dUNhztJPvW+Prio=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfP+RwCRA9TVsSAnZWagAAAw0P/0o/ypeSiFTj2PKsLk3g\ntCnrfZxPCUCY4nbyhDXbRByZ3qtE69F8Jl38C+eRniZVx9jB0bWODeuul1C6\nmOZZpsyQnqUynUS+wQtLEUfrVKA7aDP6aDPDul2HksQ/3mgZIvt8Z5ZJUQr6\nU326VsyMeOD3/ejhT9vlRCbVQItuCGpjuUeJiy8fvy+Mlw+bsjnSofmx8OTd\nY99CuSrS0X2MoZWvZVXKXZYAq/e8RLpVelhOH3Mx+sozVlPTFK134HywVh1I\nkmXJjCPVSoO9EhSoifYU7pCtUrEPFCbeSsY8mxSzXY/ekh+2ZNb/6WEwpAbX\nn6elxKYuHMvh34B430GK1ky11v2ucZVSkO6J1ooGUDYK0riSKIHbpjN7ZvAm\ns4relG1EN5+KXbtpj5wyhUFtXS/tqmNeq7nEO88NuLvICWDpY/t12uAZk4PV\nuYPaMGWdhgX59VD+6R6KlcO/QVzHFZuGLg+MXDdSEkj//efo6ZrEaYqb0wCC\ngrv3rmhvcLxwmwcu8/DsjiXCJjE4Zo0VGvyi73o98PELB2J0OkK0+rTVxOEP\nIDIjmyUZXwscyb4U9Pe9sl6ZPbsroLOYHqR2sNzbjv5+OcBJUstz/DiDvb5T\nKUWLTV2s8e0N02minwwtsonYTxbU2GffMdd0zTj3zsjoi5FrdqEoDJ/r+Htb\nkaff\r\n=06My\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.91ab1c62a.0","@material/tab":"8.0.0-canary.91ab1c62a.0","@material/base":"8.0.0-canary.91ab1c62a.0","@material/animation":"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/tab-scroller_8.0.0-canary.91ab1c62a.0_1598022768216_0.1627049896583661","host":"s3://npm-registry-packages"}},"8.0.0-canary.58eaa9f02.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.58eaa9f02.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6e273e91a382990ff4f57ae96c9e674c744a2bd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.58eaa9f02.0.tgz","fileCount":52,"integrity":"sha512-1LvTXBxMWUxAbQBs5y+3Q1CmeBecu5M/1I1kgoeXX92Fh2UbyOTJsDWY4dfEmM8+0lJRzcWpv8rxNffEKYNX6A==","signatures":[{"sig":"MEUCIQDu94RMxfNH+xWW3lp3Q38cBqMHtWASRio3nfoHFS7CEAIgVtlEL+m5P8wjRhhvTcaXucAMlO4oVpXCAzlxcmYA6T4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQCgWCRA9TVsSAnZWagAAQjoP/0zCydaQFuJe/hTUYLqg\n7a3FU+8JrnKL5F1LHfP2zpEGJWcUqX3ebROOQRQBHWnF8T6GhzVcjghPZlEA\nFM/sR9xOjnc62/nJdE4+cC7nWE0qEc42PJ5Vv/AVyKXtciAva/Ruaa2fw7Wx\nHTMh13ykJ9CNiUOwkLlC6jTvMP2/ETDuRI9D8L/catUv3se4WyH8he0+eprs\nhxr07+Mg7X2u8DPvMDLM5MBiNzKHk0ofbJ6//7mlZJW/+3M5x9IGX487jyQm\nAcdF6DOA4J/JfDFasHFaB+daoS0pCu8G3LcZSmEsFKxS6w3ewaZTB0SPnOew\na3Mmoe5Ffqc5f/c0Sp2Q3YDcEii3yjgodAihW/TvoM9sfjg620P5ZMDMs3V4\nkUk3SWU3/SRrYpBOPVYZskLqrXP9n+afwRfHom/Zmu6WSRLO0s0ocJymEXqJ\n4U44JCuOCsowMrNIUmOxm3Z0Ra0uJhcokxCd8iikpYd6TePXdywSmUTWE+wi\nfX0N3Z5rDsCxVTAocxb0jGr5cYgPkINDrpSrDRfT/xo1tpPLurZBg1gAT0pY\nTHZONM6OK7V6RoRh7EuzbDI1rSuvDckx8jFXXp4w/cLDU7SpITuTtKqWEdEQ\nkM8H2Yhu2ooM67XV5HbbgQgcH61bO72UpAAcrJJjWdvwmqL+j0CePP2pQGlt\nUlkJ\r\n=ypyN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.58eaa9f02.0","@material/tab":"8.0.0-canary.58eaa9f02.0","@material/base":"8.0.0-canary.58eaa9f02.0","@material/animation":"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/tab-scroller_8.0.0-canary.58eaa9f02.0_1598040086060_0.2541385387149895","host":"s3://npm-registry-packages"}},"8.0.0-canary.238216fc4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.238216fc4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8d3ccdf13cfc55dafa2b41825c436979f0fddd61","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.238216fc4.0.tgz","fileCount":52,"integrity":"sha512-DFnXMwIIGnA+lOagRu366uJNPcix+74OTniB/s519BrtTfZvzDu2MN8aWWhLXhko8yby32301n0n+4OUJLPV6A==","signatures":[{"sig":"MEUCIQD76clB77l+2F3oOIPrstDjCcDN1hxgWLsy7p+mNZbs4AIgbXY/icuskTIHkujC4Yav+zmFWL1LaFaIYYDqopSBoX4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfQ9/BCRA9TVsSAnZWagAAabIP/RRexH7++6JGn1O6Xax7\nqDRrnRqe/BoHmece9ybi934aZsT3Pgh8kHZV1Juas/uLA9Shc8Je/LzkRzBO\nBL2KyjxcsW1KkYcziYON3OcsXixJ4YyEFr12gcRpgpIvZ6mHU7Uwr1iFeyiz\nhhDN4Kb5XSoKSQjBk70nUmrZVWllvoyv2rmhL6yHKjkX9AwvswAQHw9yPmE+\ngnn/2KusJD/9TGhYF6+lubXnhFi2yoxEwOPE3++HrJ8Cp1fBYOHnZbREkJY4\nFZiRD9c3ioU/meuDNu+Ten/mVQ51d29hqGTEhdsD17PBlWh6bhqmbasrQrdJ\ncZn3Qi9gpfWfuao+jfL8IPQWLvlvrcGK/MibDsMloy3PE6CwjQy29P/Oizzn\nagX9VAb/m+y6IV7jMQ126E6ENfjOwPJAlriQUQD5YKqvSo1U+qwl9FkaRnH7\nOLzIRnM8hqdVhWGnKL9RzZkJyVdDzev3RIGgEUkiRbuaY96sYvUeAk+O4k1y\nyszIxpHN9dqkffOUrDpq5QHtHPqGWsQvTtgQXU1+yrkX1+PlHOmdMQCCqJ4s\nhaXRZrh2CKqAC/ROFdlucOliKbCNlSANBTrkGfiRNe8zBJDGgI8KQnSD70iN\nIyrMPRACHz7r5sNo2duNm004XhAoJIuqShXKNYVb85hTbSL+Puk3azhfTI3Q\nd69U\r\n=rg2j\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.238216fc4.0","@material/tab":"8.0.0-canary.238216fc4.0","@material/base":"8.0.0-canary.238216fc4.0","@material/animation":"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/tab-scroller_8.0.0-canary.238216fc4.0_1598283713492_0.7293278378140662","host":"s3://npm-registry-packages"}},"8.0.0-canary.a1c65593d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a1c65593d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f4dc9a2cc4b5106e71573cd3f40af806e8816e16","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a1c65593d.0.tgz","fileCount":52,"integrity":"sha512-rrQb2eG6klBPfHKnrHMp80fJhzA9CeakLObGlAxXAs4iMe+xjhXH6bUh693+n+E/7eiBjpUNBdRToz7pkpIlow==","signatures":[{"sig":"MEUCIBET04GF+5rI9hR97K5ZwQeBHI4AS3dgA7hJAG8+4ayWAiEApEZmcIH9YTbZpUm6rabGd9DENXW59urLNRq6zF9M/5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRH/TCRA9TVsSAnZWagAAYq0P/2oh0OKTUpvzoQYLzIUI\nftJ1OinBpQhSpScDQaUaPCzcYd5nLvnohC9Ni4PYB7GfUmY2ItxQwRTmx2Lw\nU1akuLtwuVi4p8w7TfEQFnjSuR0oq2E2/DlbtPz9ii/MaO2kYeVeLc3Ua8w/\nbqRcdfeml7kn2AssKcH/3m+AVJ8SB4QDofb2RZ6SIuvA4RZDIz3ltruj874m\ndiuxYeivgko+1j+OtqV0FzXYGEMN0DTWScGryaY2Q/JWlE4pMtVr038Jp1Ek\njF74L9Se0snmLvCSd0Wy60VfU4mvMkOmZW/Zjh7qsAQRO3Qxmhy0yx0NC1Fm\n7GwKeUfmsN1teEkExZ8naUEAHhpB9LgiD2iP+lnqNNMsdr7pDgb5KMITOmAg\n14YLl6aUWY9MaAn9H8rVzTH2QRqOWENGAo6w/EXcd1u81W0OoCi2Yi0Yxdk/\n3R5JBa+jutEn8tqJEH6a3O9iqqXlcL6SKO7gIHxWMudsDPg4CC4CZ8qKQJ08\nGJuQAWonw7RIBvB2XLwmOPWnClEZ7Bsc42qWOovjWKTFRtQSMx5+aZQqyGFb\nPBzJHryPlj+0YmhMiUm5EaVDym+JiQjr9YVaXcvbthcjs/JktDaemqrRh5NE\nuES2H7DfpKGclo80Q7Rxgh0BKkrjOlG2C+/vTUKeFN2Sy0rYTOP7pnqPhQtZ\n8k2P\r\n=ejfO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a1c65593d.0","@material/tab":"8.0.0-canary.a1c65593d.0","@material/base":"8.0.0-canary.a1c65593d.0","@material/animation":"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/tab-scroller_8.0.0-canary.a1c65593d.0_1598324690650_0.583161861206698","host":"s3://npm-registry-packages"}},"8.0.0-canary.708cc09c4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.708cc09c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0804ea6b0da98bd1196d40f4e0d7b62fa333762f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.708cc09c4.0.tgz","fileCount":52,"integrity":"sha512-3DC/Ca8wVPZ/GYrxnxyWzi74qo1tbPvCABvseXbrf/tMyCP6HEB7HWVdgceT1fl2dFF8C/qUBn6cohyxe5noSQ==","signatures":[{"sig":"MEUCIQDdF4NXVtI3j94cmYoHUz0zREexkzsQGbXaqNswWLxidwIgLECHuH+Nz5AoGhRUtDMEDi9Wsqw772WDBF8DszuezFE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRTToCRA9TVsSAnZWagAA/rgQAKThfC1xk6jT3uj20KEo\n2svvyXSXU/3sHpAemMYF9KORiwI5yGYRyrBrRYjuN+bouz6iPII9o1ggX07k\n2yOxytoe05x5kfcCwmz8cs0UbTSEqxJmcDWgGiRZDwuwVo+t2sat1rFnt1n2\nrHLFG7hGtsUh5/LyAoe+N7ogRQCBBOKx4metgihA2h8HSbmHvJJAGjYQesXe\n9+tfjxEn9zNdubfqGSlQeR05RMUDHSG6cTdOYueuguhalvm7EiElUrLiOLNu\ndFtptWEB8Bm4vx9vQ3Afh/4AOftJoYa27odWZaCEqZ6kdEfFVE1Tu5O+EWmh\nFHF6lJburqFmMqpEqIK9tFqPI8C6GWR9Or1+8RiMwNIxjgnCVLei2QQdsXDq\nrRQFRrQbXTp5dL0lPBxXBXIteJyycoKEv1EwSVicpHQmUUE7zgkL1ObeLX2X\nWeM46aUDVvRzbHzltkF7DsbByaS1cxr8BW5O9SusCq9RDXSEd4OL6S2g5w71\nX4CvYlTZpDCEPrqLr1GSEXUCDtS2xkUCQJa8is7iVS+hgfCuhtrqhco1qF2J\nlvSfeZxF8Nm74iKbRhfj76EpnJokvkfNYXW3WIXRs4jwNCsh4COuhIXFvQAz\nzssC/Ll3v+k31YGw86kkPQjAknOA6VBz8CwSO55newtHvG53mUhr+5vSGTtx\nT3xl\r\n=qMgY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.708cc09c4.0","@material/tab":"8.0.0-canary.708cc09c4.0","@material/base":"8.0.0-canary.708cc09c4.0","@material/animation":"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/tab-scroller_8.0.0-canary.708cc09c4.0_1598371048276_0.7310335715309222","host":"s3://npm-registry-packages"}},"8.0.0-canary.19bea2ad3.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.19bea2ad3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"018a3bf7eacf6f58276e603bbe66ef602272a764","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.19bea2ad3.0.tgz","fileCount":52,"integrity":"sha512-aMZYPG8UTbEwQQYiAunMO9quICGkn16ng4NLH/HhgxJErhhXeH0e/PTVfnL+jzwJjpdjAazqkHAZBPcOAlXKBA==","signatures":[{"sig":"MEYCIQDT3ORTb0bhAPj9Tqpprsp0YYMj4WZc42phcXrO8JKjSQIhAKV56F0K6k2KhmbpTBQvwhkBLJVirbaMGqeJlvwn8xXg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfRq7zCRA9TVsSAnZWagAAd1QP/R0iU3JhQw7IMMNIILXN\nP3U5vcWU3sHH0Dx6oMcriRw3gX5UKET+AtC6W2set5vDf+Il61gVcCV/aYOT\nCt9nDQ0D8+KFDSyj6syVAr5WI2K+NYmieZZaK141qWDcpNJGvULVlhZfmQ09\ntMdxRbHDBMrEygvvnfVbhzNZURYvbxMNNzPhRXroJfBzLQopzgnreGC0iDqH\n38omn3SApJ1u2/v1Myn52FxORK3o3UHViTOR9NfanYmmLWlL8RrlLGVO+V9c\nnEUgt9QEPv9ObxR+yFQGf1W3hICHTPUkkQEcQuXvJcmq3xSMJHp9R1lyEHlt\ncgX38tN4nwZiRtTTPbbjT2JWrSyNxfoM0zJTRYIKt8bV71fBhkuKhKm9sT0G\n+JNOnUKMttzkulyNRS41d6fP+L+ICPi5tuDSkqma3x/aF81ebuEYLYb9Dcs4\nfijAWgclJ/gplBD70wdAWIM50AtY+oI6iyY8SUfH3yJIMUekpPncNTw+rLqp\nBLQHyrfsxp2PW2U6961wjVoFKurSkFW09F/HYdTsQVPUfmRr62jBEDFWGcRY\nzkIUXOggXEkYfzXkB4Tr3uPE+NzYwdm97QXMPxacY9f2gWrdEsUHaZOAP1CF\nLUS9vD2ZgvCUiU0Y+6H9qyzJrpgSdCTpjvl767PTyZzwiWwEORGQQtuyj4cZ\nFtg0\r\n=DaCW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.19bea2ad3.0","@material/tab":"8.0.0-canary.19bea2ad3.0","@material/base":"8.0.0-canary.19bea2ad3.0","@material/animation":"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/tab-scroller_8.0.0-canary.19bea2ad3.0_1598467826520_0.20945606329622368","host":"s3://npm-registry-packages"}},"8.0.0-canary.911014711.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.911014711.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6c2224a53ba4d00a9bc26c21ddb50b8f5fc14054","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.911014711.0.tgz","fileCount":52,"integrity":"sha512-0Ha0P/Gr1zApzeW1rUEkblSk7LBS9cTPhRSNG1c7xybOXt9X39+tzgbMP2hvZYCCctBigTVZdq7j2JAbz3O/Tg==","signatures":[{"sig":"MEYCIQCCxLqeUKje8C0MT5DviTLj7EenjN9cuA6lDsUgEjjrXwIhAPM68Qs8y7bRgsj0MEO06PlgAok2F7RQZVg6ZH6njCRM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfR9qrCRA9TVsSAnZWagAA+2YP/j3PWP6AcL3e1jo6e0MA\nIf+JHdq8AocNjNajSVSUEVvXTBxIZMB8gWTqlL772B8bfROd+Lz1mv7s8MMa\nSvtNaRghiPMds/I3lc6Nkm34uQ3UWAtm97Gzce9UATyh8kqH6NF24VrfgRDb\n42sq0sySbXocARzoEDXacgYzFcmifIGxKYRzqZXdZHuXI3INgEaaf9Rfous8\nLFWGbaOmjW7yYw2sLB3BXJSnSO96iO8S2XuuqAM0+4mlyrhuMP6CiJm5neQl\np1v6I+z2Sk/2RA/u7lVHoWna7pF6nk6yLNqlul4//2mCrXLLsHrSTN8bqXIx\nFOx1x8/ZKtcHkRfFIADs8M4aQ5j/XeTcMo8xLcEFbwIIeaAHCQwWTNdcmCjM\n4LUi2Gy7NWSU9CeixRT8HCA3QYgGJ0Q5nnMOX1KSwhHioaGOQU1G7Qen/Bl9\nBUtoqCygMYiHmbFfXZwdTZS+UkmZR3Un9816zVi0X24muNJruvkVHzKOixLR\n4dpu8OskCgbMa02Jci8J3jCZAOV14ZQRm+Fa5wGBdG0oOu+dsh7JPKBQpx0f\ng+tcK/Yev6Qkvjk9VGCN6UVrFuiWuHPvegz2mSS40qNaD2EGCza4Jw2Lwmnr\nTYnTRsl7tOSItd4+mLhxe38nSA+8ddc/2XMFndT+hO37dLn/m9t4U8m2nIqT\nqzr9\r\n=B7lv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.911014711.0","@material/tab":"8.0.0-canary.911014711.0","@material/base":"8.0.0-canary.911014711.0","@material/animation":"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/tab-scroller_8.0.0-canary.911014711.0_1598544554712_0.6136165566907423","host":"s3://npm-registry-packages"}},"8.0.0-canary.d3387f54c.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d3387f54c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d7a206865c170bb465fc1559f80c0df6ab394b79","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d3387f54c.0.tgz","fileCount":52,"integrity":"sha512-3Lu/VCLFL0vokUlPMXawJUZnmCEU6h3btg0LxWEkOvIApymTnt5fKK0OqUpWMayVJVbSfeuaLajtX6dD9sYG6g==","signatures":[{"sig":"MEUCIDIhVThpz+OLjc5iczBL7+1cVfoCNOWf8yES36GWKrx6AiEAt/Ga/VB2iNNqHHl+mldeVQ7XWBp1q0pLrhJWn3PncVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUViaCRA9TVsSAnZWagAAhg0QAJMhYpP1/PFFZHmoxNbg\nJhN0FgINDrrfJVu37Vjh7et22S5aNeiFbYwJkvZVgax0RBhN8gEHtUg0C24C\nXC4E1S4wiOTenRXeK7SVTYJA8hNXX7lJEjJfeF70vrl4IVIx8XGJFYy5TURs\nn7IWUIHfoR6So54sdUJiDugUeWywwfLIKZtCbMNbeJMPgHGWqWdBlJ0pDDn0\nc+Ij4L7EBfe8yygkFu0h4XEA9zprG76jguBZ9JSBdO5wcMUuGK3Kyr09Kmyc\ncixXJqvjDQhLIxSuF66KMiyRERFIiesBQHzYtnCyB+9wXvDHFiJVDy/rrZW8\ngDkBMq4x3Ie98kTedJ16Jl2BK3jjd4qSLK0Tu1MeEheg+oT+Y9gtlQ2NgC06\n4gGhbc2SwMT3IbTVpJPGyRPB+VyKSNOcPMu97y3YGcofENUJxJgOyGPUWiCp\nZdsXcutPcTx0fvzAy0SQ4nMb50J9Dajh1rryqs+CDlBgjGEZRNiszRjNtGdX\nfl9qo0VHJ8lReuu0I7WIbYHVMrT9r4ORZZgGOR0jSGDewJbOIBsMD3p1CTtO\nhIfmx5rXdPmuXDgNi1OSPfrqbc2sr9+KjtUin8YmbyBTs/T+1XIqob869EsQ\n0/zXuIi+5ZqNWw5bWx2mjeF0luAvB/8wFz4FjeZOAYKIyZTgxGbTR0LWLO2g\n4Doa\r\n=L+Hk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d3387f54c.0","@material/tab":"8.0.0-canary.d3387f54c.0","@material/base":"8.0.0-canary.d3387f54c.0","@material/animation":"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/tab-scroller_8.0.0-canary.d3387f54c.0_1599166618068_0.3664565831228215","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ccf996cc.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2ccf996cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f37b075a320c99504fae38568f0bd6c260e97f5f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2ccf996cc.0.tgz","fileCount":52,"integrity":"sha512-7s8CnsDghAFE1sBrFyacxqWX2AeBXX1Rt9Ue4FSnK13VlAAShlZRgF3ySt3qRgmk9sEacBTiynk59Cmox70WZA==","signatures":[{"sig":"MEUCICnj3347sSEjpgrbOh+8jPLokcX0dIoIhxzl1NnMpNB4AiEA7O+xWXGHDyoTMTf3NF1nq5m5XPh/b4KLhwwBvAqsTuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVi7CRA9TVsSAnZWagAAodgQAII1pHpHPBPT5cOjdTHm\ny/6uKT/EKrdzzdig4w2epTu1Z4SMeQTkyN+yIwUypuHStuTjXJeOB/8o/MHt\nE2NgGmDUWIaoUbvVkLU2VfGOnbs0qYlyZODr+dS9VQMkuupVvfvXyVa6vaCg\nR9o0+a8RzgM9WSt+5rCS0I6CG+iIE72eDbhlRiG95YHpjjHBV8AJmTJzlo9r\nToJvKChGNRrBS9OLWtpVzZFEIObItqk/X8Tiuwt3zrvxKk48PFWcMN2Z5EgN\nS67XE77Umig+inZqC4SwgAYzUO+GM/bXJl9sH9LeD/gYME8eOwr1vnLZYkyp\nIYvwM5DWnOEpM9FVzEsNy4hOS4yQTn5l2Ud9g0haZIarynSM5Eprl4jO+lCp\njk8JVp7WMuW/R7UbYbPp0nPqhhEgqHPDPPPyKn9NrxoYN0BxTuJPb91utfJM\naTQIojPNSzUmghxPmDSZlD0TjEAjua4ZJpbYYG+evSIJedkVUm05hRBXOhWy\nJYubaHWU100T1obS1lmEp6RfaLTasVSeIwNvqYFYAjfPWgxc0YUlz7izSpXv\nCoROpBKx9pdPQMFmDsz+pOIFQ50rB8KyTFUQaiBewP0x5L0kwg5ExxqIL1Fq\nuyyE1TWSwAOegb92VW4z+YpUZbkuVghaNPWUce4yTMBZETUM8hQa5l+I2pfv\nnYb0\r\n=ft7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ccf996cc.0","@material/tab":"8.0.0-canary.2ccf996cc.0","@material/base":"8.0.0-canary.2ccf996cc.0","@material/animation":"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/tab-scroller_8.0.0-canary.2ccf996cc.0_1599166650957_0.5221868962501524","host":"s3://npm-registry-packages"}},"8.0.0-canary.744bfe5d8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.744bfe5d8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"74d0e2c2687c3692b1e69128714801bee4403ca4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.744bfe5d8.0.tgz","fileCount":52,"integrity":"sha512-X1DYwhmca1gcFBUzOuala5+0vKH1rPhVmvySzC7X+rLkRPwaM6A4IL6OwcMkQEpyoRseVeicX+PdyvlbRhJ33A==","signatures":[{"sig":"MEUCIQCZHUpTsPBTSLZDBRdPb85BUy7ym7BJWzvuBr4UqE/GqAIgTPbJTEtaw+Mh71O1siAemX8cgtIaOlD1VF6cz4CgqAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfUVj/CRA9TVsSAnZWagAAUsYP/jBKQ9tn1BwTTlkUP/b3\nilRH9v4httAhKrJK5EH8PAnl2Sf19GmCnMi71I3Gq7te2r3MGliJ/HEMatjR\nRuf7XjrouVUsSLTAGbQ3sg7XsTZzqghVm8UFsTIjEMoWmoN23z+3Q/CDDHbq\nwIThZT0FsKLQunSpiskSMdpkzZgtDGI0iMZQ3O+3mlc7CPqtFYjHXG4DdN8A\nb7uh99PI4FImwVVTA27Q7VcuGO6Zuqj9JeYvM/HCkxBpo5cACiCqdfTPL7ei\nZklMFFCaMGFEJrWBeO/SQ50+HR5b2jRN46B0kRCAMtWvO4X8IrOlOGO6LL/W\niY7SN2Az/Q9oyJ3pWIQ9zRab/5Sobzaz6bIeXPTEKxtLJ+YXglTSm/llnAqP\nALzTGVde3WPHpje334R8PpzMppA9MClwkRajiIASkxVLlzMkNUQCAzPIJOyC\nxg4HPrU7lbbhiEtlqO06Pas6D6cb5PWXUxzcG+3lKKKRy1MEK21c2rP2K4U7\npK0xtgPUcviTGLp2AV+snK9KHDVh5q4wjEA76CjKA4it1srHaCwJrEyeWA+/\nljqn/IpX16MbG06unoRh0I/Sk0J2bw0PvLvk4yvjpW3pZr+00zL6NSDKnI2x\njf1nHZamH/nw4sK1gk51WYds+z4ZtIX4ucx/RYzeZfrUB6Hxswrdd1fJ0ftD\nw8qH\r\n=Sml0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.744bfe5d8.0","@material/tab":"8.0.0-canary.744bfe5d8.0","@material/base":"8.0.0-canary.744bfe5d8.0","@material/animation":"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/tab-scroller_8.0.0-canary.744bfe5d8.0_1599166718888_0.3091327139317812","host":"s3://npm-registry-packages"}},"8.0.0-canary.78da96eaf.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.78da96eaf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6ab29eedc9f126bdd5f6c831f89d271b57e4e037","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.78da96eaf.0.tgz","fileCount":52,"integrity":"sha512-OzI17ONkd4UDeI6vjjoe66BxHp40yomV+VeubAFWKVpdU9+AtU4nNopA6j3HSof+t389C6oz83aHO6rlpfTYyA==","signatures":[{"sig":"MEUCIQDnmxk23WhU5R2lF+usfGO2vX0fKCovKMKQpP4xUHrNgQIgEmpbCCQdGDlsi5+GLDPdjTbwWSoLo2QxFKCOubh3U3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfV9fzCRA9TVsSAnZWagAAjCIP+wUxeeNZ+lsOb58Q3Bzh\ntZdKs52Zgy/HKsWCib2UfG3uf7btZhFaLDUW0OhLccnR6scuBzy0utrmYUBW\nPzE3KE3jFr3aP/uPjk9XZNDK1yjDJGPmBTnFXv+LnnNcZw6Kml8XUkFhnfyK\nM8o5dSAiRu1+zue6fNVC+mzHxi1uas5od7wmjk1zSoTUWSQUZMZNveEqb2DJ\nn7iEguZtm7gk+NNwuHHxLluxFdMGHz2NjZbhMG3DhtCpYpvKy1E+TVDEauVS\n+T68sxxd0xnZ/CNOpkdy0J7MVizPUXfTcMy5dJeIz0WKqyGHsNiNQUAbxCuX\nFVezHhdqyi9LVWpsddfIzzznzw29uEzIDd4UdthzzLVyUxmU9IFYnv8zBef6\nV8GqAVnGLOZFQc5EAZia2ALh9sj9amn5rs/8NXn8f/1vuB+r/1YZRwCTmhdx\nU8JgimsrPAzCnCXzZfBltad2fKb6DNZtVx+7P63e0yt1M4RabrgTTD2NQxOl\nY6m2kGtDMoor6yFn3nOdR2daQJLZEZxoJUGEMXTrXOGJdF4cUv4r7Rv62Grc\ni9C/KsvlCU7AwbVXua/9pPP7etPVZQ3rOX0gWHAHldieF5L/M7cLlbg7toWH\nq3TCKj02Vt+IBYbJ3ytNh/JgWB2KP7RKsICt7Mmo+dvHALp31TiUQZHDNBen\nuxaQ\r\n=Rq8b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.78da96eaf.0","@material/tab":"8.0.0-canary.78da96eaf.0","@material/base":"8.0.0-canary.78da96eaf.0","@material/animation":"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/tab-scroller_8.0.0-canary.78da96eaf.0_1599592435402_0.5234354026852899","host":"s3://npm-registry-packages"}},"8.0.0-canary.b0ed593cc.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.b0ed593cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a4c65f8258c0a2eeedcfdc58830520d3e98a7939","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.b0ed593cc.0.tgz","fileCount":52,"integrity":"sha512-3qvl3DSXma0tBfLM2ylCF+OV8F4RFvemWK3CsCnvKJbSGa+jS9ZqXgwG/PyKY2uFRgQWCvoFF6mLJv7BIWi5LA==","signatures":[{"sig":"MEQCIGDhOxhi3zAcXzt85oXlDn4zhUb0OuSf32Svv0TQrZUGAiBcj3RLVVxmcBIWbM6EggY53JXr5HzyvBcfdZFLvJPnrg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWHNiCRA9TVsSAnZWagAAnAoP/3BnKEXJvGltAN8DgqsO\n1JONF0TpTnJo37nIVbgEB8NtAwyGenPiPrlPky4JTb07KbMaOzV2FxZ85zHJ\n0uSGflmixfv2oAaDPYEdtB9d/cNdcCERULtyQAXz9TInUqQh/F4uDV5zIqyI\nE+T9raqcGheJZ8GF0qbX+DbsuO0b8/q9/sohMlQweduPHb67hi3fZiy2IQMp\nJb3Cr3RDhYr+YXUXGdrEoCt7HPy669IwI00fFruX3tTXHxZnjDUu9+C4k8/D\nHnei81CLyx5uSypdxoXsRBJULILBC09ZllzrkjsJORm5qp/V2NxPBrjiljfn\nQTUE5ju/+G8j+i0CjpGKr5dlhgCzxTBez4JbYE0TQJjudMVnGaa3bhTZLpVH\n+OVF1KOroMJxxfjWs8ZmT9iMQv4I1qRy09xUCVzAObPt0ybbdXD4xxTEDhOq\n2bSStPGZu+EkShBnf24/B7L/SpgVEAMwAglLwH5baYWER7GeXKyDSWt+tJPO\n1GAFCbZmiRiT0HzMxUx5dYF6TIc+GPEjnyLZCUFZaJyWhod0TNWj4molpjl7\nfosdt3HkZAQlAhZJ40sRXeZaOqTu7dIk11wybAfJ9wvcIJemHaEX3lngu0xy\nvFYQUKpoPFmtMr22/2ri3757uyHiEkYRf5OlYhVeOsj30Uu9Pd2VReDg8cCZ\nj6p4\r\n=kRGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.b0ed593cc.0","@material/tab":"8.0.0-canary.b0ed593cc.0","@material/base":"8.0.0-canary.b0ed593cc.0","@material/animation":"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/tab-scroller_8.0.0-canary.b0ed593cc.0_1599632226179_0.7567563856267268","host":"s3://npm-registry-packages"}},"8.0.0-canary.85a1fa9ea.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.85a1fa9ea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d6c984fe2ea5c6be245e4accb19a0597b2016da9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.85a1fa9ea.0.tgz","fileCount":52,"integrity":"sha512-l8EdVtVfj6iOFC6S97kJCJkzR62OCUCUPFjbMBinfAHGMVnSMl0NNmzfL8ZFP8Bsu8oHfhkbhrUztjQPPvV7oQ==","signatures":[{"sig":"MEUCIQDU2a8mq+by5aXu9d76nd6/nhpchMCFoTCJPv9Y9Lx/QwIgEnC7/XkBYBrpfIiMDvHuOQeNp6HIZCKCWpHsx9G6Nkk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfWpaLCRA9TVsSAnZWagAApPMP/RRkQXYAXUZp4R4YPpwH\nWazRxfu4IDz2brgiqVzG5yqyBokokQFa5J/oGJQrhbOWwW/qyts8BKzHsgkV\nuJyOueGXy7iuxt+tEfHhufpI/kmZx7rENvRHWTW23pT5fz7blFPttO7Cxdlu\nWM8xEXcB+1mUPYQqWReFvJsM/1I7gn4Uw0kwBudBI2IoALt12ZwEcyF1f/Za\ncVOV6ZmYy926V/AAjQzrH5bZcZ5Qdd+/m1WZDL98pqbO7L3qn0aW3AJh4JtI\nIC0CGJMblHeyvv2NYiDv23z4YKl0H9yDHwrfyT8QRS3G2+YWC5jR+nWrqRwR\nkNs4YIJN1Ml+2e+8Rh1+t0Uy81tHLZGl2nLRC0eTyu2bjtiNjqrB+F8BIxJR\nnda47Hse0FkXYhMrK02A4eP3N8kVbrByMydZ2W7JFxLhRHFvByIMidPT4Kx5\n7dbWwkx+h043ME27CTt4f7tAR0LSOKteGD0zBMwK/pFbIGzOu978AYYmtxvE\n+E7RJoocZDydMinHO/6qmr3WQM0ZaSKvV27NhhJRa1ISSjAFunkKQwTQK/h/\nQ7zo9meNPjj0wvq5KA+ZL+wh/WcY2t53Bq6s7QqTsVFhDHcPLjqUAA8l0Oic\nKG0zR5l1oVzCgKdnh/XfSklfIgRyWhndGJYiPF04z4EjBWsOkmIln+Rp/yId\nAGJO\r\n=Gofh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.85a1fa9ea.0","@material/tab":"8.0.0-canary.85a1fa9ea.0","@material/base":"8.0.0-canary.85a1fa9ea.0","@material/animation":"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/tab-scroller_8.0.0-canary.85a1fa9ea.0_1599772299449_0.19784144953692873","host":"s3://npm-registry-packages"}},"8.0.0-canary.0bc41a9c7.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.0bc41a9c7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"94cb5d8aa1b99f2618c02acf751cc96f978a2699","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.0bc41a9c7.0.tgz","fileCount":52,"integrity":"sha512-x4aaOnFYUq0Cet0jxiG702pHHR2TJYHP88DBSnaM+NtiqvcxIqzpufY8eHZRkFAakLaNyKp4P4GPGEbHQDASxw==","signatures":[{"sig":"MEUCIDqMtlvXBoXMyWam40qiPU/RU8CGa4psyPwiZxYT3UAFAiEA/oL2B6jLaTEuVrDomXS+kGey7l07lbRUYXjYuiaXMAY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW7kOCRA9TVsSAnZWagAASuwP+QG36Rlzr92eOl+d9saa\n8u96DQye8a2wWElujILCjq792bUYuiJwuC3PGBp4LN+oH7BSZQglkTj00ZhH\n8KbxTC3C9cFf3jjGDyo+3HwxjfJPQug9euCjqf+MymNRIeRh8ROcobPDPFi9\nOaFereD67ZM0Vt98uJuTpCJuj6cttPNbMjpJkEO4Vvjj/p9fUehS1K5XIGUe\njOQKGSqZCxzZ6PcuGqDwuZkKHvGj+/FXQQZDr6jvHb7gh3teykOq9a2NpKcl\n3gXNpKO7rn8KM5fhfGJZHXe/gYh0Yto8uELJsnUUjCLB7pZ2f/qcs5crcpE7\nHDT0cq+zmSB+FwRMy25dTN5qN+GSHj5cYPPBeKV/ezzWStWi55QWrtOQFna+\nFe3Nm9JwItFqdAo5Rzur9R1xXBf0K/N2vgoDy6le3tvDE3w/RQxK0WD0Rvjf\ntEXwDf1g1l9mvGsYe6OzqtqfzElNy//HkUoyEbRQLJxxnUmayCr+zCOFJLt/\n3fCRPobDkJt/IVMv8VuscQgmntU3iBXtQQgioQTpXObA5calYVv2p4vVtgC3\nf68QZT0iBE8IZbvB8gld4mWuW6jnsd+Wtax3bWzQIaU1gTU9eUX8wtcqWAzy\nxs3glN6so0LRz86kB49jdYuwqoGBqtfKfbwJgjXmHJL1ZGCdZKESFssnvKGC\nZEoj\r\n=BkiE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0bc41a9c7.0","@material/tab":"8.0.0-canary.0bc41a9c7.0","@material/base":"8.0.0-canary.0bc41a9c7.0","@material/animation":"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/tab-scroller_8.0.0-canary.0bc41a9c7.0_1599846669950_0.001984356332275672","host":"s3://npm-registry-packages"}},"8.0.0-canary.fc0eb5013.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fc0eb5013.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"03dac478e40d78168949f1449c516c6d53808cce","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fc0eb5013.0.tgz","fileCount":52,"integrity":"sha512-zK447VmSMcyk5waCaAWhipxN+uGNpCG0I4cDRFh+t4vS0fXxtuHQ61T0fwaUD8MKKv0nk3eUs0Y/VNt3fK76ng==","signatures":[{"sig":"MEQCIA27HwPPAA+zyiAMxwt8wqCodUp6m7X0dcfLUAVZ89VMAiBFNYKzZB59NCmyCuNpdFBiN7WsEdYCIBoWVyQzoOteEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfW9Z6CRA9TVsSAnZWagAAIdMP/j6tdGiGUi92cGeD4KjB\nV2TpRiEWuyvg6qIP6hbG5nVizzcObqdh43djIyEhn/3a+0T2n3/SezTeGVDG\nMi3Cf4+yLox/6kc64u55F2lqSdBus2vESJbvoRE6TPl/EItPIsbUaQ8xQ0HR\nfBl6b4+XfQovVz2iQiDb0iQH9QxnOWvrvNavJR1UAtcWU4Qk0p7piImDsXrA\np+e9jHt+NOtblhvbFEqSiNtx3CdInzsneM9A5rTgNlH6ZjoT9Bxsm2aCWC8G\n0306WM7PUK7RPiz8wHK4LXr2d4OurL1osmJiO3Ft3L69gPUxECWH7WKS7Q5O\nGBlnRWkqioR+Y6/xp4I9VXV2MOnQQdby5AA0Q+DLDnbJn6aLEYuqbb3tyNFq\nZWVjtAQir3EfeZd+uYfsR/OxpitymcPDpo8bKqHRz08ud5AfkP45LinSKyLQ\nYPZXUmyRFz49qUl0tBWT4k2EUnGR7ze3ISYnCsvrHw+nSrGK2oILWU2tdZfe\n0ayR3rmRf3Cqw+NlH4UTWSYpjjZc1pDppxs2I3lViYJq37jaYAQ1hkTJfZRl\nnqS6zdX0tvjn3UCqvcrX6qGm8gKl4pv9nWpEIY5g36P69kMiaJ5zOTwNyTnS\n83or3i+76nGeiEpm7d60lw8WUiyCI/l5/TYzFR+cVBj60cdb+bnojn9Le2oZ\nP90g\r\n=ftE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fc0eb5013.0","@material/tab":"8.0.0-canary.fc0eb5013.0","@material/base":"8.0.0-canary.fc0eb5013.0","@material/animation":"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/tab-scroller_8.0.0-canary.fc0eb5013.0_1599854202049_0.2530515647143652","host":"s3://npm-registry-packages"}},"8.0.0-canary.319bf66de.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.319bf66de.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"78a84e9ee734218a922f508d606dbe2e7cda1116","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.319bf66de.0.tgz","fileCount":52,"integrity":"sha512-/5va/fgmmBbSfyvS0aDsNJQnmttouHibnBmU54tXSj4OA+deqPRkBeQu66kYDVgeG4RPuJzhH5HgYbPT6P2K6w==","signatures":[{"sig":"MEUCIDH2hDCQxrg9s69kamiaJ6WWQUSvvCD4cxZNu0plGZNOAiEAvz/NJA4WWGPM7IK/2gOpuTmWxfqqnBBYmI/C6oUGJ8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXAQgCRA9TVsSAnZWagAAsGIP/1F1oS/fwgxlrU1Afxs9\nSYDD512GY1I2SiQWibp8dE02wrN691fud3MP03ME+DOfEAKMaAPja4L2Cp0u\nQ4hRjFLoTOebsVayRxDwpOHpljlNg6N1qbCYh6m+lwwYcSTK+XXyxCPXAioj\nrWfL2XnVu4TCcO5XjQpPLuHb5c7QlrhH6JrP/xsUahi7dPCo7JGfNrGJ0upe\no8U0mFk2vX3R/FmFtiFqt6pu4B9jDShX+sSk6mSfuuIoqM4X2E41vcugfQGc\nwyqOmurirnV8MZkzW4fiSofmzO9Z/eq20GOXPGfbywDIxQI76PDSYtxz/ueB\nNNY+sjcbEF3mzqU5UU8DIGJw8n8YrMT9eG09G3bc/Hh+OGYZha1rtWNuoA8W\n9ir7QLF1Bcmr0gM+A/+eLXw2zLNJozQ3i82xaS3vzRL2kAj/cv9GswGsN6iw\nuDB4j+84WT9XMivo2cBIQPm6/Pfqk9ZQ1ZlAqxjYfN8p5Dd9QvoNvigTZbPD\nXmzbVSrak7ExFv5820AyWq0rVYrtja/X5wmOMP3EY4iJePWQEEhQtMs+EnZJ\nP9aqowe50l8Jym2slC2r89l8fhSkMoQkmLwV1s/xCz/SeMiO7KCagxn+dD1C\nPnBbpcFi0hi7g3pV2nbQdbK2405D0rBqR03HTdjFFJbTTDUtlyrzhfusqdL2\nhYHY\r\n=QQjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.319bf66de.0","@material/tab":"8.0.0-canary.319bf66de.0","@material/base":"8.0.0-canary.319bf66de.0","@material/animation":"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/tab-scroller_8.0.0-canary.319bf66de.0_1599865887507_0.9459366355688281","host":"s3://npm-registry-packages"}},"8.0.0-canary.5bfc305ec.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5bfc305ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b2c5fe05b7286cdd10a9bade04d6564c9199dd37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5bfc305ec.0.tgz","fileCount":52,"integrity":"sha512-/wzNQN/IHusKO1M22X2H+TnoLvRplOwxuLC9Fjq1bGDLoHUPceBAAoJVbTYsDxhSIBncaCCvLvXNm6AIOD643Q==","signatures":[{"sig":"MEYCIQCHPjlBtThSb6fPbtd09BgyhACOQ/92SkkR4+JlLpzTGAIhAOoApPJwxzmhkFBrs+Ik1DcPIKKpmOOMv7UnOspwjqN6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXqS+CRA9TVsSAnZWagAA7lsP/RlGuOPN/ZzUXhTIeRoU\no3eyaJMj5B8q7o0SSjqYLGjxh2TrGUpFebep7YSPdKMJB9tpdObbPFsfQDFT\n3Qg/rpJv60sprTSRlmw0iECrw0HrOfq+Ikp8lVC/YIu4C69FfExaLw+bIShj\nQhx8ibDQfTJwY27XVzcRssDClOie63VG/dUXlDdiNDi2WxVHCcXDREO95N6a\nC0BHNGopY4uTqaOYAxoP//pqoykM+rUrWpQE3jlGxltZor2IMgwpLfN+WrZ+\nM7jeD+COOSR+KqN22JIhh+5C4P9tIU+5rL5D/U1QzIDylNawuEIISiawQnyt\nOtGmY1DYvnnkejHxjT80ciw34FL/dtQ7d42Y9EIOjJYfKEH1fSFinuBvJCg7\nFontahZkSSwxdcOTsx2PywI2SVmBuUDYLodBjnTLQBiXzosclkdf5YQnv+Lf\niBWq2LsWpUzh6Uipz1/JjASjRFcn4zqXJbGdV1AczeTiujyIRMDxQOfyp/TO\nP6ZmAsd6neHqHDb+MMWyZcnRuMEseF8sXnZJ1nNLVDN/9Kedodzn8gdq6Aoa\n1SRydejPJN9V+ZWdY/ZbcwKQtR4fqkfjbOQQHvlK4/OSHxx3gcukt1+FKRJ0\n7r0BuKUWkI+HXIKWeldWKe6lrjT9v2Yvga/raa9/myRXbH3tk9pSeQmk7s4L\neiHC\r\n=b7fP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5bfc305ec.0","@material/tab":"8.0.0-canary.5bfc305ec.0","@material/base":"8.0.0-canary.5bfc305ec.0","@material/animation":"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/tab-scroller_8.0.0-canary.5bfc305ec.0_1600038078029_0.9233805005157887","host":"s3://npm-registry-packages"}},"8.0.0-canary.83d83f131.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.83d83f131.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"75a9bea3a479654c38bd3ce17f18519e87415428","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.83d83f131.0.tgz","fileCount":52,"integrity":"sha512-Elr/83tX8oldIB+GKmBO0gkAKO4TdGQAyAU/9MRylqM6wq9Ahv+Qsiv4ammUap9e1fcXmMz+MlUcDN42YnfcPw==","signatures":[{"sig":"MEUCIFt501S2mUtG0uligxmKsqD5pki8qgHjk26Ek/edo3AsAiEAphh+3qMWopj46Jj1pBT4D8rFVbq7WJPHH7sz2dD95fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfXrpuCRA9TVsSAnZWagAAuJwP/i4LzxE0rIjQAiNyLfnz\nAuTqQRKDN05iZmo+hXA4ck+kpmyU+Ky5V7Xmm41iJ/a1xU4WJ9Lu3HN8P+Kk\nN2hvGY5fUMa91lNxpiB3XCMxAG0JHuZZpmAkl5Qws+R/Ci3hFg9S/PCrQ0qm\nEn3jqFMjbyqoz9Nx4B7tLHXquf9rI3cbPSMSVZX6kCAH5xaQWxTmG6UIoBd1\nvH9wizNGnv76Ne1SpY2heFl3fwhhNlUC7q57ADuxsQG+AOfJ3m+zHxOVep8k\nia4QTue+Qxx3W7ZcgvCLWS+zHRmBqaUPfYm93G1Cong74eIqGw8LXhNUuX2a\nb5ObYisHzl+D3B+BPBaQu4CM1lm+HRlANwxOn6k0SUYSTaOkXWwcbtbZ2l8P\ngHqNw6wH4yy+sxoXlOgrVTlMMpstQqh41UG7Ur83XWetvAKX2yhUf8tQM/Hz\nodyWSHU63adFDG6QGSJFyesBLs9jK6ruAoZNS9BGG+cpMjatR8KuUYZCnZG1\ncNgmlaqrB62uzZSmqHTXvSK/cXd1wFr2qhHi2ejbebCl0HMmmBmSKON/gJ5A\n5o+Hlo4KE83ZCcaoNmK7XHyJbq0aO8pb2KVmBhGQhde1H9sTpaFvI2Wek/GV\neYpG4gEjCUGG0+ufoko1vfli9z9BS1gHUteKx3PAij9sJ4nCaQHA9RqOD7qp\nZesY\r\n=XpRV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.83d83f131.0","@material/tab":"8.0.0-canary.83d83f131.0","@material/base":"8.0.0-canary.83d83f131.0","@material/animation":"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/tab-scroller_8.0.0-canary.83d83f131.0_1600043629873_0.9558733421948207","host":"s3://npm-registry-packages"}},"8.0.0-canary.d52b165b5.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d52b165b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2e89d53d2598cd8d0fe1d999701030fced72cdea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d52b165b5.0.tgz","fileCount":52,"integrity":"sha512-3wScKOLUMPuHx+86o0svLeN9VdfNPS+lpso43KpAdBYEIhqsovlRlKtpUOxQlVWf7vK9yPp3xBDC0bkaug4jtQ==","signatures":[{"sig":"MEQCIE/JlmgcqXbymCVUlYyPIv//82731bNko2SxfxT/LD2dAiBQWCJmsfiRQN5aqqKoU9fuuK7rYsjz5NoOCmyjwtnc9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYNXlCRA9TVsSAnZWagAAoUkP/371s68waI/ed4lAGpnm\nJ38EG1tE+W/VzKT1Nd3Fwq0MA8IVOqkYeP7jfh+UJEiNeJLsGhq72as/q6iD\ne/q9xS2nPXQbKUH9RdiEx9Vp1D2/izMI1ex0xQSgV4gNvtfwKmrDjXC2tFy8\nBANmdmmFmxBIzZZZjAaUJd57bvHep8MFYGkKnkoW/NNrwJrHuoqbJWMtJmoq\nAMy9FITu0B/uHvZUPyvXjHFXwFqeTnYsgP/RTkBrNhNYTd63t0KDijNeaRep\nJdTs02T6EyQH2pZzIVQlR0gh46Nrj39QRzPf+foC/P0bsQJl9bVPnowKXa10\n56dA8VwuTFErSaN0lN6R3ftWq/nikX6HHbcFO35tRidrMDbsZC3lMglYH5f1\ndz1BbwKlafDcW7KK6ubWq3HlVojLgT8XEeHh2PDff/ZfXIcOkEc+7BtQm7fO\nGMfTESN6kzy0GV9qo+zheWimoVaVTg6n1vvCGjhOpzWKNzkeAgppKfJPgXV5\nWdsQqvlDyo0BpgXwuoy/EBGUHbuSJQN3u+Y8pMXBgjZdiYLqGeDv8W2HNW7t\n5q16jC8DALHE438wzQRRLn0e4mVwETMyPp9X6o3j/4tPObtaCrFvEhonstcp\n+ERDmUa/H6+WgJ5QA+MP0He/P+4iqQioQl2vJtN00ntjLb+FZQfexbhpfvjd\nOu6J\r\n=iwuS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d52b165b5.0","@material/tab":"8.0.0-canary.d52b165b5.0","@material/base":"8.0.0-canary.d52b165b5.0","@material/animation":"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/tab-scroller_8.0.0-canary.d52b165b5.0_1600181732692_0.43058624351477226","host":"s3://npm-registry-packages"}},"8.0.0-canary.a831d4799.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a831d4799.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c2cbee44fb69c03d4582e95270c0fc7330e5bd98","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a831d4799.0.tgz","fileCount":52,"integrity":"sha512-mmZV+6sMgcq/KgBma9uLaVtg6Dpl2a91oX8hbmCoAIUUKLni0ZiTN+hAvp7j8iOQ446pPone0i78nJcpEzHlkA==","signatures":[{"sig":"MEYCIQCNktdQ+hzr2AyXtEH1LomhEm2Hc9P1VtdjDSbwe01q2QIhAMyoAjzrmAhbyCg/vljVTw0WbJsxnjlvzHCPdK6MAOfj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYP98CRA9TVsSAnZWagAArgoP/1Z4DOWaSsstEPx563V0\nFONPYoyy6JCldKvG7jLveFDNcbfhiPKaX39SfonQosfH4Dc7T2bR8A5QEAlH\nygMT5Enx2NcSxRxDyzTk5PKiaVEz1pLijcyC+FGugbUGBprWHNEE9IlzDYr6\n5CiwFjgG7kpSljevaU9yRPR5RWsUMvQ8kvf3/xi14gM6DYEyYTDtmN80pQnI\ndg6L1px5rLLoVAvKA7jRedVY0NkHVwCjEmehP/KSTfn61nZES6ztd4309xUY\nAz5FPlNxSr7N60pxNgCsMF6rhDcvosFiEn2DGKPrtHQa83wUSgZHK2U9ogmb\nAnoEjkT/n3SfM+A0LRFxZCeIpZ06/2vDgiYGmbWTRFva9l+rQBtXx6x/QUkR\nlP4xYnfQDyX0F7UWXwda8vqWaP7nhtGwhtlVxNbzLiIixGmmIJU9UsSmqFrl\nRhVx9xnW9HH2LoT+3Fib0q1tP2aZE6TDtpRhCYyTByx/RQRtQlHlcvoMVndH\nyyiEwiSNZSy1N3Ap2XDRumEXivfGApsLloiNZP2tzVNo9AkQhnpxwg7nUjV0\nkNyMQa5zVkwk6Rf2g5c4KrJGbwQz+LdK7+g6Q29jwmq6FwnXtsA0pc4Ma/+n\n4gQAgo35CJZnbjtktEAHCF8h/QWm8JW+jrAxeQDRRXY1EHWBbhr86KFEDyga\nBmhZ\r\n=XZoq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a831d4799.0","@material/tab":"8.0.0-canary.a831d4799.0","@material/base":"8.0.0-canary.a831d4799.0","@material/animation":"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/tab-scroller_8.0.0-canary.a831d4799.0_1600192379957_0.050570252892816026","host":"s3://npm-registry-packages"}},"8.0.0-canary.a306aa488.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a306aa488.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"69f2d0986d373d4e5acbfff8d18e0bb8a7eb1549","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a306aa488.0.tgz","fileCount":52,"integrity":"sha512-4OaGRsrBDImcen3H6DriMMr3Lm83IuPO00Q0WEI+3RAx7wi2bFvWPzdjhBxE1XeLBV7k2oUJGh0Fc9bB2Yr/lA==","signatures":[{"sig":"MEYCIQDhDgNZKI+/VwWQE0LUnfzEKXMbXh+Gvrc3Mf+Dsu5ALAIhAP00zpwzGZJTeaZ/LHgWuDMGVRx8rc82ecRKXpxdaYCi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfYrUNCRA9TVsSAnZWagAAt28QAJbV7XVz8XYPtezqyenf\nqv8FT1+t5AJXaOaz6qyI2bWZIye6PVjeMyfacbnO0ZjwJNbId75fGwxD+lB8\nDI+EK3XGnMZMghsN5SJn0PENWGHMw4iZi4NSidaad0mAXinIyu65TfiQtmxM\ne/jiaSResNdamib7OPOKK3zz93kCYz+PfTjKd5/JTcHtteDzjfDoiYKPHWAo\nkpdHWGi0uXFfsdCuluSeN47Pp2NCVtEKBokHnTMsVt1aXt4Vxf1VUf6eXcMa\nkvX665W1Zi6FNc302wYZbMpEX83L25U3zL9BjJSjMR7653T8jrH8kwB/Rbs/\nsRa93ntRaf5/gAZtw/lj1FjsLoL/HqaIop09V8a2/Zjoj3VyNK99jVdlHlRs\nXPpB/tyhpow6SarQVsK8Oqil2PMVDi5ykc0XiZ7Q/pHYig4jAJet0QfICcfH\npHEavYm7ZTuaOeV3hdZOxTWk1VOj/goJF2aI0APyMrqB4GhZWCvZvVQVwzQo\nvGCKisUrxq3ux8MTUBZMzxFS4opBigP3jA7N5SQMFvwN/Tc+uG6s4w2XJRAw\nvQNZWsnOYWX2hzZwhIjjcRyFftB+5Og/vKV03sUOpTl4cyAwooXzaFOQTqLJ\nXyF21jjJcJZwVPcrrqhqvbQ+LG6HvhIYLChGcjhmlTzdc51Dim3Wh6NbDjzZ\nawPB\r\n=KDhJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a306aa488.0","@material/tab":"8.0.0-canary.a306aa488.0","@material/base":"8.0.0-canary.a306aa488.0","@material/animation":"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/tab-scroller_8.0.0-canary.a306aa488.0_1600304396806_0.38475051821357376","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd608ff66.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fd608ff66.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3f96409a2b203f6eef721e46a699e3f659d16c52","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fd608ff66.0.tgz","fileCount":52,"integrity":"sha512-SIwfNpJ6ZI/k65NlMIoreK4aqUls/l1rjMbJMHn8SQxQacNu8wPv4hWlb71WfGT7Dvimt7JO524LApKQlZcZyw==","signatures":[{"sig":"MEUCIHi0aT4xip5ym2b6rf3BW4ZMoogG3lF/L1BSIDSZ6renAiEAl5/F2k6Hgi7TdF6TDjyle9D4HHyJ/OIeJYyQzMDqx4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3I0CRA9TVsSAnZWagAALBQP/R4MEQ3Bp5dVxbp56xc6\n4TczrPkQ/Gun8oCygJA2N1hzW3HdQ7e63PfW2McA68iDej07kbnhWv90jAiC\ntt7wQYl3G7glvlboLMN+fZS++kzfhc5n251V1Y6pxTrdjbrCoFwFPzkYaCWB\nnTtXg91QzfDcRMQEjxVkY8lrX274erwrj8cDuqmuZ1jbrqqDZiSLJWFAUmkh\nGr3sfwBdaMUkt1ZmBLQpK98+3QrgUgO6I3AUgwHZiOBnx144NhQ03uYXHSqp\noGdco3/eMwS9smJ77x5anlGz9sxjj4z2mrEYvrHp3yxNnMFTpMVv9Cy/CSGD\nsUmQtnZ0l84umjBWk6BS2t7vn3wxVP5F1EODZ/t+b+9CSBbr/FApdfou+14P\n6Zcf/JbTGCuZfxsDcDzE7+LhTuehlhqj5dgpJhDobcCPPsSjfiOfLVW827D0\nw5/9UgNTQ0rUKqYV0HLuLvw70cm+iZB4Z/YBzofiAm2qlO/EGhG+w07+B3Gu\n8IeUKi9HiCWFjPn0fju+zDLR4kWRBK748MBqkOvkkAeIVaga5LyUcLC/ROnL\n2AF2TNtWfgbctVrKKYQ7sJOq+0tRhUFyoi2wQf1kjeAZY2QmS61fON4IJ+9c\nR33wfLQsbWboB74+/XzKwYpP507y1YvmzYKGGl+5li2o/8ZzaRAKjjEOIVXz\nMNCh\r\n=+Zwf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd608ff66.0","@material/tab":"8.0.0-canary.fd608ff66.0","@material/base":"8.0.0-canary.fd608ff66.0","@material/animation":"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/tab-scroller_8.0.0-canary.fd608ff66.0_1600352819994_0.6922924927374865","host":"s3://npm-registry-packages"}},"8.0.0-canary.3e435ba57.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.3e435ba57.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"eb282b16b0dd7590ff79bb67122b47c6e60de0e4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.3e435ba57.0.tgz","fileCount":52,"integrity":"sha512-n8lULFnmzgAFbBNzqzfe2N2CG8l13l45SeGXoQaY7fMOSrpgN2sINjFy5/an+BEttvcHVTWOLOxdvJKWUHK0TA==","signatures":[{"sig":"MEYCIQDH1Imhr7KqYGs/abQ1xfX4+jpdyweYE1I+HgriC9UmgwIhAJmvOVyLWbPvXrSW4rDIyWEQy4BJyPoii85tJ1k69bt+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY3ZGCRA9TVsSAnZWagAAO+QQAJv1uB8s9RP5W8fmZdNJ\nPmndM1vD/z7UodqVffrdczzkkEEcYKT+wb7voWwEDJ2wBI/SRXcAuDSXMD7e\nm6NFFHLKnLi2PxM/RIgstIRVmU0X3WP4PNvwbJuidgE9jRuasTVqOYHKG3Gc\nDm0Qm/4iGdHyd4VXWOH4yRIMOFuz7YO3kvCJsWXeik74PM25Wu0vrGRnV2Br\nEEpGPP9C6iJgSgh0QRgU9hLuKQEvaTZBPjrPk9G+9YCwW86VMtfO3apViYzw\njLVt8zA4a69+PkygAXZvvlBWqztXCQquEvme+XCEnjC+TCJDKBgve5GvbH7a\niSxjiuw+OxE+9Z4K6ujAnR1BVpH3rHsoWnoaQGmuR6PsMY/3M/Z+haHS6nZn\nI/c/sca6XxbLmgeRZTzar3IgX92Bv1FUKAddFUCNmjXwZePaAW2ZCcIrlDiz\nUOxNRU338FKbbgRChYJ8wXD2eGKMs5qIik/9B64fp5oGWmx9q8OTIUGZBs+i\nGu6g6ydZv0Y1XBuK1OgekIIcVr6mbMi/Hslb7nzVWwYa8BkZhVX8quyRgRQD\nD6eoi2x6nzY2rswhn9AwE6WyEWIxEUtEAfDZBtF7dA+FKhWQbAgrREkZB4lQ\nmWYFYW7eloIbeD6gSPOxfeM3pnacwmZF2Z0tYwjaCeHHejcz2HGQWLvfy/2v\n8z5Z\r\n=XrSX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.3e435ba57.0","@material/tab":"8.0.0-canary.3e435ba57.0","@material/base":"8.0.0-canary.3e435ba57.0","@material/animation":"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/tab-scroller_8.0.0-canary.3e435ba57.0_1600353861975_0.4116475937813906","host":"s3://npm-registry-packages"}},"8.0.0-canary.c250ec52a.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c250ec52a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f82585acda334995dc7b991a0d4f8d81ff73f4c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c250ec52a.0.tgz","fileCount":52,"integrity":"sha512-DCmoo1kY4L7VT8l7r7/0lzPlFVHJCByqyoOeZYDVexuzzC2jYqfuBacYQiGXhBKzS6Uj5a6KkeOHT6wzsZFV4Q==","signatures":[{"sig":"MEUCIQCcbLmT0Ro/1B3HSBiQZ0suKTzz5AC7z2OESI8rrL/QJAIgR1GX/EwqUMQwXcVTSMmc9+wMOgKfMcQ7iawwzfhLvKw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8L6CRA9TVsSAnZWagAAZskQAJjyFxhFsxIBoSGIg3pW\niy3DZiWEtCun+LyFyTSm2EyTozv/hW6XHa5jWZUHWfz/sr+RZAw6vo6Z3uLp\nkOMvHW8bQo9KAfpiuzMsvsh8FygSDU69qbgYkU10tr1tVaJQLej8ay8t270G\nfXvLD/10tLCK3M26Le3s5N5O0dSJwBWztiYhX1JQSofsSsb/FzrMGF7eB+PX\nhjINNwbB/V6FftllmzApg9bENB+18UkIcQP7pzyOhK3Gw6L/56Ic22ZS+Gww\naGhdWinhMdMUN7w570Qzi3T03NT3JYaB6l5UIG2mxsBWB1xEyUwjB1wu8AQf\nxa62gORXV06S3CKFicxpDLPiyEXFdtT8Vf2sCjJvWHsynpN1I9oJYwkVnqtr\nuq/cH5IDy6oWjobge4n+ue5H0gN7zuJ/dc2joHTuxu4c5rpgxVVfgmG4+iul\nJYtO/c7DwmN9TSvbUyYaVRTCXlfZc2W9ASs4XWuUJeRjTcyEu1VhFLtJtpC6\nCJC+zZgnd0V6rBJzHP1OeyX4cmE2SjQKUp9SH6gmwZam/9HXLqV/cJDSp4JJ\nQWaROu7CsfUxoMzGj6ZnUsEr7VZNkVJQl/7yh93U8T8rWhlR+nbN00P51e2T\nfDmlDh/afesrbNA7XhUysreNhbtjDxjsgczKoX2sBVs0aIGIWwic5jkFnwLe\nkBSW\r\n=MpX7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c250ec52a.0","@material/tab":"8.0.0-canary.c250ec52a.0","@material/base":"8.0.0-canary.c250ec52a.0","@material/animation":"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/tab-scroller_8.0.0-canary.c250ec52a.0_1600373497942_0.47317898788614365","host":"s3://npm-registry-packages"}},"8.0.0-canary.e34e411b1.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.e34e411b1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"691e2bcb916a9241b572125d725547a786673257","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.e34e411b1.0.tgz","fileCount":52,"integrity":"sha512-rVwzPSgzlcLvZIpkxAcK8ndaKmTEoWggT3b0QVLsZ57YI944fYKX7F+Db6cixHGhVDjZhd6pAAzvMhsiivzcog==","signatures":[{"sig":"MEUCIQDHeKYPseUfXpvl5Soyu8Rq4Nxh4qdGtPgsc2eCBKwsQAIgcB5UCLWLLBVbF16KyLbSXK5dk2hz/7sTmjwEOxZr/pk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8SyCRA9TVsSAnZWagAASicP/2nqSX+Qgth7glaU6Cvj\nWnpEZ7uVITajYPJQVmjiUz2nfW0yAv2tY6MLmLGe9KaoRsnSq8Eb3kbzIkBI\njwiMRxdla+x4n1IprOd5OFmNaKomI8kXzvF7L82iiQdGTknfZ6tQxhJWKsA2\nZi4VZFvyr7E/5hcm98rDJZ899La7l+Lbkv66zalkdEV+5P7MosmJHCUFgq/a\nYxi2RManfJPTULYQfLXuppAX0DtAiZ/l9vmx/D7nZ+WBstObtnfrDinxsGAx\nMJnekVq66ErZ4Lsxx2B3+xaAafulbvmAm7OXIJ8XOLsYEXj22EBhBMRb8Ti6\nBH8Df2z22n6+GL3aGFtyjI/BLll0AAJ9ahG0K7r5Zr7DCy4NXcW0RdRBv/Zw\njV6jCgqkYIJejllNhoJ4xxdcx+f3YmzZyPQimxnlLa1qhoQR+LRiatE17+qQ\npL0fQQuitB5HDlW4kSj+OeEby3guawIxHT/YF6TTfSOUoQbJRsxGRxb8j8v1\ngN1FGO6rWTZ/1zv7fuaIecOBBGZxcYzyizu/l4yXLh/AcB80ORxM0Zn1a96B\nXROMjvVonrNY8cAORrrwLdgbxRjoO/JCXU3JcoBcYh1c/82jBxmnIdtmghjV\nJVIRmpRyC78fOH2L28JTkE5PmCJbNlIdHlY2ML39kEM3LeTRIUi2QLfOWtht\n5NVQ\r\n=oJY1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.e34e411b1.0","@material/tab":"8.0.0-canary.e34e411b1.0","@material/base":"8.0.0-canary.e34e411b1.0","@material/animation":"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/tab-scroller_8.0.0-canary.e34e411b1.0_1600373938214_0.8313012675846305","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e9343929.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4e9343929.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4cd4575d7b6361774eee163c871d27d979d984ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4e9343929.0.tgz","fileCount":52,"integrity":"sha512-qIDqmzDSMIq3cawm/Y1wKZQH/A5fNpk4WWSlKWPJAXIBZqfGnre2ePsYZLWPq+KeyhxdakDNnszAm54sipQ7mg==","signatures":[{"sig":"MEUCIQDoV26YNfKRh6yNH4D6pQxXdTvcPc7lCDTGqE1JuMGRPwIgTtDLqOCI6ZPA8KjBNtOWmNg0PXz77Rkds2DecAoyi/Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfY8qeCRA9TVsSAnZWagAAASQQAJqhWGGnN8WL6ydoW5Gf\n7IycC7VCV9o6WXI0PqKUpzQjTpRwNvxn0t9ZtaIR9hfbOQoUxI9UMC0webFs\nU+2Mk1gmdr1eg5b7BN0F2JIkV5eNnN/Dkh4vj32JyrmJURsm/fPikHvRZzCx\ninPLjrdX/qLysDd8M6Db9B5eW2RGM2955OlxxslgDvX1++voijf/LrDUmeIL\ntXYOw1JEKRvW14sFq8rTzPU6y58UEdUteanT37aevB78xwmdSXvpYzCXJ3Dw\nrcmn+7R0L8+295/cU0mPS57qwYQ20dlCLU2p4M26PtfX0yFHL9nh/xH7aSwG\nJzfb15lLzosYn6xlu7e6OYNprZEB0xNWETv+WO+0auijl2WMx3VD4Bsop7IF\nTDUuhej+RiRzRpKbDp6aYuwiDX4WfrQatZ9KRX7BTFmi/PFDWSs/olzkdneq\n6P3RvvQFoTdDt/ZthVh09RYgxP2txK4hFSLV+3cUxaPRrvRKKfx0BvClAZa3\nlFfyz2iIelsPbMHOxjMg2rEYNzTEkSWGlsN6/aBQie5Gice1jqNqcAjgmSmm\ncOCbNZb2cwX43Ecj+o37GQqHRgA1DJ8/yxnaUcPrJIVja3aPYkr0Tbu0UqpG\nv7l9YJBU14+vkHMhr2FyfR+JhLs5Sux93+Ock2BaqeTJ3H6/28E3dPPDTy2u\nqud/\r\n=wGmA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e9343929.0","@material/tab":"8.0.0-canary.4e9343929.0","@material/base":"8.0.0-canary.4e9343929.0","@material/animation":"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/tab-scroller_8.0.0-canary.4e9343929.0_1600375453908_0.2828538651448351","host":"s3://npm-registry-packages"}},"8.0.0-canary.4e5c350c2.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4e5c350c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2f5e83e6a1acc51d764c24e2e808c1c771f0e3ba","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4e5c350c2.0.tgz","fileCount":52,"integrity":"sha512-i+ENj42skbNbCC9x+YYgtTN9KCZZLGc8x8ugot+qVWyzWU0pE3mbI0MHpJ2bYa0xlsZlQUEAxaJdFkZGA/028A==","signatures":[{"sig":"MEYCIQDvxd+AzSKsRanbQxDAitf+GlwYMQ4w30hvBtRFUE8voAIhAMWdujBApMHBeb+dHgo5llTvRnekxi1/4RJdU5ME5os4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfaRfqCRA9TVsSAnZWagAAiVoP/RfzJ9f++USRDgAeQsV6\n7W2yZJBLDe6jYrOkWzl4SGECNd6IegYHqxm1bjvLd47uFklvOFPV74AQuNpJ\nKS8vq0M6ozYLGATQ3tIRYgct29AgEjyWvEGQt3tS1W0/QK9zrMth/LrOHcml\n74Ye+kl3JPhW3q7qk407CH3jhLjv1mP7gO1Ez6NczOBLcQ8Sp21D0QRBs2L2\n4rPcGd9aCDUU7pv1lFNo9Bnog6lZlTEdUt6dbB6913ny+FiNpvOe7NVnhPyM\n+iL9O8QyGIKBVPeS01NTKR2XsjB2AjzZxeKCg+X9Q6+S+s1wLXnW0Sr12bNQ\nZxOXj8dZOmVhOYMk3jZsSbjuCR7nGp288lzKbPi46/6XZpsvCSKLbnoG/ucE\n4IAqaItb7hDDJyIvFtMAG/L0RcuQGApS+XZPzP4b6rjsVHcNerr97ODLnz6o\n6agxeg4NhDxOFQX+Z+xONsLpGjDftZDKZoyOmb5SLRD0rT35MqRczoEcczbt\nAxeuQaPTdQz8ZF0P5Z9u2mz2w9Bwms4IBWwZr9v5SMNbhB0eU6js87h75FUI\nZYCbuTke9j7teprYq0eIrWUKW8kGWnwfG0SDbGJlzJtE9M/phwcoO3JKdJtw\nVwN3mi2akLiuLVIjCLn4swomgTNZAslm//Ln3tnKfugafSwssF6B2TrD+5Uw\nvBWg\r\n=35OF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4e5c350c2.0","@material/tab":"8.0.0-canary.4e5c350c2.0","@material/base":"8.0.0-canary.4e5c350c2.0","@material/animation":"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/tab-scroller_8.0.0-canary.4e5c350c2.0_1600722922210_0.5544545497028577","host":"s3://npm-registry-packages"}},"8.0.0-canary.16c563ef7.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.16c563ef7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bab4a8c6abacbe6c20dda8ac0b1f679eb6f86320","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.16c563ef7.0.tgz","fileCount":52,"integrity":"sha512-bCpfMORnRyFfwmlpimq38bhYMd6MM3NDEPszLDOKS8V1ZpBeNZpOCqqONIW+KHIwhaQZEC5oeq38mLevkkrnYw==","signatures":[{"sig":"MEUCIQDitKIftTorAZUnaQHHh5Bozt3+CVaOAUyE1Qg0hNWOsQIgbDwxx5fYb8sPFpsJsivh+kwJ3fR8ZsZcSqXUFohtDd8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfalTPCRA9TVsSAnZWagAAu7UP/030CX7tei6wN66RoFVX\nNnm+3CdO9hOUjqGAQGcYMqNAPGNdJPWfACnL5uEA5BNgYVGr34OLb+vFVHZc\n9ST+fWRLEHMU6EcSnYATV0c2ZNK5rY0KBdTPwOJ+1dnpOOHLtlDoCyatheJB\nV0dfKJuRLwUODVVjCI1t/P41NLzLvQ7WwWPkCVbiM5fvv2iL4fE11b6d7VKP\nkkjfzpTGfaiFjZXYpxwopLb35VF6nuIrwZ4HZcHwZryCKi66GnFuDpK36jgc\nwFk+mdTfSO+mAA1PXIPgaCuUBIvcEK7du2Vzr5fPgROWyQA5ogBiAqGiRiVL\n13X/5N+cn7qAo/hqHf3sbQ8LRDWHWUXv8Q0pKOJDbdNMabKDp8YF3Rx9oFfM\nlGaDMIoVfjcHB8gvlBymAN28Ci/2pKvqR0+VCM9nET5gUOuZMEG2dpWVtgFS\nBXsm4MeRHTOPTkVlZl1MS0F9ubPv6DQjZ/l/c4Tvs5UEsYBuHqgrYvznY4b1\nwlzlurToKPe/jKBZ0b2nqV9I7moTdyMaue+WmAY6ZODrQnJT1Zj4WoogxqhD\nq+z4TFDcEVBr8nGApr7zg9DjTUoJYf8enV1Eyzvi0yYydFwy0Dn6TZY3+UFR\nFpR7Y2losUbBmQ5C78FkSMB2GU65Sskwkdmvr+XfiB+vhG7VKvSgoi4B4JRs\naC8J\r\n=BdgA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.16c563ef7.0","@material/tab":"8.0.0-canary.16c563ef7.0","@material/base":"8.0.0-canary.16c563ef7.0","@material/animation":"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/tab-scroller_8.0.0-canary.16c563ef7.0_1600804047116_0.42850339552213734","host":"s3://npm-registry-packages"}},"8.0.0-canary.fd8af3d43.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.fd8af3d43.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39f19a6ea7150a6789d16bb3c7a9f4bfd189d590","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.fd8af3d43.0.tgz","fileCount":52,"integrity":"sha512-ttXXgPORt8bKTWxp/jN45KRaZOuDG7TBVWd55jJNPhEfc6tmn9xmKjwt0jPCpr8WOxI803dWH/vJXAPROb2Vkg==","signatures":[{"sig":"MEUCIA7l44j+rSj4QtJNrwUQb0QYeEa/ICh1XPqsqYIimnD0AiEA41mxnjkL3RGKXWz6rMkGrAQJQ3ToRBOWmNbBRzRxiew=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfa6MMCRA9TVsSAnZWagAAfhoP/2FcrFhnBQkglV0I5Wh/\ng9w6G7HSVvB6HXcEjFESpj89PvELqKpZA/MiQ70Td1PV4vQ9PD+KQL3w7FzV\nlWImBNezMPnH+WKBHP9GEpZ3PMIHdczRgxl4UhpGTOfC0vOAhae+SccifEst\nc9ZXzUGEyBsiF64V8N6+MvYZjHKnEzwg122TEzHcFo6qAllJDxjvmibrlhmG\ng+rvoAieXq+r7nLkXusa9o4EziuQrT7hcNQEPns9c+u2t2uNfi9n2i+Yr31y\nBDTrX1pB15TvRO5Nxnux049rqfjpg11gvxT6CWxVxDHnXqyq6G9MB/+hbqhj\nR2Vfn7uGjgcO7Cpn1RYaGwpcr1eIEs07DOGNxjgorBZc0SUYkubpyr3f92FV\nspynRpCtHhjOvj0/Af71vLdEZMvPbcWPI5ZBNFfL3NfQCz/zK9GQbZ6BrQmf\n1qQEgmEezFLZXqyik6yG7EQVK6r80z9Fm93tIsF5vdW0V+fRFxt+hK+hkxiN\nllOFZM7BO1c+YFvYPuUm6DGEo9PLbw2qST4f9eUSEe4zQJjOZ/LPOcP7cFNi\nJdfODDnRWq45ozOuOd+LyXlOEjmWD87/FKxYKxk2EjdxrET6+bV+jkzm4I+S\nhB5bUVGoJ4Lupb3bYXjf79CebAA/Kxq3nC1XaYkzAAlZuSCgzZ7XC7lcoAMU\n5/Ea\r\n=OyFX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.0","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.fd8af3d43.0","@material/tab":"8.0.0-canary.fd8af3d43.0","@material/base":"8.0.0-canary.fd8af3d43.0","@material/animation":"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/tab-scroller_8.0.0-canary.fd8af3d43.0_1600889611928_0.7581027001326541","host":"s3://npm-registry-packages"}},"8.0.0-canary.d4cd83a85.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d4cd83a85.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"70b0328498decd8dbfd833365941242d1f1d5238","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d4cd83a85.0.tgz","fileCount":52,"integrity":"sha512-St0GBonX6IESzGhUBFTaw+fT3/utJmWQ6gBEYfvodUfpKJHrqRbtK4ywaAJQ9LScCq8OVcToLSV5AYAs68sQcg==","signatures":[{"sig":"MEUCIQDxRGlDNsG+wwL1kdHNiUCTixTPhT+jVa++R6UvZWA+bgIgeJBPLs7k52tggODS/cCp73pli3/c/NeYNjc5PCAMWPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbTu3CRA9TVsSAnZWagAAKREP/3DQsOf/hacAuW4xnYLD\nAQ9g8oxOQz14R1e/N0DD+WNtDJyica2GSirJHl6JasXkRWvPxAYJR0h+/4+W\nhfyetLSP4OT6H54G/DGxGOSi1dvZMG4z6pv5g3wfd5u9R1ACUDwuiG73pogf\nr6OjVIyKrhyMW4QdFmm0HX0/ioKU4UVeaUtdi5X17sQap56FscSwPJucq5sR\nKqivtxesJwEiSp/RJiuLXbEiI9fY8z72x/v66WceEzyAouyHtFqyavmUSBJ/\nh4BJobrAPn2r9hS6QWatGNQfCZsXxeEc4Pr6vV6LKwzea5RWTixS2a8GacVM\nDGYdz0tqh1zsXBX1wmXgqMUw7aFe04A+lVfpnsJOBC61zBYDyo5bhNk4fkR0\nHGwcIY0VRA3IRsihWu9WAu/cCh1e8POU3av8qlATtcjzR/gWKffnvdV/5Oix\nNIvlNXn4bWtB1Aq8oE6BsPdUBHLakzCHQlc+clwlUPcWARUc7gQ/OQRUIV5y\n22k1JgWfyrhk99PQs223IEdoyGuFHsGioU1AN12SYBKZJxURIt7btEnXpeAb\n84M1VfS3CmemAYAUM06wuVQXl4w0sdqHDSGVxCAOwKOp7LGgmNfm7vbvLd4J\n8J7GQR5eSOzgSsByajQhEvf73RILrjFJAn3yrBKs2OkkZxPkhBPQd57lEKuE\noVNj\r\n=abei\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d4cd83a85.0","@material/tab":"8.0.0-canary.d4cd83a85.0","@material/base":"8.0.0-canary.d4cd83a85.0","@material/animation":"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/tab-scroller_8.0.0-canary.d4cd83a85.0_1600994231073_0.04425543981781832","host":"s3://npm-registry-packages"}},"8.0.0-canary.199aecdfb.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.199aecdfb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dc2c7e5daf1bbe58a8bad3cfc3a54e3815963936","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.199aecdfb.0.tgz","fileCount":52,"integrity":"sha512-yqz3Oy/ZDIhN+zReAbqIehM+k1LCzvxnQ+9JtUfzWZjLwXedk3eJ91C1zszT7VyVYTU0kkeAhBMdBYdS04LmZQ==","signatures":[{"sig":"MEYCIQCxgZpM2zS253ie68GoxFuApc7hrSghMoB7m+v0ZcLAxgIhAMtgnPmi3qXdmd59t74bxfWG0ogoNjwPclXP32l7vb4r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfbhJCCRA9TVsSAnZWagAAT6EP/2XhP8UBz9Lx0k9KNs0K\nh02zsVdoEyZmCA1PihC7VlfZUqsYoOME1xXpKUMd+IA9hFCLdweNjvhitJ+T\n0Jnbjgj0QJNvlSNfoZSbjqoWezdU2fyeSBBnC0ie64N8T1YUlqu3n8m/6wnk\nV7SS7WhDfZrsSwzzidAQEeaHglqY4vz17ehivqha8/sTXJEAK0uFYIW2o7eh\naIDTB9IYLZtUMT8/qRsQb4A3NftaAZhwShg5RCVTq26GS7AY/bDjs5IFI2Sk\n4aC/DboG9MRht+PMREm3ZR+5jxw6al1huIFJRcc43Goo463eMf5R+TLVcU93\nggmUt1hSTy8pCUtmIkkYpvIdpu0HkBwO8Pe8prXIE42FbgEUW09p8YQzGC/l\nbYUMeBObdEVoemsyLYy4mdlGpp2rreChW9a+iq9/fCkV+3XwvHzEGBtsr1SJ\nbIsVJbo6swCq3D/7a3WQ5NpMzyPkSmD1Bi+C7hFwP9FA8lPLQLg6C06KmvdW\nNgYJymTFtzUKzIdX16q/ikdJJooTh/hQzcSrFRWMNXErMqMiBNmIQeyEHmqo\nhn0u+BimdSUKxwRakJz3Tucv/soP2p41S2f0YET9lLoGixr+LlvVwn4IO7vJ\ny2SZW3fO+qSFj7bAeRCfU9QVLaCYUEiU/qxVfeg8hK1nDrvQJDJTLGZiZMaS\ncG/H\r\n=MAYN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.199aecdfb.0","@material/tab":"8.0.0-canary.199aecdfb.0","@material/base":"8.0.0-canary.199aecdfb.0","@material/animation":"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/tab-scroller_8.0.0-canary.199aecdfb.0_1601049154192_0.3380903100593553","host":"s3://npm-registry-packages"}},"8.0.0-canary.38ef4501f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.38ef4501f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1842b977e05c02c9001c222a5af4b8d4f34a16b7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.38ef4501f.0.tgz","fileCount":52,"integrity":"sha512-WEP9GfF22U/nfLzzILMKdRoVOHcP3LE1Yaot5fONIKo6+1ZMeMBKmsmS/auMAsE9KK13OBGblut9hjrUorrjYw==","signatures":[{"sig":"MEQCIDU3eRN4ugP/84xpj0s7WLKUd2TFFFbOszBwGDz1K21VAiA/os+BMHiQvoqWJDZBBEBnm4aQv2KZ+VMwmCi9e4ec3A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdM2vCRA9TVsSAnZWagAAfK8QAJWcyzmX8btH1LMcgIBm\nVJpcU2Z7nojjQFxuUcEez9qmOmId+rpEpZTikLHV5wgTbqBZ+r2dWnjdaNy9\nJkY1MswrUMjYBDIbwcPlxpdefcDasqebn4BwOJTZ4aywyptcPkxq123ZKRm8\nWqHzQXQ6XQEVWJyGnMDugxKwpPs3ZptxZBGST9vOUGJ7sf+AG9o84roJ50Qb\nBWp36x500vePKi1xpvkWY2VKKIQlmVmFPHLnMaMLyH6OVjwkThzNfBj6MDu4\nSaC8McfLDxoN1oeambC5KQ2aR6Kmf7ALii5p6X1nIkZCnoRwFgcsvEcP9f+m\nqZjAmcNxeXK85KPIJybaN9GspIVER1e3im+FQ6UPuO0svDFlswaZrIuEdRkZ\nqphrFeAhzbuWpr8sXjdpaeEVusn5OkRxg5HrQ8WxmMXcKuXfZmh1e96GQA/Q\nBTzZ8Ep3xyuCO1t8EBaLqkdkEXmtC9rZK6YFglDTD/Zgq7szjIibJ6lP6PN4\nueJ6vWHKV2cSiP8wvFFcJxx+34vW+6feLGuDfmtmFJ6aT6gUWnELtZHMxeOI\nuBaPzX82C4+8hlHxVgULOKMV65ZTnGPBO1rDnPwLjwnt1OBFsEqDLlIoJ/yR\nY+ayv1hrZmckZxa/xxh9kjNnb1P7A0i6IvuNEhPKwVu6b3Lt+QTAXFb+pT31\nczOZ\r\n=MjEr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.38ef4501f.0","@material/tab":"8.0.0-canary.38ef4501f.0","@material/base":"8.0.0-canary.38ef4501f.0","@material/animation":"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/tab-scroller_8.0.0-canary.38ef4501f.0_1601490351278_0.5980231185870255","host":"s3://npm-registry-packages"}},"8.0.0-canary.774dcfc8e.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.774dcfc8e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"81ff09bce49eeaf4569d1e681dec8b701f7db58e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.774dcfc8e.0.tgz","fileCount":52,"integrity":"sha512-CZwQhuds7zkOsjyVQfiElGY5yLdPp2fekVVvRfRHLXwjOU3h8vDc2G3V3yb/dbhF1VV9hjx4nlbDhmY+wK8TdQ==","signatures":[{"sig":"MEUCIHH7f2MuvoPu1Rmhfg2g56nkkogQ3qoSjlm1urVEq94NAiEA21B394FPZi5uYrFq1Rt+zdkT4/mN6GZX7uMYlXxTrjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfdaeRCRA9TVsSAnZWagAAMa4P/0xTPp5C3Jg2Jjyvgeu4\nabwWYEvKNiF5AjWaf6wbpPah714kTwa2fppfl2mMZhARGoaOAmKeTqpgmYej\nuNwU2nDETr3sfuurS39azzZ9LcqBtp5Az1cCQNmsiXG6ynHQqKyEqd4r/v0o\nfUeQai1Ouz0xqCj6wjj5eXk+1cLX1N8Kx7XEuFZTm7yKhMROAFlfdKw7bflp\nu6P+xoxcGSAqVzEtLCZTtCXISQbnBlnryqJLLoPbpK8bchyFU+fZ7+vW3z9p\ntbofIdy8xcXU+T5ets/x/yFeYDclj9kgVhQ3edtSj1quG35+nBVxYLl7Q61I\nWh8N7uuB3n2oluXnA5SXCUh39yB98KKxPQQFsilLxRlmQ4mx7iqaL4cr1CDn\nIZwinia5Gk4JszNsgFXmCpiQWHNvH+LeunVmWSdKEyR4nYoUcrlk8u72cUAy\n3Gdu3jsLU7cOnu7NlmNGtrC5GV9SdCkNyAKAG3l4QVqbowsYT1Y9WSmbP7Bx\nX7JanfYpBaj7NXcgz4Qw/geQLsTzh6mCYYhzbxflImSMidI0fZIc57qJfyvT\nCTKHXwew3WCAaRIO9vGtPY4dX8XOQiMAM788xx9qhkjgB2VtddDgAMEm88TP\n7wXIgFLmaBrIKq5LGZ46yWCIcl4LE5u3KmcuPjjFyO3QOY7ITd0qgrPVXInG\ndaGz\r\n=xJVc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.774dcfc8e.0","@material/tab":"8.0.0-canary.774dcfc8e.0","@material/base":"8.0.0-canary.774dcfc8e.0","@material/animation":"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/tab-scroller_8.0.0-canary.774dcfc8e.0_1601546128776_0.5934946095852167","host":"s3://npm-registry-packages"}},"8.0.0-canary.0f60323a8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.0f60323a8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"10d6ec8ad7d737f368ed7808797e5aa5ea80368e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.0f60323a8.0.tgz","fileCount":52,"integrity":"sha512-rM6NSQyzGUE2VBzDApT1ETNm2nWE0YkSSsYUuiHybypjPAOqhIXXNVMnio0M8dsKugmuGnrQiXIwcsTMjH01xg==","signatures":[{"sig":"MEUCIQC3Ve4AAdVdF3xgVNA/QWMdnA6rGWNy1XsYbwKUMFAP+QIgEcWzcKBV8Qwlzavs69o8++3XW2i0ZK6nfY+6ih7e1sU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJff4B4CRA9TVsSAnZWagAA7QoP/0spczuVY/1Psp2sx39W\nznMbBUPUJtb5d2lw3EnMDn91CIrGdqc2enZpjfdHYwm5tuEk4DO8RL5immvl\n9ozJrYl1dbFUVjaNk8C3fgd25avtgkHNmcFQ43B07WF0WXZOV+1iURLyK5Kj\nPssWpuRi/B9/BjVu4Vipob5o5z2koC2SQU8ryOOUUS+pzJqR9ZiSHxSuLRth\nsAJmhh8k4Z8d85OmM/yHHrcKmnHpl2jrr1N3SYaxBllz/LlcrcetjeiqroO3\nv6rn1DzXEuQa4QaACPQ2LdafuUtEtXaeqzyNKyH7QVTvQBMCJfVNGYITRshn\nExdGyfixaHAqJoP9IpHnkeGGooTE7/j55uKpZwwPz6yjr6t9UdTzrx2Nzg+g\nlOSYuZFYhyDLGYG+ALSvyvkgr5HrJSdyhEcKXfjwYm1rfP0uICk2Y0lGFZmR\n3MnHAqQ21IQY+rKstcXszVGyFELgcNocuxbQey9vGNhmqjXofH55Cjm+2es0\nuPa6hD/5J1FzoUem4N7OkWECBkZGHT6lBI5YjGEovkQqmt19sgkbX/fmYJ3j\ncCfGYwYhRoYkulc2TmT+CF6jDqTNJQCestE/sz5aXgS7re2DzZY0FjcemFyF\npykZ+wd7RMpnZFuF5n8y9wsBG+fWxo5GuBVwklMBTCNCfTyOgTELb/SsZ3CB\nAC2O\r\n=iIVb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.0f60323a8.0","@material/tab":"8.0.0-canary.0f60323a8.0","@material/base":"8.0.0-canary.0f60323a8.0","@material/animation":"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/tab-scroller_8.0.0-canary.0f60323a8.0_1602191479925_0.8154256105244166","host":"s3://npm-registry-packages"}},"8.0.0-canary.d71622574.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.d71622574.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7e448daa5c930a918b703a161237f3cf6d94595a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.d71622574.0.tgz","fileCount":52,"integrity":"sha512-plpa12/AH8b/1moRKUULJC/kaIwcnchWFi8P17mmMJTdw359QlPCgNUhDFnCRow2aF6oM13YISe6WsVDtAC9yQ==","signatures":[{"sig":"MEUCIArnyRvWFZl14QJkuaEY8E96qfMfwcwZIPCJFCoNmq7CAiEA6In/8Jf40ljWQY9T/zbt9Px3WaTmMaNdQ97w/4lwQOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgJC9CRA9TVsSAnZWagAAtPIP/A5MdxWF/iEZBBAlB7wN\noCilTKhqwMmFTiMzN4YDiTicdRQrF2ar8U/tG+W3mtHRs8voRKUNIDoCMvkC\nICtSs0KNSy8ZMwBXst+1IuNqT9bDJTuczwZOaJyqklepN5AAhX07WUuM//Ow\nrAQ+Xs2nCTR7oHHISZYsAvyOORDR+KjzDeARF+QbPoL9EErIaHZ+kIbR7gAA\naAJuMSy66DZefkVrGu6TLkxU8oQOPGIWejUgNoix99z4v4pcR3/Lf262pZPN\nTcle3+NsRcrftn5ndiIsCZJV4hMcaJvrZjsQrYeWwk4NNxCSUTbDNFA2GNSL\nkUxA0JeQAZmm+JvKtLgOwYVD0+zOZi+7eR+WiE6Qx1d3YWg8mgZukGBApSuZ\nJUtzQ6gA/GBp/n+lluDHPMIVB0O46jf8G2ze/319ljA4dYjxJ6La/ndiwYph\n2d5RU8Q/860ScmYJU1RhLntzhIvZS7miVrzgZ+l8RRwe2d4HH8HhNBRC2u9f\n+Ms5Ob46g6otggd/1OzC6AKJhrUKf/BkDt+bGCbejy5SsgnIqxc+9RH05e5V\nnZbOJoPHzUjp5sbuT/FINmJumUfrEUxdpI9I9tpmOi0c6xVl1BO7/gDrDPhc\nw06GqWsjE8iBBOzMk4IZaQyMpdqFtBDNCRJlUwrpwr+lHMLmxgx/K2jQLLuo\nuvKX\r\n=Yzdv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.d71622574.0","@material/tab":"8.0.0-canary.d71622574.0","@material/base":"8.0.0-canary.d71622574.0","@material/animation":"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/tab-scroller_8.0.0-canary.d71622574.0_1602261180947_0.26116904556837817","host":"s3://npm-registry-packages"}},"8.0.0-canary.7a9afaf4b.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.7a9afaf4b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"67a81b5cc6513bf68950cfe6f588ed1e6136a9b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.7a9afaf4b.0.tgz","fileCount":52,"integrity":"sha512-atsu9J7+dr8N20VvcxYZuEYabKzl6LzpGNiIcpErwhSUKnr8Y3zVacqUk/IUxDFyPetbwb3jdqgmzP3aITlPMg==","signatures":[{"sig":"MEQCIAajS93bSEasOCsq9WmDxnNeHApAHOUNcgL/aKbwgEPaAiBq1AFBOZmUn9256+k4slgLEshjCBXcAH+d+07uIp41wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfgOpQCRA9TVsSAnZWagAA5zUQAIGtQwfF8tzcHBUDts7M\nz7VVTGvFrs+LtH+WTmnlcZsxa3IIVBQ2Xl/F7Fzqfd7V4rlyngdmxROuXXRx\nrcCYntY9N1j9IfJuVc7umgqR/0p/U0ZbKHq/8BlrIob5tR8MrUFI4Zbo5ld0\nZCTuki2u4meNeaPFgKMAYhHQk2a0qgEOAlam3eP9AoN5H07Rcdgu1qfuAzDc\ncRaSmS/ZqkjPZYQ28n6cvzqwPx6kaZTIaZIGTDmUHoTSZcWTctzk6texksqw\nGK0MopYU6L/l8BnVdXLXQQ0DP28bz5Ut64EEjcR8RkzbYkd3d+JtFjshYB8u\nb2fTh6vn/gfNptO7IMU/Hvi8LVe9uH5p5QeIs/IKze7R7TFQ9kMpxn0pno+M\n6JSYjY5rkOrwaOEErWyZmD1pXxcfgd2FDzSArrmc5oYaa/dBbEHha+uhVyC9\ntGObDOKOhNeCeVqMTIpEAAvjhSK751mtivLAFlrzsyF4oELb9PFBAYxa1Vs2\npM9Kav1EFSmWAKwtjIeJWsdU89Oqp+he+JNpyyMhvE60q0vFSxY6Ss0uqrLX\nXngVG0jt3ATWEpT0UnCLvtBxygv6z0xbrijZn67YWbxmyZGZgn8VWpFjkU40\nAtLOutTx04DD3+v48+n0zDl/Wzq1xu3rAFxX/ZlnYf0PGe473r7H/S2wEmaB\nez2s\r\n=Z4W/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.7a9afaf4b.0","@material/tab":"8.0.0-canary.7a9afaf4b.0","@material/base":"8.0.0-canary.7a9afaf4b.0","@material/animation":"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/tab-scroller_8.0.0-canary.7a9afaf4b.0_1602284111926_0.07256196529365488","host":"s3://npm-registry-packages"}},"8.0.0-canary.8a39352c8.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.8a39352c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"60b29e03fd9f12940b83a08cbb33baf8fbb9c1f6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.8a39352c8.0.tgz","fileCount":52,"integrity":"sha512-rhg0ZvkOVpJSThrTn+mWAAnzORIZtf5cOKOsjlMwZ6+kUtVfR4NgDUuDol5k7WL3oiGdIxW3gpjtHKsMRyqlMw==","signatures":[{"sig":"MEUCIQCG06bo1VNBWXmPRnQbME+M4yQmsdu653x7wbF4ttgWswIgCNqAD5sBQ/2ivSt6jDZrqHh3kV/kuk4NVvC5UDj3GDY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhJbBCRA9TVsSAnZWagAAf7sP/3fHx8vUJ6VVgnRRyMEF\nixRm5wDjR5txNpmxFmESE0F09DKvVJ4ppLNppKYagc/6X27ptNAu3RPsOuhf\nhJjU2DJMLZ0FYDlicEBcoAwjwe3QX8Q1yDdH8lJ/BlCqXJx7diU0VhyVSvWX\n22imZK5sEfSzqHRzbSZZI5/MLw6B3RtocFyEJs1zrOI8Ul8RR0OFp3sPqITC\nrHafe77ZyHFi7aWNV3bYSqfpxDuhfDLbaqFGVTzy+mMpjJSnjoDK4cnOJWSx\nBM26KPwYddsUu9Kw6dCEyAQR5MrEVDNKAGhgwb+echgp9nUciOr8Y7kkRiZm\nkpWIyurfZVWCQbeuON9R7NrYcqB4BtFgIjWpAHlACQ31yY6tX74MnEKayuwl\nrBRW6kmajja+akMCtuvYmTQeHVll0YtqXUCHTfc3HdAImojGxmcpgcqkLKlz\nWd4aj3kobS6l17uhLsaNTrUQQGsV9ijHQwxV4DCz3gmbq3xQUFvsUh5GhP08\nEwd3cmXheOwJvTIX6Ux/Q3548TVJgbNfytQuWGZ+W3vD7GmqpetBlVYeq6bD\n7XcU6QSjr2OWOpqJO5DRddPt69FEO0tKCJ+K2pULklYr6UielCOatsuGGX8B\nRzBLamLB4hKJjqBdpO7IaJI4sqetoHXSNuSq8lMw2utjbFTmV4wIxomnt9Su\nO3aq\r\n=2OUt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.8a39352c8.0","@material/tab":"8.0.0-canary.8a39352c8.0","@material/base":"8.0.0-canary.8a39352c8.0","@material/animation":"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/tab-scroller_8.0.0-canary.8a39352c8.0_1602524865251_0.6360030300076369","host":"s3://npm-registry-packages"}},"8.0.0-canary.790ca85fd.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.790ca85fd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4af39d3e372b5d14907a16a0537dbd55c90a0a74","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.790ca85fd.0.tgz","fileCount":52,"integrity":"sha512-49JE2Ue/Spj0/0NROWrLifMvvaTMLDFrKwiLZS+TEgIPuf0De727chUWYm/eYaELproZWYpmc+3FUmj5IXz5kw==","signatures":[{"sig":"MEUCIQD/NToetMpSvlxjPsZGOtty51J5Mj/1StIOaY1LX/HRTAIgTyRWcdiQh15b6Svpd+L/BWSL9/02kQ4dJ9RcGnJqVG4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhNFlCRA9TVsSAnZWagAAb/IP/RICXbax23g6mCyOJE1S\np2iXl0QZwcwY9lbXj6R3KYyAFYWT0qclJy/nWfYw0iM/CxB8OZ9dSnzjUiBh\nx67Sq5+TteNBtYh87GEBHjj5pRjPCl9WRpke0IwH9udjAyEYctD1lbgQ9TA/\neYHD91PsnqVPybkU1prDdLLMmdE3yQ4D8nFn1mtAghTDNxguTlId9wWqGQ57\nPUjjpHGBN8LbbebFr2/gw/HiJrvZBpBJ8btgIiGb+FbDBtHl6eGttJRg50Ji\nPxgiY9I627EpGqGIJK7IM+4PA+I9ayRnUGwueF8f0Q05admO4f7TWjLc/qRp\nTJYrInwFVg5Fu0wQPo3ntcpj/WfIqHTHNhBr8J81G+pxbqrcSWXlAgctsSY6\nPZIjf9J+EjNnDcXYDcS53BIDz7oE3ZI1/awASs+dEV1ln7vD2A3t1fJnKTsv\ntgOSy1foVM5P4N45C6zRBVXP2T/7AgT4s6dNqOW+sNWfuhZIWR/kgzImo8Gt\nWvv99wFpW766NFPaGPHODonIqiochuDvAFkxjOEBZRIBInxVR6bBe0teixyx\n9/S1HIii2b5HmpazBmCURpqKuC8v9MLfXNkBqG8KYma/nMJCf8g+m3TxelDU\nEuP38xLo9vArkuCjm5GPJAr60GHuq10tjBkmRsba/7/dMVFpvR7jObQuvK8n\nMAeA\r\n=eNJg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.790ca85fd.0","@material/tab":"8.0.0-canary.790ca85fd.0","@material/base":"8.0.0-canary.790ca85fd.0","@material/animation":"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/tab-scroller_8.0.0-canary.790ca85fd.0_1602539876451_0.32474084727036834","host":"s3://npm-registry-packages"}},"8.0.0-canary.174c0becf.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.174c0becf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5dabd79623c83bd2ac4250dee818ca20f1baea4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.174c0becf.0.tgz","fileCount":52,"integrity":"sha512-BXyCH5picvXlEGoulvsvDzKdGkRq5AKuTDw+5MvFfRPqQ2Dzyuz/cGPYdSgbd4W9Pwj5OpNS5kAVTTKvysal/w==","signatures":[{"sig":"MEYCIQC7mGT8OvuACJpSlMb7lb/ilzt6aeQ2beLsollYsEVx4QIhAJSbPCaPPCUG7JPnrLpDJ8g9ijHNpGUj4IDz4il7Y1t4","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhl+YCRA9TVsSAnZWagAAKMIP/07c1MmRN0ahFZNunSno\nD/KnAlberkxLo/+A1dxrREwNuQSLSDmoT9ej1efQCRdXnUJ8gb5To8qFp5ty\nRmxGYSjEc38rVSCGezi4RUUvlNxM9qEH14KhgQg2FeiENgVcT+JngIALGaau\nDHmx7kUUO2Ts6GtHRJ5lvXmS5Ikz5YMCT1odS3Sgx8bJHVhi4UwehaSj4vr5\naUxLtRnobPG5lp7d8JApJF5A/GkiTroF4BBZriRU3dbxpIHmSBBdMGV2Nx40\nwc3dXH1KEPyh47jflilz++yZbO8o23UQPAp+OWZa+OzPSbTHMUoucuBnMxOI\nt1dnvdk8zIE2uNCX8TFb5gbL+KAVsJd5YUFFfnSW5ShrlAVE6/LIX/3NXwI4\nYjHuHFMKoLDAsjSGPENrmCBaM0wi737vbv27ozylPSeQ1WsT/89DKfHFIxRF\n11IuKK5ApUdztbVnId2VkEewLMDLmULNPggR1S8gymHJTvODQSskQRoc3wND\nBhrdbkGAWNgqoLngx3ybeJb90HA/M4bDozRmBRyR6R0+6Z8/QrciXPZbT/CP\nvXUHlGIvp8SsV8IlKtkwljvVA2QI/pZBuWDi1h1SBlWtud+e0ejirx6aO7zu\nJXxJ3Y1noD3x9HRjzz4Fo/fXaM0+nDIw4Qv/yI9VCBQ/5rZBUVaggiM4OaJY\npq0h\r\n=hYCF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.174c0becf.0","@material/tab":"8.0.0-canary.174c0becf.0","@material/base":"8.0.0-canary.174c0becf.0","@material/animation":"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/tab-scroller_8.0.0-canary.174c0becf.0_1602641816175_0.16004361717107063","host":"s3://npm-registry-packages"}},"8.0.0-canary.c71ebfa02.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c71ebfa02.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d1fb8415df1c350627bbdb96f7d22eaa9463f9a0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c71ebfa02.0.tgz","fileCount":52,"integrity":"sha512-UidIGivgGJ3Pd88dMWMCpkIgZHTwlMIx50I2JkSPomnPJN4O4SQXgDrsul1dD7+y1mbJc4KhYqbr3wSbxY7sOQ==","signatures":[{"sig":"MEUCIE06ai9MHc6vEs8oOscEM3bhGr7OGs+dIfCXhBnJ5q5QAiEAqNqEDTeCutpAQnvH5YqtS1r3eqd2CCriY7hpzpNTnHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfhnwsCRA9TVsSAnZWagAAURIP/2BlJCLo3zFCo/+yRZFq\nnodEcT/bMKTdKDK/mDYR5KOmORBghMAjbOUAuz6Iw0zp0f1lkC7nJqvBBXy2\nTDzp+kZkCS836TeAuxbKEZquOX1u3Y11YpCRZ4MRQN3dwe+ffhYGI8aK7ke9\nm/5c42siWs5tpmEW6kmc4wX0fcOhti25AordLHUDUJe95PzT5hfBLxzIGf9W\nAo4mIaZ29GB+yd8BZ2Tu+jv0z4EV8o5JjV+dKS23KYySU8W9X2JK1ep48Txc\nBc/ZwyGviqMLXDPJgEPRmj+aMkRpJs2aURFDuHT/2Q/dTOmKdSVUwHG1H0hV\nUBoLXRAz/xZBbu/EuYBfFtb8MiXCRM7wkOxFmI+YJn3Sh8FyP9cvu3dz5Vm4\nhFWo2QRHAD9XBdfH/XnAcO8/kbi5Ah56t1VL/CXpRBMlBCX0NFo39CAQ7+wq\nZMzzoia+AEhgBtdBylXwoqb5SnHuGHQ97zcsBRQjiMg3bAyFCUek0UcWKqZY\nDRZb1aeSL7fcKYqEO4iHLkZcYgyinyC9wg2BI5T8LN2LbwDzXyAHlxnUW3DQ\nL6svzJXCd0CuXtqYmMtsUI/IFzQWPLRhxCGwecmDutItzZhDETbWPLM/LnPK\nEtu6+HJ/9i/Q/PU8W3oayQ2LQ1E5XVeXPrA2NBfOqLhb65hAd4rGWaKikzmh\nppzf\r\n=KXYo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c71ebfa02.0","@material/tab":"8.0.0-canary.c71ebfa02.0","@material/base":"8.0.0-canary.c71ebfa02.0","@material/animation":"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/tab-scroller_8.0.0-canary.c71ebfa02.0_1602649131803_0.1948197081860601","host":"s3://npm-registry-packages"}},"8.0.0-canary.2ab716cbd.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.2ab716cbd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e5aac9e4d8c80478078390f4efa591cd581d8659","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.2ab716cbd.0.tgz","fileCount":52,"integrity":"sha512-rLBHpXdposIVdJvV2c57g5HZYKT80UpwvqCcnz8Sy8eOHilKYwSDkm8ALpMR57w7T+6P4thhyZwDfhIZtaJUaQ==","signatures":[{"sig":"MEQCIBXJLKE1Hl0dcsWZbXpFRiWcRsSkeSINxFb+VTVTdVZUAiASIbGc4HqdNsdRSirAJOfJO+9pkMwKb4Jq1vbX81g/Rg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfiOPNCRA9TVsSAnZWagAAOYgQAJf5gq9zFlr8BCgDV09L\njsknTq2025wgs7hAK/dL0TsxPoibN8hTFBqvuBRDXbZEv7NxocJPYS+axUoj\nRq8wRHam1oIFnPyaSUTrnDIJTgx0aiW4dG2TLiQAoFj35+yZJR6656u2UfLp\narL5UG2+BtTGC3X8sFHC/Uhw5apvveGSTxu0iUv5CNOVeSQLQIPDYyL/QcKu\nd20Ep1LOGx/xbIqTBFjYxrD/6wb2AZYPpK4qtZ52S/OKAZdNtmofv794mX0t\n7SY3xikUNAItMsuZkrogjPpAT8YvFi8btA96+Lii8hEGYC55IgWeSq4o59iW\nRI3L3CEN69+waBmn1EFQaYyX3rP+FKmSBmIzHKJKPyoaKo1XMb6jyCSaLaCy\n4Hs4qHuKTrHVaJf/ZeBUu2P4VHk+weC88wcXTcwQFboKCGFHJ5b9fO1AdalZ\nBSfsfoME8r27g2bnqQZaMyRN0AcnDIKwrbumbtwz/Nscm074cy+WAMjRcNBC\nku6BjbWmAFnXviJfixwcUJglMBIin1M0fxcr6V/gqiOMOFkza8nXI4Uromq6\nNbQF7VTazCMY6JujgoGslHL6lzAxYpWYwZGZqKLCkf1Z6tHZB1xqxmfDQwtZ\nvs2Q/rRwk3A8UCMRAQWiKI8AbvNpYB/WHXHQHumcm86Qp+93OzDP+Vfpfr1A\nI5pK\r\n=sXg7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.2ab716cbd.0","@material/tab":"8.0.0-canary.2ab716cbd.0","@material/base":"8.0.0-canary.2ab716cbd.0","@material/animation":"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/tab-scroller_8.0.0-canary.2ab716cbd.0_1602806732950_0.47771118563255244","host":"s3://npm-registry-packages"}},"8.0.0-canary.43c1c5e2f.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.43c1c5e2f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f146938d2d1688745239a081596e07231e78eeae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.43c1c5e2f.0.tgz","fileCount":52,"integrity":"sha512-+5G8OEqy4wzucSp9dOXKOws+OQgAa8JPBYwSKbP6CxfNbnlidu+gr3ibE+2936MjMj5U88NeSkpEy/VoSjTPXA==","signatures":[{"sig":"MEQCIEpx7vo53ZaHxrn4K5SXzBcqRvsEq+NDmi83KOniytOwAiAO0eCEo4wxp54a2EISTWJKhlWj5C5+Y6YseXbEiZdLBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfjZ4dCRA9TVsSAnZWagAApGEP/0abW7wiYXeVeBe6p7RG\ngm3mNKySegPuTOcOVMPaWGi2JovJJQmnMvbiSZaGqdz9xUoyzZL5DoeSdaPX\nQfQzNFnqZxORxKYl/Ob8iuhF9VCFIpAHGy19LumQ2gJNCllavrYAtMp7yKOO\nNchYzMj0FoATuhJ/0nE6OGNyWf+8FqNBZpeKiaR3pNsX2kzhMNSU9cwklL9T\nVgRXKJ2mPNIfxNB44IrtePI9lZVeJMVrj5FdnYyq19RVUYJQ4HrzX+u9JJSD\n1PST6gteUcZGlivpEYRPX1RNJnvYStFwkwgdH9/kYYFCusg34XMTl2FoE4Bj\nYZGBnWSJTSkUf0NRumWnsXsDecDL3RVH/e2FxdYK8twm6Hz2YZG2dYRwldrK\nw5Rf9R+nOoux1gYpiZJro9mlftRNfOfEqcQdGPAX8YAQd3vkKskstIRBbfe5\n57ZC3Gddqt3ge1Iq53wdRvwk1CL1TfuwH2nPX8TZqliL6RETVqCXaY+Bpypj\nAEL3/wAkA/0L5tkyRQg4M8VIc/64QrkUlen32Vw1OSscPcPgsO9cZGDCAGXA\nw1k0k65tEc1jhSZu1rUJwyGM0ZfBiOSdpWVDJYcvbq1oLRMBeQfKOCbHBXqc\nXPT0HKZuXEZasGO+vOErEw7Hug4d7r4DubA45QevZV2fpG8wZJxZf6ZiKd8M\nY4Cm\r\n=r5is\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.43c1c5e2f.0","@material/tab":"8.0.0-canary.43c1c5e2f.0","@material/base":"8.0.0-canary.43c1c5e2f.0","@material/animation":"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/tab-scroller_8.0.0-canary.43c1c5e2f.0_1603116572953_0.8481832632894242","host":"s3://npm-registry-packages"}},"8.0.0-canary.ccc64eea3.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.ccc64eea3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2ba3681efaa819a6d514f7ac709f0af8716d9c07","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.ccc64eea3.0.tgz","fileCount":52,"integrity":"sha512-k1Dekdyc9ofrYKgM76gcpyp8Hk90HHgER45YVldAPOyNaJHhSRKGc0EbtnK3JIKZ+SnlMStALmcJFqjmwND7XA==","signatures":[{"sig":"MEQCICS8TYDribLqsuyvtFkzSxZ00bSv9Hvb5nIqVcQdPDmUAiA85thtrubVppxNLhqfLyvvqpThyCu5gmyr1V3zILSHeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfl1NCCRA9TVsSAnZWagAAb2oP/jcUJVCiDRFZ6g0mDAWy\nv4DLtTd/eve4iOXpOQGeEuXUkacC03Z/U+sZc1dSZJ/JJt4dEEt1Ly236b5I\nNfHhffrT2N7oEo0rtGhrFIoJv8MZWFljMr6YHfhFPPdg1pOiJEIQGSMAmky3\nWbt73/26oswrdkcXFKbsfnic194tKPmoZzYp1SWhWerM3becxg3/81Z5cZ/Y\nErEQRWmJXPsUfueHirIfet5YqxZBIcaMiaTPSqKC5r9uaFhmRue5xWlKQH3Q\nvUw7OQ/67VSM9nfcsbCXjGi5D55kILjkBgMRWuvLl7TR3Us9KUlHXs9Szz+D\nK6fgp7ImdvvJ5U12VQ/LNoKD35h0maLKDb72N8vs3G4KNE67Rx5mwCFbcRO5\nNMH+wDejV79UVXIKbLvKWBw6gjue9buF1UliP+ZdHPQE7RFEhdIU+wA4pKQf\ni+F1NAFnCA2bOMBEVRWlHhM0Zpn5l8dKNXbJMp90OjB0t4uI4LauQSAFaPM5\nZj9BEmmU5ad7KEyj/IkdupmNxvZvY/8zltjkqZXywQh9QVdp9UUa6pWEFAla\n1jwV4Gr0LRH+JrqHhBsp1McPsNH3szJ29oIuXjByOpNoYtQ8PUsQxUXRACXL\nAdB7xjAwL9dxtxh03OWLfN8S+wXBwCRyLoucXHPVFO5+wo3rXBvmByYIfz0o\nIxAj\r\n=QP9O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.ccc64eea3.0","@material/tab":"8.0.0-canary.ccc64eea3.0","@material/base":"8.0.0-canary.ccc64eea3.0","@material/animation":"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/tab-scroller_8.0.0-canary.ccc64eea3.0_1603752769946_0.3434040701499623","host":"s3://npm-registry-packages"}},"8.0.0-canary.a79cdd019.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.a79cdd019.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"97c3fa66ea116997f625c09b23c7dc6caba6995b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.a79cdd019.0.tgz","fileCount":52,"integrity":"sha512-KJ4ciRVK5v6fOP7myJPo/xHTvez42uF27L97fZwN4uS1cNz/3d/hiytr2/LW2LgrEgW901zkvXUDsxVb7BcFww==","signatures":[{"sig":"MEYCIQCipbNK7yLM8mqNdXlvMgxpjoPe+0udGsTfcjuOb0slmAIhAKrcV/6xt62KBw4XGTDRhjPpIClYsRhJ6IlG0rMq30C8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmEu+CRA9TVsSAnZWagAAXwEP/A2g/Xiq4LwKUQhH2JXx\nSLr0eSFWfCkgcQXpMDgt8RHvYib5cA1LYsVGsCwRwgzduooKeVQnffEsZXkf\nvy80yahDzWiYcwOBXnCxonb0XqMIfWshUurU/eJrQ6XLQQHO/HPHwbBZuHJw\nwGxk0UpZW9U1qTeKL2FlHZsYkTpfp9UnDd624ZzzXVqrwHgp2zNSQeECKxJN\nggsfqWqet9IhQC0bQRpyY5nzVZdb8pEYU6HY6/dwQVC/wu22+y7FHEdELOSh\nhK103NiRTe6StPq2xmJHnbF3mwgCPnCIi2B8oKVp+UfP2ekz9l2pFwp/gxiP\nYMENjPQ7j5GA/uA3rj+fCKPqNC/6u5DQnUYJUpqzhfbLdpbM56654zIpf7sr\n/o9JB1YGhCSwaGCo+IuO6tEFjXovPygQzwTaBltllXF5gAmYXVmN/3gzyHBK\nEKZEMi02OuVT4yegUPG12dzq+gXQuWU0dURqd63aG8j3Zmo8t2t+u9W1Y+9D\nW3giZIewvrBRn/BU0cmiywyCJ2BXuKzLdWARhkkiOI2js1MG5jSL8gsLvXbV\nRO/YiQ5RP/GyG6KmT7r1AK1nFaFZBm/1BHTm1nDT5qcuaFAPHJgc2YmBMHyB\n4jiS47XNApwEPrQXuz9h3ftXjBRX60dBkNZdVrwTo35Ob5sujzx8YgwaDXIE\ntGpm\r\n=ud1G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.a79cdd019.0","@material/tab":"8.0.0-canary.a79cdd019.0","@material/base":"8.0.0-canary.a79cdd019.0","@material/animation":"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/tab-scroller_8.0.0-canary.a79cdd019.0_1603816382185_0.3108967203487445","host":"s3://npm-registry-packages"}},"8.0.0-canary.596e98424.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.596e98424.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fd060ca16911d931364f1ef2d622470c93b2b0d0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.596e98424.0.tgz","fileCount":52,"integrity":"sha512-kl0ohn15aQ7qbANilX2Pzs2eQQnxXn4eKNG5owZeD/KuN7SEkisz7kpJe4bwXKAjaEX5OShJH++i6LSvhL5XkQ==","signatures":[{"sig":"MEUCICBy4PINeJNV+FlOwtAZcjrAycKemfX19nsHnhPCUJqmAiEAvY8nuE52b077RTHrNbDbPlpX/z14YqxW1Z0peBucPGg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZasCRA9TVsSAnZWagAACjoQAI7B4BcJJuuncKFdfT5k\n81VcxoQ0YiOTseyw2rOQ81IOU7rtP9MfeUckxwVzjIjKE4j8/RZbPBPIyDiu\njBXOMQTh4DTq1VfJhnJlldKgS5yHj3X5JZPXg+UHdJpqsr71Mclg5DCQ5Gaf\n8OU0HcM/NJvNrpWgT13nwR6uSUlOay7cps6FwxF6bLU1qQOEY4uznc6WLSK/\n0wSu3p/OcwQ+C3X++OVAom1gaueF9VwdzzEJhmau8UlosYKRTjx1q+kW7h+V\nxnpi/JzIK3udLShe3VYFkqgV1qI4T9ZBUHWNVYLN9qBi2UdtriRBudGkNXNC\nB61KJpmY985hAbCuY4tGYKQ8phyqKVX7268QTry+hWX0d2qv0sc60NqfMFAj\n3OIQ3DGPY2Pd/6ptW5Db7KmyIpH94sLFvn+dDkLGm11jApkurD/cY2Cil4CU\nmacyd3hrgZ61Pym3Jd4tMwcM6O2IUrdt/9oincCrwYiDEXMFD4kSgu1spxhk\nW4au1iP1NSW8utavQnZgcSD0AsHbLweQ0bsPvjMm0YfDlqYUqkBuD/6kFZJv\nYM2BOVHeYfURhkbCaMdxvNqdTouBJTXeHzv7PtTjYaxh4OXwRif9a5qg5GQ7\njHoS7oCWUD85UgTt4d9o0/BkAx/dMUL0AqCr+iWSJKbHOU6v75ggctJVb8NT\ngZJe\r\n=+asH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.596e98424.0","@material/tab":"8.0.0-canary.596e98424.0","@material/base":"8.0.0-canary.596e98424.0","@material/animation":"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/tab-scroller_8.0.0-canary.596e98424.0_1603901100462_0.40725765666433067","host":"s3://npm-registry-packages"}},"8.0.0-canary.05d5facc2.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.05d5facc2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5d2e5b388ed4f8f21031b0c8b00998019b18feeb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.05d5facc2.0.tgz","fileCount":52,"integrity":"sha512-yPSLV2WaZw2lMnacqc/NV12Dn+ZPtGOCbmDK2COixfl7nIAAdeKKdIA0+Gn8iJEdG8P6fMYyqyCBxhNUm2Va+g==","signatures":[{"sig":"MEYCIQC3WS/OCEdcHEVRdX4AzqD/6ltTRU+4e43i1QqZmtXmugIhANGOAm6d2dac4PVJyVL7/zYNt+mp4YUgkKvGRQg/mWGN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmZiwCRA9TVsSAnZWagAA8LQP/0EJ2u7fnIqs/yaM4/l6\n1xweWIWDtdeb0vM2EV3jjqF/JCf+ZJ2jmuKpdMk01oNpQbzfzDNydYoOE8Pl\nc1ID4O5IY2trAHe8SPcLpCXQ0GhJtreHvx+7qpFtjMjQa9uCZvBbYSX/9IJK\nWnfq+IKxXI96lmkIXbd402Anic1dLNGUtFtSiPIGruy83XaEcMkOSHTqnoQI\ngHBI/dMCD+Zd0I/w70Fxt+LYxcVtAXgHpw7Rr7OF/h8rG5xNtfxwZ/VwdBCZ\nGlhvHFxKzP+TFqigNdASRg40Pq6TBurxjWdEhb1cAdJgyWWK1VjVJEFW2/BH\n9THj8IbEgJ3Ozm4YJqqrG65+nkRsFZOzkv9D+ZO3ez8NVPbb3JOE7yVWQhV+\nnOBJojBR0TeTRtlVMnVdAh0YeqflypJhhSl5zCKDUJupha7DRvzxCaSeaizf\nnNf2oK6CUA5P1FUC7kQbADyBOjW4j6TPX2ho0eX+fbg+3AHrA2gG75j5maKO\ndnFnIl+QO6eWwBSTbEGrDmT40kT1YKl3I/mIrDQARS1hWivIwVs0j/w1laoa\nDoA8wfwaWWfz5BfnWi2XLOfkL/JRQcaaLgVepzqNyehi1eB80XdNSWsJFK2w\nDf+7Lt2CwNXU7cmKRB/A+1OwUBPULHLcKCpYigiviyRLWbpH0bpkn7RfwUDB\nHacQ\r\n=p9b8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.05d5facc2.0","@material/tab":"8.0.0-canary.05d5facc2.0","@material/base":"8.0.0-canary.05d5facc2.0","@material/animation":"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/tab-scroller_8.0.0-canary.05d5facc2.0_1603901616083_0.9035644169196422","host":"s3://npm-registry-packages"}},"8.0.0-canary.291b3553d.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.291b3553d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f28b9719e75655a04d16e618b430cdab9a3d495","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.291b3553d.0.tgz","fileCount":52,"integrity":"sha512-r8RGakZC7d4Hc4RwfGb/CFWM0EFF9bAwwN91fg98WZRAcYU1sOWy5BVkyb/CYm9QFQ9Ql32Sw4NH0z08UFUmXQ==","signatures":[{"sig":"MEQCIF3pPSH7FCl+joRt9wN9g5GuToKnIRmmwizSVFg8NQ7BAiAM0AQbF/qp6tbrNFCOnlclBpV14LA2fx2wyGUmVDzzNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfma5xCRA9TVsSAnZWagAAEjYP/0hETprJf2uY3htWtph5\nPb9U1VcobiPVFAIKzWeqY5VBzfSMUCHHv3YsliNbldFsi9kjLcdIdDcgSjzz\nmBF92CdZP0gijigyWhhrKPoR9HmUH8s5Ph9m8UlSGP/iGgQlH4/7p12JXMbA\nwizM2aPUo6Sc8HTn64jDj5lI5Y0i1ADtdAn1N8n2lEjJQG8/K4ty4SskRJyU\na81Qmu3ScLpv/X+oVpacDcp9wlxYl+K1bAe1EuIPOKUJrzjayGzwWYgsGeoN\ni1PzRo1Zd3Guk8tEjqIVO9g6xutmDImtzw6NYkUkxhHgV5u1HBQp9te4X0mZ\nbt4rdGI7Lv9TJJMO0+/A2G0MifSx9UaarkPzhXkCzk8q8AQ5UngVPV7HF3cv\nBkQYzpczlxgDbdeoWnwnFccSEQOZ6QlCJP0ka8UOz2+7utBL9lYSilINR+hG\nH6oBG1rMK+3pRNZhhD744d2XLzEW7CKG4pZsqTuYIU94y3udbSjhS47EW6+G\nr+/4rjuxbuIZSvavuBpufuQEZWae5L69t22egLw2VPQdCMqEiByxPEZvNpKq\nMIgB69Bi6msPnICI7wBAnPcHPhl+mb7TMUXAON1PGo5Ea/Nto9GPbqBkvL8R\njB7LaR3E+aSTMnak2qfBhAa7G44v4OPnydfTrLiaDb7/KdjCD76bg+HBzYY4\nD0YB\r\n=N+OB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.291b3553d.0","@material/tab":"8.0.0-canary.291b3553d.0","@material/base":"8.0.0-canary.291b3553d.0","@material/animation":"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/tab-scroller_8.0.0-canary.291b3553d.0_1603907184822_0.17076195082904722","host":"s3://npm-registry-packages"}},"8.0.0-canary.dbc449b09.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.dbc449b09.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1b6eb1326cf80751771bb55b456164fd781391a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.dbc449b09.0.tgz","fileCount":52,"integrity":"sha512-6yliPAJiGYPRQW2WqTNDI8CKbyZRcu7rwYtrRXUevwVUllGS4QzwxRjFbBy62YbH8Nkuo3A1TscVcc0OVcpKTQ==","signatures":[{"sig":"MEYCIQCoZziZ9+RuCS8qwjYYSl7xmUsU/b3/h1fafarG/pc4tAIhALtT/Z5U7EI7yVvhHJYHEaHC3FX+jWFDT2p6wJ+USysa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbTvCRA9TVsSAnZWagAAU68P/39dqoyKmGjERkmJNRK/\nV6QT3JCJrCXch7/zIpVWrGH29krM6Ac4gjFv3vvsswVrci82VGpe7N4gT2lE\nmm+MTgDoo6aFp3kzpxVgn3j+yWlX4w7fdCF65k4Ho+yqzcTNjdbEoShHtmIw\n8wYhuTrD/SC9xNj/YZ92RMh4RGa9sQcpTaLKjntE78uLL7MHdsiAC3kxU9Ns\n2UtygaNVZzQNhkwZQV85iP3oO3BanSzdQe+2N/BiyHE/eySJ+sGqMgyD7N0v\nAOHUhc21/mEyL6z9K295h8bnyuc1e8TWnXFX4FbzGsLelzb0l5P8inFvxl/I\n9EbFHG5JYJjYH/ewfyWpsl3DdVe4M/i+5/eAG5iW5ZvCnjGxcPNgu//omuTi\nhgUTV2Nkk/6HsiCd4TMRIAU2xwRrZvK1UicyoGc+HmYqtMbgVd+5Ddfad4wd\nv1MzwlBJPWqY7xFEeyIeawgtOIVpEHj1vl/Il79deKg047oubF7LLiCKwRSo\nhPaDQWNEjSzY9PLL2J1DQ37oToWMymttsaFy0jhPoYTtCtcSeTcA+8Sv2U4N\n2ZmuRGUSAvQej7NmVC++LegZUwC1cu71CdJlRV0kyoSpyrfiMRRHpsTVN7/i\nX/XljRt/tnG3zMy17jG2YxqGYuSVonlYr+ULN5+VkVhrByGcpD6dOeYFJVZF\nW5V+\r\n=DTwz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.dbc449b09.0","@material/tab":"8.0.0-canary.dbc449b09.0","@material/base":"8.0.0-canary.dbc449b09.0","@material/animation":"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/tab-scroller_8.0.0-canary.dbc449b09.0_1603908846883_0.9574306374365018","host":"s3://npm-registry-packages"}},"8.0.0-canary.4794b25da.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.4794b25da.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"18ed41b8fc3df79f1867abd70a7f2fe4fe9c5a39","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.4794b25da.0.tgz","fileCount":52,"integrity":"sha512-TbzjmlTuq8nurJFAIQjih1adCXMhr1ryEQ9yr2lIV/KXDTPKsbW4pjhnEY9hkdSBHJif+OC1ggozpXwNVKCncw==","signatures":[{"sig":"MEUCIDbKJXlGkOIxGDvlw27S8HKQPaFbGkE6Ip5CzFbpnjZ8AiEA6PKwpRKZAgGAIbGveu0nkTitp34gOi7zkQhLDKmzulA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmbuVCRA9TVsSAnZWagAAYn4P/jJ9+93NUKBSv55GvNki\n9yM7ZF7TL77riNcvy/KzMoqQy8EXWY//QOYwKP1disIqqQ/hBPagcuKBkD0V\njJC3QuSlarRDScMhd4RDJq8mjCFkXVO2H4Qn0Zhuxt1OpmgyRF6u068M9EhZ\nTTzhbRTfdK3kmNfk6RqRogx99PM+vizGICCFkx2GmURUS8nzl15sDkMsmso/\n+/moABtXpWPDWIApfba0S2jRne35FmbZ4UTy2w+64JuGvtS5hFGv+fLVJfCP\no0/Di2KNeW4AKvT0mz08sTMWfVQqJTCD7LwJz2eH8xNw8rUtIHYgnRhEAJFN\nygIgrCUUQbNDtW9WYaqsZXm0QgrQ/IyPC04dDUZTUeDCD4kQZJO76JbKuS6G\no8CN/r1LpCLec2bwROG3IUO95bJThLc/vi1YANTvkuPOt3ZmPCOuTeptJ1lE\nQjmJRHs9e+HrGQE7QXJ6KsxdQxZZseSY/JJkwir4bPKaCryjQc454R/MDefJ\nchtvkmEZminMgYqQuCr96oKAOUjx6h11wQN3XFcYqAvcysJar1QxoCOqXYIv\nqMtYYGopTWhwTMM2n9N+9hOqdwEsQJFA2ON+cIimY9RH71O1xfdL7RTME23J\n2GDj8PkwOHJFzsaQ5f8hIUQwhftKh0WiLAhybO1Ub5t1Xk1Xrn529+QahgdI\nVqZl\r\n=KYEb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.4794b25da.0","@material/tab":"8.0.0-canary.4794b25da.0","@material/base":"8.0.0-canary.4794b25da.0","@material/animation":"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/tab-scroller_8.0.0-canary.4794b25da.0_1603910548848_0.348208089442533","host":"s3://npm-registry-packages"}},"8.0.0-canary.c61db90a5.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.c61db90a5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0041b5ff4f40cd88ee19ad40ac9fd39657991c5b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.c61db90a5.0.tgz","fileCount":52,"integrity":"sha512-i8hlkH/XOYdEPt0jOwZg1zHyUIhw7+b8+UfnEI2X8pMp8x6nJJAX4HA1B4zdw7vygyYy6o88NNiLF0CUV1hFyQ==","signatures":[{"sig":"MEYCIQCMXUvAHe0UtljsMeKxdkobK+LXE+6GlJyKChnwKkXkFAIhAO+blO5RDe/ptEtKdoLhFS0CXgzfpHeR0N94QBc+MB1N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmcACCRA9TVsSAnZWagAA6bAP/RG1JD7dxALAfHeRBdBO\nnYwoktqg6CBAzNiJDgWfmV1R+Ikn/YBmLKTWkI3E3aoQObXp0igbN0umoGyd\n2zBa/L9s16/cOzX2PeaNuDrox4Z00Sf0W3Az9hDxjRhMHJPaB/ap5CcYi2x2\n7uKAgX6K0VLPI/e7GZISxRD4dpxaTf1rArRRIti+YwOH1MllxsVfxzrs9fkO\nKOB2KdLcOGtB/PJQTA8xoGCd5hR+fhB/jVwlP5yyZcu40a7So+FVCmGeGTRy\nIDUmBRI9hXTL9rHj2BN5vkOTYRPu1i56dNQmr2p8hOeOHtY82AhLYJWGroKg\nQvLxGCJNehO423MvQ4tNzMb1yQ4WAQ1qOeBzbRZatOoffdOjqYtsKUNJAGiR\nRqISpoORXaYpAGGA6pQfecDpPzWTT9h7zdNmwmzTSqLK+wfWZWFU3eIyieXF\nFy6L2p0vDQgrfb3ZlG233oiuhmsfjGmsGdYqcQ9H0wzkDPJ8KBGrtzjC3tAq\nuN8E435iQ/+DP7lO3S5ijQ8w3z4EsfLkCqS3yj+9ATpqaJil7ZqjCyY8Bdqa\nSMhECzqrwu4p6v5J4KuomVRR9lrl4t+DH6MsNcjWWSehxzLlt5H1HpK6RnNm\n+956WHw3mRqs6zzPa/7CwaaNaYdmv7RN9V/rTCq0oSkQuSO5GWsTfCKhvbtg\nZ2Gf\r\n=gTLA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.c61db90a5.0","@material/tab":"8.0.0-canary.c61db90a5.0","@material/base":"8.0.0-canary.c61db90a5.0","@material/animation":"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/tab-scroller_8.0.0-canary.c61db90a5.0_1603911682216_0.659088953434775","host":"s3://npm-registry-packages"}},"8.0.0-canary.6d9648ab2.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.6d9648ab2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b333d0edc17d8ffa96ee342cacbaecee50f9a66d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.6d9648ab2.0.tgz","fileCount":52,"integrity":"sha512-EYBlEwcMbkVPsfczFICA1wC7A7ve1fgbqP39DLj4KrvgIBv5Kya1cS/wbO+NN0lBRcMUJ0USnpXX3Ep0wNWvLw==","signatures":[{"sig":"MEYCIQC7A15dmDb5pekxY6kZZhM5z4V2Ds8SbZxq3mVfjAggugIhAP4YTM1/NTT8ZULcjAvU7JxwhTKwP5xLiVPNJtnH52S7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfmyc2CRA9TVsSAnZWagAAS/sP/RDo40/0/UhCajFR+j4S\nDKNWal2XP82RNHPS4X8CO8tRr9f0KlB28cIwOPmwCStnHrShQzLYQRWyq/Dq\nriCOLgivJxIc7EfOxHamNDSHbJKK6aOI7V3HmdJhPLuHbjsszLAtS2iFV7o/\nlEZcHW9Ks5+I7VnUxa4+IkGztU9uYwPPq0II61ikB4AlI/VVeD/dMT8EeXVl\nqQ4PElgfLfftRUYuZi+8xrhRxwAShV3mIhoSuycbhHsDOFdpaz4a2op1sfRK\n5CGHmaqKIY6NngntApTuYHdQNKf1ROwgodShXIRbmGKkJHGUA1dQcNoZAH6C\nUh5nJAwbB0Syyak1yxsUAw6HmMSRhkbnRtcoBKkH0NZaXNC5fzYMtUKn6kVX\nsTonUzgEnQQnIdqPNPfxUZTvTGYk8Lnr649Yg3XQmHUBHv//JA3j0pejI4+R\nPHLFPx32qoZ8vILxC1MJnbI8z44bqQ3rsO145bl6swDN3rTnseTiTl9olO6I\n1uBjHBY7PaxIBzNkgc9qK+t86Vcnn8gzcn3AIb4JsInn/rtj0Zbqp/YsNLcW\nNdykHYrVvw86Qk3Xt30PDvNHp7hvKRMXwJbuDw7xfYxSlzfV7WYBk2tVQ501\nFMbunLYOJ4GUUrWshIa3NZgHVOY8khNFARkgzhGYVIRiKDQ/WpFdx5YSNLNG\nFOK9\r\n=/Upn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.6d9648ab2.0","@material/tab":"8.0.0-canary.6d9648ab2.0","@material/base":"8.0.0-canary.6d9648ab2.0","@material/animation":"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/tab-scroller_8.0.0-canary.6d9648ab2.0_1604003638100_0.31389598444224065","host":"s3://npm-registry-packages"}},"8.0.0-canary.5511c5254.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.5511c5254.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dcf82817116d9ee5bbc374fc58f1bc4913d5ebb3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.5511c5254.0.tgz","fileCount":52,"integrity":"sha512-RIwqENemLZKDSPjC1nO1hfPklBA1KW9s2lAwb3c8rPXAVpUJvQRNzjkt8/+aWbvCaagmHTZdCTl93IAnCoYIzw==","signatures":[{"sig":"MEYCIQCnjTUuOQBbLbeKux2feryI/c1QlVg/6mJ0WhezxcucmQIhALEqRJUKwIuwZ1MctRsBaxvwRS4aO+RJ1ybQ0MJM22pD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfnFT6CRA9TVsSAnZWagAAGRMP/0vvCKB4WSKkKNufqJod\nV4Z/xeo0cHGIbVx5gydon2gDSf91/0lR+GGItRKcBO0xEov8kR+nSMtvP5jB\nGhbamNbGDk4xoGqCz9iSnv3XToTda1eZCQ2fg9D2l2QEFjGFSy10+nTFbAbp\nq/g6aEmjw95ywjX9S6qEKzD6Km0EEKTOF/mejUcvgQE++txP1S4e83W/wqoR\n0s02rzohR2HkTna1dRJJPvuLejX8v8G//GIfdDytoRgkvZaDFXXQ8GN8xJgB\ngEA3zBDPppMNFoA4VXgRM41Ff8ArFooW6O0y/exBmDTx1iKaTEoUcUvCybML\nqrlzRcWkwVCzd1KBMJ1m3OscU41iJvWk58EMREH/bH/SpI6Mvljz0bDwOlVH\niey6J4voU7rv9ktBMIhqYZlbqHpFBHrEEDhvzwV+E/3O1+S7WSAfYpz/wikm\naYzMbS5p53vvrESnC+UbsN0mQOVIk+CrYyYmemjSTW+SAaMKh/XXJvD0Db+F\nkiuxwLh3FVRXxvV53iPrPC4miE5bexDDyjlQW0KOK/iZ/GuWtkoak7RaUlle\nR04DnkYGKRoHA8hcocg2wUyIsUtnFkxQW7Yag6aPWxZ0QiKePCBDuEhxdEI/\nwiX2402DpO0PVMGUntBbdVRzplDkZOgIE9illyFE6bQL2KOzoGRVEhinJ1Ol\nY+mR\r\n=GZAH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.5511c5254.0","@material/tab":"8.0.0-canary.5511c5254.0","@material/base":"8.0.0-canary.5511c5254.0","@material/animation":"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/tab-scroller_8.0.0-canary.5511c5254.0_1604080890010_0.48653648445596964","host":"s3://npm-registry-packages"}},"8.0.0-canary.bd6e302a4.0":{"name":"@material/tab-scroller","version":"8.0.0-canary.bd6e302a4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"08b70c2ccd971f7bcc6159431844e02420927f71","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0-canary.bd6e302a4.0.tgz","fileCount":52,"integrity":"sha512-Op8/rcV1Xyuk/ZzukMQUny4ydVpNzum4UHTCecjkLaY/XTMTrHt18EZAsi/d9CiL7rG4J4GvYJMrKlonjKPR+Q==","signatures":[{"sig":"MEUCIA7fMPXJ4+aJ0/6Iq2NgtTRDDjY2x/YufQVNV7G9dRL3AiEAvrbzck3aykU5T1vrLD/Im5fXin1dtl5hNf8wjP3F68Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoDyFCRA9TVsSAnZWagAAqPsP/A193CFfUTu0sejQ1z+4\nrytLG3dd0WZ+NtzFNgUCsYPm52lMFzgGCHigB+GRtukG0R0R9Py/xV4+S9fH\nGAp/Hxxuldi3poo4HAtHYQz9Ku3+UlXQQ6/7KiVToyfB89MVEgLEAn25OWUN\nVSx+77D627cVCtypGyQk/Qm5noey2T98aDXZ+bv6sAJXJ8dkGalzKLEFJzJG\nQXekBCSDeLyal8eNIU+sp62Cqi/WxcVYhYSVsaDIvLQbUMAAkkULvkDU/Ay7\nwUcCKalNjjzzgm6iSR3dX1+2H8JHCxo+IN52REnvv4ZQC1Uyk3qp4w/8DBwZ\npKC/nMUqXpL7EdzTTl9R5uf3hyDahUdaxGm/EIpTGtt5Lhh2ULaIavqOm6s8\nVycg+CmPblIUbstciTF2jBaMd9vt8IAFT+VbYDOp88sqHmWAft9iA9F+sQZc\nGoKZ64vNU5Ysz+shhu8q5zfODoMeWXAQRBSQxbyBeguDPtPr4tuoiIJvlNQp\ne+ZWeTMra2T+PGA3XfTSECZpYDVARWfwoGfvwnJX5khiTBLADnCS2wKivKY8\nxEkm02VUScLVgcwYZ02KMdz9Qj3Uy23JtMyl0dvnEahTAwzsFctul1o/FV7Z\nvyOogc26kruBBxpBONrQMDalF5AxAoSGn9Hy6eKbQadw9FVVL8R6qDB8FF0K\n0JTm\r\n=rLja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"8.0.0-canary.bd6e302a4.0","@material/tab":"8.0.0-canary.bd6e302a4.0","@material/base":"8.0.0-canary.bd6e302a4.0","@material/animation":"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/tab-scroller_8.0.0-canary.bd6e302a4.0_1604336773435_0.41172270977689673","host":"s3://npm-registry-packages"}},"9.0.0-canary.d6b5cd418.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.d6b5cd418.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c3194cae1ba443681d7b36936833ef55d4989023","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.d6b5cd418.0.tgz","fileCount":52,"integrity":"sha512-N0YGvSRM+F7dw4EzbyQ54snpygCZGez3Yzt7HglrheqaxTQHzaS1I2ulLBT4NcRSFqBgfc+Tk58HYpbcYISOCg==","signatures":[{"sig":"MEUCIGv5BM70uqBPsnnSKaRTlRRdS19cETbYT8Mn0eifaHn9AiEAmvF1iB7klwVnVREJxYVFkZeef0xt6VLHRw0vSgy2e10=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+bCRA9TVsSAnZWagAA3TQP+wQNpn9PCGniVp6aLvyE\ntj4PhJgFsQmLci8/wGR30ZmBQ4JEOUT9l76mfvHt6Jp6ZI35qGHebJrkcfZh\nKPSGzK+xPvyYZ9aZmU81MdBKg/3pL6sUDeFvjZ0aTJFRaQ61Tq1WHloxAjtx\nIZaY91IEiTJaFgFRDwNbKnuuoxJY+UonjaDUJhm2aNwa4Su7L3H3+c5Q+YEh\nvZXM5eZQk2dg9O5KS0pKbprGx0Wb620xqJ2AAKRx2EF3goRbMPtL3fkn3ld8\nsmMCN+P4Vv9qCHkoJ8UPSevVRnhkv64UTtfWmCBUecCaMpjTd03xTIai976o\nDhdqx14hRQ+veAC74nFlLzByueCiRo9Aho5pD76LpilQ3drS3n/QaowFfrZb\n1FjZvW0sJshrX7CV5zaaHJ1rr3C3qgRBkP5UEMkR8cYAsnCnUu7e4fhYxCEk\n7/ZchyOt01OL/fH3wC0F86jnf5VHJNsBZDn4j06fk9gnuwMv4RzWPjO8YM8M\nn8bjm2h1HoR71axebC+vA8JbZaWleMMuDqsMrW1EFR8N52LH2n1NS/WeWz1O\nxkoWJ7V/qscrQhCiE8ssWmZ1ELaoWmRDqJrbiuMq1oVWyORRg99cASD4mIUg\n8MmmUGQTDHWI1hms3RTQVSMjPOl7ktNldjrwDM6vlUP575nbLEnuNqAwuBKS\nzXg/\r\n=5FN6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d6b5cd418.0","@material/tab":"9.0.0-canary.d6b5cd418.0","@material/base":"9.0.0-canary.d6b5cd418.0","@material/animation":"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/tab-scroller_9.0.0-canary.d6b5cd418.0_1604358042783_0.41190709964489813","host":"s3://npm-registry-packages"}},"8.0.0":{"name":"@material/tab-scroller","version":"8.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"68cbfbd1fd1bc49a5426d2e08a054c33eb4aa243","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-8.0.0.tgz","fileCount":51,"integrity":"sha512-fB/8lamANa/L3rNSkf7kB+GEnpH9vW1UQ9QtXe1K4Lr2UlCO1L3aV2HvOV53Ga4w25CcLUSypF3AxBzngb012Q==","signatures":[{"sig":"MEYCIQCT6HdZ587oPFBXKaLlXszBlQgcYlXGAUo+yDlXWoGdUwIhAKoY899SyDJmZzGiIvDO3OspZlxAcNVUOMfd1s/U+V9C","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoI+jCRA9TVsSAnZWagAA3RcP/Azrsje6P2oPNzmNmk94\nemfPQoOFPW2RA3Ztf5RaDvosxmvQTXvbukXTclUsyFyu/knuIG9qWU0ODjId\nMnVGa/aDNJNC3jgZF+rX+B2KUel/uR1MTidXfbeZmmqDPJKPNiR8kNuHOpVA\nS4Pr9C5BYPcTtTTqJN9qajCx3TuGvs85VspohqpCMc75nuwELdX6UMwIvUDm\ndSDLM+nqd3vR2Bb5KpWPrEehQLonbXnbTps7cU3QXxKj9HyGBH9/jEhUO/Q7\nHIth3mQecEXCkM0C27EukM3q6EE7BtI61Kfqpkoc+mEJ0yvl4VCeD8lhqmeK\nBhrajah9a/aEscxy0+CRnCMnx4Lz8zINQei+jJbWK0/CgWQMu63VqrSbQ2HB\nmXKKPuWfZuFv8sECz+yhu7wfeFj66UHfu3usBNyUhdmICoUswNDQGpwdRspp\nHHUAyJR0DiYf6+Oza9Vy5Q/fOAez+29jev9akOgJwLJU6LDSIg0zRPJpct8q\n1FVjCzJuKTrb2ojLlkf62B6dok3lyYZaTpSY/lJuZIfe2Qjivq0hlaQIw+Z/\n3Q3vSV9xT186WSciSR099S5qcQ0ZvO/XlF36sBWHC9jAS8ns76RSHQe1pWHK\nwKjI1M3QR4utvKyquWWCDdDTDRid0dmfe/pR4D7dw6Nyds9ALHB+vSdlpmTp\nflLR\r\n=b45z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"^8.0.0","@material/tab":"^8.0.0","@material/base":"^8.0.0","@material/animation":"^8.0.0","@material/feature-targeting":"^8.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_8.0.0_1604358050731_0.7233191796309097","host":"s3://npm-registry-packages"}},"9.0.0-canary.fdf9a2634.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.fdf9a2634.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4938d71c5cc3b572b09eeaec9647bd05436ed3a7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.fdf9a2634.0.tgz","fileCount":52,"integrity":"sha512-+BSUN8pIwJhi+ev816Q0nLDwHohm7Acaa/eCDG8zISIc6f26chTbLSXn3TslRE7LPyyQzlp9tjJRtP35NHZTew==","signatures":[{"sig":"MEYCIQDz/Gm9vhYLBLu8HHS5/dM1hoNdrZ32khOR4909igaAsgIhAO7OIcof1H6aRF4ZfupRLX5a01qVy/KygGOsKy6aLwfD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoeZACRA9TVsSAnZWagAA+w0P/1/ntdp9uqstHB8jZpRn\ndqOizH+i+B0bRw3lKUXpPERqMmp5QAuFNgMLE6VvCta5FYUZnGuIPWZYOLFQ\n5fG/6L+XhDZ58edqZfTMuiEzoqPntR/LzH77KqYyVjIJMOAki0KZlhNKCSNp\nsg4P/5fhOKEeLvsKGlPrbG1UwWBxGYUcmPBN+/cP2/fC9tHMucdMEwbBt8bi\nQtVe7h2srnm2PCMUp6+YkTQyLaY4dH4W5ZBY2Pwn5pANYIE3J29nXlHLHtpi\ngFYYMIYW04zK8/P02qdjBVgZSlI2xlZN7XuXB7OdmyjlW2rLMVXhbO7eu2Jp\nGhGBc2VoW/jLaF5mAOxUdblvw1M8gs1NcPG3Z0rLLUHIu3MwG798ubpo/Ccu\nMNEjgkShPTrvPmS0vGeH+4Ws9x73z5x9gakfevHwBADDQtTOVHGO9OLJp2Hf\nu4sJinoHm0YdYNVjG5ISMscyNytue8nU7VAyJK0MMg6TIpbtoIIPTA0a5qnC\nSmTTb+zFC4iHcMqrOO8oI/VfN8wBploAPn2dz6/bpNbjf8JoZH7iZbMVo7x2\nIUIWoDkB+IwocnJFH9fMSwcSob0D29EpkCTF1/BlUAjZzPIodHDamd5qprVi\n55yyZxd41j1bY9ttTi96bcuw0B2HOiMnKWk2CjA8uiv0d70GJ4wbaD78sOoQ\ntHWf\r\n=+Je5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fdf9a2634.0","@material/tab":"9.0.0-canary.fdf9a2634.0","@material/base":"9.0.0-canary.fdf9a2634.0","@material/animation":"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/tab-scroller_9.0.0-canary.fdf9a2634.0_1604445760390_0.4833403963752161","host":"s3://npm-registry-packages"}},"9.0.0-canary.4a86f30a0.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.4a86f30a0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"968de943acb992703091f7dc79f8c83b8845bba9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.4a86f30a0.0.tgz","fileCount":52,"integrity":"sha512-y0RgFHJcDiZ0iT6dCfWrSFdpifyJJq5yHx6hDHamsiSOKmx9At/LGwUDQhhQS7K4gYxlu+m1KtHPBHuvnls2kg==","signatures":[{"sig":"MEUCIQCb4Rg8CDCvO+8QBuD1bjWvrazvUXSCLDjUNnfk1C1zwQIgKdWtSP2xCEQToRqjAIYUoVVh3WoOU2NDzESbUhnRqpc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoefXCRA9TVsSAnZWagAA0xkQAIpuxN22mmtdvL6I96Xf\nDn2LVlFBWA5yV10YZlu1L5pBd0XM2SEsSWosWj9SvTzZWd7QkmOY+E6pacQ4\njWbEAa2b0wV7IcA7OxO7B2Iet604e7UFh6WXajJ/ZsXIv2ZH9Nh0oMKMGuk3\nJXkvHtvxyefgrXWA00skqizwzrnm39KxrqfQEb4IFUkiSISLZ7LwaFrjBkXu\nKJkNDK8Rx1TYdpLwDBgDK0clWbQ7Rt94OvGjHzfM2axK7L58P2Q//tRQGjMB\nXk5a8ufeVsabTTGPB22HOdD8V5aLU9axQH40SZdHdRB/VybPQp71hY6N8sVF\nGv/gd0ROxigBFvC8waPjG7maxgAb6yGwQbRaG8fE1V0pxcdp1JADCFZbfnsi\n4FJcxebuRrX7ECZe/FKzVVaeTo8LQdzrzLdjNpm6OIOyo/IXaBg+FdNV+SfQ\n/DF5CCjo2Idpri2bJwuUIQECSR8qye7nVsccIouGnkeY9EOxt11QBn1Fw+Oi\nbnJODeVg6NOMqtMD8QEWsA0BQlWV0M1/OH/G0nDxU3ihvx4r9rD9nmteJzv2\nnh/du+uqWE7l6e5F26yKa9V51ZpqT8gFLZFcMDYhE+0IlFWgsLN5Fj3k5X+U\nvCEDH/W4UHAPXv/jMkhn7zNolJcy+XnfaEsd1opWd2P0x+kp7gSGC6Bk7fRz\np71p\r\n=x65M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4a86f30a0.0","@material/tab":"9.0.0-canary.4a86f30a0.0","@material/base":"9.0.0-canary.4a86f30a0.0","@material/animation":"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/tab-scroller_9.0.0-canary.4a86f30a0.0_1604446166717_0.6240145686515481","host":"s3://npm-registry-packages"}},"9.0.0-canary.fc8b045f1.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.fc8b045f1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"90a74bb1f9ed92a5bf320e9f98facb21ccbd7d5a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.fc8b045f1.0.tgz","fileCount":52,"integrity":"sha512-AZwFjPItXLs/y/30srh9ANymqNIYSCPwSLIPeg3oUI9xMgebA/0s4gUkP9byLmi13CusogOE4L2TnhR+5uy+OA==","signatures":[{"sig":"MEUCIGWdXH+2ojHbAvqYY4qIWs/3BcE968jCdEIxDKao0PX1AiEA6ud9O5Mj/Cp3x+AGZBSQhy9h6zWZLdBSqXsHqf1P92g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfoenyCRA9TVsSAnZWagAArEUQAJUDkjgf5jjrSaTU8Ck1\nKogJaIyUEBMsm7nPSfmueIPR1jFl9FVDJ9drzuGb6wwOebbwsVppRwqLG9SX\nZVvuxYZKWeo26Lc8jvDMPmZj/tnxSJrxjyGAsRH6lVLd3NlSUS3z3NJ0YBoS\nxJIWIOrg3MdcyARBBSAssjWk4fOrzuNi8Cy0R6mwl4knVbTk3YNrsj8ncsX1\nrMMCrFf9ePZX2sNvRMxUqWxxT5JzhLG06TQqaF/IiHEiORJyz1UBDk+JOatp\nn/UccsZP1SoBe3qTix+lSGvaas0bm7tbugWKg3RyHHtD3lXbLblecFS796qd\ntWSBcAz5A+6UoMvrIMNaGCZkqmEf+5yxcpLoo593drSElAGNuu3PKRrsJrdo\nfsQMrJp3hVytt4VkzrCoj5BI4B+jrLUoUxUPttaiqAlQYJgLYv7XIV29/RoW\nmfTdyQu2SZyx/n1+ZGMKdYWZpZvHfNVxoz+SmUuQcQa+2dJRQs+UBHolBH5/\n7OMOM+fqEFC3Ea/RrHYQBxDnsI6RXzy0q4EBXTpFhsPy5mZqnhoyGvqKWY59\n+HNb8H66l6j5ywQshtKyGgk22nGVNQHF/O9rrSmipGvkj22l0U6fwquYWiu9\ngRGXSM0K215pHqZca4wM+8DZMVvVHz//jVeq0e8TNuhRI+phorg/Rep8Ssrw\nphvX\r\n=ITQq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fc8b045f1.0","@material/tab":"9.0.0-canary.fc8b045f1.0","@material/base":"9.0.0-canary.fc8b045f1.0","@material/animation":"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/tab-scroller_9.0.0-canary.fc8b045f1.0_1604446706314_0.05548733900786318","host":"s3://npm-registry-packages"}},"9.0.0-canary.a0b2db26b.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.a0b2db26b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"700067df65982474afc959e2469843cf2d942084","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.a0b2db26b.0.tgz","fileCount":52,"integrity":"sha512-urJMEAR3lEaNFuIRwkEJM9/0XzzHHSpXe1+phPuMjH5cURQ92YCBdzog8y+wI5+Z2J6BXHi/Jes1hSSnflD91Q==","signatures":[{"sig":"MEQCIH3oD97q2VaIFjs13gcuxYDVbpKPx4r/1sOQD0KkrDsqAiA6Yyu5+h6gMfuJ/yIFwjm17Xba6srD4uD9vp8a+K3oKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfofF6CRA9TVsSAnZWagAAc70QAImVQ2oZKvhb1dPVP8ut\n3lmMb2XunGtBqMW8fQcM0dihxhbiuiKyySipSliEqQ1Z9nyHvoJlsLnDes8s\nCvpF2hBT1IDrsJZEOAbdycLStoZf8sJ/4Qx9lxIX8/QbSnb4Dk9o8v8bmFfQ\npA0/AubpfKCyGu4J30oNpDE3/LOCdu6QJ03cOE5ojlQuDX/Rpazu2akjjHTl\n/AHxxqwVnffYME39SUbA5FjmNLyB8mE0zsF+UgVdT0r2tA9ow9o6ZUQPrxh4\nxrjIDrY6lp3iESDH89lsZrJ1amgrmy5GxAee2uiMxny9YteZa1RiFySwvLXQ\n1GU8DZAZZkgHC8v3nVTRAX74t4ZKhj2bStrRVY0m0WfzVBRRYPeStThZ2/jf\nX/XtKMBnV04LteJA1mLh+/BR63MFqYJj+blqJyMBkfzZ23jk4IKz5HhuLgni\n1Pr/WIBH6qF9NAbw08V7yCq51ICHCQtwy+kylGeFBqHxx2ZQ4pDIpLnWn4xj\nCwymJTxg6Q78xCu2qsvkTCX0tuyxDS28JkiTyRK3deNrXQ7uydakSTJYYr9J\nIof+HVhHXUafNujkE29EzcrxoBuQ320f8FBw5ExeO65FXR0FPuIbma6DDW9F\n6B95fnnCN2q9Y61rr3X+cds7FwLPC1Q9TQWmhsjhFvazC0i2Dj0kivH0egCv\ntaI5\r\n=wUPO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a0b2db26b.0","@material/tab":"9.0.0-canary.a0b2db26b.0","@material/base":"9.0.0-canary.a0b2db26b.0","@material/animation":"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/tab-scroller_9.0.0-canary.a0b2db26b.0_1604448634282_0.26773701383830373","host":"s3://npm-registry-packages"}},"9.0.0-canary.419e03572.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.419e03572.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e6370f06f352ccf85662ad9bd2250dcc4882ae03","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.419e03572.0.tgz","fileCount":52,"integrity":"sha512-Th+XpF5zG5L0CHj12cs8ll4ftvE5ss6QCMoSlcb0D26cDjyKneauJpdJ+ad3VVutpYO4FB+PewUzZK0JatXX/g==","signatures":[{"sig":"MEYCIQCimJDL2ts62YjPJfZaMUMJuoZlA9SSJgLY+okC2Lb/YAIhAPg9HoHBEUn7wRdOnZB2xSSXk2JrOD1Xtgw0maWSxICb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfogUdCRA9TVsSAnZWagAAVHIP/i+WmDrdiWSeVQt/6PLF\nJySGJdMwgohyRtDPtoCCnGmykq39PplZgIWSZjqEcHe4qhyIK+iMccmOljNF\nhPcd8NZC+ak4ELZbOGuhtEVbVnZzeR6Pr3lnoQTc/MWBmrDmjwoycllNaPV5\nRushITvlJKg01IoDWw5j+0Soi4Vj2eVObZPZZO3n1CkYToT4rTyFUKSk6XCc\n/DhlQT3CE/oxnulUfDik8GlajKOMRTZ95eF37pF60yLL1JL7TuamNmpH9zYT\nZZTlgS6vvxXIkKZRFj56n881oQ9730At7OhwX+379AiuyPy2YCIx8dqZuEau\nSlVJUiRucX31uxO1NhgWrKCKanMCVpF69+kLNrEWL7o7MppPJoAJmINfvtLh\nNSCkVqERcFOEPARRdiJWKBqxw2CJr3rrZ3ROjpSsGxNx984GNHm+Yk1/8wEW\nh66QrvtiOvVjucIrVJ4y8or8EDivzWgFE1d2ecQsFXdfv2xL517H6HVp6XQN\nGxZD7QW/re4GGXjrFUpBAowW/9HINLPZIgM3XblfDOcjdQpKz9a5Rz8IHp1l\n4yjTthugiC7G1TZG4h0P7V8pPlDP3enqBekG4dGhe2fjpN2P9CoaDKjqwuFd\nkFztNLA2YTN6/KYEqASiEF0fDf4NKjpnHHcq5JraXOsff1nEzZweyT4Z+JWS\nl/T7\r\n=7Pzk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.22.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.22.1","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.419e03572.0","@material/tab":"9.0.0-canary.419e03572.0","@material/base":"9.0.0-canary.419e03572.0","@material/animation":"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/tab-scroller_9.0.0-canary.419e03572.0_1604453661485_0.16060875514168527","host":"s3://npm-registry-packages"}},"9.0.0-canary.a432ad542.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.a432ad542.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a5119036a32abdccf1d99d26355fe28c9dcb5209","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.a432ad542.0.tgz","fileCount":52,"integrity":"sha512-a7ZyOwLf4Tm6rHbZh0h0SiIhj1uEplMgAgvUppPaZ/AYBlzMpCAkUJSFgfUXQRG3rB9f5GFYJ9vZPWwcjaR1GQ==","signatures":[{"sig":"MEYCIQDox/nVxpuMw1BGfcmH3tAXjgCIdDTnuXFT7tCAnH5sDgIhAMGe+GjfDKLysnmtuOW4YPuiJWGdyxwJwpQqKZzYK0rT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpKsaCRA9TVsSAnZWagAAYLcQAIC+kf4rskG6LkP89vAq\nr6eysyaZNzmMHTQunjuacFG6vrixA2DG3yfvcJDC7gIudMPQvm6Bf5jVhvri\ny2foh6LPYfOIeSaw2mJjT2DFvJoqp01EVPs3Abu5y4yFwiBzKBAAv0I965Si\nOdsh+m/mLYXOw0wio57dDuiF/zjAYbvF/+QrKrBC4TJ1EGcZYrdzAQK9SX73\n9Aue1gJ13zgniQfBc/XJyT89apCYEJn/++wFk2+7OaeFAIjQq0msGLvNI+RC\nTMfItPEL31ZcgRwy42C0RfHuT5AeLvoI8GSo8SZBzo0vKI40C8K7klSv0KZF\n2ab7fWb1d6PfyPLTFj+jqFQwO9ZcZ7g+pj6wXLuXY/fIWi7O6uwgW7UbB3mH\nS38ABoCYQM0eq5yIeUE6gIy8STIGKM9ejaalRLDMM3SYEKCIdgmHw3k/QmIw\nTOZr1/BrEN/penH9Jqyt7StnGaJDFx2CM5X9ouLlDkruPycCZP2ATXuGIBoI\nfNcVUKtLAIMgmQ9gHR8qpihR5538dzkR+0EyQesdJghLYT81qgMDrxkX4FrK\ndzCeIX+/WXXWEoSTXO2Q3EMJt2Fh3RPlHLgSeatOi8hklXr7mfBo7UpzkLgk\neQ7JNg82DLFrDJO0nvgzku3cWu0kcswkngMGrPZjTSttxZO/4GG02xTKiz1W\nkf7c\r\n=0lLa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a432ad542.0","@material/tab":"9.0.0-canary.a432ad542.0","@material/base":"9.0.0-canary.a432ad542.0","@material/animation":"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/tab-scroller_9.0.0-canary.a432ad542.0_1604627225743_0.9689524157795584","host":"s3://npm-registry-packages"}},"9.0.0-canary.e2e8aef1e.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.e2e8aef1e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3b595327bbad7a376c36daca2d068d20d52c798d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.e2e8aef1e.0.tgz","fileCount":52,"integrity":"sha512-pYqal+8o6PL5tTjZOASUEm4k8/4odjZL1XDBMdcv5Px5ugMIvselYr68LLM7fOo2TKckbiB3JVLPIoas6Tv44A==","signatures":[{"sig":"MEQCICc+plRbJy1aueKTSUfNRq1YszSFTeATHAsNcUIiE/pGAiA4IOtW3rzK3u3oEWEXg3i9rcskDuPTtXCghn3Rtoz5yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpK+pCRA9TVsSAnZWagAA2SUP/0WR4mogZxAXEFvURNAM\n3luU9u9c5RhvnpFF6n4Wh+O8iCBAwPTeOU6uknpAPp1FZ9dCISfQ47T3eBmN\nF3q5aBhMMY1HEVW9ACJ6uIYf2rzZuoPlJvIQVBQhe2nyb6Ir0RVPvM7SFV+F\nE1yxCgD/Ep7j8+h8SOHQ1yP1tZ8LPktPREaapMbRxgTQaCW8SAe95z1IvqUF\nXgX4ShBMuxLKyMXEqTkby3H29/5Y+msXmtas2/2a+r0M5GZ7hducWvKdbcFl\negtBAwKB2BkOhs+OI6XsnpGpWq9EdEd0WSIwFbuOb0KJ5LrPmuEQJ+/u2Pni\ndx5bLWxP5klGx7jsWhyAYhdBPI8PXV/iks3Ar9FipZhRBQvOtUp9UDMpmUlu\nIbc/C0YA2GKACeCpPohTt7IUShvy1Ov7dFidHLHtLvyAk9DGJT6tK33OV5sr\nVRyCFaYias2I5E/AzJwd3ntwMabm7tjIrL/6k6OvhgUrUBZppxa8fnXlAK3U\nyJhLrLqjbeeKUcvJIYgKl0Rs+Us3FJWm3vBfBVS2mGBfqeR1i9l4gNIbZ6P+\nCxHjWvbhf+Gm2/HR0MALxsKYRk+cKH5nhHyM6Ufw68ZLEvb1NWK1A7Ky6I4H\n2ejxzmJ77GsmDSnXaJkPD1ucbG5JG5rwLR+5emzpwLMZsv8jFr/DNBDxEYxM\nJoOY\r\n=FOKq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.e2e8aef1e.0","@material/tab":"9.0.0-canary.e2e8aef1e.0","@material/base":"9.0.0-canary.e2e8aef1e.0","@material/animation":"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/tab-scroller_9.0.0-canary.e2e8aef1e.0_1604628392714_0.3980379627696331","host":"s3://npm-registry-packages"}},"9.0.0-canary.ec6b68b34.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.ec6b68b34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d16fe6074e4df46aeee7e1728554308f5e505ddb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.ec6b68b34.0.tgz","fileCount":52,"integrity":"sha512-eFWaHShZ2mKKkj17J/m3ho1v82qyKsjBO6/Bza//AviM4mwhrPWsliY6npa8V2So6mGj+NyYrtdU6iL9Bq89dg==","signatures":[{"sig":"MEQCIHPl0qGnSXFtwDYm4p029Rpi1LuZUd4uwtFQ9cc4I53CAiBOHEYJlnnB8IbLJn6oEtgd76M24zVS+gZ9+qBb8eio9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpZysCRA9TVsSAnZWagAArbYP/0LN+ySxfBP4W/q0te5n\nC1f1om4UL7xQAmQr5YsDf3N39Lw6f2USH1R+EEQkhk0m9eUk401E6j/DFWZA\n7uZQIINjiaZfiXgnUdVIl+2kifVcNS8bbsKZQV9Fy3IfuvABPgBpGRCXtuMF\nLq6+WxYnC57BfFM6xgdd4GqQnP5wOtPk1rBLn/scJIhkmu3aFI3szn/TfavK\nCRpdIf/x+DsjVpP1R6O+D7a3YVyhRJdpWcMaLx1zK9XTYyowVU4+hDjUfEDG\nPCCTLEphpXcRgMaPo0zS+J6Ou/y+l3RizGF1ACSf8yRwjsrR9DAtYQKFarcy\nEc/JdkPV0wroneDCqKq7vAzczz6lGM5KDu1+Kj6M6RHem78qHymLQDvYd1aa\nGPva4UbZDXcfy66df5Zh2j+pUBqCXpQFMJ318XYgShBDpecipKpvNX3+v9Bm\nS8hbL51d24ba42HMmCf6+BMKyyXtzBpfXSg6flELh81A0FFsuu/O2o96UP7+\nyY2bXAxb8fWmI0EIqrB2FqFjo+zSSRzDyKb6UFlCauhdDGdnmTgsmzjMFEfH\njD+VKAvKYp1hU+d+lnpYhN2AUhZcZNtsPZTUJau1/z1Pd84NUVqHjdfpi5m5\nwZA+gS0uOyZilo6wb0nEry1iEfV7IWYaDgwQNKi43fUdZoPp6eFi68z7J6h4\nB6Ul\r\n=bMMm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ec6b68b34.0","@material/tab":"9.0.0-canary.ec6b68b34.0","@material/base":"9.0.0-canary.ec6b68b34.0","@material/animation":"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/tab-scroller_9.0.0-canary.ec6b68b34.0_1604689067890_0.27942108390401765","host":"s3://npm-registry-packages"}},"9.0.0-canary.b39094d14.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.b39094d14.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"968437b0e48c21acfcc78c66677e5ec199c2fd94","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.b39094d14.0.tgz","fileCount":52,"integrity":"sha512-734QaA4G6kFrm0Xr7DY5shppwbbqLxRk7ZjUoUo8EXuq3oVCy3n/vT+AgP5pVI6+cRh9ohXnKlKfpY0S7Wip1A==","signatures":[{"sig":"MEUCIH5hgKoPmWYx8Nec/L+v8o3oZnM2H+AX9EBKlPHY5RLrAiEAm/IEIBxqr87fHVW0bbu4p2dScPKZHMkAlIizIG6b//U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfpb1aCRA9TVsSAnZWagAAvJMP/3lLsYlwnBnA6RlLoZ3Y\nOicnrnZCcXGckvEtK02Gb8DWcuPYDxre81LcBfZyfc6jJSEmuhuR/sERO43t\n9s30k+mu+8mzvCR/1CJHtJPmS6VSzRujjeFPDhYRA59pvSSBUJi6p36pAeok\nyi7iOnzhWRtPAk6UhRe4WslB5Grz/r5UUbmf1S5e6qJtUCpBptUDxeEWrtBh\n8hLENUOhkyU6XH/BzPVAJ/docaZhjeAeititRzAihd+1T9zsE8mE0Ob/XUGT\n8MQ3dCmPh1ddKSKb+0dYGLzeHo6iH2utDbDlCakbB6/gZHbs6mpg/vllvb/n\nzVeUe3nsjpXR982JO4JUQFZqfiyuLwUjjzQX2sWGWNVU03OM+KMKQJjSEXpw\nytzksbOaNGuROgaAskBI8nZhSpyuWINk9DhXO7B0wBksPwqPODklGLuiecU2\nMlIJ5JQ1VYEtkGIfJ0NdzcP7XOl0ynZAKlloeAYwpcTL6+cpp9J07JmzoMaB\nhxS+pzwOi9RwEIGZjTezJToFR43dSoKnCYmzypYkVvCu1CdQsl0GiXcgft9s\nORwFOrNFs9KL8KtCKBAh6MMPWDJ5mrnZamonSfr/OBv3asAEtfP+teWvnyLD\nIFUReUXRxPLEfA1EgUgh5fA16/OdnZIXgc2TWjvl2jpc7WKn5SGwjQUeg1zl\nqXpG\r\n=VjGm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b39094d14.0","@material/tab":"9.0.0-canary.b39094d14.0","@material/base":"9.0.0-canary.b39094d14.0","@material/animation":"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/tab-scroller_9.0.0-canary.b39094d14.0_1604697433617_0.7625383923385978","host":"s3://npm-registry-packages"}},"9.0.0-canary.8648b8258.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.8648b8258.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9ec767034bf502f8a1393464c0b4e88b26a3eb37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.8648b8258.0.tgz","fileCount":52,"integrity":"sha512-8ZZPilXcIEZg2CQN+aNbGPP9MRjKl0rjicArwGSfrW+PuEa54jptPpjbAKaXVZiw44KtmgEc50T5iQJpYhIRaQ==","signatures":[{"sig":"MEUCIQDhXCh3IfescC0MwkS8k9vLzX29a/URBGfMcJLFr62WYAIgDwFnYxi0zDwm0UvQ76ZJO1cs/zoZ2I+pHQqDNcXdSDA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrRJlCRA9TVsSAnZWagAAanAP/ApWh7U3GrXV0IE3xF8k\nBTdyp78IpNNcLpZLhfcmvyVsOJyLVPGOPG7uRYAJrWcFSVKPHZjtizBgFi/X\nzN/3oBWCGZT6aHemElzqmfcS5JPtSnFrXcbs+TWpFmimGyGOxW8ByJOvzdBw\nJH+MQkNV2mAWsJfC0goxALZp3T3St2LTFUrQyZCIbg8aBaIAldR76TGxLeX6\nyVJFpTpBztUY4DMfJkI0qxppQQ/g9Y4YZqvXxAsh1ghwp6AfsNXdXw0k/XAe\n/UKRZbzfK3hf4gh2e+iCV5E4kTeufc1BQHDNSnjGNVv1ZG/QMG0SJzv1PtgO\nA9DxnfeHfhZWkC5at0y+qKrFjSKbd6Ki7rFxLjm9kHG63oGjrGHlhu29k67x\nKwchtujJeZrJ4mqqTGS+nGrLDA4f1HBIULXnB9dhrOE4h1hiuaaJlH6zmueF\n+2m7SWV5x8Cje4YM/8xm8tIFw2mDoAI/zxiWJgkneWCsnJYm1zftFSHYKjzM\nlBtMVYtb9B9Sxe/0aSN9YciYsP0Gv6z+PN7gy4EP2pIIbDqA+leB20QlY4cM\nBnf7xLzBhWT4yMt/4Z9JACz6hWcen0qA3szP7maWvRtqG8DviYicrvE8yvZW\nppDixTRSGvYy0nDnqv8/gEAKz2lte2tYGPjk4Ggn3wR/fPQ4chfJ/bj5sJeZ\nAQ4h\r\n=MU6L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8648b8258.0","@material/tab":"9.0.0-canary.8648b8258.0","@material/base":"9.0.0-canary.8648b8258.0","@material/animation":"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/tab-scroller_9.0.0-canary.8648b8258.0_1605177957227_0.8171469183043103","host":"s3://npm-registry-packages"}},"9.0.0-canary.240c5f74f.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.240c5f74f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7e471b7f96abfbaff5dc6058918d64ee56f76c13","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.240c5f74f.0.tgz","fileCount":52,"integrity":"sha512-pt/RAcwmeJA5cGDeq9Oi3ejnVoS8EyqLZNJzdfbpEUUW7BeePOrMdKe9hvCVwtZNA9/2zrAW8NJ/tVKMwYQ25A==","signatures":[{"sig":"MEUCIDi1rjHfk/e2/CM/Pa9Uwr7O1o7BYgVnitGwK15RdFmtAiEAtB3GJ0zWUjx6Qwaxij7dcrd5+y7IFbVFyq5LHBJQXY0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfrZlrCRA9TVsSAnZWagAAbpEQAI861qWISnFpa6tsEMlb\n9qEeOX3dkaVQHwVskLdTRuTbiQYXGvW+Hw13UcsAPC4iFJNeaXqVbfgWW1pB\n5BwFPh4G+iXiSwtYvDzv6ppAQ9pexO/UJZc0wkHIjfMUw+1fOLFwjQ7GZtEI\n7cK9ehG3qvHFoa8T9tYl6xqss1PgcwpXnfJMMssg24Xqxi7AHxupZ/FffoQF\nGon96aImbtM+HgBSHr89Q0w9mPMgj0ZkY3Phke0YRQ7MZD/J1QsCwpr3Pn8t\np1L8lunjp08qzs7gzlYtUd/j1KJke40UnelhjQ6OI2EFCCu8mvBQkUVQ/vFt\nrI1DvxirC7Qrp25iW2S7GWTKh85VVn6mVZjdgreJIGHoDXv/PiPZCyULxwNW\nyaU71+Qy1orEqdtmExrHMBnXxNXlMEI21oZoIUQWmiFk0n36VroC8R7qB4FL\n/vkakl1XU5OBtpWyGc+xryXx4btTjTUV0EMQ6OcriijaACzEohP3U/R+hGyq\nS5wWYPFqL3fDIdjJwnwfUCDDCq7zGZnOWXs0yLbqpTYtiALxomymkFn9g65M\nb6v7yuls08vwpULl9e43lLGAI/RNxAs2MkT481rqxHeTv+vHjjlPssBLFVnd\n8NrOJBdfgwNSiesVS41WGsgapNvb/DsfqHSEGdy8fzSdlA788oF4R16gQgjB\ni6R+\r\n=/1jJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.240c5f74f.0","@material/tab":"9.0.0-canary.240c5f74f.0","@material/base":"9.0.0-canary.240c5f74f.0","@material/animation":"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/tab-scroller_9.0.0-canary.240c5f74f.0_1605212523399_0.5842706922415064","host":"s3://npm-registry-packages"}},"9.0.0-canary.6cf6ba4f4.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.6cf6ba4f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dc2289fd57e8605b5297d289930894e724b03570","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.6cf6ba4f4.0.tgz","fileCount":52,"integrity":"sha512-PzXENcfBBB4lz/UUFKgK1BsOsRKuyLbsCeWn6QY558QNkJKtS4THDVsmn90nDOD8WoraPbQiPtQ576tdpMlrVw==","signatures":[{"sig":"MEYCIQD1sgClV/NwUNnk4+JGkKigFUs2b4fP54/DsBXERGxn2QIhAMvtkNWaBdd3XxTn1JXN3ZUmJQFbevrPbBtRqiP346rO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsso+CRA9TVsSAnZWagAAIyEP/A3kj1kPgfkMOt0K/p5w\nHSr6F/ZB+TAxPkFyfOr+ESsjZuNcNJmqXz8kVM6KfDM1Gg4WPh3JgqlMl7Nc\nOi6Allr2ITtcBsyJycvrbXoYjQiUp9XTZYIjxXhgj5UcCK8ob1gZj3X3YPMt\nlrXqwRN4/uV46QIh9oJIj74zFU3jUcpbfLMfUeXy/mFx1aeHA/MxE690nwvf\nDWWWZ7sQYidAi5c5j5d8zKmCKhAzAx2W5d9bsVRDceFmomCncvtmPNCzcMWX\nvU73IP0QWG+LBNjmERXSArpMgcBm/d4yFQdcZvQfW4g285x2pHdFJ7k/nTBb\npnI8asBWZd5RLS4bjXslAFg5HuNf1rkVfyahcWegmbNPWQoyWtvUfbZKrHN+\n3RC/Zwc+RCnUOOiSQt91pwcV1cF7RS1E9f08EAGpwkCtdEgFcqYGsE11Kn5L\nXtKvFfIKOfEzLmmhAPqOsSTL7NzI1L9v6De2Nj4e4itnbRH7yDz6CAtjBnDP\nTcPnz9abamlDusQ5DQLVH6F7GYDmGs2LBghoLGPAd3jk1fXihTZYEdVT6v6G\nH2WpYBRcy8uMc6RPCy4XknKctCoc8CyAI6P9KD9l8Na9Xuq5K4cy5Z72sk2j\n0zswAG96g+nCtMHkO9RsNaQItr0HfxuwFPKj84QMD1nbwGy92X8k7ic6xRxR\nMvIB\r\n=LGpf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6cf6ba4f4.0","@material/tab":"9.0.0-canary.6cf6ba4f4.0","@material/base":"9.0.0-canary.6cf6ba4f4.0","@material/animation":"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/tab-scroller_9.0.0-canary.6cf6ba4f4.0_1605552701935_0.20677835925576504","host":"s3://npm-registry-packages"}},"9.0.0-canary.07f3e01b7.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.07f3e01b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9085720efadeaa9dfdad044b4f9fa9a45ea9e8b0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.07f3e01b7.0.tgz","fileCount":52,"integrity":"sha512-TSTy39YnJhWyrlY0KJBVZVg3BfwqsuKeDCtAEpq7uAWA+ZvwxKDXUxW5xRP93UnydX98129ooa9o3EVqvlDfbw==","signatures":[{"sig":"MEYCIQCR7jU8Ww8wBITP9U5ADTglEXaLMyAJ1ipJCfFdYC027wIhAOj6eFZzb02CRvfGZJDwi3U2qTyX5IJBsg6LiDIPNF8x","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsvNXCRA9TVsSAnZWagAAL8YP/ijrhon7lvtQ+13unwQ5\n9QOUKos8jeYDHzsdHxnJa0e+cqrha+Fteevs8u7CQXeuNJaKbgKAySnnyM6g\nOmVL23MW10YH+sF+1gvxqpDOWwxG5bHhfG/6idju3TRAp8XZv5EPWGjTNNb8\nAkkKwgSxmBQwT0pH1d+zQ49+dsIIuXPJ3MYtvjXn5rjh0fry7gVi+82NX1gq\n+N0XgsanZz0jD3TmrrwqQpbuVUHEmEwRqatqFTwFPTZYyHZPqZAE3ws1n2mz\njHtepOgOOAyfmfIucaWFuq5EnBGKNZsUU8nuOw5MGbB/cGuA5jRZLBSyXkaM\nFYD4vxnFolumY5gYGeeSft/M2SySOFhfJDSfcOYZsGz066F1uBtYsR6I4oKw\nV5/Sm29UsL/KyRI/vIGF+TwagIK4qwtP36U3stmrjhhLrUuOd5YgKfq9GrUJ\noAaTltI1B+2Ix+hBx5PGIjPzOnHPWQGy4bUkOpFKBndsdi0h/w2nZAhJK3DO\nPC1qdn2I6RwTQF8aP8iEDY7PjzwAmnTteQTFAPywcCPfO80x1bF72I9tzpez\nKsNzMVbVChOSxNXsPkp0stYPcE/+AaAWcLZsirad3bLKOqBY89bkHeBVTUXc\nQleBcPrLFjlL/+l8AcaiTrj9275mMZqrcwIr7AkGtGYmz/XXAaLTPUXZMS9B\niKPV\r\n=7v0Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.07f3e01b7.0","@material/tab":"9.0.0-canary.07f3e01b7.0","@material/base":"9.0.0-canary.07f3e01b7.0","@material/animation":"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/tab-scroller_9.0.0-canary.07f3e01b7.0_1605563222510_0.8754889284563987","host":"s3://npm-registry-packages"}},"9.0.0-canary.23491cf85.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.23491cf85.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6b9c55065d63d930058ecf999d93d49371b587af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.23491cf85.0.tgz","fileCount":52,"integrity":"sha512-+zlPyWyKsNan7W9juNRuLBCF1bNtWzr5MbYwxOUWFg+Mng+BYsjLAHA6avJFsjV3dDKsabREIBZm70mOpB5VOw==","signatures":[{"sig":"MEUCIFPzF9vEKUPyJ3hBh4m8swOsPqfb4/tLQUDXJgq/vkHwAiEAqXt2dV8NLb825qKipmgvTQq7c9AM0xX9b/YeYqgAbO0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxbWCRA9TVsSAnZWagAALmMQAJJrqO8XdIyGdKxxMY20\nDYV/qqOttaHNKqUy6gapCmBxb0RvMsUOjgLYxM5z2gWBcwn/bnSULE9V4fQI\nTMYovvTv8EpAiSOV68PkRnI7h11Wcw83rBLQqKykSPV1nNmxtM6ZAqy1FQ4J\nhyzVf1GwuZc5jcwSicAFUebNCW0PaSCAzesbJzq0Epvsfo6t6MphqhlcfgnT\ncT+RAjrjklpKcWH5Z2gl8Vptu86TlXImszu43cFcklqmsztXONvH78U/drY5\nk3ritK5LRyQDLVuf9AE9CDSsLvV+BHT4JB2WWvVJXZ4/Ce1MCqzTyT+24jba\nLma3GFrXEUqjZdk9njT2xgmqW8+bKyI5zgMIO/25D/Au0Im7Z4tRF8svMCw/\nXrf1iDfrcIlpS6P/LhEs0gxM1uUPdVsI7lmWBRl+1WQ7+GFAWH6h4Ok/Z5Dz\n7xDCwRsFJrZmXJgFQ+fzhkX1biFaLidQClGBi85r291gJP4W1gq8E1rRLXmj\nUZtMR+/01aRleZiKLwN6Q37xF6DGdpztPBlxXLW45NSlLsBwVQhWX5U4mTj3\n6ip1YT7PptkXyzGC7PP9i0FJ3FwJP2Ee93iBDOaGNgTPeG2AT9RnLPVy0qqw\n5tV3/PRizXxiVhEf0PtNWTgV6Zq23u67W137tiTxzQRFo+rSPDsyZrnheA3y\n55wC\r\n=3Oph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.23491cf85.0","@material/tab":"9.0.0-canary.23491cf85.0","@material/base":"9.0.0-canary.23491cf85.0","@material/animation":"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/tab-scroller_9.0.0-canary.23491cf85.0_1605572309804_0.7127357438615378","host":"s3://npm-registry-packages"}},"9.0.0-canary.b659d4fc3.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.b659d4fc3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"33258bbebfcc09b1c1068aed56ea783ed266441c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.b659d4fc3.0.tgz","fileCount":52,"integrity":"sha512-FnGOI4/1CMOszZlIg1UKAhImpg87Fmmz9TwFbbq7VegYvdvwDiswen0/XMAKO6J9lxDWlLE76JA/P/TIujSUig==","signatures":[{"sig":"MEYCIQDrPxd3iQfyBoMUa6lMbwTgYssNlVB2+kD3bFQcQ/roRAIhAO/tICptE9xXMpKgd6ObAUmNwUVzl5rY0fPD7tLA3eCj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfsxirCRA9TVsSAnZWagAAzb8P/262FSDM71EPywwKxvVJ\nMqKi8Hh4TT74AGMue/1yq4thcTsFuyj5TpRv+mY7wy2DK/cSND9ZLfIFqW2B\nl0Aw6HJIoMyvkbcqFapkg2LxlzNl29xbBhivjfVn3palpOxpmsWx/+KUI1ic\nSK/VSeparrCT59yOs3S+82IT4L6XBf+3h4SstYWQpGH5JsLsAnawiwxmtDp5\nH5NkMQQ/lzuoiIjc+7e+cXFGpjuKjPvFtBq8Q0WwXp+ug2bVQQkS+S7a+nye\nDX4VsudX/5j+jps8ruKAEPcUN0iXBPIZg+OoF5d3bHhZYZrVcniEO6JXG8+R\nAEK4kr+k10001PkW31YkGUB/lJK3bqEzepTH9SJZFcJRVUABfgsbymlrbuCS\n0Fupwk9oSVpykjx0SiyfRZIAD7sFr5DDu/TZPinGoJpVq56FDI7FqlnW4QrU\nXs92bxvntMACjH16VOP0dD/wyOjZM5ZCO5N3Ltt7EKALPq19xgugi2fAzTnT\naYoV/mJW80Z4QV4RBhjYckO35MmEed1Au5pHiEbj/MbhTUQtcw2g04uTvRA3\nhCEM90qGIHKj4wp56l5HVRv3xt14fi0cHSURol4pMzFoBLtmEYG1ZHN5cVn6\n5ASV8u9pc5mcwNJEePUxss0b9UxRmcJq8O7QD4No9vEHD7u4pC9+zxxg1p75\nBDj3\r\n=p9oT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b659d4fc3.0","@material/tab":"9.0.0-canary.b659d4fc3.0","@material/base":"9.0.0-canary.b659d4fc3.0","@material/animation":"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/tab-scroller_9.0.0-canary.b659d4fc3.0_1605572778605_0.03199359423162407","host":"s3://npm-registry-packages"}},"9.0.0-canary.d8a3aed67.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.d8a3aed67.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b591a12931f8e51d34433270431aa7e741178544","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.d8a3aed67.0.tgz","fileCount":52,"integrity":"sha512-qab4qQV3jkfPkRtHMjoKAjbn7AlN/KmvOx8y0IW4d5I9VuChPpXyG+HAuB8CVBYKYjEKwTj2z+iAiDqC7TeHWQ==","signatures":[{"sig":"MEYCIQCiX1GIKbjvC7+YlsBcCtybBQiYX0t5kcpA+L02Xw2HUwIhAI3PTaZcg2lcv5LFadHvObNmHmHzIS1fEnP69ZXinwfm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfs+xLCRA9TVsSAnZWagAArZEP/0KtP2+pXsayh0afBDfZ\n8H9TIyUTI4YKPdIRqwzwtirbjP61De03iSnTRodFRXF4eXnu/Z7lhG7fG2NT\nujqW87adSoNGaQE1fOfbwkgi2zPQc/OaqIz7aCW+w87O9Y1tsbChzRYNRrsv\n8SokDuWXrOdTul1EfC45aU0J60UE0XVqhkfs0GbiA0dkGK/r+yzKV4onwUuX\nbBDccOeRnrhiXHq4TcArKSqDenqu6s67GAtYSvbHMPsS0vEM2K8aM7zEwGbL\nXdNRhvfNZnSuqmIJijJ7zc9Ottyq0pSLjrRhLxUXPZ3da0+cQeu8owo53t+D\nyQHUfxZwixvdW6J2H7aOeWRHQBJK5KWra9zIpy1LxXBvxYACZ9fpO8YJdAlZ\nfRcRgiN1Gype1UWnvlxqnZ6Fln5gsbaJBd2SFmub5fRvAbo/3p6rJhdjatkx\ndSQtiFqaZfqJLtN7frE3qbzVv7u6RaKEFJU30Dwtz2/Q2VSvXHHJIXnv1pht\nqlEHAWcmqECPsbGFI3Z4F13j6SH1LGdF4kWayQvuvshlVS4pR/RS5JUjZfYH\nNEWD3gP2mLGU9CtOPHhAbrO1pdw1AlkOoVu34Qva20utQxYVR9Aovw2geQXd\nv9KFftnDpnR7wxXIbhaVe3OLUHODWtiI4OiOns7wQ35xKZNN7PkhUtNGPFbI\n8sPw\r\n=M0Vm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.d8a3aed67.0","@material/tab":"9.0.0-canary.d8a3aed67.0","@material/base":"9.0.0-canary.d8a3aed67.0","@material/animation":"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/tab-scroller_9.0.0-canary.d8a3aed67.0_1605626955466_0.8260491996504615","host":"s3://npm-registry-packages"}},"9.0.0-canary.482ff9091.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.482ff9091.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"508845f783cb7469ad3b6adc1f21d483f12cfc8c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.482ff9091.0.tgz","fileCount":52,"integrity":"sha512-aT4LumaSoLU0XSOx4x+x9U3yuUUp89giMBJmFxQTvRJEuyEtUeXJfsilRXx79tyNOllZU4xnkViQVnetxFiGSg==","signatures":[{"sig":"MEUCIQCnv2JmqnWJj3gd0u8ddbloG6iWn1CGpttXkAxA8uhRMAIgEzVwn6XBmjxsZ4uY0YOsl+H0ilzPoSKxSqMUuHPMZgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftA99CRA9TVsSAnZWagAAnhQP/0H2kW9vdbdi87Ct+Yfe\nIjiQwqbzK8oHEN2sKMJJtp2WutuTgZT5VYaRnm+BFLfBSb2dD44S48ktJVFe\n2zv60X1aZxLJxRACgvDcv11ZNvnqEihs1p61uzfKVY2COmbtfdrIlPgL/TpT\n7bceKdnk4WshSEktNPhH0aYd0ZCMJgCX++eMolqSmiNoxAy4GlenzklOabZy\nKre5kfGuKNXnaLAv6lVTg/dO2fFBynrZ9UuEExHnwL8KbS9xeH8dfzLA4c3j\ndq9qIxIMfl12W1NNORpAyRXTh0dH+JQVU8OEMSPuIz/+R+IypRRnt6JaIbXm\nftaKmukj4yLVvuSo616zAdJgq0v1ymYZAwHNXIqkLn1jz6xeEvmbJp6aHDJn\n3U/d5AbpsR/V01ebMLRTSK0uxRUOoRxMTdJX7ekROF6YnD4ZL7MDsf+DONT4\nfeHb4a63NYFStldqLMy9n3woyTfc8ZLFOCNhmw10gU0wLx9eziu3wCB7aPW9\nw2bfGneU23U5ZSNPkx63RBvukiVMt6+zcjW4uxfk384NJ+QipLCxyDWYa2f7\nt/Cl9cFa8HSOb/czkz5p71xR7+R5MKayjKyTfTD/PKU5ZCwN0V+N7GxlW0C0\nmoxefHJLfilEWrl/tHm4bT/k/nQ5czOM2WVa/yGf3dphFnOEebiuKraWtNLs\nbXbn\r\n=cgwI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.482ff9091.0","@material/tab":"9.0.0-canary.482ff9091.0","@material/base":"9.0.0-canary.482ff9091.0","@material/animation":"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/tab-scroller_9.0.0-canary.482ff9091.0_1605635964541_0.8193289480705275","host":"s3://npm-registry-packages"}},"9.0.0-canary.99cfb6bd5.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.99cfb6bd5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7e7d0853b5f3f9caaae2442a8020204a6397aa9f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.99cfb6bd5.0.tgz","fileCount":52,"integrity":"sha512-n7QB2H4NA+FcrGEH9IK/96jqwQ/4U8by8Qwep4Eo1Q/yFTVdUEJJibeyA5sTiZW+whY66TSAQ4K+qWSo1DeWLw==","signatures":[{"sig":"MEQCIAye0dDZfyXADMZuKfI7Lzexr7HgWMzNuniX8vJOcNo9AiA8Bz9I7ZuHU0Lr3DuI8s810/XfxlB+7lVH6P12oYXdDA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftWu6CRA9TVsSAnZWagAAqoUP/0NAGM7XjZR1iIWc8Fe2\n+7Q1Lv/WhHqoh1z6tMQwGEynPHmTVCMBZ3GVIlVGDdvKAUmH1Fc2qPRyvUvX\nQXA54OyprzVSFlKX4t3skJ2Nf+fMA+XbZZ9nRz6pPNWokUheGmd8SurwrX2R\nwVx3ftH4e9j3vgvK+KcagVZnVNGJQWe1o1fBRTcae1tmR7WvO+E3RkN+Szax\n1fPTXgtCiyld05a5G9PAshngyctXdeZf+GotrUNXGeex+QAP9tpUOdetpoBx\n1fCFiXtc7ap81/JsGzgqzccxvHb1InHQeCN2tB+a2j3iadNP719Pp966fvDW\nMQTDVvtiuQhi5mHx+HPwQlR412IdeZ/Z4ztnY3AxinFbj4YRNIy7X6aVe67D\nw6VLKfvUlegYf/8A2dsVD2rOyGtLuwy06yun9PhGKxsAj7BiZtevvexB1163\nFMeHGbenLJL30aKAl41kjMwIZq/ncZNH8c9TYhItZGKAdtneGOhanWNJo5B6\nzuYxagkUHT6GV8MmQrsCvEC2e6qfxaS6j0PYF1wymiIuMLH6iYDhXNfoLa9H\nyc8GbJkhWqgIgwQuucJDxDqyYXi4zU6bJpnvbV0eH/j12Lma4hM4ZVH8fW6L\nooAmXJsg9MoRRgBwIc5YTbElXBH9dzA9bD/hdaZWbNN/re26YTQsyQnN9t1g\nO2eF\r\n=8fCR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.99cfb6bd5.0","@material/tab":"9.0.0-canary.99cfb6bd5.0","@material/base":"9.0.0-canary.99cfb6bd5.0","@material/animation":"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/tab-scroller_9.0.0-canary.99cfb6bd5.0_1605725114000_0.4425297628548077","host":"s3://npm-registry-packages"}},"9.0.0-canary.b98d15d90.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.b98d15d90.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"47d874cea20fd18c45a39fb4587b9e438b113ed3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.b98d15d90.0.tgz","fileCount":52,"integrity":"sha512-tkotjcKLHNYKsqlgf6ewSXZIPw9c5jTmBO5YlBYz+YgL0V/i1cOBrQNnEYUR00S3hWVlsF1NdgSi9aK63TTnjA==","signatures":[{"sig":"MEUCIQCvxeDHAsNx5mxmQNZxmy9GiDbcPdOOfY1N3SSoZ8KrOgIgTl/7EJF+sL1+felmxtEGIZwxDATKxZPJXQzjJLpvJdI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftaHVCRA9TVsSAnZWagAAKEwP/1OVhby8hWKw1kYlTA2w\nCJ3kzZPUXO8Zwrs8xHrL2TXJ+eIG0WzyOOoToPv62RJf2Nvjsl6JvqLACXCl\n5X51sQrlybYsEWlTm0rGBD2amgaItu9YcHi8Ubvd2bDTur+3sYEiC7fLyIOK\nLjIjpJEFXM5lVVPvrJFf2rOGAld+JYmCTukYnmhUbyt/ELxO193XSkd2OKCP\nSqV7v0GezRCVWU2u3d56JxbuAI2dz99MGCxTp0G6w60YJ+ygNmDrdACMeOnr\nAbKboPXlE0eFhY2QTgXSpPCcbETjqaBy2rVBD4KL34RYUVRWqQjbEe28MLrz\nhMKGW4mpLfKGNSFkIAbPq7n3TfkjKrHQE8TLrwonOKXjFAeJoAi4tQ6WVZCI\nVsRzh57ask3476f70KJ3vjLHT7B4ZgnR8/cN/1CRp1aybdlcjJkGMOoqk0ct\nDz26uGAEDDq+X043cbR5nPvgxS8hpcjroLiSUAm49MbsX/Vh6MZ/F8N5jdT9\niHLTlYmrGRNGqKW+ZGtjWbjaTkMePmi1+Tnf1K+I+4MtAwOfBfByhNW2ZkU/\nOL0WaBdKu8Vx5l1oX98wyfoZG5D19gVOduyEJlCypTifk0D32rrJGn5/RSzD\ngYlVIisF6xJ5nIuCPt1+UHXGVPjWYIZCqlsRTsbfFPVg1XYZuMd0+fqzForx\n4pky\r\n=EXry\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b98d15d90.0","@material/tab":"9.0.0-canary.b98d15d90.0","@material/base":"9.0.0-canary.b98d15d90.0","@material/animation":"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/tab-scroller_9.0.0-canary.b98d15d90.0_1605738964543_0.5406400938040061","host":"s3://npm-registry-packages"}},"9.0.0-canary.30c11bfc2.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.30c11bfc2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6adfc786a1b9d8e9f7eea139904817adecc998dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.30c11bfc2.0.tgz","fileCount":52,"integrity":"sha512-ezIhbPzskyqCb/YsYj3SUjvpLPMaRtAJCDPrk2j85GJfEckTedWpIAtkq1MTioh5VWQAHFE3ewvtbfCwbzDSTw==","signatures":[{"sig":"MEQCIBLp7A3MabVcEHNr8nHlqUVoqu4oW0dXbL4IHs2ebsrsAiBSCO09aOznY+adPEk025AuDz7zscvJm/9SVNNTBWEr4w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftcn7CRA9TVsSAnZWagAASxkQAI8bx8cK/2Jm9IO/Ki5b\nXzLoOgHbLr7PfudAOhcVkG2dWiAY3TnkY0TGqtiTshRSGTUwG990vy1bLVBi\nf/mGabr0ZRggqz3ogy0ezCAhLn4G+cWgS0gdZ2GN49ZOiYTxtbBcuxaXtWmR\nhVeJLUY5fxsaO2d8SdksTSOAOQXgXuhflYb3XHsTQbnrgpfkY05xwZYevkJa\ngOhOnCHzIh6P5u346m6c30LHhkmHpnKwT+xx4TJlpkmwghUXB+Lf/svE87J6\noO/lEH1N9Nl8fhy9u2FYDyJEJnu4TaGYWG5z5U9JmQ883cL3ktB5htEBy52p\nnbuLOBaprwYlSBI1x0niY1G4F8WafjO+1xBeCnm8zy853Af+TFehzkMii0Pv\nCuC61ioBvojF4GGB2cVyaHsD9Isu6ISy4mKrE0ZBNPRvqSAfgLGxVTihVRIQ\ny8xtz6QW9Ck2OdoK6yVIyvC6C6HbodjRpnTl7h54KxXnbWt0YmRYU/kUMpXC\nN5V0PLJy7BawJQxl3jjQSsE8zscQtdKB7Qw/sRD5x58cPwrYYDBybfe0TfjR\nqnJ72GmlQZOgVEGhf8Nb9Pxhos+8BTji3Uki3F5zl7WQ4XUYB2+wlTDmWi55\njmFYeARe+GMj4bynXeb8MDSFTsG3QK6KPN/fdTox7vWL7iQCLbX8Ben1wZ2M\n7/8U\r\n=S0rn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30c11bfc2.0","@material/tab":"9.0.0-canary.30c11bfc2.0","@material/base":"9.0.0-canary.30c11bfc2.0","@material/animation":"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/tab-scroller_9.0.0-canary.30c11bfc2.0_1605749243337_0.5542681981449049","host":"s3://npm-registry-packages"}},"9.0.0-canary.1b731d51b.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.1b731d51b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8bc86e2cccb1481050a814aaa9289a11da87c14c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.1b731d51b.0.tgz","fileCount":52,"integrity":"sha512-bFdFFvL2mIbrlCC5uEhGkRh+mqxpSZ4EyeNzDQzTuwOGYseBzaNtD5ikdydBZzB1g+sbyseVmmyV9YSM4si/jg==","signatures":[{"sig":"MEYCIQDWgsDo/GvmVZ6lBWuIe6GzNxgoSSIU6CG6YbZAXz1l0gIhAPop1bsXvZxEhJ57ba0u+PQkq7nmROJVvMhKT4wtgf0f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr8yCRA9TVsSAnZWagAAIXoQAI1sw8ZyJVbMhmf919oR\nKZWtila8oZJ3ejDWBY8yB42fpdRuLBGvLVqKsdnVYpUJHnj1MK7VNwbfVNeN\n+3Xlh7KhhE5ywo2NYtLjHj4HD3m0VThNZrCqurEvaJeIjJC0wb4d7BpzirtU\nJYsR6AiGbv01j5RSiu+T0njDWCCOL6X3OHxY1Iy8qqn93zcdEDRkHTq+i0D5\n7ZJ2vOkWOEjkzliGUUBh/vXWw292gCAumKbRUO7EbCyWbs4G9Iltr20qScQB\nWg6ccm7mByqRLCByy37sgIhP1ZrxrRFiyY2y4SX5nwwykKvkr80Y6l+v20Sd\nFuAP866rpU2FPcMJXBkx6JxOA2gGBZcpRV5uhiGhI8jWDYThvlYE4CEb/WdG\nYA/MvuLyD6mkttbSyt3NRuiC4RM1LN4Dnk4YuBBkqNa2dLfZGmIlWRSeY01J\n7CfN1E+pjVze/D+yVBIw780aVjmX3s+U6kWs1DSU9RvbAoIqqSg174apoA3e\nTTesK9PT+9YZWRgrayx0EeXCKQ9PSY1Bg21Mt2yL3AsgUHgMjGtRhCXJBzCX\nR/opJWXuziXiFbWdecB6rzSLTfiygP99xtn5h3sbOlQT3foiPLNZZOIOJvEx\nhxwVnQNSWbCEb6WspKN7TZzOlYQMbjAPJqEh0W/7uZki9jhy48zkzs+fa6ps\nHtss\r\n=yyCQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1b731d51b.0","@material/tab":"9.0.0-canary.1b731d51b.0","@material/base":"9.0.0-canary.1b731d51b.0","@material/animation":"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/tab-scroller_9.0.0-canary.1b731d51b.0_1605812018295_0.4121359355940617","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ae94ff78.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.4ae94ff78.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4b1b786b98e432fdd4f5ba0a84953d869240eee2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.4ae94ff78.0.tgz","fileCount":52,"integrity":"sha512-9i3Sixy+ACd/3x9QMgWlIjA0aeLsAT+8rnH8QgFnvMc8pYLtozXEwcEOc31vnMLspvDvlCUW/cHacYRH1iagXQ==","signatures":[{"sig":"MEUCIQCfZYKgvSuLkV4ZXrNeHb/Tt2l6uNPl4g7UtrU3ffcamQIgJAe6SOKZPwlsOb8mDqShYpxBZO3ez4RswOWBQoFh0+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftr/fCRA9TVsSAnZWagAAdCUP/28Ch36MljXu/5/ZoRhy\nNLVQgMSy/lddcG+/abGh8ySjcM7qlQckJjwaju1DCzbsAL2J4a6pGIVZ1TKI\nYla8Q5XMxwYny74Nggv19zBocmqqDZ7wZX1SeCfvE9mOb8oVP5mQsM5Bf1ph\nKVO9YYa341HlE7MYj4aJrCtC+eufcXBvFIGoLLZ0sgOOj2z2pIJMVZuOVggf\nZxryg4xQKwJK9+boIRpGlPoIe0L/kzuZU/GDZ3qjTwl71SAWM+w1wWEDIP6h\nUmuQTLZw/uv96T20sWLnwrXJk3tzmI1S4p6pxv8b6Er7Hn3gYST9KUWWqsHN\n+FyBeopRFfX6ldfzV29qKcP6x5+CV1bY7VypxppNcYR3R/HlXRM8dUOphwuG\n1/0rGRiaXFqmXMbYlCxUHcBJhW1yL/cSrLVk8Z7bLJ/P1stx4KkLh3jQ0zmb\no5XAhnMAGHkSZG+DSuTgemEt9iDuyZ+Y6JnHLfRSWLLoqIL2Y7ZSgkEKT9U9\n3lRm/kmbP6UN+LCosprwXQJq/IVgrMK/j5uUqjSOETEORlqI3GpUL5KQLTKF\nkzQgBqwSTZv3Pf9PgO2QQmspZu3kbINB24s596vAkbKwKemDi3s0bY2eSAjV\nbJKAuYOqkxcmyaSqMYS84j7H0sgPYH2ms2IfBJUKzfS1BY4BkH1g3WETsEuf\ncdr7\r\n=bac7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ae94ff78.0","@material/tab":"9.0.0-canary.4ae94ff78.0","@material/base":"9.0.0-canary.4ae94ff78.0","@material/animation":"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/tab-scroller_9.0.0-canary.4ae94ff78.0_1605812191146_0.24747453840342692","host":"s3://npm-registry-packages"}},"9.0.0-canary.7ad038e1d.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.7ad038e1d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7481bb93b79e98ee34ee2d14a95f30da4d1c8bcf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.7ad038e1d.0.tgz","fileCount":52,"integrity":"sha512-G82J17Y0buxzTSxuR4RM2KN6tJTlQsl2DMQrLnIixgoIK/wvTwHCEr8z3d6dFOwLAgNb0sHg9C8iZS5xHcBjBw==","signatures":[{"sig":"MEUCIBy8zHzAZdJx6NZOIkN/mokm5hnFbQcXR/MjoQKRlN+EAiEAkaXKvm/caU87jJsoQXV8mGIJh0FJZpnxsP/u0MzM5GA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJftsVKCRA9TVsSAnZWagAAnLQP/0bVjzupzKit4Aejybhw\nRFpEth+2EjN4ZK3xRwihjhRoKJGDcWiP5Bi7PBCkiIYcJ9y/JQsxrWKIErl3\naB9iBfGmU8gL7bKtC/WodhxhnP4HcnHGW2TSmSjGAA3g90t/PN2EezTjulIa\npB1G12GYHSeUkKXTn2m5swb1Mb+u2o88EJsITHqhzr3784Q/fH7cwYgHthBJ\nAk97CY9tPIHy7MLZqHGgxrCW2QVXJf9SYZNsnqilRJz5VUjclteHO+4k7bxE\nzYaf4qvKElYYpsO9x57bk/nC7vDz1jgTUlKkpTOXL8DGsGtp97JO6Ty09NEK\n8sl2DOlxipx4KjQ9wB3P31FmndtU/7TMmq85WDqRZXd/hXR3yUO1fWnMM4Zh\nB2qYsmBPsDmJU100WBvbJNKo5pRARfGk6UXTyglD8x+PLt/xm2Em4NVedLV+\nMdeuT9FHTceemmqksC1S2GJ4hlpzx8e5P15KEh76S7EkVzbV2Qxyq02m6Fvx\noi8Afoo6qqnWsw/QwDjwqW6jnQaV7vE6DCRKFwVSOHgmYwaQsIOuProb0EEX\nkLI4iRHv0l8LUukmuBBB+Ce3hb49lY1qsLB+AMxX9AF/ezOEfAptjgfWGAjx\n7lS+XRdMdkwroUXnDq0T1RZlYjXG62AC8ZkaY0qGw7s7BExIW2HdMBAmLVGF\nKQOH\r\n=HLsu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7ad038e1d.0","@material/tab":"9.0.0-canary.7ad038e1d.0","@material/base":"9.0.0-canary.7ad038e1d.0","@material/animation":"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/tab-scroller_9.0.0-canary.7ad038e1d.0_1605813577674_0.9937373912035123","host":"s3://npm-registry-packages"}},"9.0.0-canary.a41527604.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.a41527604.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"05a05f74cae697718e7470e03432fad07345ca49","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.a41527604.0.tgz","fileCount":52,"integrity":"sha512-HqjjC/aBJDG/N+nePm5InOSmTxVRywYL2AG2YV0kBmkgWaUbVGuASGtpCyK7NM+DTxspDyeLSbGEkyt9fqLANg==","signatures":[{"sig":"MEQCIB8qoHNNSf35WNi5mjgyHOA1wsrIAi/XxyGaSkdr3YX/AiA870yuxNPDi5CfwbXFjO4nlrHlEjYUuFyOdcIZXHwh9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfts9ECRA9TVsSAnZWagAA1ysP/1DG4T7K+Y50NJ/jo8cL\nlkfVskHA41raJAXWLDcXQJy9nzZ2YkJq/GopfYnqZzaQj/eigGrVVZffmmw+\nnXD82atgEWZUwhGZHl1/5+0j69oPkMbihmxjlKxJB7dVvFe7s6dTzGcBR0yh\nM5lqkFHqwqZuiVBEZVjQl9dBmWOBosGrHwXv5SL8dxvIIJpvNQbHVOXSNEb1\naG1PzqkVknYyACnKvrHPFFUgG80rH/NtnLibkn4csHIarVJurnPv/gN+dR4t\nVB68GSpJmZYjUDNpTNsXvHUnKjutEaGNEJ3gLPM85/vAUSwud5MZVIZZ3tC0\nkPBB+qfxMmQ1QKMAO/8ux8p/3KWTY8llq2yVAXFUTMW/1SqCBiKtJBkZjUvG\n6CCsIPkkYJ5/jcwypx8PC9aa2+FvouTrXwLpXLxBTHkrBsMPIUhqtRDk/ENV\noE42AfxejzikL1txw3LNQetCA5xurMFvDbNdnE8yZvRiuv5zL4Rvg4Dg3ZyG\nTfeCYgyfBE233wF+5m3kRBfBXzXmoRsvWPbmfDxY+D4rx7o2uCMrPnhCBMpt\nVpMLYTcH1KsoZM1vGA8SyqQJATXZASwW87QcYNvhgZO9N8bYtRFwMW0e+kPO\n7LSs8mAOM4od/0EkNB8C3s6wupFNb09ZfkhENR7UKzMlZEvGWOPBjNTspwvM\nvOkI\r\n=Lprs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.a41527604.0","@material/tab":"9.0.0-canary.a41527604.0","@material/base":"9.0.0-canary.a41527604.0","@material/animation":"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/tab-scroller_9.0.0-canary.a41527604.0_1605816131542_0.34329655636465284","host":"s3://npm-registry-packages"}},"9.0.0-canary.7b0e2b377.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.7b0e2b377.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"00733ab46d9dfe728d618ea81996239b84006e1f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.7b0e2b377.0.tgz","fileCount":52,"integrity":"sha512-f7PIhmKHmUISLZouR+7Y2FBFUprHsptOwlvAHHDU3Q/U6jhwL99EN+y88r/AIZqO7lKYeVD0MeDZ0dG2zHe6HA==","signatures":[{"sig":"MEYCIQCbmmduwsgXQKFCkoqH6u6GoSwXaBMcDBHHPCrgd4mJ2QIhAIntgFVJh9VBgZnxZlxvXBlqNP61l7PvnXt6nrFd2tnA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfuEnJCRA9TVsSAnZWagAAi/0P/2yYNZLL2MwTBCm91p2s\n7bvgIJhzvZYkoXshtblz4/z4+bQ6qUhWTuh6cDCr2AK50LFyAgEgsbYflOLa\nG0RcspCpRh4/FKVkmmyJQwBF+6NYt2QVHuxC1C2AJyYP+x8NBl7cpoDXMM5t\nk8GF70v3trQKFG9nmFIcbDSWO1sz5ACr/73et1CIEoXM6OpUqKrXCC/NmWLJ\nstdPk16FJH71FKNHmQPGb05GgrM8diSoziP38AIVBkd2RhWCbT5vbTAThCGb\nBb53HWu5S1yE0t0AUg/s+Sf5V+5GyC7Q7q8zDQ5Py/BPbAQacfbUJOf+bmop\nvletprwaujzaLPl70ycXVQh8dFQLzmnsqtb5/+Lf2+arKXj+b6Afb8AmhsHP\nr5d0wKapew7ueYpoOn2xw0eJsTZPTNZ62bIqkDqwnOILY+f2KsJVAZnpLfzw\n67Iq41KjSNQKBDqnl2pepumHy4V5yL0J/pyGudtSQUWtZmsbNOdYoTtA3CVr\n4GTN5fhXU7NHKBFZSuaLy+Gx6ap4zmJa3RwPQ06NNQRUO1iRBGE6I0pmFmBx\nUpLvnoX8g/stRU4Dt45mBn676I3JEAWT9GlnvQBPWUPjWOJafxL2pyMZvPaw\n0HE5BXBVui/PYAlyR4GweIab0g03Ho03BGS4tiSaQjo8tWzY69IfaLMohzH9\nAgh3\r\n=XwlD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7b0e2b377.0","@material/tab":"9.0.0-canary.7b0e2b377.0","@material/base":"9.0.0-canary.7b0e2b377.0","@material/animation":"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/tab-scroller_9.0.0-canary.7b0e2b377.0_1605913032713_0.08540659097689063","host":"s3://npm-registry-packages"}},"9.0.0-canary.c927a5d05.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.c927a5d05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"137b62706e5f7b445fb869558b929d977af7f2f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.c927a5d05.0.tgz","fileCount":52,"integrity":"sha512-JP3wv4tlWbVOyWnWG5yU2QU6fwWp31oj90zGBduEZf4EdcqBsqHt8nDljb3EIBzxSeWirY+dsMeiNe0CrKYLww==","signatures":[{"sig":"MEUCIGBOrTV4F0M7puIly8KUUXcHG0MZiEJ3TiYR/QlXxQMjAiEAsI/z+dNROQFZSry3YxiMmq8R+wgpZluzBmkCUlVUQ/0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvBIlCRA9TVsSAnZWagAADEcP/A0EwoXm9pMV0zQW1xd4\ngy6IfcYF+pJHpYBTmWe5Gu1U5tZWvWPYGUUR9aUJ+iiKIr7bkw8HtmdnzIJ+\nOKEqRmp3iOMFrW5opoghHozf9j6jhv3DFQvuQfuRTc36P1Qt45WSzCHXY4dX\ndneDUP53bHy1RJjjKvvwfGEqg+SmQKtL55J3baFATfcnBz0JQFOx05PYdlmw\ntxirWytMuI6GtuwE0rleP5E7iMETdskVyvYwljyTYJSR2cK0q3t7bQ1eX6ik\noSidkTM+37VdSZzGapvsc4EZxsbWlHZN/iK+Ha4A1fR4RlYLnrZk7S700xYn\nWZZC8YUpcM533Er0pjYRgYb8j3L4PbQRo2UYUZ0Zh13iP7aI7uIFCQoQCeFH\nTfI6nfKQiD8Uaz7O6WNkao/+6XNhIToD0YycmGMrD7gMqvCRZaThmqwqlMzs\noHlOMEpI8CGgS7VhEGt4XFoFP+7LsTozd3IJF8mt8+WGldcCiHVrZhYNdEKA\nSAep1oQYRuBXZBKm88VT+bOwhezFIyrru3D1ecen7znHcP1CwBfY0xZQRGAV\ndLEB4U66HlVVfxa9XZ+Tmh8RcZlXp3KC4pcA3TOQv2fmBLPTzE3zOQuJk2e4\noNgL1GvBedI3YLa5X2YmPu/gOhd9r5k8kkgjVaC2HmOsXkJaxZSUtld3+5mD\ncwi8\r\n=8g7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c927a5d05.0","@material/tab":"9.0.0-canary.c927a5d05.0","@material/base":"9.0.0-canary.c927a5d05.0","@material/animation":"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/tab-scroller_9.0.0-canary.c927a5d05.0_1606160933049_0.41190170795354786","host":"s3://npm-registry-packages"}},"9.0.0-canary.b349b5185.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.b349b5185.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"949db199f1252a320652692365c677b2b783530c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.b349b5185.0.tgz","fileCount":52,"integrity":"sha512-mmwM7eU+8pWHXtRhow8r1CkSrnxvFadxoEw6BlHiggwQoGYbdPgE4eYQQ+7+MNeBILjKeRuD+jvmOG+oAALfwQ==","signatures":[{"sig":"MEQCIElvBBCRt6V1pTJGXmGLETZHxCvJd9WZs8fwKKgnVb0oAiAIBMla7VYIbOQNJdfBQfwJeVL/nuWpsapqsrYSmqZmOA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvT50CRA9TVsSAnZWagAAYXQP/RxNiFbRFjhet4Rl1VTY\nr7zVdBXbs0LJ3pjrdrqTqIG2Y/tR9shgZqw36GgyeDHxlNQv9ughXDLrSURz\nTvBsGERbBx8N96bf4RSX+dbkiyODKpLh7UEABAlxcQ5CgqIbyOdUTey3kG9i\nowNRdwKd5zZwp1Z3bQDO1AnEIpnwfNmF0klofFluXBU79I743LcEcsNr+E0i\nrXCdCdseqVH/TQfh2IKcQzkKVaosS6Ifx7N5NdGX9Qa6oN9JanspV2FDKqbG\npn+RZTKUbGPbQlZb+3CTebn2DeRyCicQG0xQhEXMWbCZ1qlm4SuIKlUDlKhs\n4z8HTltTbW5kukibBDt7hL2LixRswYpbfr91bFV6Bjy1XOnaGWT/jM4DsJr8\nRSdO+YgNfu3xT0HcZD/VBW4fchBDnvoS7sMOt5qfcL5pfrLyfHp/CsUjkDr0\nnava58o3SwCUJUnCKV2UGuW38PBtEkQlqRSlmJQnc4iTVGYh3cnyNx+OgrgT\nynXWnQYbzZJ2NVuWwatUEaKXsrO3kFAalk2jxo1pYt3k/hljdZxN3RNVchCd\np11kRn4CpfSxnDaNy8+0dd27g+YKTn2kwXqEIr+WfZiYOx7vpO1yy7QErugr\nMMSHJPA5QTpTSLopJpiQcNQO9LTkukGezDHdS1ArEYEoRtw3kq9y9qjsj+ze\nOwwv\r\n=1PXR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b349b5185.0","@material/tab":"9.0.0-canary.b349b5185.0","@material/base":"9.0.0-canary.b349b5185.0","@material/animation":"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/tab-scroller_9.0.0-canary.b349b5185.0_1606237811480_0.95446625066272","host":"s3://npm-registry-packages"}},"9.0.0-canary.9083b7d61.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.9083b7d61.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"483fc796e4b1b29fc80ec9eeaf612ab0dcff7087","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.9083b7d61.0.tgz","fileCount":52,"integrity":"sha512-z7KjSIF7QSBpf7ywZ8yIlXZ9wva2KVL9vGg9bh1Ouy6EMWUC51cp3I0ex6Gsm4H1Nw7qhVkH9M/dAJYsD13oZA==","signatures":[{"sig":"MEQCIBLlHhBHVr2Z7FPwZImIla0TJ0oWg7kVz7vRUWcIBKErAiAphoGdlkOK2flz3DX/khUr2aYcppqdyNj0NN58PMVyiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvXhaCRA9TVsSAnZWagAAJ7EP+wWH7nBktDqSq7rJTVFD\nEO7BhhbWNtudbl4Lzloh9fXvb5BK02at4Iwlp3E3bHFtqaJ0OjTWxA9lMyz2\nvWIBKS5EMnUixYc5BKq1wqgRqL5zZNWdQohkxNDPe84b1AAI4+Gz8uF1UA8X\najp5LHoNbzBddV5NGAJH83IbYys+PDXyRYSRhYR5wZzF49GMKce2r3UGTh+w\nlgjA462ddbZFbjmCzMWvUt4ba4VLi3+/VdqRXig7UrKzJUvt3xU8Pc8GD6nR\n4rPjsd55BppeV3eWvlMyDlw1Bu23NreyuECT5bx+DK4tG2lkFTNb9Tw6vltE\n4mMLs+VL6aO5psvwkJTp0aLb80ZUTKWnwiL4nRenPEAkEE1eP5EeLangEG9L\n64M7xTBmCdK0cd4/LNzL5eMGCB3Dm9eOzASzGbHIB9VG5/fEL1O7qP+3p1lt\nomybRMoAwMP1dqSQ3UEQIbXTRjEHdnUIMGdanfxa4mE2sL6UCgBn2I8k8rE7\njNp81ZGKWos0Ul3oaokWXY+OD+d7M5U4qRIQGdRVnaeS90+4Q8hZc7Ks7nvk\nMjYu8oYTWmqXNlZHRfLN1lyucmC1K1oGMYEJV8WpvmGuovJINPwFcmeZ9AxO\nwVNMe/xLgRveAVRB5eQvgCL4yRE2z0DBoL/7T2AvxKqKnSTOh+RSthdYsAUn\ns0pM\r\n=jMph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9083b7d61.0","@material/tab":"9.0.0-canary.9083b7d61.0","@material/base":"9.0.0-canary.9083b7d61.0","@material/animation":"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/tab-scroller_9.0.0-canary.9083b7d61.0_1606252634443_0.010156040316594783","host":"s3://npm-registry-packages"}},"9.0.0-canary.eff7b46ac.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.eff7b46ac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"89f45a3b9e7ae266c1791a9aeb52dddb1785c692","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.eff7b46ac.0.tgz","fileCount":52,"integrity":"sha512-lJ4S4pAzyPCeerc+2Ni3t5nlBiK/ShHfhyqKTgRjehLlCi1JKo0ZxGbJ/nQC9QAtqSqpAB0sj9vZGrdRs6kEKQ==","signatures":[{"sig":"MEUCIQC5OKXGqMcEZgWH7Q8DMWVYzL9DoJCKzCfryzZYMAyAmgIgIfYRzWnOwyrwBoXIELYtV9kpaNZdCL5A9JB0oXseDDg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvZgBCRA9TVsSAnZWagAAedoP/1JXsrhRjAkla1sWTs2D\nHyEVjR/ODo9ESTdFmDJLTssakWTFjHtbERk5bNwUvlC8Z4EONnSJN7qSdXZB\neQqVcA5LU8fD3fvQltrgWTu/Xg8SPh9na18968S/hTYD8fOOwanMe2+mqQiB\nFMKlkt9hHaVErZDcqjfS6ASJ4x7Erg0/ADEFTVMDXPrpwgE9bzNgvYW+U5Qg\nnBIpZ4bo0B0/CKnK/CO07/Wogr4mVqirs88mP4EliKUjRrR7p5kZg6mnIX2I\n/jwmfbQU5fL4DhAkiX2Qs3BPL4OJa4P0aH4615CbkMNSYPgejoFkgb0Hbyf1\nJOrYl/Z6qw20JvGhxU41sEmbN1enMnUJ/Zqh6TRL45YVuKQFP2IiyvyfvJn+\nNGPba/3cu0dBqrwrRmargUHOlVIVjOv8QPeHW7RlE7isr2NuA6CiSgzqJZ/5\ne8Y1nY7LPZnBKj1Ry8AaE6pdI9TucCvzPGYIrKDZSC5y1rwQEgp9VIloKgDg\nnzjf69n5DGLhFd0AqWCexOKtttmmvzCs41c4fOdLKe4hUI+nJxTbbNqfO9kv\nmCKi8tHasu5AD3NwyLUp8JezwC6MxOhJkGTTvBu5O8kd+cwdDZFpFkMPgkaz\njYHhBenYH5J8uQi6WOT/Hn3qm633A5letxvc/OA4N+VY/fLUxydh3amUST/N\ncULK\r\n=5l3P\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eff7b46ac.0","@material/tab":"9.0.0-canary.eff7b46ac.0","@material/base":"9.0.0-canary.eff7b46ac.0","@material/animation":"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/tab-scroller_9.0.0-canary.eff7b46ac.0_1606260736582_0.7184514829059905","host":"s3://npm-registry-packages"}},"9.0.0-canary.ae27b44b0.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.ae27b44b0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ec12ae95f3978cc22450dfcfd22a7a0d290c433a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.ae27b44b0.0.tgz","fileCount":52,"integrity":"sha512-K0I0T6ZZDhpxoy00VIthaEbpWvy/P38OlEjPY8nl0wM+wAywDaFS1aDXfvzxyJl4aGLVGpMD4drblkqvJJOxvQ==","signatures":[{"sig":"MEUCIQDozARmTh7mtiKuLD2ukQnMCodfQVeoFfBgzKq/kRGwdAIgCsyH3demk6k23RTyoA41543X5d317ZP1p4MOTPmBzEE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfvnnWCRA9TVsSAnZWagAA/fUP/2kyL6CRYAv8LKFu1rJH\n4+3eBACBiUwqVlcLqEY41heM+eadVAOklt85VHLlWnhQD2GJpfgi3pkpQ9kt\nf5Ng3pmNz1+i8F4KrfaaOp42wcZvMsKrC1EICmd8m9sIJZC2YkC0uguFjcfz\ntsIn508yDsfmBkO6u4s05R6Q075YBBGST5cI3xd+i6yvP3czdDhxX82TkfuZ\nuhGkVD5PgASiPt/Yg4H5JYbS0UHK6U88VReD0hnvdp85mjfKs8wQPcldlxOz\ny1bZ05RE1Uzmq7NZsrFViaQYDHiZjBFqMT1srKUZ0lI5WKvsxsykZXx7lIM+\nlpQz7wVxSrdigZVJVXcD8wIe7YfzEjVV2QekxGyguLgw2jMu7sI0U8AVEq4j\nsKlV3fv4QTpJGTcggCQFS9kpw5wQGmim1EBFwAfRNAANT72S+FNho0GDnCKj\np8G23malSvj0O+rnnY5wEteJCAqSw27Htj9joJp9xQp+D/Lvbp7ttfBzgobc\n2qmHnqbt0Iqmn/2neqsl3d1XSFpIfTgKiPRG3IgejMFjXYE8OIdQfQtGJPqQ\n6YBcIkS0gs7w0ddIW+mfhWFqZ0dF+F8TZkelz+qJ0gJ+Q93t0rJyo7lJMIbl\n3Z/aLg9DcB8Xb3tl7zL8STiBo/zkJbxAypCcfJqxbPUNTsy3F8TVIQTXdoC+\n6qU7\r\n=BQsK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ae27b44b0.0","@material/tab":"9.0.0-canary.ae27b44b0.0","@material/base":"9.0.0-canary.ae27b44b0.0","@material/animation":"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/tab-scroller_9.0.0-canary.ae27b44b0.0_1606318550131_0.15341493516271365","host":"s3://npm-registry-packages"}},"9.0.0-canary.2fbba2554.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.2fbba2554.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"edd67cfb54cade9315d62575bc1c4c17f837d3a0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.2fbba2554.0.tgz","fileCount":52,"integrity":"sha512-MMsiaOZYf0kTLQwVJI9OwaX6xKAUjztVP4B1vUKdTs06v1mUsRD4uWarr7zdkTNPaEDYTA7CJ2IxLda5aRN2tw==","signatures":[{"sig":"MEYCIQCAdWZ/Xd8kWIft6ojBOy4lbfo5E41zUtSdtR227rITngIhAPVlXtLlxPP1qzHUYCeWGDAMt9sz0nUuJdiKBwVCflpX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxS7RCRA9TVsSAnZWagAA8s8P/1XcFJts1kEjQp+sqdhs\nafzK+xM0rsRnjQZGvUNU0rTGSTxPqXEfMcyk8JJBYPTXC2kbf1tM/M0LK1kk\n5nBxqmGYOGPkfSLprnXyDvGV0cx67A3t+mgkkVW7EuYGL8Qowe2Ln8aLcBbr\nyf70OnZyUpRK3CG928eX30mw9xhzy8QvyDl2ds8+LK9XFSK0w3E/LY97V0P/\nSaPatEXgCFR5TPSpUR3Z/FdPMPAWGs0mWnWAzaUWoL9brLyq9fgnRX/101ye\n3Dab4dFawntdJxhhFa1dI4N3tTBQj3lbxXR8vVz/ncyrFWJKopYZxEraUsBh\n9cKyipwYI85SYJcn9YdBDc5+fQaUsWOP+wY0A42+0ypBqBk/LAmJx8atJs7b\nssRm/ldY6IHh6Povnhy7bZ68CglBGCHxxbjdg1ai2OJlbtvXHwHBB/LERlqi\nh8hbgPIkyb2LVAjSUIorYB2fbzZNry4AN+5G9aIl8r8XAyMZDd5ajyZS35QO\n8uu5RegeYgT3emMnUlC++jK/sADFClQV8OobrH6kuENIwlyUjE0tTVP0E19N\nagfv+36UJAlfSlv4XvLNP3Qsu/hFQ5nx6cPnbi2E90vArAW7uC4R+Z7NokE7\nvv3JZ5q3h8nm4yo/1Hu+gEPKNNJ2lTzzh9O/Bi8agGDtUwVmCpSJ4C2iv/8N\n/6oP\r\n=aaMk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2fbba2554.0","@material/tab":"9.0.0-canary.2fbba2554.0","@material/base":"9.0.0-canary.2fbba2554.0","@material/animation":"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/tab-scroller_9.0.0-canary.2fbba2554.0_1606758096827_0.7432890692897145","host":"s3://npm-registry-packages"}},"9.0.0-canary.6d8574fe1.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.6d8574fe1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8f05cfdacf315a5523497507f299f555a68c547a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.6d8574fe1.0.tgz","fileCount":52,"integrity":"sha512-VInbUk88/zfxZqCKWIXjfcmWN8uwy4q5hJqp5ci+1yg0ZlLojvDbqmYd/hJ59jvqDaIbdOQW86PWQ3eZJH4/SA==","signatures":[{"sig":"MEQCIGOwV9ex80ajM8nHnnJna61CfwYrAJ1oYtBKsrjdtFgNAiBkJD3VvaS8LQJ93wZ/hfSDw6KviMZi0CHs8oiWDyuMog==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxTFhCRA9TVsSAnZWagAAUDgP/RmGaks5u6R7yyG9CK4j\nkLP+O3CoVMM4vFF/KStJVsJSv7XgQUSXNJVCWtLT/WA4Fv2yVvTGeofsyiD7\nWN4qmD29vaexO9hDAFVOqEcZqdrZx/rpsYUtiwjvxby/1+IvGgOSVPtPL4EK\nj5+PicA+6XvWp2n9T5cLLu8yCIZNflWK2tNlJ+eVRHw/dRZs/CWxu1RSxoeD\nsghRZ+f9m4i6SyTExu6LNzgFg0XtietySQmS2CRIPdfSeU3jYDhyB8rxpSVK\noMG1ikMlNK6KCZ1IPMjN1B7OhH+MptNWM00CVxDFfS7LM9gB+wtrS1zlSroM\nCYMwFu1gK3b1MEwRPD+SLMbnMjABRyCQBFOGlTYyM1GCXeEb7Z1E4U0QFfkV\nDx2N6/o+2IF6wSmAX76F3ydcUTQl7UtzKW020yBs/g64IPk56EfAlpgHTkbm\nIyjvpjavHhTw/APTdEuK/YevU7+aeFekigux2thsRJPRayKF8ITLuRVHip3/\nwE1qo+fC2XWCyCoV2u8v1wTQCtfj4bMnouet/wdXFwy1kZ+YXlS3mf8A0dkS\nXMkMlY+ZuvJFC8RvtMWjneQtICElk7vwrBiiFP32fHL6DAhtl0N7yAa9XoIB\nmOSfdpmAdiJSesyZ3o/D0fVUSt+M+6Yq/DihcS5lTmZgYbcIWcc9syHnSf9L\nLm/v\r\n=DdQD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6d8574fe1.0","@material/tab":"9.0.0-canary.6d8574fe1.0","@material/base":"9.0.0-canary.6d8574fe1.0","@material/animation":"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/tab-scroller_9.0.0-canary.6d8574fe1.0_1606758752543_0.47873409401128453","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd22355f7.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.fd22355f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5fc3ce56a35f362fd0a2175420cf17d3bf23e0d7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.fd22355f7.0.tgz","fileCount":52,"integrity":"sha512-5cvMFCBgEoAM9TF17jYNIJOmwJGA8YRCW67aMIrGWzsipg3jJHR1nleUGwwWGHB3JK/wBnIz3ZzNwBZOWquj0A==","signatures":[{"sig":"MEUCIQDfslarchzQLsW9Aj/y2+6gXNtvvjjxSudR8kOFTMwXEQIgHkiaZeIFvo8usBnn5s0MQKB837Oamw5dvLZxaeTPzuc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321623,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxXmkCRA9TVsSAnZWagAALy8P/2TO+k8ao4zM+WvGuGMz\n1L0GDNz3Jb/aq71C5Aoiwhp3ydecjCXQIH2EJ/qJeSu/++qAw/9w/IHHBtTy\nF38Gz3qBAuAA7YvX64tMZBoB+8C8ICAPjfYvy6hcqaFCMUTlZ/LYLaaz+TrV\n5NLEM4kowkCJThpvCWDXp/LR084i15DEqhFx+DpwAl/u4Sxi1Tz7PvUad0/z\n6ySa8vODeNiPM+p82IZ7Ucw+kiSvfk3IU0awAa8UOJx4fTmbaJJjR+sub306\nCixHoFjVECtjbCxb82pPnaq8eDYsPBEyIbJDQnRu1TdC70wt35W831k8Fj+g\ndndTym8TVriHn6TwyOJKThH05p1aGI1rTt+c2I0Z5f6m6a6KWnm0neocaosO\nppnNhrnyIR973L/sBRZk3mJxXUiOMo6WrpxA/R7apODxXwPaaJFgvfcUao0D\nelgHPUN0rlHuRtq0ZuTK+jC+R6vKxWn4HgJnvY6s6sFHUvnIxjbpkD8WbT8T\nqaM3XQL4FLWdDcM0jLSGoByD9xRgDg+Nf4bK8T7x0ADaiN1XD5vgRiaI/SAZ\n64vEWCP95jka8CYzwlobXl+rm+lN+KnIgsB4vkUeyqOX81aOuUP/AXblmS24\nzFKVjxqITfF8anyCDjFnxD1n959cxi+u2fdGVL3i9F6BqZrJ5CwkJfrScNEB\nUHSK\r\n=WxYa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd22355f7.0","@material/tab":"9.0.0-canary.fd22355f7.0","@material/base":"9.0.0-canary.fd22355f7.0","@material/animation":"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/tab-scroller_9.0.0-canary.fd22355f7.0_1606777252113_0.5937264543382339","host":"s3://npm-registry-packages"}},"9.0.0-canary.c4ab98722.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.c4ab98722.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"87aebd74499bbf4dc80d33402149208551e84702","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.c4ab98722.0.tgz","fileCount":52,"integrity":"sha512-uHs8Hq2PGhv01M6geG0MmhAoTPDtT5FYpMDNZF0XzZDRgQnFIMjo4EEQ0HHlqG2dqIP4NBh/06dN51tvHI5RuA==","signatures":[{"sig":"MEQCIGi5Lj9SYCVcACJKqRtJztQpEJGUnhmfY6bDNz5AeFRoAiAjdzxu0yCcErCXEF6AnGnEajWLdsiu6pOSHZrk1rX+zQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfxuakCRA9TVsSAnZWagAAlmcP/3sdKmVPMqLl5RLpJyZd\nIP0K73oTt66iGBMoxGfTxOm7PS3NVpm3ufTZpbvdMNtkDEIFI07IkjUD6COe\nBj/b6bSI8/gfpYUpxfBqB28hmfyZyWYfaJHleiNicNtW+k+B2dvhbvFnW3cJ\nOyaIznJG7FHEYrEnQoW/FBGY+6GOf9RSjiwRSnPw1veI+1Pa3sCzVBG3UiYw\nsAwBRmIyLgRZBFCScPSkGKA105dUokwQMPl8YLgEDguklEKU/fB47bta5biY\njktDZ0weLE45330UKx7OvLr925BZ3hPbu0tizPKHkzVx36Bu/s5OL7jvQ+8U\nm/DFLBCekikZGFFb83k+D9dMefdd4AxWS4VnoSAqFBFe9Gi/hS7Od9JLhSR5\nTgjngFWQrXueUqjn4t53crMx4axLqL40Du3t+wDvo67WvBY5N6/uMzuNwFMP\nDMnuLYpQGxFtflMo49e3AJcgxJBSnimLvC96L70EhMjN4fW46soD+A0Mk6o1\naxcQzwunSElUv4NtSJi26W1a0wxzVeQRZyeVdICnnt/Iwjxgbb4q7TZLqPJW\ny8tiGpnV/YG5mcKHKF4NoD5HziS/piA11eEiJ8jZfxSROINZYI9cYMGvJrn5\nJlSNcs6Jq/0hC7FK705/cGKzXf5t6ia4FD7NvVCR0o1n0OlZnlPm8ykEvaXn\nLo6Y\r\n=/6EJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c4ab98722.0","@material/tab":"9.0.0-canary.c4ab98722.0","@material/base":"9.0.0-canary.c4ab98722.0","@material/animation":"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/tab-scroller_9.0.0-canary.c4ab98722.0_1606870692396_0.05242796393984661","host":"s3://npm-registry-packages"}},"9.0.0-canary.977585650.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.977585650.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0483779f64e72e77adb30890ee2b675de0a6e4b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.977585650.0.tgz","fileCount":52,"integrity":"sha512-gmwpD0VVICq33CsW6eJCRQU7G4vXzfCjl7jpfnMSIxMP5jCrtiDuqsLWIxS3hy13vJ9YTnPwSXE4VrNechEHCA==","signatures":[{"sig":"MEUCIQDmOpOQyXlBjFZ31vfWj+9s5TUfoWOBArd9T4PtdHCPFQIga0v7+iVOboeBLoOzFWvRTXEV14C4gQbBu2eD4M5DTEo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6gZCRA9TVsSAnZWagAAb3cP/3bV4RiQ350GS8l1QcgM\n1VZAVGXstEgfn8H1OCq1NLDbox8Ds0ab1Bt4ZWd+HQs+DflMGRwxBHeh/4al\nEQnvXxaRYQD7K8uBDnwZKCsHVewAZ/6DDFi4WOgc/56umC4yJn6F/YdhFwQM\nypkOgOkqPRZr5CeRlP6iuAZfVmJrwEG/no8UeDafLrSARGh4DMXFiJ4WUqLM\nSs1OmLLk4kzlW7+QyOQYMWsLssSdZYteMBB1Cyh9ktKyvrSN7hZRpLEej+sB\nW9LZZyq4LuwUKjSNRcN/n2Yc4NZVRXTSUaeSXXLiJUSe0v+NvtCUivKOxOw+\njKU82059jNdrBMq/6NjJZ9ajda/O+7MZ1gw6YzAxybrcB5d/phowQWMF4rmT\nKOP0G14UTKr3oK5hyk4Xq4E1a29AuFJM1OF6G/ZNGV9wOCyvqjAX4OYESV96\n3DTLi7KDT3txxlWpktORxWJ+a3awRuFdBM6R7NPIfo7Q5ssDu9C15bvrtcV7\nUeISvTG33WMrALPxXMdTasw28Uj5ox1kv/AwzaTq5mr5d8FjbLP6vCQHJVFQ\ngBmnu6FztWxfhffInWM3WLmwb2aSi2A+GNY9E27oqkjr3bqT79MUJqvVeYIP\njIXTV33c8tB9V0L2yw0O/URoAreoU2vWliyumJzWoSg8nYbqVqOfOpE9L8mo\nKCGM\r\n=o8mc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.977585650.0","@material/tab":"9.0.0-canary.977585650.0","@material/base":"9.0.0-canary.977585650.0","@material/animation":"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/tab-scroller_9.0.0-canary.977585650.0_1606920217023_0.22471769098835326","host":"s3://npm-registry-packages"}},"9.0.0-canary.c7edfc7b6.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.c7edfc7b6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"900f29868e9c58929759620d56516f4303b9c2e2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.c7edfc7b6.0.tgz","fileCount":52,"integrity":"sha512-qQRd+mFa9hE9BnCSezTkmAA5D7mk39rEQDcUMG3Wjb/IY0tYc8865i6KmX+5AQ7xT4Sq145Zxy4MbJe2S0lH4g==","signatures":[{"sig":"MEYCIQDScF7EDyRuiqe3gnp6ncYBc6znA2lNSBIikfX0JRQDDgIhAOrXp+iT56I2aw6TC1fSjHVrcg9Z7UGFd4Z36Rxmia3a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx6nKCRA9TVsSAnZWagAAnTsP/3r70gsOpmyzsPI9upID\njHWSOmiKHIpvIoO3BUUxA65OGfEEcgDPAe/uJkz12ZvlarW9PddUDrHl7z6j\n5FAzIrh9/YEwJE6GyIXBRFBN+1kgdwYwbwELFcFLd+I079Wjm1if3f04LFRR\nRgBs1+2PEqwcuyfn4joEdj/9LPmLNn88qk7iAmqBzVAFVfdf9jFzq7dUyfYw\nmfw7d5UW6D3mkGyJM/R4Jutmfbh4WhS6dV5VrBjafPuppaECXyZqRdBm4lCr\n4dG0X4ThhbKDf98LhmPcOxAkg7zxWAWZQie6QplnvbtOGBLJtQMdSEjM8njS\nqbkRrUVIeO3PYzsytGmHDkhASoZFUi24CyL6DaCvmzSbWY1Br2WMPUT9A6SH\ndnIV93ZQcgZcPOfIdjtEsan0/gascVEB2lUWIZ/uXxesNTtI+UU6bKS6UCBk\n5X3DUFwgl83c3BXqpfcYNMcOnol7dOYVAaXTkFkSeSB5ZanX0vpsl/Go9/Nx\noSbUVWpVzy0Cf3eFWfyUpJR+mDkzK2u7z0aYkQsAtRtPRjbwMcd2tA+ccvN2\nL/9vyH/XFlZ2/Z+XhjEb50m4ibeJBoXi6NIxtrrJy6dhGsdUnPf4g02h3FM4\nWW20X04nOidvU3QqWHIDb6ETZosTGxmxtPiap3IXlOmw80ieRXlviLqXF2rG\n1l4C\r\n=6esk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c7edfc7b6.0","@material/tab":"9.0.0-canary.c7edfc7b6.0","@material/base":"9.0.0-canary.c7edfc7b6.0","@material/animation":"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/tab-scroller_9.0.0-canary.c7edfc7b6.0_1606920649697_0.8097732602926362","host":"s3://npm-registry-packages"}},"9.0.0-canary.4f3347306.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.4f3347306.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bfdf17662ad0592c2cc22ef2221e51db7d48c68b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.4f3347306.0.tgz","fileCount":52,"integrity":"sha512-a+vYxCe7nq6BETN7TzqmjCxf95zez55zNGqOY37isEbw18Bgv5wGtx5XOXxJ3sCuzldXywlyy0daL2qHzKRtyA==","signatures":[{"sig":"MEQCIFpwhiz1A785UX3zb2tB/d+jwXts69G49AGQ90pVZNIdAiA/MdwJjr1X16Ea5dsBMsYWlcbJ8qx9dx3B1p3IUzR6Zw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx64ACRA9TVsSAnZWagAAEKQP/3Vd6QoucpVpZIqOZqld\nnmkm/CoHsAr00q0HZeK1q5xXJvbL3clz21nUTubAhTmzSTiN6vXpLMcGjc7v\nhzimez2AIgGpZBAqhbgi/ESk2JCtAIphNFXa5ns7/OsOijL2IzMF+fNiN64+\ne/f8mNFz/Pc94PIlNfssiTkpvsJWPCBYUCY63ZV1WV0WVfIIHca0bFNZj9lu\nJZv4AtQ6bbSAec+dm946X+9Nwevjkd0MoXXE144Dy67tZYFzWwo+RtcjXTtp\nMBspxsrresCjwpkjkGGyvMNVQ2ElyLL1KLQzsRDCuTG8/HOnr7iCo5W05ex4\nVLSPTazORMxEMlfRyBBOXM9rTpd9tJl9NcSmJ/d3ugdUzwU/IJV+Fx/Ya57U\n3Io+zL/+MejYf2DdtqVQfzv6ULJXbq4axvKdtQDFWFn9VYxvJFYr8VcFVYQh\nPYHmBN7ZNmSM47PTmv/9UxvFrY5pUVeHPXHOY8DHIH0cLVvo+e80C8EqCyBD\nOcZmVdMxkbari5X2UmqioWsFjahZoRKcJ0nYbQWViGmMdTjrLTHwy2QuiNiF\nMRnSyafRuqWOS6lfM8qsI1ItkyKQUBSduAA87VcRbehDoQ9t/jyH5mrM1aig\n9PNpo9OLGFegOVO/ga0T52QyVzwGppySMpt/nZ0sf/0ZxmckiIVsM1EMY57G\nZnoD\r\n=HI5O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4f3347306.0","@material/tab":"9.0.0-canary.4f3347306.0","@material/base":"9.0.0-canary.4f3347306.0","@material/animation":"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/tab-scroller_9.0.0-canary.4f3347306.0_1606921727702_0.7360413065073244","host":"s3://npm-registry-packages"}},"9.0.0-canary.37fbae10d.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.37fbae10d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a51a21cdbddfba7c3e279c142ca5292b26755c97","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.37fbae10d.0.tgz","fileCount":52,"integrity":"sha512-b5COQpDCuvf71QXl5XEenBUCyWj29xOs6hkmkyBdruc5WKrhiiynteh4kOHOwjqzb0vNsFuV8BH5Y9B9NXh2pA==","signatures":[{"sig":"MEQCIBReJWA1wqMe8Dt/ogig1WyWSHMG3ayuQ1y7mBfftitlAiBn+8O10Rq8Sqjz4FuupPGZc5pkIwNXssgzpkhTtPEQNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx9pHCRA9TVsSAnZWagAAXnsQAJ0Ed2DJvEsRQtFSeuu2\niaXl0bMOoCPhuyZCUROgreNc3xKqjS6b6uvUga5Cl1zU5U16CmADrqALm5Vc\npVuQNS8sXZ0tQPsN5vzrxWA5hQ6LEQrmczUfYXhIdoLajf2AeBVu12kbwwL3\nIiPKcArtkKp7y3yNBtIRfacQSlohZ9KeB6wxqaDmNRcAFVYUKdLDxbha3Umo\n3wc85umdC4vDkN/rWtDu4y5+n4OWBycOaVySp+OgtvhQZaRGgM1DPjJ00SYx\nRxQFQ+NF7P+sMFgZ+l1PClCNcTkVIGKNZ2zD2tVu6UNagCNkTVKByZOAPEQk\nSjSGvMWsDEOvE81CzxZxGkSBEgdJZQwlbZnEDwMhHHq9HtTmhygXaBiz5ejk\nMQMJj+p0yioRL88ipChg5IKiY1URANsJJUqM7shfmGJIK8ZOvVbyMXoY9etl\n2yFhebsQmpN7RAb3rpogV+5ALhqi7huhtPO5qgPn74+X0waAUynlfwXKFb1d\n0Z1dNeT8N1T+FgS7jcCho8zQWbXzh09IfUzVck78R3viYtgmjDEipjmfBHMR\nzypB8JXn+vsrKdG1DkW6xQuaNVQylhddorDA6fH0PN22UnWYk+cr3ePX+xCh\nohazhnyvOmO3XXfUFm7WFZwrbUu5jl849RQirAEv779mJ0cGXKfqLOc997/v\nIYhl\r\n=aNpk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.37fbae10d.0","@material/tab":"9.0.0-canary.37fbae10d.0","@material/base":"9.0.0-canary.37fbae10d.0","@material/animation":"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/tab-scroller_9.0.0-canary.37fbae10d.0_1606933063258_0.9751574679280208","host":"s3://npm-registry-packages"}},"9.0.0-canary.11da3c0db.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.11da3c0db.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cec4b0a3830933aae8b9cb2c160a79c3d063f895","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.11da3c0db.0.tgz","fileCount":52,"integrity":"sha512-e7f/SwGBeBtp6i2itm1rmjrPXoP3Pk2DR+gFYwg8YhEPpSb/g5cTxfwoEkODRULuoFqXe+Xuaea97kt+EpKw8Q==","signatures":[{"sig":"MEYCIQDnjyk3O7yNBLY2i3LYxwYO84fDZPMhVcIYqjYtcwc4qAIhAKKalOIHQXvJfeZoq4sQuh3f59yTs2mv8EIRiQUOMjVO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfx/fSCRA9TVsSAnZWagAAtQwP/jeYXV65w/IphnQme19I\negusuCaylJwMnokfnAse5ZiO2cafoGzrSRqF8/5lL0EkwfTzItHsPEugiPMm\noOzHpmPhLvEnh8EiWfiFWPgSzhwLau4oOzRNGWId5IULpjlg3eLOww8UH8J6\nv7mKPkUwTh3JXsQwVvmUeTYwmzxy6GQEkwtjhQVSX7BIaiB16iVyw90zv91s\neyZSLFXTr8XFP5gxycQRhZ2GsBY1YKY/v0u+TghS4FdVm2Pebsoff6IpwBg6\n1wA9lE02MPG4DcxvamK1A0xLpYqME1kNTubtci6xkGMHBXm3UYipdjou7keh\nK5gmzp7cO+R+oYrEnaQBJBK/FGk2E7+qah4uxHj9YLAdOZYkIIt8X7Ocrzed\nHuWLC0OhOa0vsCxoci6wrZwcgjNnfe5TRD3JWdBIzPug37EcaBkqe6M3/oCj\nPeFlmk017YPVSbLa66bRrs6wDhZGwsx+mjovvL2maHosS3p6Uj/8ssKQ5LCk\nwPWh+R/KaXmzCXFaQrs7Ig2z+NoGfrBwealHtz8w1g9HyoW9n9RIyN93PWNg\nkOTxz5ibBlhy4aQKCUzRVbo3C1MGsxVvfAdM9jqoUjvJ1g1EfQ8efdErpwEF\nFfWdvjf0NvYhjR3qPiRXE/US+W9/83c1MOBhE+ZKz1hN1yvejRp8OhFJZLnL\nnhSI\r\n=feVd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.11da3c0db.0","@material/tab":"9.0.0-canary.11da3c0db.0","@material/base":"9.0.0-canary.11da3c0db.0","@material/animation":"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/tab-scroller_9.0.0-canary.11da3c0db.0_1606940625734_0.23215241275662746","host":"s3://npm-registry-packages"}},"9.0.0-canary.489d4c219.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.489d4c219.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"629dbb42340f97de80972e723be2373d37c57ead","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.489d4c219.0.tgz","fileCount":52,"integrity":"sha512-hw2gV/kL2g82gv9rwUOJvCCdUGbWqAASk7N67a2oZXsCUFIJWe/3lLGtydTOurHV7KkgvKg9S944MNVVhanYug==","signatures":[{"sig":"MEYCIQCpTmSbWI4d1BdjKVSNAKsG7wl4ApPo+QFpVYF/60SYUwIhAJTmLRTVLCNCIYIyOV+rPpoTMhL8Nn7JyOsPN29mhrAH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQS2CRA9TVsSAnZWagAAQuUP/jB87eJrkQfotVf6xE+F\nE5sflHFos6fxSnT5GWruTvGKs5BbBMemBvpsD5q8gC1qjsj1cE1ZvQSWD8/a\nMNqXssdyNjoXBoxd/fI4d8p1l47r/1E43PH5zj9OUgnmHsBI+1KIEw07m5y/\nwDnlrA/luwvJHSme7Gn+rkL4cQOC4BFHPhFBf7qigyGLL/M3ibct7mqXsi+r\nvXgiYhq6ZNfHvUhaaRw6xCO6RaFFzKTan2Y8m0piR/OOcPvZFuaWoDolJnnT\nwgkS6Qk44FTFZxFyzST83O2DbgOJTJt46mXAweXU8AckQapTi0omq9cwJaew\noW+QMa4grUqXmWjXDLNk7yOh7CwFeM7btE2beuH7iITV6sby+kOq2dZljfHI\n4wn7kl2203hZTTZUX5KSYBZKhKzlGSPOBRsKKY9j0S2sp5gJzeqNI/07Ov4h\nYF/LafTbvpotubNZ/KizKVO/RE9nPfxXtl1Wb50l0Fbo3ZbFs/CAEQKdXZ54\nkkjFXFOgAyNtGWYE4Q4/fvzG/Eh9uZHffYabnZde551FJmBUD246pH23YWXp\nuAuopVLQmbJeojOvnWqPseKnot/HbjjmXRRCCGQxRFdXZyUDH2JvfEXzZnTI\nWjA2Ciw4CYPKrkgbDWEc9mTcmf7V7Re0IbSTRHvq708Nzjcw/9ClXj54u+da\njgm0\r\n=E9Qd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.489d4c219.0","@material/tab":"9.0.0-canary.489d4c219.0","@material/base":"9.0.0-canary.489d4c219.0","@material/animation":"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/tab-scroller_9.0.0-canary.489d4c219.0_1607009462183_0.8832461416057693","host":"s3://npm-registry-packages"}},"9.0.0-canary.6557a69d9.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.6557a69d9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9b27a011a126ea94cf35674488602d684c9da2ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.6557a69d9.0.tgz","fileCount":52,"integrity":"sha512-h1Gp4hrp2KuZXHwgsH3fcme+mPLNuux3zql27wcv9L9VDzJgfiEdY37jG02AUigztj3aduYWmAmu4s8B8avyBQ==","signatures":[{"sig":"MEQCIAxN2U/xUo/VyL7JZAxAHAFFgOdnutXZ3dru3rP5EUbaAiBBMHW7IRsgG3LIgdNq9RB593FSLRzO2RFTIMErIYwWzw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQd/CRA9TVsSAnZWagAA6EsQAJBbzal0nlOZY5ja2ufQ\nzT4rBp6rDE7HYsoGgm22ERtMyVBh+khaITmIe+/nllbw+6b4KxTUPWLyj5X4\nOAuTgKYta5IVfKTKQHdIMet/fVj7lEfivJ/3a3qwb1WejXP39V72Ll48JV3A\nnmMCDoLV0CvPzQTHO+ud+tL38iOqxvHK0plLiKhDl/nK+bzrdPoknMDCNugh\nXxMaBMQb7oMPcoBkvBegJyplQjnVGZlB4P9HQLIhF3PX+xDV7H4VTWsu+2pP\nYDQVucn4JeFMS5tUfMtwKKpOQCUiEzBQ5ZudKdtput5S+VrM8SmqrvdfA6DA\nPUZ2DI0jjbDtgoYHPsKqVMuFAFAeXtMUge9929ODwze+YGB3ppU80lJS36ug\nM+FZXDf3UR0Eq717IJOLm7upwxrtK7kKp5IgjDvczthoc6ZKFfENI2wabpG7\npMSgdDndB1dPDL4grif9Zmq2MqDRPBTGKM0HFL3fhorzcl1DBaIBWHNburFE\n/ioyBuIbfhjQkf+d4xJ2p/ghJ25g2T66+KrmfSHhtIvmlQ8SgoqkFwRjOP/i\nmRDqVLiCu39YP12nf4z/Uplcooe85ufSJtxb21tvwtrLhBYOzlTMQ15Gh8b3\nYIpE9mSrh5b1+a+6xd2nOeD1zaaDeRfxlTReJwF2nY/33vuBbeCbSTD/eWrR\nwuU7\r\n=yng6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6557a69d9.0","@material/tab":"9.0.0-canary.6557a69d9.0","@material/base":"9.0.0-canary.6557a69d9.0","@material/animation":"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/tab-scroller_9.0.0-canary.6557a69d9.0_1607010175449_0.2014157328501074","host":"s3://npm-registry-packages"}},"9.0.0-canary.4ea1b7c69.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.4ea1b7c69.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c39417a4c091d68d990c6453717df37dee0c6a1e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.4ea1b7c69.0.tgz","fileCount":52,"integrity":"sha512-BfuCxprcoCX0DYYHxljdyU5SkDNhWib3xJTsPZSIf2KFWJhhlvhA8/jRo8m+eYWV/OJVIsZi22LeLL5N3c4Biw==","signatures":[{"sig":"MEYCIQD+i7CKTY/pHCA8GE63IdjOo3PF38XgzXh5Gimc9SLPHAIhAMgGlHsjteOVVSPqcDqezSXDSAUhUGAcKk+vZOKEEljy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyQuBCRA9TVsSAnZWagAAnC4P/j5Iqhf2TG8Ygo06Mdyj\nt2qcROPnmqr8XE4bW479GIV3UWadgO8IYcVtllxwhfWFbfmyGLjoFRKG5zdL\nOzOQSUg8PtucvE9rNH21REJJy/rmJnA6Sf0SYjhQw1xT56aOHHVn0wLabrlP\nb3nPJlaW9fhgeeVrlB97XfK7hvCPKhjOlnNBHfprU6wi8mCX45QCJF5/vdhJ\ndtH6afkAOAwBG+WG5lzQDmgpom4eCZeLbqrH3kMxbOP6kap+bwjE5jfIBtky\nJUcWAwx/aR3ThWgZVdb69/BP89dhng4OSZV1MD6skTVNPkv49fN3zTl/2z+j\n1YFdc9CIHuaQFzQwVO0KzxKiFH7avPCgm1AvdarDXmyJEiFYePx7xhfAraaY\nATpX8a5sy4mecVrckTnNz5Ykr4wRfBSB6TZesb+F047z+8zS5i4aJt/3Fbw0\nNR2OGzeJOrrjAW0czATPKmwbYcPpwv2UvNlibDaoGgRtS5UzFYA05Q4AkIwS\nDPmAkKetP0+D6QLjt9sLztVeTgCaEx3OyQFjf9xc1OwZdhKkdYW7D/yUchDB\n3kh3CaqFZykOK52A/+NLNgjg98/z/x8P8+Y50cyfbukHOc7ngg7GHUuzsjdq\nuHqWspc7PY27FkGhCLLCN5/VQr8WENm+OoX7eROtIRhXw2lWa7iIk9WihfP/\nxiVp\r\n=PhF2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4ea1b7c69.0","@material/tab":"9.0.0-canary.4ea1b7c69.0","@material/base":"9.0.0-canary.4ea1b7c69.0","@material/animation":"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/tab-scroller_9.0.0-canary.4ea1b7c69.0_1607011200915_0.5532557665283371","host":"s3://npm-registry-packages"}},"9.0.0-canary.eaeb78ce3.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.eaeb78ce3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f4a6e4554965924053b537dd8669cbdc1dcbb09","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.eaeb78ce3.0.tgz","fileCount":52,"integrity":"sha512-m7IcKNHV9OvBnmJ0r46VHIIMy6zYcjTfvWpl0RS353CZvMX5wEGVC3uvCvaX3/nlWPIdiMqUxAJUCCprEb03oA==","signatures":[{"sig":"MEMCH2KF0DIGq0ALRL2mk1dGYzgRLsrw5Lhezy6iibFGkwUCIHdXYlTS1DjQp9H55W9Ly2HvcxtYeushHzBcz/Z+hQ7O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyRpKCRA9TVsSAnZWagAAWjwP/jgszWTN3w7qnE12tKqI\nrAvURkfpyyFf4FOmIimf+S+aTv+h0geakiddTm8iNGYunphTrlsLOX+pBQcy\nS1yd/LweHBuTX8k9wZ7Ld+DlLGZ0MahRf/3dZDSJbDS0e4MS4BCT+oXCXpbq\nvYN6pxwksG3XoBnTJbOpXfo+pBWgCqWCBISHwmHKZ4kHCoLPWhyc3MkUS24F\nZpDPHhJsExqIfbyP+LAJHDpaQjVyAn5XZtWqkwj25wyAU3oBD+KoeYAqg3qP\nGuGq5uXVkjSDamjTmf3lTHNeUD7VOGw+TEsgHwgSduLeLkCzxIvVPJ3kn0fH\ntKHkGAjagJsLke/RYIK1VHt1PiMvQHCjp+rHekvfQOQN1+NrhmeVY111rV3M\neylStCBhx1GbGOaH5T/gbvhuBl5TDFsXupcQdnjEfCUbbjfUInwLNSL7XoRp\nygD8dlamXKRNnzy9KVC9llHS2H8ShbqkgqwrLZBX3IgBceCgaUQRHAFnHYWh\n/Wdkq2yAfj3BbVo+BHJZDIFCtyt5PbmFiPVqFUl2RowEqezsP6iEqvua9nXE\ngfAVkfrH+u0kQlZ6E6xZPE9pF9Fygv+0zgwiSIK0AR2YKk3OyQw2M7+MBkBo\nSiATlHjhe/seoe7EhooThGwntXgwTgEmE3l+ofT9krTMEyQpxw99pKjpfktO\nOBJU\r\n=nYRh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eaeb78ce3.0","@material/tab":"9.0.0-canary.eaeb78ce3.0","@material/base":"9.0.0-canary.eaeb78ce3.0","@material/animation":"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/tab-scroller_9.0.0-canary.eaeb78ce3.0_1607014986280_0.376829713546315","host":"s3://npm-registry-packages"}},"9.0.0-canary.1c156d69d.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.1c156d69d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f65267f3af811af3e7b1a7716a4b4a3cd64571ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.1c156d69d.0.tgz","fileCount":52,"integrity":"sha512-27h/vQv3+qh3YXPSTw/nakkWxgzDXMv3+ZBw+/XAwxu1siRb6EFBzsfLkQGpjVLm2DCPH3Dz4Xq8DOUkAyvd1A==","signatures":[{"sig":"MEQCIBGrV4+MrsJFW/DcvJdchKQJii4BqrZGGegJvImHMBMkAiB8wkL9sFu9mIgm3boZGeMOflUudSWBjQAaEslftsQ98A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfyU6oCRA9TVsSAnZWagAAl2YQAJhvHWC5fI1DCrYVc3Vs\nqy1ROpqH0zZ4N88WfIp+MdsyvYA/DEmv2YxrEl6Ih7EcVjSFRau4DArRsmvl\nPYr0PvEBkSI8/WThCXVxH7qvWDkty9P5MA2/W0SnZ7q08cvsZtpKA8X4g+9h\nhG8I0Z7llonh5UJgZWVgLCLY0qOkM8LFDOTDHejVj4DWdz2qZdfEPSX1gO5i\nd6RPdHfurxTflKC22KsYGSOqfJEV8y7no+ZyqUgz9KMO8MmFevh7RMRZ3onJ\njKDGHXBVISfsMr18OghW9gwxVyrQjT+9yy/uG7J4Ona1HOyRj4oE81nETnru\nsVeIaYA2oO7R5dRNJgqQyxW1ivI0ySuxiNePF0F5qy77esYR2ZCP5Ob6wyGp\nMRLCswchPPjWv5CKdqohHNbPgUzF0ekXNkdMf30M9jZ9f7Kvg/RYRY5VGHzj\nqeYSTziT+B9oFvVgT9+LFfDvHbMxkYIpUSeWLGMR5Btkp9X6u5oD48I4eEAF\nyQ9URXxnM6rwISOD6AE+WpONINKHJjNaelKwDKWKG3YhTj1f30tbcjBLX8D5\nezAqgyWgVUgEFq6grTiRi18GbskKiNkyySMt3yRhOQWdjliIcf4gYbfNE7ao\ndmLh7xKUQzwQCol9LpIsVukU5I1NcalJ1Q5V8GjteOAKcWHbR970AqYHmP0J\nf6Dq\r\n=P2hw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1c156d69d.0","@material/tab":"9.0.0-canary.1c156d69d.0","@material/base":"9.0.0-canary.1c156d69d.0","@material/animation":"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/tab-scroller_9.0.0-canary.1c156d69d.0_1607028391675_0.3301214191026567","host":"s3://npm-registry-packages"}},"9.0.0-canary.832668d33.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.832668d33.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8436ed5ee86bb89532f1e7940f5ad9b1a156514c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.832668d33.0.tgz","fileCount":52,"integrity":"sha512-uCUO8lWo4ZdS2zqtxZdkOJbwwGrW4NjsReoQSG3ozr+Ol6f4llAFAMFW/VQ5fagVE+df9692NcdDjNgO9S7xbQ==","signatures":[{"sig":"MEUCIHS4FNQ8X1JdN2rntMiS/KEGquW3efBNwiwDMZFhvr8qAiEA1T2kHcpAuOzMsJTFpw3VwerfVd4nAWDuLfMfkSKahOM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfynrRCRA9TVsSAnZWagAAe5IP/1AEA6G54vjVokyaGHru\nJK6kHDXvg4ykwLWHygs6EU3WqUslG3pRlVN4cXCgk8ScTu6bBxjaTuqgUDaZ\nBEO6nXhFdrgKTWdbhY08nw/lkCZKwxgFwzcKc+ygsRfPUhxGBL/++y6ggEJ2\nbU2EUaNVlZQcdIPdM0/5D4f5DI9z0x+ILwvAjKZAVk3CfRlHmKiBiiMFsLEB\nwuOkURJNnz6giHti3h5oReUvklG8/qBoZjxDst21hXBII6Wfr+dl00Yotduj\ngMuwOTFMeuFzRVaC6C0pyKaJDT8EI8NzZrRUKWIiN5vXQh6YhPfidnfkowxa\nCW40X415eEVcDXu51Cm104+iUVz982lESC86yJfLBXJ/BvRYqjbkE+rJjIUF\nHJcdiQ46Xs4Alj6qEgR3f+zDZIdKyxwVuvrMHlsJBgpaKfQPfOnIi79a92nJ\nUo7kDs5z19NM/9QxISv/0Zk3/4LtTh+wLpT9D+6rZh0QsWWHO8I+7fnuD4sc\n4zeAeYh74oQLSlLcKyyrS+mDFMVDlsV9h16ZV/QmL5y7Femlnjz6UX+QtSSY\nAliuraN6ItodMPHd38sYb0sWwKxgfbBHy8bfTXtYVvvsbQccPmUcrAf9pc5r\nBP8Cj4r1a5fR6+aaYQwDo3jZq44Bp86bakqY3UINp/A0lgdca+MtNmhn0TgP\nu/z3\r\n=iUf0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.832668d33.0","@material/tab":"9.0.0-canary.832668d33.0","@material/base":"9.0.0-canary.832668d33.0","@material/animation":"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/tab-scroller_9.0.0-canary.832668d33.0_1607105232600_0.9829810776247765","host":"s3://npm-registry-packages"}},"9.0.0-canary.4321323e4.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.4321323e4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"223de8a384e87777dc79035e5be0ae74c299fe2c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.4321323e4.0.tgz","fileCount":52,"integrity":"sha512-/XXOTTM0vsMLmbi6sRVyq+CpQjoCzV3nFF0BvHy8BkdobCqSWZi0HSh3eM0Q3/Uq56x4MvjWJ3HCeYVKsDROVQ==","signatures":[{"sig":"MEQCIE2I19T2bOfexKW+GmM/L9aGUdMZ+c3RqbGZ6IFDRhDhAiAzNqZw8oXfKBOHRT/uDMw06m1epSG2tSmlTS83tDZ5FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzhJCCRA9TVsSAnZWagAA474P/j4PPzL04rZ3S8qwler1\nlLy63exkeP/B+7kAGLrqg22pa+4/Pg3+ZKHcV7A7R0k9Ofm7U+UIwpaPZDiA\n22Wesp6fjb94sk0IUxQ3PGyIMfjRjV9fTqa2QViNh9Qc2bYI2OFCx+sCuGFt\n7CQiMoFhwrZtT4TOAdi/6kOYvzqVlTZk2qvqDdwD6j89hpenEreUo1LidiF6\n2TDY33iOtd501T8El21U4/OtxNbDyQpXaysgIUIp23K05Zspex7ql5DRPeAm\nBDTf8WiIwJnxabw0OBHMkx5ti9jmuzizObso5M/eQKgkJg+sRFC/6+Dh0ONt\nt2dyGnKG6sWw51wMaQ/5tOfyREi3fMuQChsURtZSU0fcvK0mo+GSUZdLb+bB\nNCdOMaZntfdEiOVUyaT73SQOQ1j1WErcNYsulCW57+5tELSLNxOVhHLmvVfD\n2gXuE3tP74on3vMhvfwW8D/qlcqvDg68uoNWNwmCH0q9JqvMfiPrHQlxszIo\nSAL8vit6Cf0BmkwxgnjTHADpf89ziA+bkgtaKC3W8V++flgQ/ZovMnQ1E5Y1\nFRrc2G5aNecuHC3UPnDAPqSJJhI8fulct/LIxihKmwFp5zcP0Q1lvJn5v4n3\nNqDuhQvTM5TA3+pcZQlj+TUoFL8T9c1kld+ps9Mc7cnpohxkXu5OT10rgHPr\n1h1m\r\n=Ixmc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.4321323e4.0","@material/tab":"9.0.0-canary.4321323e4.0","@material/base":"9.0.0-canary.4321323e4.0","@material/animation":"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/tab-scroller_9.0.0-canary.4321323e4.0_1607340610273_0.34247608215543623","host":"s3://npm-registry-packages"}},"9.0.0-canary.2d5f32d41.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.2d5f32d41.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ae87a2af0c1893bbcb97533979e80cb19e85a4cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.2d5f32d41.0.tgz","fileCount":52,"integrity":"sha512-Xe9fCXmIcMsDVDCWwwiwBOqCfoUMA54Sznb09UzFV/m9budsWqPLhiZy7kK5PKIQRMwwtViatXyqNiFNpL5uOQ==","signatures":[{"sig":"MEYCIQCp7aiPn7AlNPvzkBLWUmjqcsO8iIqrw2eDwHKM5C0RFwIhAN6P4M9b07fT6GjdT0PsyQodYXn5xw3UFHmwUgJttgU6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzlvFCRA9TVsSAnZWagAAJ/kQAJWjANJz11HLnXwoDODE\nN6HyyyiY8DKw8I19sRwxhbtOwkgUjqs118xHHpxqu52OSy3z8vcf6DOf57sC\nBlsxPlcUiEaGWLGRVYMlrIBHJ6T7a2UOVA3kZOWVUgzfPA+L9Tg9n1EUjIfW\nWGo9T3a9qE/J1aa0BNDqdj3IS6nORH202rDBO9oZpMATXY+IjTKSpLoRAuDB\nr6O5vp4GBmpkauI49/5LjX6quuqdzS2Gm1ekF9NTfl2QDWp1fMwnnzUCm5MJ\nB5AK1GjddAJRKJlR+wneYbLR2ydqijmRMmOEliuDHKgBLrLwVs3yxnoxOl4T\nMsQABquYB+sCw5co8bzJMf31YS6wtzGotzg6mHuawhdTGReNVeFWrHusOsqg\nPavX7s15ZFAnjbGElGP2BdvvKZ8gfUif3cgRPX/5M07rUOnta+r+ptSPi8yX\nMePdPvyOyL5g2k3VAv/GgpQIGsbt3hb6wt65AcDk4O7xE96fVowHJ5JYW2Ac\nV3TaEyMnb7jVZJL8gteLnGLloCBzPBnm4+OkLgXEaaWk+2hEPPHDDMmM0KLK\nfcDbzphfrUBPab+AryYW87gJMJz+pOSjj3kQ3X4BH/GTy7zpmyzQeKGQkVlT\nhtkbGFt5O8l7/OfK78LRh22A2JDt5nn/bulFduAb9rdVTE1tfOvt83HYoblk\npdyI\r\n=Xu3E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.2d5f32d41.0","@material/tab":"9.0.0-canary.2d5f32d41.0","@material/base":"9.0.0-canary.2d5f32d41.0","@material/animation":"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/tab-scroller_9.0.0-canary.2d5f32d41.0_1607359428739_0.4806509485071293","host":"s3://npm-registry-packages"}},"9.0.0-canary.8239afc64.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.8239afc64.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bd7e4a487b7b595693c2ea5c353d274fd82a0fab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.8239afc64.0.tgz","fileCount":52,"integrity":"sha512-P9NL0Eiw6whMFPMF2lTPL7MOSgxPLMuLKvPN+rkH6XTbNrH2LfXjKatuymCEhrO8QVhOenR6ayEnoL3w4G9EFg==","signatures":[{"sig":"MEUCIHRMFZAROpSBHrQ0rIx/l+mgf2mJal/42X8TlJWVEPGVAiEA8eNMbAEVIko8Ch+yC/3+0xeqZKUTsh2l/uL/PcDHqjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfzoeVCRA9TVsSAnZWagAANi8QAJXlkpu6UAVBw1XxQikM\nAMVrbhy643653aCpyTKfwi7iEZirKHe9/X+8GYBqEbU7DocsK6M9/ShEh88r\n17/oNFLr2pD60FMJerS0tliwWUJTCEftXWSVYD+OfBaNL/OOROV8Gi3zwU9g\ns63p8e7y6JrLsZ3h5uZqRJfcz7LpQfF6PZWm5x2azCeyoFw7FraV9kJsIDDt\ntC4tr9mVQXlaNBBCgGQ3EokKO5wL4+XKB7GbumpkwFZuwOV9EtYwUiDZcQ3Q\nxdFWarf2DxYky1vXZ+W384hoI4CMlXw3FpFdcuy5vxe+GrWxOiK0xyFWu6Gp\nwWwcyRBQrdLzyFIFfOvwQ5DYpKvvpBLeGPyO1yLYiyrFUY4GhRBjO77JGz3h\nBr8ZiqZkeGkl/q6NaBBdgUoOcUzjPgw5+WovSKn8W0ebJZWVHqKBN8OKdblt\nW2JHw4v0RfsyV0EwYxXWpZjD43wyxJOvWOpycs/G+TWnzFm7HkujYbPTmvY3\nX3goNzo1kpqvd0aZJ7fAoGBjFKGpQRQaWiipRUHaIlNO2i7ClvTckFHSLo/g\ngBxotM3WXepmt8j+hlotMOkLfiD/D02V8WHyiqV4nAjluktNyRyAYnRjWZJP\ncQbnmYI6hirjiStZoi5BALzWnggw7rvkP7Af7JIjIhPHGqVPukkG0yif/IPw\nsyVZ\r\n=IZjp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.8239afc64.0","@material/tab":"9.0.0-canary.8239afc64.0","@material/base":"9.0.0-canary.8239afc64.0","@material/animation":"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/tab-scroller_9.0.0-canary.8239afc64.0_1607370645317_0.0728560548705941","host":"s3://npm-registry-packages"}},"9.0.0-canary.6871336f1.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.6871336f1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dcd1c0dc1bab205b73efc21d6089eba79c8668d0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.6871336f1.0.tgz","fileCount":52,"integrity":"sha512-8lWpQO2lsCDcY7N3Pvz3kXK+PyVHysaSgcFDPHKIMtVW8ZmEyuCHN26HwqcyaZ7iSkyEewu5hvHjWoZ9aVYHoQ==","signatures":[{"sig":"MEQCIBF6fphBf8vVituqPsnY5MqXzU+7wzYHl/4AxopZRg1TAiAX2oPp5XzEFfe/LX2eyM9clQrEGyuzVyJHbWJA4vlvFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6OsCRA9TVsSAnZWagAADVwQAJeO8LkQt0Wt/25QJk+v\nJuUzWta5Hbz7bqOOxGQYsfDUi2yGwHNSQegj5PnaPt2ckze4BBCm7Aj7v+WA\nyGmKpNzg91LbLMoYCqiuD4190uD24xbF8LVIT4RmO/czjqKtlWlmQGDA+xh8\ntz2B82CdXmBsm7J3YmxhdRYcmJ8SA/Z2i1zE1St9PphREJrfDV2LGmxoCCIV\nSeaq55LibntLrJABlR9Jlz0inuzMFCa5pi4DR8AIO7SQgsXkPBl3OedIJAz9\n+QCh3qkOxOSR/aV2af8EFVTiSqADs3Yo36S9+K+56VwJQBB4+M2vAxGHxeT1\n+HPwYZJ3qxN2QLJXsLE8cUp4Ml68cuiWHMi6VBuryxLpOimtXpKEeGiaEDTI\n8k9b3mfoKU1dQUoZ1CVLHqkdVStIapHZo3IEl80R3h8Ls5pXTalmv0csM6LA\n7wwnqGJrFB3qzfd0E1LQK9+MyHnF/dQWO77d4afD3mtowa+n/x5n5B6cDJtc\nDFAnO6gEvU7z7pDDuoVDCwNaZ4I0SyW3OdxwdOoGYct1CQ6VK1D9VLJtYUt2\n5T1R9v9vlghAyUdLqke8j1a6u770u1RlLci0JGMBf8MGbhmDcaSUjsmSWwNs\nf90pQgYenYQpXkkiGbgw/KyGvjlNsiQ9MDVr4IigAOwpGkxFeHlmrZHfGIiS\n7kJa\r\n=3tTu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.6871336f1.0","@material/tab":"9.0.0-canary.6871336f1.0","@material/base":"9.0.0-canary.6871336f1.0","@material/animation":"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/tab-scroller_9.0.0-canary.6871336f1.0_1607443371625_0.27331188092717706","host":"s3://npm-registry-packages"}},"9.0.0-canary.9f718da94.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.9f718da94.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1d6fc05e801a4632926f5ed3e4ebf46c6c8bad86","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.9f718da94.0.tgz","fileCount":52,"integrity":"sha512-v+m5EUvHYIunRA7FCpjwlKxGc0eO+m/QTBd6QSbkLp85VN60W7keNuaXet015/GfdsUQ0/7XxOwqOZHsh0NPgw==","signatures":[{"sig":"MEUCIQC42Gw3ZycdnMmKCPE2yfj48/KzqtTWPzlnl1Lk1wiy1QIge3ulRE24H+Z98dwVI9hpApABOAKXUGxEv0HdI2sFDnI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6ZtCRA9TVsSAnZWagAAhQcP/1nD8y3wh1O9c6CNhzxe\nl4m4J9KPuyQOGRz1hVAqjSz241AFNB6pTUxvVGQoZ+Jhuv12Wl0Jnk/6UPtU\nG6X9LrmBDge+5mWC7ydvD8Kefh8Ar21VyBp8tlXTXKvhMDyS9N3xtG1vLpts\nMzD9ci5eW9qyj3opkhcy+aUSXAKEa1cwsTdc52zLVJml0TcKui4iSB/sXvD4\nnX1W9vfxMIng+sVochcEU5wosRu2ZLhp6PzFv8zJaC9LH2Ticvpn93IBbKk7\neJnISry7jH0l2qkFi2WgMkz74qjXm9Y2XFm5OaUVx7eZj9CCtjbNMmOmMzMy\nJiWXhhS9rgAHgw1/NiDrJ9Uduh+5/Trbc/SNGAvmqTb5+w3KhSXU1ry2Yyk/\nbBI6Di6Cn77gbPMclxKLA5xye5KbxziwGH6/zpvdVyrn38hEQpzhRBP08F5a\n5bmo7QI/KvwVbycdoWGOPxYdA86HAIXvJKafALH8VnB2wYlV+Fg0LBMeqoRZ\nefNw2hzBpgna0VDgsAsNyhQEQI8sRgobAL2VU8R7/bL83JnjGJ6AiGgoABAi\nO9qWwaDKZiaQjggeG0SUVC2NYGf0uW/vKtP62ZZB/P7Vc0jjAW2CGo2/2UuF\nVUnWD0SxNSZw/EzeDcl1YeZ4j9gyQeEaOLRrMF88wtiPkmAhIZaiviXRscio\ndddJ\r\n=AcYV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9f718da94.0","@material/tab":"9.0.0-canary.9f718da94.0","@material/base":"9.0.0-canary.9f718da94.0","@material/animation":"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/tab-scroller_9.0.0-canary.9f718da94.0_1607444077325_0.5771323542804123","host":"s3://npm-registry-packages"}},"9.0.0-canary.1fccb1418.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.1fccb1418.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b6055c0668df6f8bba8ddf8f2b25128674080d7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.1fccb1418.0.tgz","fileCount":52,"integrity":"sha512-pG8QPptIR+KOWeH+fEFuX5AnRD0Xtq4SLWf06kbaoWfTl6g7WOSbTSKCHOH0rzkm2IlFCpGw4yh5fF2NQGfO9w==","signatures":[{"sig":"MEUCIQCzWluyOlT/lZT7g6jIi8WBd0CkZ+pliDD1hBEhZRErmgIgYGPi0K0MMSlGQxyfRC5QyT8W9dDqz0qs5f9K3lH73jI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6nuCRA9TVsSAnZWagAAL5IP/2Ftu3+gbvqGye1tucBn\n4WhEq82/5P8y4slGe5qP/7J2EB1lzJcxNin9ErR/5hyyhQwNzMfzaYPL6cP1\nWZ3TLPHV5F50P5Xv3YvTRgkm6wNdKbDH+TSbPSEPwnwjjhCvSLOTAjMRPfwY\nOobTFaxSPCSgteWhvF5VGv9pez3lKskJlmmh+tv8EC0gWaSW04vUMNKhW/Re\nJJAy/pYM4yReWAogPKqqhvSN1FBpaTHTiR6ac8yvE3wBu94/j9dwmx6rtmc4\nP5z6PYEbApOGesP6PDfwh4Uz0FrsXgI9a/nd6pmdGUm5i4LZOyu9p53nnGPw\n2YT0yaEanKZTyedMPP1uy7c1iLM2SPn3xYPqiHlwL2QbUd3/fkGedv83YbsL\nA6MgDvHISTZ0aB+Xh4JhTsubnxrewpV5oHlWQ4UsyCS+nsfDbl3pWkwZAKPQ\nfbDRFfzMGKu6WteOjwidSOxqq3eHpqdISzaNvptvGIni8SSB6sDjIJwVfgvi\nmflE+MvgCoOTCe7u+KSsrfVb+shOIvqsw2agq4wdUIlCXUn2XRvub/lKLcc4\nL6ndlgE/wJO5UHOs8p5H4cSZT1q2y8Nl39Ez/K2TwM9WN3DMkl7MXnsEakWb\ngvBgoqmaVznYDQNTSQgkZYXs/NhmAiC2/1/FMOibu6LbeEPTmMHj67ljpQi3\nw/Wk\r\n=qtPD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1fccb1418.0","@material/tab":"9.0.0-canary.1fccb1418.0","@material/base":"9.0.0-canary.1fccb1418.0","@material/animation":"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/tab-scroller_9.0.0-canary.1fccb1418.0_1607444973912_0.1974084961861835","host":"s3://npm-registry-packages"}},"9.0.0-canary.afb68894e.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.afb68894e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63b88b6a0c4a22a6d304c59fa86cceb5879cae2b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.afb68894e.0.tgz","fileCount":52,"integrity":"sha512-lRozt0dYNAVxNgmCHEojzN6ZWLy5O4f1s3VGatEv2vnjuatlVc/nyWJiC6GJCecrb9eg6HoGWoGnE1ZKyORNRg==","signatures":[{"sig":"MEUCIEePb4aDzGa8e/2mJJOT/h9LIocwpCRBgG/2TNS6952kAiEA96NlApIqnf1lB4tP+cdxS+9VOPZAFtofAPDIAOCprHg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz6rhCRA9TVsSAnZWagAAg9YP/3gdK/rbu4FFUxamnl+l\n90OWIGQAoYKswr4mbsiOYoiEQwGjmBxAA8mIHCpHeRmLr4eSGpC75Fgr8UO6\nkosSKnm8yYoHFZRiKWjZGidyYbIAQa+2xcsfpEZiePKsQo1nZlKYVxsNYHwu\nYwQbl4+yO2MQfqOzGJ58hasXfHMQqO3sMYIpl7TKTNCxRw195CDBSnoZOaOo\nbLVomvmMgvPDNtg9RQ4a9cirz0FgvfGc5atbtALn0ehzCleVtx16XmzgZ+SI\n6sDHauSJWsj4LNQnGXwbR+Eyq/67MYuj4U/q+OjPP3u5Y4il9kQyPVlgVroJ\nTNsVyRq+bIxptYWGx/Bd1/esyGW8OLpsKp5Nc5jAVnxcYqkYIIgWvsQVXAh4\n5Jzf+HXahD45pOr8IfvsywVEZmovixvcEaguAAmGzJhj7Ew3/VvLLILlaSXQ\nXCOO62n3/JBAhYLLZ4C4nrzntUO39YR8aOl4ksLV/z+827DGBmvhMIvmBE70\n3sycmFQX/755Kc64mobzKHbXlI9fIBUDjY8m1ZRwfFS4G0QeEH4Gy3/m8nXH\nah2I01Gqjn4C1hyF3sRSUSOQfRIezDCnmOx1IRA7L6JLdSdNm+rAgNNGZbN3\nKEQ6Y49+MKl9uPD++rAcQ5ve/bUW32zK01nNDtqd+zLvNlm6ij1KMD4cvbO6\nugy8\r\n=Wy9i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.afb68894e.0","@material/tab":"9.0.0-canary.afb68894e.0","@material/base":"9.0.0-canary.afb68894e.0","@material/animation":"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/tab-scroller_9.0.0-canary.afb68894e.0_1607445216912_0.08464558888917972","host":"s3://npm-registry-packages"}},"9.0.0-canary.fd88d40c2.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.fd88d40c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c7b7e357ae90c594e335fa742f8f9afdc658daf3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.fd88d40c2.0.tgz","fileCount":52,"integrity":"sha512-oognAxKsLVuWGN4BJ30eRBy63AOoVBiErgzAjrD519Bk1+4uAnCCDHh/yjNRxtGf4OgfrW1O4EOEEmPzHGIH1A==","signatures":[{"sig":"MEQCIFZzMG2MPrAOr4Eq2zpmUxvS3Rtia3fGqVyiVxB8kPAJAiBpnCjJdSTuAjOPqDyfwjaRSnCg3NLOHCSTG9pqrxdlwg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz64SCRA9TVsSAnZWagAA5AAQAJ3mNvgPV0RMQzAnwyY0\nX/3VF6pn6JKtCb3u97ZRvtFqjC82ZUnMAIlIWrg4o18JcoFh7utJnnutvTad\nnnXzJsc+c4P01Ii3x/BfEHPaSclObnXGoQBjWNzQaAAE2IT1CoOAgNFwIUDu\n2jD4XBMszWYPWcN1PL1PYImQJyxoiKRKgCABC72BEsXbz6wfCZgim/33VaO/\nbAt/1HKywDitcSpsQPOwCNKb0Pv8UsepUDJDKOFK14k3FJyU9Z+HU2kKzaTa\nqjuLJeaVr9rFxe1znMjLxmWIju2s3WUzKSHCkf+P6saBBVtqKdfld0i4v7N+\nyHMLUCUBBbj4jPNn5yB9Myv6QTmsJ8iW4GVJPKs7j/sami1eSybj9PNiaX8V\nh0+qGSD4XxxhfkCmE84Xixx6hgUEmdPN3H88SgToKM+bpR1AaxsukS4zBiJl\n6Qancg2FXHM8zWa1nTaeHYoNrmBjjFZfaCVZUFq0Qp/DtYs1BT0Xm/viOnso\nUCW3ppGDqphswP602V2e8bk+KEnb+yRjLX+MicNsgudt1xi+R35YvJ04d+Ux\nuLdcIJq19GaBQHgvPi4nWyG5t+X/igXKhT01I/yeOM6YLLnsUmLpew9HXdf8\nriwZK0W+x5Q6Sf54U3Xqrd0Dbk3dsQKM3fR2Alc1NEHft9zLY+5gEwgiulWB\ny5gk\r\n=+HQV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fd88d40c2.0","@material/tab":"9.0.0-canary.fd88d40c2.0","@material/base":"9.0.0-canary.fd88d40c2.0","@material/animation":"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/tab-scroller_9.0.0-canary.fd88d40c2.0_1607446033726_0.14805943299319435","host":"s3://npm-registry-packages"}},"9.0.0-canary.ba9e3109c.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.ba9e3109c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9d71eddd553493612af63850d9decdedf4999ed3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.ba9e3109c.0.tgz","fileCount":52,"integrity":"sha512-iK95KJfn7NWDbW01nPldWgmR10CM4184bSKfPLgSkrCnhfyAHduQmhz1/gDB8wMrJNwB7YkO0Dlm69VHDvub4g==","signatures":[{"sig":"MEUCIQCU2G/9JNiTcMWl20Jf5feNRt28ep8laSu0SB7KIVxs3gIgNQt8EfTY1vPIMsTI5yQdwBymSAthJHmCZ/dakuhejgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJfz87CCRA9TVsSAnZWagAACMwQAJPoRdjK93eX66mZ/Wxt\nAMnQsv6q4MG4jEzW6rmwQz7I7Ef1nbliCKFCZrtj8I8YSGFNGrYYz8VzfOoK\n3eJRXwQxIIcnPROJ/MDjiixG8P3mncQxxB4ObGGeLNsKS0WjcIYcq2z7pTTI\nTEEs/CZhXZL6mQ40zYvw8xDZ9TsU6p7MaTvPFCl5tml8NGD4uwFobq6hhLUS\nWCdwcJYiNYkxqkpMujpLBdqOTrZWMeHzQdmKnfpxvpsz4lzO+E5goQbL0up0\nYFQqVLgWlQGjy7CEr2RB0mI5B7BHlGKmtJUzao94xRbBlOrza99w90U0Gepo\nO+Ba5s4M8CoiRWBEJdhNqIo4iY5pw/zJnqUJaezHpv3eVY0t3pXOmw+Hdn6p\nWWv1tLyL8y+QWh39lFqYAuulOWgx/wEAdxfaWc260Nd+ajeMtSiOm2oVbDZ+\nMFCXL58llpTtUuevG8/5AERRMqoD2DLqKiEpeKSHo2uaaOyfiHPVbGK0qU0O\ncRBmL9yfl5gfx0SInfc3mBuF/m6aTZDSfUA4b0teAia5yQB701QrVsc61acL\ndKClO8/0jnvJC1N8vFc6mHbMqqWvNsq1FKJXZistbn5wGOPnekQbf9CEEluH\n6fezd9fM2cGKxiUSeCbNrt6gMfvW60nCt/NibFJWXR8DvZwAjP3I4+LLFkBJ\nVfqs\r\n=t9BY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ba9e3109c.0","@material/tab":"9.0.0-canary.ba9e3109c.0","@material/base":"9.0.0-canary.ba9e3109c.0","@material/animation":"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/tab-scroller_9.0.0-canary.ba9e3109c.0_1607454401839_0.8329420870187063","host":"s3://npm-registry-packages"}},"9.0.0-canary.1085c3b2d.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.1085c3b2d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"45c974d46fb605c75522edd36fbea17a9d238b3e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.1085c3b2d.0.tgz","fileCount":52,"integrity":"sha512-RGzfeLLz8e1BEXMGb2HxHa++rMsWFDGkwZOkMSAw1Ft4DyXRoDRjaei8iRrhEpiE7YqeBK1RBL9M41tF39uePw==","signatures":[{"sig":"MEYCIQDIuk4fCO4ajxwOJp8hNJAWiG9WXabdH7KMdMVZcGwa3wIhAIrX38miABUxQ5RCtXOY8IpF1X0bB3ebKQTl4WmKavuV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0SGRCRA9TVsSAnZWagAASVMP/2wJNsEpLMGm/plBOW0E\nngBnNeuHFObvQDG8Gae33DhpANSyDHyxcmvf6g2mzthNPWf+gBzbsHbBEuI1\n2+zFF3fgde6vcbSG5gRVGZhI/bdQ5EVyj7NNNt6EYX1ZwlW+zSPhbtHrHYFI\nsEnOBwfcllaFpO5RdPtfU1vFuhjl8wGI1NH56Lt80BDIb8A1yyvoZ+IDoRJw\nfqJmqCQdSBAu1C8CGX98GBY4Bb32fA2Rq7i1xQKRlB/AE6MPE1nH0hojYTjD\nEB1YGSCQ/cnzzY/Yt7dQZ4yWyVWONi+kpxxfA1PqLmk0wt7pp3PGKTQjpbpb\n8+WyMEzzDGfv6mA2tkWvGL2TiOTpxqGF9v8rVFDsl3xiR3MXeG4mdfhJQ+MR\ndou1OP/6Af2naMoQhBeIHMC+jQ+2Cm50Bl8b78g3DUtlzw37isEpTP0dku8P\n/VQz8HR3wcWpjdl8mvjvsgOGvlruSSzLpDToeWxRArXmN+yI6p1R/uFaG2YL\nGz9QbNFlswkv/6XETGbudDa8h1LQkM3J2ODBL/3Vz0S35OVdI/rHXOQTgQDP\n3+4bZazWwGGkI5t4dTpNhxHQq0c6FtBmbVVbOE3uZphjEUJKI83ITzjGgn36\nPOEvd1nIEn+y7sftc1xY2U+KU6FCeIXhFMT7C9VJq1H4721wtu0MnmJOwqVk\nHS1X\r\n=4mOe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.1085c3b2d.0","@material/tab":"9.0.0-canary.1085c3b2d.0","@material/base":"9.0.0-canary.1085c3b2d.0","@material/animation":"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/tab-scroller_9.0.0-canary.1085c3b2d.0_1607541136848_0.9785583657814865","host":"s3://npm-registry-packages"}},"9.0.0-canary.c5dda809d.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.c5dda809d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ed8658aacebd1710281f9b7e8f89ae516200f660","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.c5dda809d.0.tgz","fileCount":52,"integrity":"sha512-vFt6EFA64E/qLgo7oycpozxJ2/Vuu/mNRh4ESY3f6/H2mfNYrg0VWhRjM9o0R5hIGNCOW9hiEOeDBYZzIGYh4w==","signatures":[{"sig":"MEYCIQDCxNuFf89c6+iOD+dKaUGPHOz6xJVanbuJpCGfMKmgswIhAJ2O4UXeuc66VCakVT3OOAma+mRHuizU88uUdFra3R0R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0TjLCRA9TVsSAnZWagAA/FMP/jVAW0QvjRFVQ2+6oaFu\nHP2wNV1ogzFT8Bkc6BKdVT7lNBJF85oFlY3zgkob+5Vab9JgwD4K9+0FKZDe\ni76/c3W1Lz5I6RBNTSrKpT+e/dBeu/SSFjUcYfsXK1rAxufzQieFu7e350m4\n9eIMwOBWSvc1i4Gb3cBYp4wZ82kbX/Ifi/b9rRmZUpXonOC1W2KOCOifM7d2\nrpofVVIZbHBpgMG4o60y6sGUUjPE7OmJQGeHJRepHqeNvgIWcSHteKqHaPBQ\ngk7PEVVJ3n+/OgC3koKw+ZSTrCihuOQIR4pPmQQb5idl/WR+GvgJlE2NLe2A\nykIkZfYZtJEqN+tqepUhRW/rHzuQd7YU+s7DjuHJkcCqxiEasnBazd0dIKYi\nVXEQPnYx6aObkYlrnzkdlZsopbYJVjD4cSdGpl+ntwI34z8ybUTgAH0QlUtl\nrOjrn9bti9XIJXL1j6pAhoSgWVS1Nc7PAgwOozSF1swc4v6jfoeknUOX22GM\nWhg0/j5FNZi4JC5MK6LLMmvtRcz5jTyvEEQ/DbiCOAkXz/tNr+R3Zo+D5XoU\nXg4hxKe+HK7KANgqrtPPPDwGTLcUSrVZEwatoMxpDWtGta++OB/pRGDHy3A3\nPFJyDTPody6ecCtkosN45Gzi2eKPK+x8DcYzDzvSYqFc53JPoWxTPIGIEa83\nqGme\r\n=wx3n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.c5dda809d.0","@material/tab":"9.0.0-canary.c5dda809d.0","@material/base":"9.0.0-canary.c5dda809d.0","@material/animation":"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/tab-scroller_9.0.0-canary.c5dda809d.0_1607547083024_0.17974360183695381","host":"s3://npm-registry-packages"}},"9.0.0-canary.f5f1bd86a.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.f5f1bd86a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cc73fec8d1c7eddb262808f25bdb6f4e397958c7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.f5f1bd86a.0.tgz","fileCount":52,"integrity":"sha512-gG+kIW6VSPDsPA0iF2I3YdyJxQehA/5KVN/OJGle7Ui0uTFxXgpHdJBhet8ac+iAY5Gp8L4MEKKLXr70YblOlQ==","signatures":[{"sig":"MEUCIF6c8SV2x0kklB/zS17tnp6wDJ2pM7Yl+Os750pvuoNmAiEA/Q2FaiCeCK8cQIo3dFS/z3/2JVW6BkGuy1E5ht+Jgvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0T0FCRA9TVsSAnZWagAAzzkP/03Cda7C6TkZ1nJirh3A\n/hbpztfNk4yr9xyBkciFhRU687nzPZv7Wbvvi+T0uvq8DHE8/sWjNB6mn+6P\nCIn6L4bzlQSlkgfSoVWe1p8Zbkv7YqWpIppn1uEpOTHr1zzmgN8yIS11q9YL\n+49YV29rE2GEhXE6H8jNmZDWrwmmbeGOTKV0tbdWFKlyvJuJwNC2MylqD97O\nnLrlmo5ztsnQhsAUmbHSBc+Oq1Xu9UkYXF4cbbDK77zh17sTNVR/JRa0XdCB\nbFH7f5IkHm1jhDIo6CbFWb7mbwKVBrC0d/dANb87pD/4oXZPmTYpi50cBRZM\ng6yDFp0DgguovyuFDe8ysHD/W7Osexrwl0JkcFKUlabe/418TkhVecQf+pDi\n4dVfGPIJuX2Z7UnlR+TGo0dVKx/XwEPyRTK3z8XlGjlfGiuoxwLu52HA6dL1\n0X8xqVjRB9k6aX28X/8Diz/TAYNfOT1RJ4j84GX0knwq/UU3Md1eqz8OXcS3\nYlc52E6Au5f8TuASQtq8+Frljim8oy97dQIKXEeXGByPsDciNkS4BAidkbOv\nG1ynDRVS4rgBVViF+GVB31/5uFWobvZ8QLRJDdsmYKdDliqubaM5QEuMEhu/\nwwc/P1t8gasE4Q+y2hcy4yfBNWzv6ElgDGLmo0gAGQ95qhrlZ0ka3vaysd1E\nZh2s\r\n=H/7p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f5f1bd86a.0","@material/tab":"9.0.0-canary.f5f1bd86a.0","@material/base":"9.0.0-canary.f5f1bd86a.0","@material/animation":"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/tab-scroller_9.0.0-canary.f5f1bd86a.0_1607548164829_0.9464227378354753","host":"s3://npm-registry-packages"}},"9.0.0-canary.00f38200f.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.00f38200f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"effbb72e4a1c9cb8a428e8f27fcac09c4b9e75ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.00f38200f.0.tgz","fileCount":52,"integrity":"sha512-8g5MJE1Ks0kyYS5dSlyEf+nHOQ7MCXlka0j32AJQh8Jas3MlLOmKF+MI57Cm2WJYwRTLyz0tS+Xn4CeYt0Bbjw==","signatures":[{"sig":"MEYCIQCPPYvWmwDR14e+HnYI4bzfMp2tXFDWfhQu//PzYJPF8AIhAN4ajR+szzv9z8UTV1jGTTzvQvABVjSFAUUJ3XBVZwwk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf05SPCRA9TVsSAnZWagAA7QoP/jx9Q0570effWpRPfGjk\n7rRw1uGsEdsya24npo8z61J4bSQIPwfTrgazVGo8wLoMm8+4nybKDUViQhfN\nafUqJ//t2NsJqo5mfiUoeHeS9ttN7BW319QaJ/KqkflvzPt0dGLNATzZ0yJi\nPBX6N4sgQhaBljROwDL/5uH9U77ZwJzl0Ar3CuWYLP1+6IWQRm57FXuwqEj8\nP/eWLZ33VFPRxi61zXlG6kqA3BnBhuKihgdspeKgSwpGqOoB0wGNj2b7UV3x\nfTLkb34iIvmyOwSe6tKnH2My3Wrnz+ru7vbPeDxbunCLdImsJQAztMI7yJag\nxbgLQ+P/s16oB90gVMFCjcVGFpuvVu6jq2/vJJlANkL1zm1p+Bwa6AhnrgDA\nw4s0vBDSlTUmFMDsa/iMkqYddaCefxO9PgqA9vD3mAzGHYDj0U2Z95oNCEEB\ndvUsgVq6/4/z+eFPrBsXtrqXPWjVsHN0T3nrGXBlYVkXxnul1vKO7ObE5ZKG\nGCaFNZ9ifjgpxgrZ6yIFTCD2s4eN/rUwbAfhS+J+MvV1JzvoQPKAyry6fjbQ\ncBWgp7iWRIKSBZqob/QAEHg41yVighbbhZXEzGrrBl8BlGOno6ok0MmUTsB4\nJHIO+FQTUFyam4mXN89SSdD9U1v/4KGWg4TYaLhBPY4E3UHwodN5OJOX1h3u\nKHtu\r\n=YOja\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.00f38200f.0","@material/tab":"9.0.0-canary.00f38200f.0","@material/base":"9.0.0-canary.00f38200f.0","@material/animation":"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/tab-scroller_9.0.0-canary.00f38200f.0_1607701646625_0.03966004683042823","host":"s3://npm-registry-packages"}},"9.0.0-canary.ac41a5729.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.ac41a5729.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3f4c402a165096918f8a779b9d22999f6849adfd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.ac41a5729.0.tgz","fileCount":52,"integrity":"sha512-eEzUNAYC0TjvRnN56l6d4vzd8zqqOGUUpVjhKfE6SeXPr0r72W/T8Xnf0672AJ2pkO3LqL5lxxdDBupBWZmxug==","signatures":[{"sig":"MEUCIQCN/pTy3TpPmK2eycmIqlBlui+DeCt6OQrgfUHotLVIkAIgMCsQBqrFvXpjoYDC/g4YZOMy3zcEuVmjwDA4t+6z8og=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf0551CRA9TVsSAnZWagAA1RwP/jF8py4HcgFi11vqpdxT\nWj46768HSj0oCn6U2wxXzkz+qj5KLMziBkSJgLoycDPiApfDarDTxw9knahR\nYZhAsKV8OfiIwldipHlI09nCByH8Ed9tD1BZSSrlIA/sbq1Maa6r66GX7/Be\nFTpYr03HKoZikh+81bkSYEwTMfp+6U1VnaZxmzY3rqsWXxo5gam62ibf/Jdc\nnSAGagDj+pKV58AlYnm8uSM0dZp+x4IY1wnzPHsfXH7mCS9vqCGibjwbRtuB\ngYVEOLqeNMDCXA/jh0ZH7enNHoPnpOBuGO9LHdJNeEVVLbMKEXsyqn8FkDB6\nA3+C/sRkMv1F9dK9aiI+RGTauV/fYNPOk6sHT1g2TUritJ0ClP0HhsAODMpC\nmBEtJSUCrmAjUpVMpK4AvUuF1//+rKdfrzPh20SjyFPk9NRzqMPVsDNp6KaE\nSI903n+uja8CKgXtZGWbE5mbBZcpAekS2wnWGVAiAPA/0bd7HsSGItQM4IKK\nOBl2n2ioIX8k9FXJnsuGvMPdtUIFozX4ym/9pE8fPP7sgijiP2qUalFZM41r\nQ4d2N0fhVckaXtHqDPvXrPnqvEkMMqH3wOhqwa73UJqM9/ygq/eV01n0sbyN\nNgBCng1Zvzbp+7jMvmNb7SrRig1IljKlOiZZBSakAV/DEZJE8ZTxTvOYOJqX\nOdU8\r\n=ATlu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.ac41a5729.0","@material/tab":"9.0.0-canary.ac41a5729.0","@material/base":"9.0.0-canary.ac41a5729.0","@material/animation":"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/tab-scroller_9.0.0-canary.ac41a5729.0_1607704180776_0.7511788388400524","host":"s3://npm-registry-packages"}},"9.0.0-canary.7fe0e4f05.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.7fe0e4f05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b172adad8a9757516d7d81370ceec993ea6f1f59","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.7fe0e4f05.0.tgz","fileCount":52,"integrity":"sha512-F3aSBdgmsLYusGJrmhbgqQN4xjFA3q4GlAQehP3+lz0UqgkvxcQ6vs25rMyvjg1a93dgN3UQqOkMKRvakjlxAw==","signatures":[{"sig":"MEUCIGS30VSYJZWk5YM8IuqTxJ/JDtxc7MHsRoDnd+zwTtA5AiEApdGjuMirinyMMR+gv+gCZ7QxM2Zunzmd3s2GnG07VYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf06coCRA9TVsSAnZWagAAESMQAIdn5BQwcqW1tJoVw+A8\nyVoBNBaLiFHtZbeS6OHfsLDEeNaLCNSWx/xR8euM6AOmqJ0hRZJQ8d3XWM6Z\n/TAoNer1RLyrwJZ8QnF6jVguUi/OCOnUxKLrqUols6sq676Yo5gV0xDsdUMu\nn2lyAflOAE8Hm6MPFZ7ta7G+/b+mE3IGU2Nvseiqi8b29ovVZad0fA8C/G4q\nQF+wTutxsUq8n7PHVEzeNbwqeBcfdfWjy7Y2GwGMHf7DnbzQMG2cf0xEFj43\nY51F8Qiw8lF3c2gJ2jNcx7Eu8htEgASRONDsrqRslFPnR/8BcV8NQo6vP2Au\nP+QT+4V9ISN4IajOwPayQZ764mNuye8c6OiaOZlI6whqyKSmnxdvybk0XLTi\ngnHbT4v76/53sT64i6Li8FXx1jHDH+RuBfp6Tdp97vdg7IyZUTNRY4PByYF3\ny9KQoNOm4MCNhz1I5UCbQ7EA0zpRPTWbbNhFP+HxlHbHXJztHvI+SF7DHyb3\nzO7+MXmThUztc1scW48yk3Lv93ztJbj3NyCfiVvWSTXT3hV73AfvOK4pJp5P\nZABL6RwEhk14p36jWBzfdcTueIXTWJ//gmo1F4RQV1UJwHqcQ/p/Le3cHs3L\n5Gi0DiSXkR8lnLBfIUZLSfpBRQbu+d2pMu7a8y+XAxXsHqiBXFRrVsWvVkeN\naHJ3\r\n=KVOi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.7fe0e4f05.0","@material/tab":"9.0.0-canary.7fe0e4f05.0","@material/base":"9.0.0-canary.7fe0e4f05.0","@material/animation":"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/tab-scroller_9.0.0-canary.7fe0e4f05.0_1607706407983_0.7573472919423869","host":"s3://npm-registry-packages"}},"9.0.0-canary.9244508bd.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.9244508bd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e170b651fec5b878652e082127ee26f9b31d6449","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.9244508bd.0.tgz","fileCount":52,"integrity":"sha512-OTsI/AIo8M+TqR4kJsXGEHkDD8s8dX/9W3f06OyxYEZZoydxJ5R3uq8uYGcfzzcvz0o+xKIjXSnUIhpghKA9uA==","signatures":[{"sig":"MEYCIQDrf+eMvL0N1AcpVFfL3YAMUWzgEYUYh/n4mHu+1Y4ksAIhALdczGSPBKh5NJDOcNwF6JMbEx1u6hUz8qzCzpTTlJm+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf08OyCRA9TVsSAnZWagAAJA4P/2dhQeynrBDwF+TQrGPe\nx5u6TYIyzBQuBPD7IJl8Qx9INcyrEmhoBaM3BwkvRdgbb77rqmOCFnzBcZPk\nz6H1OJgXTozd0kJwCr8+GNTQbDeIAQYrrxzLFaXgDhbvZVOaXIC4CqpuDM/a\nQ2NWa2GQSfhUQmRypOEy/UdLcEfbJCcpGx0gZBN2ZNBsBIuzB3dCa29CxGMW\nLFMnbV83X4la+/HIZIDPrZ4CaFEUnqur0M7YfagRqHKEj3Dbe4dPUSZwuFlu\nlL6M+1EYmBFVexIiKEao3N50PbywhbvyEMr84BgqolLuX2ej6IcqLMkDqVef\nvkFEq39HemAeay1lwcSqRxg2m538jA34m1dE/1nrQpAH7G0fjdXlcsGrm+Od\nk9qPjozRjixctjwM1vDNI6NfJbLvq+ww+c99UKTzTF3znA3sgSzyXO78KD1V\nJ/FFmmdyc0O/e7qHHMwCgyUJDcaQnstq0mpF1Odtx3cu7dMENb5t0GAE3mkr\nUhdFMtg+y0NOk2eyQLvy55whNx4hePxzY6TTyg06fbKonCtQakPbdl5P2GtV\n7xhccPAcaZgI9IA+uIZ5pRZndTwl9ngd+lCGYBYD7HmU6eczjH+Cl2rfXRu5\n647rhN4t5enP394+qQ54jBOKQ7YPpHczuRFoIe+uaSIRphEs0bd/IuFYRzit\nL/p8\r\n=3ppR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9244508bd.0","@material/tab":"9.0.0-canary.9244508bd.0","@material/base":"9.0.0-canary.9244508bd.0","@material/animation":"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/tab-scroller_9.0.0-canary.9244508bd.0_1607713713995_0.8915053199884242","host":"s3://npm-registry-packages"}},"9.0.0-canary.384a8eeb1.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.384a8eeb1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0d9df8addab61ba0f03d259557d89294ffc7dd1f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.384a8eeb1.0.tgz","fileCount":52,"integrity":"sha512-yLw7IlnWFGffPHEg25e1QxgTRJVC/zjH4ShJMMrUaPFyqOxffCEBBkrNBj7YD1ZEGszN6UD1HIDDU7EDl2uHRw==","signatures":[{"sig":"MEUCIBu9mHl4UettRSnAI8lb09X2sYRydahafYTceyZGXlDCAiEAisiwfDZw/RMd6aWDo3cAxkg9Pbvct5UuELMKk9xTQnQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2j3HCRA9TVsSAnZWagAA6ukP+QE4CBbrsWoLdIRc/t5+\nAyrK6fOZ++iM3io/1QPjP/956XdSR4V7v9h0OD76cAhudAdvZEqE4oqIxdsG\nZeRHMangLOY3Fsei18vdKCV/4OVMTJ8LFpCwaVt8I/LgUtO+9ZSEdZCjaiFh\n6vM7msos7nSbPBo8q8rmbLshWvLWn+KLXi5M0mKicwIfrR/e0Ctd1GlCNJHc\nJFqP6pTOclkMoVvtmLdrRwKaycL5/zmwUwea8Cri4iF5BLmRwYr2q86rXrEA\nVYSjfwqgjtk6e+cj3Jg8yGflA1BIUyx55SEZeI5aNNK2Nc0vAskbiz83yvFO\n8koUl+JTYc+h6y4hsEg7rzSbTxPu4QEf/UFT9CuW311HSLSfPKc3L3+C7Izm\nOOrqsOBazyIXnmAwK94hpYIfrAt5eugE1PJ1EEWx9HLvZGxaZRDnx6LIeEKn\nerXDPCq9WWBnn9+mc1wWPug1DqOe7DEObHrqetTqKbH9mgkkQy8Ssg3NsBB1\n7KXxxBAp4NVzupaYP52e91wrfXJwLaZtZYn3+Cs+jGzG/OLWH5gisCyvFDwY\nqzCiRz2S8Uy4pPDXqAR/XST8qaI1qBR7GAM/GRwVVH6zYusIRvteJzmRjce8\n3+FERTxCMbscINAW5/zAzWvfboL52Zhaeaf4t8d1Fr7CMIriIP2Hd7mfLFi0\nkiHu\r\n=eWoP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.384a8eeb1.0","@material/tab":"9.0.0-canary.384a8eeb1.0","@material/base":"9.0.0-canary.384a8eeb1.0","@material/animation":"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/tab-scroller_9.0.0-canary.384a8eeb1.0_1608138182732_0.431597709047965","host":"s3://npm-registry-packages"}},"9.0.0-canary.eabf9d5c2.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.eabf9d5c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"00ac026af2b13d8f54286a3e726be5404510fe9b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.eabf9d5c2.0.tgz","fileCount":52,"integrity":"sha512-6AM9wbbnCt7MTnwiMK3a70G1mJsskMidEKlfkAsOwVyjlogSBcVREeRV9tHMrrP7Q7cOWhUdi8FZXxpBF5yDUg==","signatures":[{"sig":"MEUCIHQeNy5PSlwaOeJ+Ka4CEpeskr7gm1CbwBOvj/a4re4KAiEAqgItHrr9h/4Ywmgae3nW7wRCwdYGRPGg+PiXHuhJZOQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2lHiCRA9TVsSAnZWagAAVTAQAKDfrnLl4cNxJtgAzdjr\nQYZq95X1sXclJlhDJSBVncLxzqB4fhaedDvcJYaDmzm2sefrthwjIejOGRNI\n30HozcdiFdsa0x0u1YziJx8eYfLKVCYWhlqiEd7wlhcsZZ1Pc0CganQ4daJ8\nH9D3f+p6sid5z0F49SR8XPMVhLuDjIzcqMXzlqEnIBo5GHTAIoBf0PD98kyk\no/+JkB3lHewt/e6QMfGDuep/zlTlK58LZTMmmhZaXvgSyYzMD5Rz3Ri4f84m\nf0CwmM3WtW8L57mqEmPqZvb2db9fLLWnAfMygdawaDg4vQFOblmIMQKx6K4i\nBhve5av6C2Fd9CFvffnh6b58WRmXLo+66d1GLuJzzj0s91d636ADO5scZBXf\nFCjB6x97h++vdXLZEHwalTpw6jot3JvmQoBxX+ZQ6xxWGXt/H/QeLSCE2xIr\nWlXpeRep10FJelKngfnX8juGQpmBIw2fHsfCjNRRP+M73Tdcf7ULGxZaKJBI\nRCR2Zi7UyQi/E9IgGqWgaLsKbflRMuVl2bNtz3B46hXQUOZqfu64mVfdVu3a\ndWW19hRA7h5RZV6AjTmG/A4NZQ5pCdsMsbUHG9fqZN1S1jBJtNn7u4nLJAL9\nclltxnl/6zJbX3o7yviXhiMpiVlKD71EZ5Zr7a+mYIzkdq/QUzp4i4hx+GFr\nUuje\r\n=HOmO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.eabf9d5c2.0","@material/tab":"9.0.0-canary.eabf9d5c2.0","@material/base":"9.0.0-canary.eabf9d5c2.0","@material/animation":"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/tab-scroller_9.0.0-canary.eabf9d5c2.0_1608143330349_0.311550428473067","host":"s3://npm-registry-packages"}},"9.0.0-canary.30fdfd06e.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.30fdfd06e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"06340699c3ca7c638674a666138892b474c3a0d0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.30fdfd06e.0.tgz","fileCount":52,"integrity":"sha512-0Gu9o8xQ/YNFY4cVyAJgWyIIijMNP5sKKpN8jCDicS2e9ql+Dud9xOrCuvijah4i1XfqJ65Il1hGySWT5DuBbQ==","signatures":[{"sig":"MEQCIFz7MazHQDMUFs8T0d/Icvnwc7uzTu8sad48Y9XRdZ4DAiBCu6lXtC6enWH4wyCuwXHazTkwuX3Li04cPE9pAZUFTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf2ls6CRA9TVsSAnZWagAA1x8P/j25rn5XM4GR6cMXhF07\nHR4FBQo5wjzxCttugomSu0IvymDFV0PYA6ALTeA7N/pnt2XEmwrw69d53wrv\nFb5Jfyyab3nEhrq2F0BR/R83/jeZk4ilXJ8Bmo9b6N1WhPLseA9TBcF8WHjy\n2PNbDsiTXF9xWitz5evsf5oeOZfc3qKgKkeGgepjZm+kjDqFGbxIs//1S6lf\n8GyuxVcPP+Q4hRe4BiP2qbc+swyxCUg0Hsece1GjSRihjXq6+CtKB5LHJ4+I\nNJEe2TFBL5LfJgUrO6UC91b4OK6cyP330xdwNGzL2lT8I0mNs2pNI7vM6IAw\ndROpHG+O32V2vvGvDkMmWtFvWUY0eParwQ9ZqHxuVX7AlEqtrrFzApZIx2Bn\nEzR8AuuFnrUlRPm0UevGuXA5nRCM1k8FvfPDkX3ZcrbUsp/FMyikOZTa9A6f\nzAsfImVYZgAVfcSRV8wF5FJpvvouD24YHYoVLgdbYopL8k+UiVVMdHCz4Aic\nv92PrOlQEK46p9AZF2LOAgY2ziON4XrRSk7ikoAaKd+2XMrZEqOBwr8Uwh2C\nirw1OyxBbpnJkFHS4Tl2I5HZhW3CWxukdrkKgEAlDZbbDSeeVBK9+Yx5bFes\n6cTv55UOsvcjTqnFmp5n95qPooJ1NH3BnxpeTfQfNw6V+u+GP2y8QQlbcMsp\nXUoa\r\n=P2+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.30fdfd06e.0","@material/tab":"9.0.0-canary.30fdfd06e.0","@material/base":"9.0.0-canary.30fdfd06e.0","@material/animation":"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/tab-scroller_9.0.0-canary.30fdfd06e.0_1608145722517_0.922275084386694","host":"s3://npm-registry-packages"}},"9.0.0-canary.9590a8f90.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.9590a8f90.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"51101b048f619c78820cdfc92b695e1fa87b4dfc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.9590a8f90.0.tgz","fileCount":52,"integrity":"sha512-fx4Ml7Kgl6EM/1ZlmLauZv1cZoBIJq/RFWnOEBF8Q38c2iyXSMTo133cQue00CwY6yRKmrcbPyJgSX+j5eYcEg==","signatures":[{"sig":"MEUCIB4uvuJ+5NU8m7Y20d0Kuj/8L+CY0UqojqXB+v+yD0hfAiEAqjXakQLAl4cC/5d5CCEoN66hF8+ImmPGY0IZ9hkr5DY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4jAzCRA9TVsSAnZWagAAeZEP/0D7xdAa7+Gq7HP097RT\n2A5FHg/yBg1g0nGxEZ1andKKUEAfK7G5pT5gu6qybi79LLWkpC7s0MYUIFTr\n6/bCznNt0W7UXol3c5jtgch172sZPk2n30BgcT3jOXg/9JfS8rb01CDgrsU1\nnNAyJ+JSg9ksi9opUWowFtVKTumwTcSScbkNtS1QbLIvf+wsNqnINaQUcmr5\nsEKjMaLSK4P8Sf+dnQLWNuMWNB4tXadrhyAe2TTQWOB/6+FN4OxbdB4jaA63\n7tXljq0vGm82FXAofO8LwZCwUaRs7OCQIm3Zg+b1KMzWiFzKXeOuqloR6YZN\nDq5VY3ORAJEohS+TGKLCSaMghIgZeGkCkIVsul+cXpMV8VACitucpS81fSNK\n5tGd4m5ymlpFAO60Dk/Zj39Z92HCEhJzyTIir2F2lKUAjL+vY521gJ3tbLzX\nUyXNtrVgIm/PnIJzH4CGLjEwOn/RNoFU0gY4br9T4vbqvpg6EgiaOmZgMRu5\nCNMzQ3QWlchIw2UFqm7+IJYVIY36vcbKVhmHoXu0Ukst6knXSGSV2yX/sSxG\n+iOBuh+55Xp7dKmhVW3U2dQtARqL9E148DupCsuRD267mhBl0ZYZFrZpoyBZ\nnMnkGJHdtQ9YBkUMRAJrxjKDW77Is0Y8LyWr9iLxgq6E5mpA5l2iQzRDHJUy\n+eRC\r\n=a7kY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.9590a8f90.0","@material/tab":"9.0.0-canary.9590a8f90.0","@material/base":"9.0.0-canary.9590a8f90.0","@material/animation":"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/tab-scroller_9.0.0-canary.9590a8f90.0_1608658994902_0.8699209028359829","host":"s3://npm-registry-packages"}},"9.0.0-canary.f89d8b8f2.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.f89d8b8f2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d1150f43832f6bc901574a6039f2bc72eb8f8ae9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.f89d8b8f2.0.tgz","fileCount":52,"integrity":"sha512-I1QlxlZQciua7ZjcbsIrfHKpNB702O7BVSiN/S8dp0K65+A1EV4HwnNVvKSM2tqxVPqC9+PRmMZewBV0e5pnCQ==","signatures":[{"sig":"MEYCIQDkoX0hSHf55T3fiCWO8I4PCfgArC5IEq2VwSlZOhhO1QIhALwA3EGPF6bdWVwnow3K+lLqR9+Q9mfzZ8ra95g5bM7V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf4nvzCRA9TVsSAnZWagAAqNgQAJHt6lbkS4WI3mNPOgZG\neLs3aLCKaoj860NQfCdRAmB1n2VXGCr0naI2aHBrKkPp20AT6PUT8lEW0RNJ\npSUtT/xFY19AthHeGV7iLVva0ETNkiAIrzRf+Fxlb0AQE1H5r549uz9k+3f5\nDLXdtU9z4TVuosZ0NcKSg8zDSDuykGObubWeO1CgPCzByNmnQTqbCveHakj0\nAuz7uzHt4JTfe4Y+wYqVOAQZ9L+S4dTUioo48mSvGYR91CwgXq19BPq3Y2H7\nHEuk4qReYe+ZZ69GQJcjRPVO0fkfshsYijof2N3ahrmx1Us174BvVzyIYeHb\nUyeGUA3XD7ZRqpPHgPx0k9nFafQNUCgdXrWzzg1jiFnXeCf2gA+D5s+jjITO\nded0DnWecjxsUqPcsPGhrjrIlWEiusL/ANvU9w+PXwzJ3K3ffh2a+PcvRFC5\nv+Nt52KVOKy1gn6NL75WY6DuJ1flZ3kYReis72lTolMc3IVJ4DczsBOt1WqG\niaCj1wSAFOqLxaRXUiguGu1ZoYJG+aNpbhcN4HFloOwr3GXmVZD2kMOazHw2\nqIcrgytgLwfrmMLgrD2CPoJaBY4sVe4vNaL4rKJuxGlMLPfWxd6s0sU8T2SH\niEyfQ71xKnSptEJsRz4E1Rmv2iFRJFw3xG8/cGyopvTLVdOTUxta7tLwpe4m\nkJcI\r\n=DLTS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.f89d8b8f2.0","@material/tab":"9.0.0-canary.f89d8b8f2.0","@material/base":"9.0.0-canary.f89d8b8f2.0","@material/animation":"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/tab-scroller_9.0.0-canary.f89d8b8f2.0_1608678386685_0.3794724765571178","host":"s3://npm-registry-packages"}},"9.0.0-canary.fb194dd35.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.fb194dd35.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dcc18ff562118fad88e4f6ec358c9e5a88f3ee16","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.fb194dd35.0.tgz","fileCount":52,"integrity":"sha512-IcTy4zoM48TB/S5R7DS9ijAcJba22kMw1cUKWMkAsYKXNVKjp1jsoQbPpPApwtGOYx0AAK1F66pada+hqffNtA==","signatures":[{"sig":"MEUCIDpfGRPWVcaegvmv7K+6+chGJYkImoIaB5nPwVi2/SCNAiEAp7z3yItJZ5Mq7Dm0SLP4g3GLLzXQ1ygArxe1Dpq+3jw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kQ2CRA9TVsSAnZWagAAz1kQAJdFJoSk/YXipKLsovzs\nLvT9J+IPG8VmAzLZ2y7abImWqfhfJF69IKclsjPFZxLMWpBFg2OeaotvzCIR\nzov20IGCSeexnja/qHJAe+DNIEn0nxSCRYXPY40UFayrNwZXEUDPJPTbLhTy\nfYouN9ixCEcyvPb01u+RjCuCXlfsG/bqlNZIPZOMhm25JMTx+YB4j4xVcnY/\nG8A+jqvX8olG/EQqJrRlMhBCwtwNr3t4mvX9NiwE0h7L1Hlc1evsoXRqRsu1\no0Qsoyat5/VHcc5jSlYWrHI2/J6glz7habYRK5Cfm2OARl7ty7+BbiKS1+Zy\ndI9ru/2wgLUa6rwrF5oEZtKCLFbqa3E+kyYdd33j4ONCPn0Io7L3hdO6efA0\neU6UXqhXyC3zuazRXvV0630HAVueTDW8N5E1Jpi44r91oAQdNDyOwsrNmAcD\nyiLkz8mFBS/mbPJDd/0gRB0K+RHbU2rtyWQDDhTq2NXZgyGUKmAYSNlEPKP2\n9u1r9jwuUynn8DIaOhRO6gr5isbTcuXCEzkAxP5vTEex6h6YMPUmkB/fbo/B\nwoOh87dPxcnvxO/bHcfbL+OHQCPqhIYgie6Bkl6ZawPc+zJcmDKLXRv3Wvh+\n7SzayWUarVDjCjWgpnt99csH829VxWpxgtfBrF6tn5yIBxnK4MmQHVEdpLmY\nNLWb\r\n=k89n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.fb194dd35.0","@material/tab":"9.0.0-canary.fb194dd35.0","@material/base":"9.0.0-canary.fb194dd35.0","@material/animation":"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/tab-scroller_9.0.0-canary.fb194dd35.0_1609188406356_0.5582274684788062","host":"s3://npm-registry-packages"}},"9.0.0-canary.64f36e287.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.64f36e287.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"93bb7bbe58cac650b3bed37270c7ec502c159fe4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.64f36e287.0.tgz","fileCount":52,"integrity":"sha512-4K0EWBtq4y0karqAMIOA110pQFelZ7x/AmFg9YPkpOkxl8Nqk8+Sq2JverswiM11UBkeYGxWRRIBwmnyW/6byw==","signatures":[{"sig":"MEUCIQDR5a4uxRSt3JGAyZkVY61/heoFhCsDWlvvuZRHT6BthQIgeRzobIQL00suzKx9unrFpCYtqXlzA+qofKfC8cFusOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf6kmWCRA9TVsSAnZWagAAQ5kP/RM3GXDy/oAJGGM2rb1+\nDfVkR5fqfChTDeHMnSxPZAPc/AIH/bzWtt3CA7pDXdXHOEAp84mWRUHnk4H0\nzO5e+2JIu8QLhljeTgH3gKVwRLl61bWwWnqkcWQnK0b3uV3G1rCTn1OonKWt\nA9/Z7B1S0vINhP/NEaeE7+AYd4RyvvyDurMFh8xU+PMtK8g40mUHULt9UacF\nKzDtZmlVu5wJ9REgWh7ZRqNxgMpCYzpZ97ut0Shw7fOR3Dkmbbzekqd1VOFv\ntd8/KTFmhXtbZP6kEH7s/+Ocr5xLXZZVRa3Jy1svvdINXITbY41JDchAozAU\neqz1k++TQLiVH+FnkZEdCbrkPzR//8BgUMoOFrv43D5s84HHGyr7eyua7lkL\n2XmquvpTVMURHX/+p8kJGoUvZr9Yo0WtcN7CXycUzBE8UcIvLZhZhHJf2ErG\n2mmxVX+evMmxYi/w9y41Q1KrnseMsA0UeqQDLCxE1W+JH/ZxGvT5XgUFKh2a\nbaU+d4aM+XGmphmPAZ/FvrYv2OB3niiTSxfQG0cV65dFUVDkHvhU/woKxSXv\nviKrvxYymS6O3p6DtwqZrcqSx/KMOyWnoagEiVa+eXCNpNx/r2DVA3Pm4qRM\nFZWGuQWEu7SrBWC3dQ7GwdCdgZWZINfOtZjR/Y/OBb8Vtmapw6pJ8B4uWdR3\nGbO6\r\n=70M4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.64f36e287.0","@material/tab":"9.0.0-canary.64f36e287.0","@material/base":"9.0.0-canary.64f36e287.0","@material/animation":"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/tab-scroller_9.0.0-canary.64f36e287.0_1609189781684_0.056230248589957954","host":"s3://npm-registry-packages"}},"9.0.0-canary.b7bbe7022.0":{"name":"@material/tab-scroller","version":"9.0.0-canary.b7bbe7022.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9af85b5d4785225d1a96f8078235bd0803a81e52","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0-canary.b7bbe7022.0.tgz","fileCount":52,"integrity":"sha512-BQhsjG+eM0zPMJZbBlvEKu7qhKTLUz92wQCv3p3enqChKEvTC0TeEulJXbxXH3BuwgjghpomoyhDOxzaGWneWw==","signatures":[{"sig":"MEQCIGDsGD1XzsSnZlkx4Hls2cRwmz6OZY7u8wiLFnK7UT6LAiA81Xrh1BTlwkHiuzICfcDwJQizE3M4+//orJsAfsQqoQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322399,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf63okCRA9TVsSAnZWagAABkoP/29o8kbqawfutJPW38sW\neIYjAQwckg8OpOeG47EJehMqEk6EVzHS2A0q02pLcgiNPb5L24hqqderfx0H\n5+PdiO/zgyKR1BYZFWcrqxRZ+7B+AOiHGNgA4P76Qo7qb2rIsKXOCd0/Cseq\neeatQYQhoQ44CF520eXF6V94clqacQspJtRpEJVlMdtI/R7zuxVRKtneunlF\n6J2+mxCW4vdyxkfx54iYA+Blzr2UXIS0SxT1z+utXHSihjpzgqLPKQA8GrWb\n1T24Qi0J/7vPUxXifnTfAJF+hKjnr5tallP4ztWSng5Wj0emREw+0qcd0YrO\nW7l9Ogk+4NjLyFMG6L5iuu7eeV+8c6GY8CGtjicPz18JJRQQppZQo6ODKja2\nY7BW7oMA119bmywz8K/2rOqeSsUZLcFlAKDP7xQKD/bT/FdKFcXdp7UWU33Z\nEZLkL7qeyjWMhgAdcFfVgwD4ptvsqFH7YPSXY5YhNhcAzn6QFmoiSFOvDygP\nN7KXge9icaBaAtp3LHwkGu/3HEAjVCQqgQhGdbKvjdYkSmlP2ct3EFlOr6XP\nfo7nJ+croGvNvUu5Ndb6xWzmf1krIRYrJov2xxZGCIDy+LDWfcFgBOro2i53\n+nZtSr179eEMWrqg47Wz0FHufYjiaAnemV10aeZqAA2kKNnOnVGE+K/VeDS9\nc5go\r\n=YHLX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"9.0.0-canary.b7bbe7022.0","@material/tab":"9.0.0-canary.b7bbe7022.0","@material/base":"9.0.0-canary.b7bbe7022.0","@material/animation":"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/tab-scroller_9.0.0-canary.b7bbe7022.0_1609267747927_0.5545246362231233","host":"s3://npm-registry-packages"}},"9.0.0":{"name":"@material/tab-scroller","version":"9.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2309e7d40fff8b2be36da36834d49f600be8329e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-9.0.0.tgz","fileCount":51,"integrity":"sha512-kNndv+MJIi/A+MRyYv6iAzu8KjkBOa7vkpWRl7Lqo1j8iMyb4q1o9klEFfYD1/qeK0tLgcuUE4TZUGluz38/9w==","signatures":[{"sig":"MEUCIQDFv5kTICTNsNEzeGDbB8IJ9AvOBAWggRpUVbEi3TXh9AIgMAUcDkJx3P1fyXSuBsmXjd4ct5MhYMVlEdFlO3c2QKo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":321910,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf64fDCRA9TVsSAnZWagAAeKwP/iAb2BakE8T2YLBWzo/j\nqadEnRmBuAscpA4lUkeGU+TUmehiCM738OYpMrKwS67XTu30pX+jCCxqWymS\nntqRadhmezectC7lQt0eirsn5ZoWcjDoyEwTAoQdlmmMuJwnBK7CA4PUIu2N\n/GjVdZxKw8njUa2UZbrrNkytoA59y6tHlVbnV64SAN0eGdOVDlVK4zsrAqCF\ntHQAqXm5ZaFJ2+2uIY4ZPPnZEcnOBF/0wFbpye+iNrqezYddmh8qMQDGxI97\nOeS8uRJruhDy4jw7JTvDVS9LjGTyo9Hb1VXmMMMMrr0TSq+RAYuFtcSLAsl3\nMDT4Bp6bon2/ONzJwqEp3KHGEdBZc73EtvnrBho0RmSRqluKWilZtqyUYAdb\nCERtvd47EftKYRRLVios+uCM9i7IOi1BKTb72xkgIEi7Xpgi1d9ioCKDVrxz\nj5JmzOswGXkO8wkVyn55xpAeMiRuXsjD2txVik7JMQd+Ld3fQYiv8oG08NmH\nDkwxIXAUV52IYF38gmEUQz0Kc12ApeV4xvdyEErV+0UFWAYs2udejIljqVZr\nXkRi0pFI+FGkbNOAa+RvbZbTVuERe4jnCh14tFP5cy58eKzGNgxgDil6kWlR\n7gkZsNue+c7iB8HcPDJpcc29WXvs73k5CvVCj8bBfVG+AYuVzzNsbGZ1Ex/1\nU68L\r\n=OE+G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"^9.0.0","@material/tab":"^9.0.0","@material/base":"^9.0.0","@material/animation":"^9.0.0","@material/feature-targeting":"^9.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_9.0.0_1609271234491_0.5111284047644955","host":"s3://npm-registry-packages"}},"10.0.0-canary.776c18681.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.776c18681.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"27bb88908b1d69fc8336c18a9bdc578a0e075690","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.776c18681.0.tgz","fileCount":52,"integrity":"sha512-I//14x2SyEBrVimv6f3zBnNcPXAHBbk71fw7yjqwQu6I5tcNn/O8HpzhGXPsXGpizpPa0MwFT5kapUCoQ9WD3A==","signatures":[{"sig":"MEYCIQDOS7+DDaNbDODbqQ+FuK1F837xUfFkZJ/l0JiKPjuTrQIhAMc19MGS5ZHmtgGT6GjBt/THg1t0lz6WHLp7KvIS4YUv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf68ywCRA9TVsSAnZWagAA36sP/2xCZpkBXmWJs6vkv/C6\nIsMUiuZ/ofwtKyX/yqNesyvOpWDw9r/OlJ395ewl4aqBs+ooes+BI6o6Ef48\nKWtIDQYTx/9xb6lkl2w8XTp10sFlM1a+XHMmjFtDReOyzW2I4dxSddkWwcMP\nE4pg1EX6ntOK9+vGg/SaaOaGqw2vOzI/J0Z+oAXIHzWxu1GF/9fhubBlyrxB\nvFF6yoXhiS4gcUcOCdGdxIF3web9FJGQ+jo4+PvsZomKwXDPdiQuYo8bvcOq\n8YAtyuY/RtQuKpdIkCcf6lRpP2cI1wiKfCcxooXUvDq6PlQA7mglwlNwBKSt\nYAk799XsP0TK29nV5S+9Rp7FgxuPEhF/5NGt+b4BiwMllQjfZN6J1hgf7a9o\n92EMSleQ3fTKMhbvIOGBK9PaijB3faJ3Akp3wkZfWDJK3+r6GmwBbIlRlI+9\nmb5C5kRfgjseMrdKkMwxWxW7+TMMJQ6n6oChFoZRqTMsyXgA+rN73sVgriuk\nQxua2Ys9ANKsXskFxnSuinzfLuLdvA2LpkbAr4GEmIVCsRjOvM63gCb3bDVn\nGIbJl3e+n/rbytaBzFP9QRWN5bjI9+ZsQ2+79+ksYVv1HHbpDRoBx5MRBf50\nnB15MVVLQJbAPlpeRVkudPN0xb4oQtbmwC0q0RiCv7XV6+i/aMB6OOQp5gvQ\nc+4r\r\n=GDke\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.776c18681.0","@material/tab":"10.0.0-canary.776c18681.0","@material/base":"10.0.0-canary.776c18681.0","@material/animation":"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/tab-scroller_10.0.0-canary.776c18681.0_1609288880233_0.782709534770587","host":"s3://npm-registry-packages"}},"10.0.0-canary.671d72d95.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.671d72d95.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"93f1c2382f855472231eb44f6bd0031cb7026850","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.671d72d95.0.tgz","fileCount":52,"integrity":"sha512-ChCr/X9RmHcbPtpua/BgEolc56qfgcKvwP9LND9qIqzbdlmDwlZv7787lLkonC5ut0IY9vU1e4YisIBtfhBxag==","signatures":[{"sig":"MEUCIQDFuBeRJFoGliaPixjl4lY9EfBggbB9W9zDQcHbl5Hu6QIgLGV9CYQOHCziUJrcP/8fbSSoX5BQISIS8qncvi3v3Yg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7N9SCRA9TVsSAnZWagAAfNEP/333PiTgqP3odoU3h4/+\nQ4SIV3YPk+jGJMuoradg0KSZDU0dqnDPHwrupT8MvJ7uy4tVMWrj0AZetAko\nNbD7vOr7hLhbWDij5Ba0HJhqP0Zy9fKmceAfet9bNulijnpTwLnbs1E6bwye\njXRqoKJpxHWZDHaDd8dWPVHxBHDB2zAeN8lwOE5YJUVG9DNlRzJfdpxiUNug\nnDBhj9d9B8Zt5TYEbgROVnlW7SXrZSS1t9igSuD8mLJ6qPL0dcIvXmW+iL25\n4qC21xcbDNbGM/cWHzLidq1i2jAFqopVx6L9ESMokdLlUuW4dEGzlcZEVaVQ\ntTF14/rZVknYF+/htsOUq6AFOfzxbMxc5KA7aozD0YqjX7ep/5hDxtpIv+JW\n2H0xvfxes191P4lJFKWkFHijkX8oCF340Rk1wyKQcc5xvhcBJl0A4wRVDTQf\nK6BLQiQX/HQL5e0xYwVXFlxu3z3MxnjCm8xEwDadCa2NYRh1TH/s0yYk5722\nVWw9hU3Qpcl9xRzRzN5KsuPFb/pcLkfQX6IDJBdk3opgor8rYKrlV95kcujz\nFbIrHi/c4zc1/wRm/Kshq6q2oB942kCMRsHKEkN708fZ3slyOguf+ZeYi3Gy\nzRy5kPnojcvb977+Qw8aoo9FA30lV5h5fmQPf6y1ptHbOxG01MAhd2GbjoWZ\nKUG8\r\n=c3U2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.671d72d95.0","@material/tab":"10.0.0-canary.671d72d95.0","@material/base":"10.0.0-canary.671d72d95.0","@material/animation":"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/tab-scroller_10.0.0-canary.671d72d95.0_1609359185965_0.3070783271182458","host":"s3://npm-registry-packages"}},"10.0.0-canary.b4f5a1c9e.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b4f5a1c9e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f220a9626d4d2d36c132260b84840f1d66233fcc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b4f5a1c9e.0.tgz","fileCount":52,"integrity":"sha512-5skuC+1UVjkGARfT+ZUkcxeNIaJZs3SuwG2pMYP0qPUE7kUEL1eMkHcgVdNnHgDrL+vbckQ6AJ5yYWuNxaLeTg==","signatures":[{"sig":"MEUCIB92WZRS1W3qnWB9GIrUqJvVwot2RJc8Ys3F+z61l6MUAiEA/DHswbnX3F/TxwF+vciElZdllgp5RAYBF7aKUZ6Xcg8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PV4CRA9TVsSAnZWagAAEuMP/j16hilrCMrYy27bNzoc\niraiSkDjKgLh79ktpt9SRvs4SaOC8k0mAEO8rwEIebRR1JnPeqgkLuRYZZ9+\nyVQfxmY60ZleFqoDcqT6wa2ZmXdT0/vfzSkGnbOu6ZiA2KQLariT+AxStAPO\n5PG0NXnDdRgh8NGuRH/34fu9XwEAsSOsUmZPqxsJGh4wQuJph9ogeniFomDc\nt08XZRXssOFoajySFCcYAEzwOIZFyyeFMsTAPeMmq20LoNMMuC01d7Z/lb1t\nPMeLW4jAaWoALT9gw6l/hzmJldUQNW0YElXXXaqsBbsLxFNj4Va/MDEzLkbT\n+OrO/0W/Pw43SJ4+V+sEh4QZIxVMOGd8Gt+ZRwxZdbRLcQ0kLh0/YXbs0tGe\nLAf3/CUdc+3hgIaZFlXgIqG8YjdIcxgfnyPwxyS6JxQcnuFGidLcghRQaNQ3\n2ITA4zt/inPQzSlwuHwL/N0ntWY2VHmYQ5RuV0V7BayHqSwLWgn3eehqkLfO\n9K174KFXoHYljhfYXrsXNTYZdLNE5JujLAMI8zlaaV0DIFZYBu9pFNWBZq6T\nwChmpyuK5jBdyUvVRhDWM0oQOr+v4/pusfCE1xAvae6ei4JAJNWzrHaWoAAr\ny/r8uGX/2hSYPOzWUzcmmjBPC+sbNwWjj+oG9XOgoLwWLzoOUl1oU3XBg97X\ncuTj\r\n=o8Em\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b4f5a1c9e.0","@material/tab":"10.0.0-canary.b4f5a1c9e.0","@material/base":"10.0.0-canary.b4f5a1c9e.0","@material/animation":"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/tab-scroller_10.0.0-canary.b4f5a1c9e.0_1609364856384_0.025262907440444682","host":"s3://npm-registry-packages"}},"10.0.0-canary.a94bd8deb.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.a94bd8deb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"075810f6af20be7f62c22f9be96bd12af894c36b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.a94bd8deb.0.tgz","fileCount":52,"integrity":"sha512-IZSAk1PcuQmpD78TQ4IzPNzwFIY5vIpZT/phIgZM0x7itT3GlWgLxUOc7bkX7X6iJrtpQEWHo0Rdn1fuU5m7jA==","signatures":[{"sig":"MEQCIDKfIRZqaebxmGScgIE8fa9ok4er/pD3hkjeay8XgpfgAiA2RpqpRWYpIOx9H8Xm+YZh55OKbMCVceeIF1OOl2vidQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PmsCRA9TVsSAnZWagAAgy8P/R0BBi2vau01Pq5qnfC8\nxgaVKhkXHOqoJ97dgr82yTKROwh1+Dmeomc6JY6jSpWM5nkJtrzVIUrlw0kk\nCPUPkhZb6ddBsYq+NqZE+P+brfBgB2tBWheY0SGe4IvM50qzCM/k3rYnJ2Ye\naDT6y0rVHM8Tbprcd9g85DPlsrf90+fb3z7FwR9x4JFmdTE8D0UGjTDzR6ze\n/kFVZrzqv0rwjW9CPJ/hB6Vm7cjVJwRTYt6Ugc3fQfEIQ7zBUphRzgD+6jjV\nOSnZ5faCpw3Bd3UnP27hXussrOu/40TW+ZyTEv+f/SnBkA9oejP7Pp70ZiDs\nAJcT/qia6aI3d5GlbnA4j5QyNUB7S/UdauKpdBg5zWdGefgJxN5AQzi4Q7lD\ngDmMi+TgBR2U2AjLkYtGYAP/Z/3sGNs5jLsc1BbwdKWiIxVmI6TZRo6FFRV5\nsJH2/CzFMwzCCF7mSvOJ9vL0ftq83kT9RwOR6WvKqoGdqQvGzP4uv4nL4yxO\nr3QtUjD3j6Boe+rhxYrnNOpJH4nob27e/BbKlVIh3Q7o4T5Uf08iC/AoqeRI\ndG2SHc392g5DolEH8LWukJ4+fkbbM7bpPGI4m15vMU/eTinR2QL1i4c/7n6L\n4zpxKwLQEltL72pElbJuBaD73LOnZkEwtWlgreC2rnW+oeypljr+7wd0dMgC\nZqqL\r\n=NMQy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a94bd8deb.0","@material/tab":"10.0.0-canary.a94bd8deb.0","@material/base":"10.0.0-canary.a94bd8deb.0","@material/animation":"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/tab-scroller_10.0.0-canary.a94bd8deb.0_1609365931591_0.011591247944143124","host":"s3://npm-registry-packages"}},"10.0.0-canary.5d128511b.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.5d128511b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"df342a5e82c0b55243eb3d3b87509cc1c8161ce5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.5d128511b.0.tgz","fileCount":52,"integrity":"sha512-xr3PQMdIbuWzi0/cchbT7UuwxaLY9iwuNy28Zdrhn5xUmsLWJLVjKopZg5F1CqygSCRVvprnxABTyCDHxcohAA==","signatures":[{"sig":"MEQCIFP5XM3/GiYHR0IvVJhVHbpQ1Pn/McR7re/Fm276gVCgAiBgauoKojEvvZ8MUy/Cpeo1x8KZxhXcIY6XXN/YbUEA7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf7PrrCRA9TVsSAnZWagAAmjsP/Ai+laFRpeSXPzpJYyUN\nWSfF88wnKu59M80RKrNbBniFDPlHOlPNefIQRZzv8NYYgslkhknJkoMnqOdF\nMf0JeX7L4dZdscXhLjVESZ6UJ/irB5g0tY7A+59TGuHEflOjq0ty+FixTImW\nSZp3fb0Pi3LvefXTa76Eeb6tXdU7dVpCBB0HW7BXU5UXW7/0GTnuI60nnNGc\nogVFYzvoI6KQT+pMWEhDRZt9VrfVuRHyaQMUXT47hvG/ifrCIa2Zfj01wwuW\nkjeP+zFYY17uSaEKuYa3sixnhY14Ko1sIeK5kTNVWz12Ef07VC25gUryMqB7\nq4XjVa6ALUQAnBpig5LITUIfmNNjxGG1U3KEM6MEGyiKSO+kNbRMC5/S8rVc\nco8WLsedZG45wrv/QjGcrPd4cRgU4eJtcha2dqHjcE38Kgy7xwW2RH8xKfHw\n7uBFKfm4/CUMtjmqEOUFJ9hsyZ3wp7yL/gwupDOVkwAZtfIpwFxhJQfgQt0/\nl/xhYmPFW+x6kseWYgv0hZVnSB6tFjT3wYQ+eEjt/v6brbK297pae8vDH31a\naGY+KOY61R5Z0/zYqGvH5w1g7zZcfei5W41u8Zv0C/4SqpWl1ndmIE8wCLpb\np4JnbvQAcqNg8X95pXM5EuAZ5YzmfVYpPguim6jXxNsuEDBjeF4t826/uuPf\nAlCb\r\n=fP5p\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5d128511b.0","@material/tab":"10.0.0-canary.5d128511b.0","@material/base":"10.0.0-canary.5d128511b.0","@material/animation":"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/tab-scroller_10.0.0-canary.5d128511b.0_1609366251084_0.9859100403749956","host":"s3://npm-registry-packages"}},"10.0.0-canary.365c69360.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.365c69360.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"09004134a4c145b385ee15180c9db56f852d8616","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.365c69360.0.tgz","fileCount":52,"integrity":"sha512-8E33RoQZxpY12zwn9JVJcDnM7/hHmim6swy82TAPIYinr0B4Mz+2aKXyMIjqzwNMg96qDcNdUCjgvKwaOn3Szg==","signatures":[{"sig":"MEUCIQDUa9ZruptY7c7x3uLsxgBnB1ZXX1vIDFBU8PCqFfLktQIgVMCGcPey4OJDsAhraUfBkGcaoM0AQqdyjyHzh+z0g+M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9KatCRA9TVsSAnZWagAAOlQP/3iRA67jV6WGUoax/btE\n3y/x6scQy6VziseI20etC1X7rAMlmowaDKOwWpNuNpghoR7IXvpixf7p2b/P\nYEBI9jH4Wg3ZM8fUZmRSpLDRdknJ2zJxs9+OXJ2FzXK52+hWTNws9BNsOnZ7\nY6vUwVvVBu1o8D4xtdO3CeKl9wTOZ1oXPEQbrDgmohEQZ8QWJWkDoHh//MQx\nzR4iQj0KSv+GiAQIsg2L/rGWSgdxWzqKoZu5Fm6DNEHiNFQacnpcPWEYnS46\naQ+0uUPA62BmYv/J9YxNserXtG1r6YpnAAaLjtm85922F+HRDYiValj0A2fP\nwALiDn/crMVA/97MOUPigHZoKeVQ6xFLam+7L2ktmQU3AcmlqUIBwkcm4nWH\nJzYuVMtKgPYwCw+3jgR/fWLF/ayEuoGZdrKAoVgZOoFNJOa5XHIU4vcQyJub\nHyYnzjSgwW1BE58vjztH7rdrAhtncxFYi6osXRTD4t5ztJ9tBjkSYKPFExko\njnPrhgwNPaECHTgfdDFd8jJL0Lz1nw7WS1B3Ho5Q1wLFO3A63VB3MwQzNslO\n2e+0pOKm1H2uLxFq90H4b8GnfumFcDl7AELb3y7XuC6hZjgg9ckf+DCNSjux\nzCtzDd1c13OagIT13kEuF1fjZWjfo6QSEPB28Plf5ATwIKle07mxRTQH3k7A\nOwS4\r\n=jhcg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.365c69360.0","@material/tab":"10.0.0-canary.365c69360.0","@material/base":"10.0.0-canary.365c69360.0","@material/animation":"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/tab-scroller_10.0.0-canary.365c69360.0_1609868973121_0.7727748708091964","host":"s3://npm-registry-packages"}},"10.0.0-canary.700a8261a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.700a8261a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"48bab5746cb814b60f0d8cb69838567e4bbfaab6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.700a8261a.0.tgz","fileCount":52,"integrity":"sha512-YJG9fkx/yAAUeoWfCj5NQ3wm8tXnV7SH6XBH0Cj25vFQbPUpEMnFLzC2gmEStGocBxnIrix4W8UGu7S0uMpYGA==","signatures":[{"sig":"MEUCIFUzc7s55yecdh1FO4MxwjD6KbIePQud6AJ6om5SRNJhAiEAiI8r8ExpYHmdAPX3pWfdrNgV9A4T2jT0zyjQ/Rq2w5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9NPFCRA9TVsSAnZWagAAwg0P/25e3fFKLgFhHKjzTAvV\nBZ/AyrlCfTEG9BGjNtFynWt+TMgeMsat+tnHDd0S17q/DRtsK2tFhEGi3sc9\nIKVs9CklM0NO4MqkxBVDpt8xORm1W3cpkIXG4bPXn2uwLKVNaH1o9jI/xayp\ny9LnYh1iLk5k+49SpPReUn1Tx1gxoh3monJP6HR9RuJ9j/hkK1sZAbDTP3o9\nZpB3CS75CfTUClsmhD3+6nzyv8WpKoRHe8NJcdZ3GuNOYtKAmPWZKDSw69ND\nsyt6mdnHyAcJKNzVTsSYLX1O3NlR7M4a9aZMHVgkNmWjZlTYWZ+3MSYPNDfW\n/yZ6MKybAv/sFOulSIjIx3/z+QdNGIp62FDxPB4hmYEQQUnIZWGuvTvaaxe+\ns3F1rXKxVzkH0rk53nurrCF6gn1NN5mOIhpAXwxOOKW4bh34o26HNUH+UodS\nZf8ei6WzH6isSpisjMl/OSDcSSstqdPWCRAtfaKfwxcJlFtcMUDGBjWJD9Vx\nfQyqG7FsV8SfsMwy+rDsY4B5oaXDvfC0vxFg8G/wLkJ+FUiUy2ULFLzQWq01\nKfwe42jzPqgEgWveAPLBkWFdOM/7V8SGP/qjECEmm7eQ2Rw1wlrTZoo6luUQ\nPfL9D/u+6CcbbL307K0VbfAWZNxdprAQbsGT/n1QvDcXet1pDry/YGk/l2/h\n85tN\r\n=klt9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.700a8261a.0","@material/tab":"10.0.0-canary.700a8261a.0","@material/base":"10.0.0-canary.700a8261a.0","@material/animation":"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/tab-scroller_10.0.0-canary.700a8261a.0_1609880516523_0.47514320252152364","host":"s3://npm-registry-packages"}},"10.0.0-canary.766981c15.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.766981c15.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"304d35fb32b264c9e9ad61792cf54ebec4824703","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.766981c15.0.tgz","fileCount":52,"integrity":"sha512-4SyW9jrrW3xWpTi098mBOZkvtHI5W4DrOHDlbmEtZbGuQPZblpfR0HnmVy4m6sYHR6PUqOvW7N6zGdpy3Em0UA==","signatures":[{"sig":"MEQCIGDzZeSJnU+HohjhF2OfWuCTXPY6bEWjfjlqE58iivqiAiAauB5OO8/7IOIXUzuoYitxNCFckRncklbl4x+922I6OA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9OseCRA9TVsSAnZWagAA5IwQAIbAY+68gnquBjfFKiOY\nl/0YU6v1pRgAuSaBPs98JENWHNPF6v+SkfFofod3j5Kn4ScXbZa+xsqvO9fJ\nqSlyDeIo3jyNoFohWf5RQcZIMrfZ2wE7rU0GuPmRoc6Y0QZwiQm4Fu6XuC9R\ne0MSwkCLX1KpNmv/cAxgzDBG6efeS2pMF1Tf4PpP0HV+HR0io8321qVngB3b\nzyLLes71u6mugpKMLAL0DXxPNhJbMDLWnYBX7caQHC5uRLpaXnV/g5C9blXA\nUtRFwiy/rh5qw1ixf3KN8mpunyQ1ZphDtdOtr57hdRiTzmu9e5VPUHKKaOGW\nSd8M2+WvIgEAYJljipY4ApgUryIOzKZnTw+LjOSXodzjusa+33hFbp30G8w3\nnzZSYR8jHVUPXbPSfEwiNbVV3E1BSmihVGADxmFQYWqXR4y7hmI439OKoAZN\nFjprSP4ODYrvetKqECvCRSGHDwirRY9tDbQPdt4E+kMKXh59vhJqUs8MqMed\n0NluU89CzKoTXfaDiknQZ0NbdeukC3Y2/OCEFxw5UZuIqu6UKy7uaxn3R4Bn\nzkyxoaOwhctRviCgeQnOliWuEHl40EHRXjfV8fkzRQsLQ92XqhcIlR9yyt4S\nK4fumTm6AJFj0dnrHMzGJLNGCLdhl25tJb9hSennwZGHkITrr+8OHZolhah/\nSkMh\r\n=jnVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.766981c15.0","@material/tab":"10.0.0-canary.766981c15.0","@material/base":"10.0.0-canary.766981c15.0","@material/animation":"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/tab-scroller_10.0.0-canary.766981c15.0_1609886494455_0.13630919932195096","host":"s3://npm-registry-packages"}},"10.0.0-canary.b28c576d9.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b28c576d9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b963c4728580a94d371532a69101b1f5f47bc963","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b28c576d9.0.tgz","fileCount":52,"integrity":"sha512-K9Dodq7lZpVfg74udf/GgIFNvIrwnjFar7OhhXSurCx85s5M4LsepkJV9biADr0xd4Mnh/bkPCZaivojWSQBXw==","signatures":[{"sig":"MEQCID9Hv1ck++rVTQHvxHbcrrRtflujHRXI4u1qZ0EvbgDBAiBrwz3qR9cuwO0e+0u9FRMihGBCeRPuwDwFuh+5UB0RBQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9O1hCRA9TVsSAnZWagAA7AwQAJD5x0HlgV5txF9xeaiR\nmM8erO6QYWL/ASaLdpTq2ukHcrLf/BQ6NH9InEosxSnqILARhgK01WN6RxyM\ns2Od+BA5DEYn6IakrfVjNuGh1IpCAtW/Pweb/rKeWqR+Ui6GHoLvMxcwZ5sl\nDv64VYKpfUroXOtt40AwA57lhlRrSJHX8Uo1FiiS/1jk4zYMe8igG+4PBdkg\na971v8eEsMv/GufskFaPzpdYgoaM6PozzzheJJPIuECWVJz6+MyAkGdRWZqH\nuGsskHpux47v9rQGm3cZEhJT5gN1cgJVV9vbzkAepVAcqk0C4Es8W75AC1WH\nfUxtR929LdO/IVCmu660jQSm9Clh74LG7B9bcCou1HG/9wdEXs+dvnepsfi9\npZzqEQcLWLLGmfXwyy9L4+wjMQ4wJw/dWg2H6fkrvxXJcVltsGxR4c15Rf0B\nzKFLwPh91wWGaTyTb0TyHuQmiVYqW+HO/zYtSPbvOhxA0cgfnHwIVZPrbaHc\no85XWluID9blxcZlkzD+F0KGJj5emj1vaDyI3634WuAuHFtvVaTkc/qCbf/j\n7CGhOLFdPPBN4LOSW5V8xpKtvTfaFyuAVYtU+S6MTd3uqmWuCdmS2JL52/bS\n0+rrGJ91qV0Hb59kSy/IJ6Eo//oabsZGRQCkZZmCYB6gKoyKpiN2HhiW4fyC\nxEVT\r\n=y7YX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b28c576d9.0","@material/tab":"10.0.0-canary.b28c576d9.0","@material/base":"10.0.0-canary.b28c576d9.0","@material/animation":"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/tab-scroller_10.0.0-canary.b28c576d9.0_1609887072752_0.272976640837127","host":"s3://npm-registry-packages"}},"10.0.0-canary.968735356.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.968735356.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e09b02caa07556b24ed70250b04e0add4b6e5062","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.968735356.0.tgz","fileCount":52,"integrity":"sha512-yeR8tX8GGvDitW4Z1Od3x0NexKidh3Km3E6t/tSmSBFX9ZXytMClKYQEGFYYlFd9oXlBgT1Fhq8Bk55ccSoGOA==","signatures":[{"sig":"MEYCIQDTJDNhPMNHL+d4adnSkDFSkbBTHmxy389F/OQySimWEAIhAOpfw/J7jZgEYCmI3g1XHaiGRexYUBCN/sVfMTq87xxC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9dytCRA9TVsSAnZWagAAbHcP/AvVnu4cdeXh6FGalLtf\nR3OyO6b9qDOLdtWBluzrLJxpFzFEP5QkRehVG/Z7RuluSX7WRs2zMBeUhfMM\n53HcZGw+5EmBUS9BJZ1pA0iGWb1YzQDiCLkfNYIgMJCZlqnAm8JyNnkd922d\n6p66Dd7MqRLVwJNlTLTc5PHL32pEh39CxorBPOWweRiwONyB5YZhz7FyzmwV\nVZUcJGKWuEkqgRTr901AOW8i+65q+juZk80KPhHRXrWjICliH9CG2S3ComWw\nNqVZGVHHQ0jchyh9ulMmc6mU8lgaGKshzmfIvIaWhJ5Dw9UXL9OFE5IvE4xN\ne1BUgnnyO9LtUahb8xhVAuC5k7uspHi90wbUw2opmIHAEWn//IWWzcZbvz0P\na9kGzE+vJHJc0OhkYMQk0vqvCmyhpcbXDlDycajYNJJMiTgr5TZj6Sww4aGt\n6tt9qigNTwcv8ffIs/d1bHVqEfI4qdMQGC0aYBy/5/xNt9Q7tPOLtVYS3Ija\no9qBVoYitc4mbE2k9GHB3BohYnNDtC93FMoQ42Zo4vs7LxMaA9nnAVTj7eZY\nxvGzbjInu5sHwQ1c0AAn8cSZ18b/F6XAfbSYuougid6LTKkHUVaZF2cwu/25\n2YtsukLAvf6etnhtAWP56hpdjJxM6XadEBx7GuzYqQRf7VQPhj6b1aIQGCyr\nZZr7\r\n=7k3D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.968735356.0","@material/tab":"10.0.0-canary.968735356.0","@material/base":"10.0.0-canary.968735356.0","@material/animation":"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/tab-scroller_10.0.0-canary.968735356.0_1609948332786_0.7052575753200094","host":"s3://npm-registry-packages"}},"10.0.0-canary.c5e18b020.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.c5e18b020.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e5fd920e58b6fc23d593023469e1736d95d7155b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.c5e18b020.0.tgz","fileCount":52,"integrity":"sha512-zFha65DyllPFUHpsuX22XmyossX8BLRzzS406I/53tOBEBlYnNUH5j7Wn01EvqXUkFRSJUXChNQIOFbAbEcuxA==","signatures":[{"sig":"MEUCIQCLtITiaASkax+8EqDm/VtmU5Z+VMD+xr/jvsesReQA7wIgIJqKfXNQlwW2QdT9ya88z77sRYJyHNuc8ySe+P+o50Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9hNXCRA9TVsSAnZWagAAWOoP/0FfYbZ9lksInbOF0ldP\nAochiX4WLwfW7by963rqQ6wgJ7jUYyz/0nZxE3TqpbcQ0pLZW89cDlUpPpdR\nvs/ncmTyYD8Rua0JtxaV2Zq1D/xDbDTgLS9sd5+gEqUAQsUQpOggSvIu2B94\nK9Bz0cylXxQ96cmdtJVs+YS8A2wJmCyzdcfiAS22LpDNApiaFUygvgbZwGzP\nm7A5XRlBTeg5LXN3PHCuYyLB9xFQUFa+B+88X6gGg3Vq7Zn5APapISzTEp8P\nzzuQX4IzaCOzknV8WwZGXsrdP1n8pJLEzrL9PtghFuDX2PovbPSS3OvaPiPF\nPb6AIUKEdNTBWzFozHfhnkRKJTYNCu5TwliDIEZVqZ7r2rXVXy6ACwFFafhZ\nS+wwKbqBJxIgDTJltTnQFCapY/A5woUBjm+HtEjNeZ1NQ+ZEdDNrjLhRx/Pb\nlCGiyKkHhn38OcwHvJNi0sF0q3DVn5GVcinZH2QnGdSpfEW6HOLbOmBy1a3I\ndwZLtJrx7SyDtaLuyxWQv1QRsCZ8eluhjYefTwPVB+LVKdwvw3dvzxHwskfm\nNbPuhFwDuFavQ2DEdpoQ1sBybmjKR7on6lc0ukZNwc326rq2or0D0jTNxcEQ\nJ22CI+DXoDz9hApsNW9825TBa4gqCyLBT4VGhu7ghNFIa4CJ09+0swRrjYi1\n1+dv\r\n=8hsm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c5e18b020.0","@material/tab":"10.0.0-canary.c5e18b020.0","@material/base":"10.0.0-canary.c5e18b020.0","@material/animation":"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/tab-scroller_10.0.0-canary.c5e18b020.0_1609962326644_0.09025044364103829","host":"s3://npm-registry-packages"}},"10.0.0-canary.bcff8a66a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.bcff8a66a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"252a46129117e443894f643360e2c425d181525c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.bcff8a66a.0.tgz","fileCount":52,"integrity":"sha512-v6JgAsUsmxQWeFuYBiOOkVW++LV7VR9Y9p7ZLgewAXd1n0LShGc6n7wklIYxyfS3VaDZUY2EfULZ0QETj8J0xg==","signatures":[{"sig":"MEUCIQCto2AwElFMwBKuXlXmwjGZ1VHZXNglSHrQVoaF2a4ixwIgYHXKxCYBaGxnpqLqbl2RpP392ttEU6/FiDRW2fwJHNY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9h0/CRA9TVsSAnZWagAA8YYP/2dyL36wlYUshyoJDeTm\nm/ElHUnWbf++pffdQh3ETFGHoqgUt2mIW9mqWCDbp6osmCEhCqjcTNQRTeLc\nnWuhM+56jtIBBHUe5YVfhLQchcBCpgzlzCB5eCC7txHBzBHX0r+VdFne6jdm\nWCk7JWI8cv3gbt9/swT7C31mbrcgAC7zG2vHQs9+Z+W+wiP0PdZcsX3vo6+A\nCU2tkFO+nbKs/04rrhyHTlziPpR8JtSGGRa+I4Ea80CiQVRXxT36Vg2rKXfV\nF3ITSlnj/zF+uvF6DWmOzWI8N7fJ/ctP8oG16pIj4leHKbQ1cbPPIcuTBK9P\nszgzqBPYgaa5mKcUS5RxNfE3NWqje+KN4EJ7/vdZXmRCRsUCLz32/eCw7BKF\nGYyPiaR3K2cKXjIMvMeq5pHyHC3ZMlRETFlRfP/XFNun59Rvw1MrwfRqB7Fa\njhcb0h6azOx/kvw+6g2nrhGInB2Bu1poc0RTSGF7xZZbGyDFqE44S6nf1cBD\ngNqOFonVEqlvqsm4vmXKugLTQnAOVhbF7GGhgj7rYEzONLJZ8tXxXaBUUEPJ\nR2HQxpLFrKwpggh4e2UbkPRmsZ1EHsX8wPWyiAxHdkZMKjrbii8iGVbQrRxX\nCsVVn3tldBSvNP3UIJft8BQrLZhOuJB6xqv8s4Cti3v4nYyvKtZjIoHW1phi\n+0mj\r\n=OOUw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.bcff8a66a.0","@material/tab":"10.0.0-canary.bcff8a66a.0","@material/base":"10.0.0-canary.bcff8a66a.0","@material/animation":"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/tab-scroller_10.0.0-canary.bcff8a66a.0_1609964862709_0.7846070483864371","host":"s3://npm-registry-packages"}},"10.0.0-canary.79328c9ff.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.79328c9ff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"18c71d165831c45c9f2fdb839f69ec6a738c89a3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.79328c9ff.0.tgz","fileCount":52,"integrity":"sha512-mJykg2PDyUDqsascyfjzj9CMuXqbiv/Po7NKu5gHgsDfWUg2ZA+vgfgiHgLOYfS3ociWI0bkcAwpXKFB4AiS7g==","signatures":[{"sig":"MEUCIQC8T8Jsd1+7nCkyqZrGWIxFW3sIJVtyQxjUdKf4EG4CKwIgX2umtaVFgrkTajnOsPx4cFAisQENvhxbr9UkI6Xlzps=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf9nNvCRA9TVsSAnZWagAAaLQQAJ+SdmAAolpS2ac1CO0Q\nMorQlzkMW4a1LkYV0t7Y5Y8Gg4tskAu10wLOREhOIer0VlIrv29Zb+woYdhW\n5WrE6osgCC1WGRgs++76+sha8VtDmMU2GpfR9eRpcXzoSviB4xes/+nIs8fl\n3XE8SDtSkfILi7OgqpgEGFLmScBeBve99R2OW7f1zcGCahdna7j9/1KQT5Gi\npl4iF4GTf5R8k1lioib8O4J1Pt5ZiRRuvjZ2Gnxu3+vkXMe5G0aYpDXTM4I3\n2SSSF7B0wLasHiovSiTRNypXZeMKHkGOG711PtHf6kMVvumlPsKIIpNa1f02\noBxCryyvYZGVQ2nzgXQiIy9txfBdek+dfR3Lyr31VekuzgdeQ+99f5hilkUa\nIqKOPA5v4xKWE/t4b3lFPvPKvTt+UaLfXIbOOv7zEIIBt+KspQ8b/DLbrrhL\naSV8aGhk2b/E9neIYcYYTA2n+7tHmlDAgoB48M1QsruT2DO01PO1tcXbjfM/\nAu5vzVyVqVufhxTb4P48ZOLNSRwjpCVHOu04v29FnMUDEV4mfpBIdZKtSKid\njoVeiNarcFG7B+RXofbuFBwS54ezWYOmHOjX6i4jL4W59h4V20dn+QcHmUVl\nKVppV4rqXfEE+cwOFcbgbwDoaZ/DhR/T25iutkKjgXKhYeC3/BgjXD1R82GX\nLoro\r\n=Kmzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.79328c9ff.0","@material/tab":"10.0.0-canary.79328c9ff.0","@material/base":"10.0.0-canary.79328c9ff.0","@material/animation":"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/tab-scroller_10.0.0-canary.79328c9ff.0_1609986927471_0.32053825054576013","host":"s3://npm-registry-packages"}},"10.0.0-canary.121e1f303.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.121e1f303.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f8b9882551e5e56aa5a508995bc20fbfc3656f7e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.121e1f303.0.tgz","fileCount":52,"integrity":"sha512-l0bJ932Aec592p82stbqvjB+ySkHfW9wLe32uRltDkRywxfjLCJeInMG1MLbRd6doikcG8THZzdT1OicgEOEIw==","signatures":[{"sig":"MEYCIQCUHRb8vlgqVrg9VJQcwhYd/XKcrH8EOOa1D50QWdlFmAIhAO6PTk8PpcXVfxVb6+EWhq45Wd7oZEpRB2S4F+H/s2kU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf95dgCRA9TVsSAnZWagAAIFMQAJoO5QrGHckhuFwE3Bvn\nnO8YFPODJjsCqx15DxOTcM1My8lggbqVUSV/zm6aGjPvNM4D0Csw5v3u49qo\nS735unLBvV3EE7tnL+Ux+LHYfsvTNhuuk+DOkpLOFVHSrhjXw9+ivj/3DVkv\nYATGTy3X68Tw2aDXvKx0vBDwQFiYv746n60FLM7kxa0N/pnGT6YuOIh2zakq\nkq/OnZwjTCQzF+JFr3LoXs5T0IADwOFGEEpm6rKzm68efg5Xe9I643Z14FBd\nPpMX0Tv3mm2R9GKRKKu0yJjO2xUCgUojOHdYaWqu4GllDbW6AMY7XFzn98Ci\nU1TlrM0o7EbBrv4Me7mUWV8MtUWsjE7yRIWfiXaW0PlOSciynXeYZQyczuiR\nF3hgeFIy/a8l1AxzAF1c0uQwfi6DfRsy0Sx0PoHKWDNPynNihobkgHE/Akk/\nxwI2dKaH4mZrBuxa3lPCzyxRjn1ePuUizGz3P+X0NBsT6iSg1heZlr5Vy34h\nD1sTKkiXVsiru+fBtzFG2Eh45WPJrw8IKc8CEGzGIEFpvcGizS3qXCpQL/s3\nkVC5QpEuCf+UgJm/NPS/DY+BFHcUu8AAGx/gQn9vL5NQKvWqSNRJm9Mwzykg\nECxfsOrNB3MYcnlqGUmQrSAbaXB8uEJTeFgmjXdS1rK0mU2NUQn+8zQq9vUE\nkqUD\r\n=T0Zo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.121e1f303.0","@material/tab":"10.0.0-canary.121e1f303.0","@material/base":"10.0.0-canary.121e1f303.0","@material/animation":"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/tab-scroller_10.0.0-canary.121e1f303.0_1610061664019_0.10683866247381935","host":"s3://npm-registry-packages"}},"10.0.0-canary.abdd10065.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.abdd10065.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c00b77b122e1c8bf027cd4a6722ca561e1be805f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.abdd10065.0.tgz","fileCount":52,"integrity":"sha512-QAPrV0Vrhih2btgSAQrQQlNP88oJYbyEKbrT7QlaChLPiZ/6NQdpBevngmqI2QAac+IMYqc+PW7OgOfoq3dcNQ==","signatures":[{"sig":"MEQCIG+gGI8xSuD4vYk+GTmIscyeh6Ix42qZ/QaMlrN4olAeAiAqgyQt//qiSlMiCcEMb7bV2FlN020MLJWmP9LEW7JB6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+Jv0CRA9TVsSAnZWagAAcRcP/1uUvqu6dav/VGkZY7d4\nCvZj8cGHqCCTqLFM18xaXZOcyfdnO4CF4TxNOm3lqqAk9QvT/n3HAPIflHbX\nbc5eUYP0RZe+U2yTUyR4rdoR8vIKQTpK/GQTJGSvq3AE5P5mLyqwQmF8xGZX\n0BUyGdxdQFSt4YVuasVADXT5YY2pyx0HsJZbsb4OFxcFPPPhugH20iiWBePf\n/mAAItLLNsbHXO42XbkwXGSI602gFXbzC4HicgOgFimQZzhoHBnwUSmUA4oV\n6ArZ5Nb04Jx/TNUNkLzsNLIEDxisof0vDPgIEM0oVbpijR0qXiN+THvuuJ9h\nWQ5x65rskSKDwK1ANSt4u7+hiEolw3uCuzZoEhvrhBelIRSxJAUpIWXgC8Ei\ncArqNSuLXgUg6wA+aM6siAkMQrRO8PpwaQdmlTI+zGyTuFa+pf/dcvmaDTtt\nrxwl7Wbs7PnaaoP2vPzxtWhAgWBKc6fvQZjpz4YyLFCYHuXl8R7jPx5ny8lQ\nHnHxfQ3ko1gWUwjXY56w+tEFrkV5u4BRFa249d+sKzhg6rg51qbLAUa2A+Cf\nu3JlDv6HoOiuTLQmWw/Iq4jctVbRIxTXPBQWBHzw5g0qABLRrS7XAqZ1wlWj\nINRZGXfpOL15UvyOa3xIWS0oPqFycBjw1ccoZSSPhjdWD6swxdwRlXdCjqWB\nJBFr\r\n=Sfb7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.abdd10065.0","@material/tab":"10.0.0-canary.abdd10065.0","@material/base":"10.0.0-canary.abdd10065.0","@material/animation":"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/tab-scroller_10.0.0-canary.abdd10065.0_1610128371789_0.5620051344472212","host":"s3://npm-registry-packages"}},"10.0.0-canary.089de519c.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.089de519c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7123239056b4b9a4ea37656e7cb9509a1a58a002","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.089de519c.0.tgz","fileCount":52,"integrity":"sha512-JkY2DDmw5Rmv0IViMMB5BcfmQBKJUZfATRKOqgaN8QkJja3jUSgbso+tWYlu4hdQdYX3hb2Y4QQxYH/fzwCvGw==","signatures":[{"sig":"MEQCICUjdTO49mtrDTHqpBED/H5jMZjIgbebcpKSuIH8JiFdAiBVEX4pI4Txd8E6NBU5K9sAR6hDU7ZLOQ+f0umtJs2/vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+NsBCRA9TVsSAnZWagAAxggP/0I7Kbetliio6J8Yq2np\nbZR3C0HgDeb0f3hK4ejLiOtS8NijDI0TD3PSmfVjUzFkdDhGVjitJ1cQr+bL\nJnviDEOyy8yoJHOxn7Q9LHz+frsDVU8qEUiZM6pIUPGo34dvkCVeU69S0U5A\npVd7/UOqm512SE/hmMWc2VJbjmbaL9szvB2lPTQSoFrWbv91hbWsCFBy3loL\nOXNtx9K7wxBmUKs7Sdoth/rBQfV9rZY2TC2rn6iw603WAN0veuNVZrvo5ae3\nSN/cIqxwLDWKaT7ITtqV0mx3w7l3DUZZy00FBpJDpWY9NL0/9fJRcpNwRU30\nKikttVRgdEaz6srgBAscejk0fKf0wi6to9kdaRtWfL7MlPm5wq1czv4MUxVS\n8JVpwRHtWkRYhPjWZjnALP/mJBUEbvT0fDtVf56ptzngY5kEelS1CTYevnmA\n6t+bEZLcDOy0EV2whj6lIuOSFjSBhcAPvAlIZp40wc5UqOPwGcde6PiY6c9u\ntPR7b+dgZvW02Z20xQcz03k5LfdYTIE0s9RIWBMEUZV1b7tB/NsPuzswiAdN\nFI7voy7bx/M249ES0kWfSwaIrJf9Isvoxl5LfMnLLnlbgZjr0zE2o0OJT+FL\nkTZBEJjnt3x3VYxQYvvbzgWJRhEOq9TsGpgMc/U5QIm4VSKMVgce19mPevZh\nPmDq\r\n=svpA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.089de519c.0","@material/tab":"10.0.0-canary.089de519c.0","@material/base":"10.0.0-canary.089de519c.0","@material/animation":"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/tab-scroller_10.0.0-canary.089de519c.0_1610144513034_0.06800646995139781","host":"s3://npm-registry-packages"}},"10.0.0-canary.163119837.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.163119837.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e913ecfb2c9ee9881aeca74441159b6385dbf93b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.163119837.0.tgz","fileCount":52,"integrity":"sha512-TSN7gkQwFRjXPOeFRBEzhmY8EDmUiLgEp24/yKY6tCSbbG3xupEdWEH0/2J7/XukB4SIEZtIKc/TstUmVxcI4w==","signatures":[{"sig":"MEUCIQDTRDGLwIiktdDdALQpyFVVV6osES4XGufrpAagCv738QIgJnaGWJToP2fi0yId9+dy9EpC3muz0WmvT6Bfhy9x/F8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf+O7VCRA9TVsSAnZWagAAN30P+wVAxx4YwWeem808769N\nxC8lDWEgwoIkpq4hTWaQBu2dqMIREUQUQHSnXeVATZAbWH6A1UGMVwgRG6W5\nB1hYcLupmW8P8peZmF7rCtOzPlAyQLx1cZBEXGbe8wJZp7GlcgYbYQL3MDTJ\nN53CKIFE/7VKNuEf8HR7rLgzPAXkJBRmvogzyvSniXgOksUTPOENq/P/xqFf\nhI/xIHaRlWJNQfcN7HClYc64o6I8NSKsqWl5qsCW8A2RwcsLwhvr1UUzb0Q0\nP5dhdt50AuCUYsSd4IKDpAXlUVs+aikTQDtIXCXdwP+i7UwZt+mq/5sIawFS\ntXIVmaROjBbunlwCbmG1wKNkUvyJuuLD0k2iq0YqDtEzUa86ovztcKnpyyiD\nI7pELe1no6lVaq8zzQYfrKGUtSxu/1khaFay+L1eG0vJuUYJybOCcDvcOMV3\ncSIr4IrzxeWr0yfhpWzl7O+fpLgVti6x8wCFSSrdkiOZrpwystEli8/IscQS\nLyXP50Q4Enq2J/lP5gSW6aqU9AZGUJ630jk65PmBlyAx8c1xLL9EL08ctzkB\npzazj2kHzXe0kYo2vG1Z6I4m11UpyM+MiM1vD6PMTV+s8fyDy4KPXpz2e4El\ngKGMK57j4tw58qezFD5X70rYmQsmsxeGZOd2D/xOIhZQ3IRVAGlMXTAioA5u\n4aMa\r\n=vB3u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.163119837.0","@material/tab":"10.0.0-canary.163119837.0","@material/base":"10.0.0-canary.163119837.0","@material/animation":"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/tab-scroller_10.0.0-canary.163119837.0_1610149589031_0.15595728176390122","host":"s3://npm-registry-packages"}},"10.0.0-canary.b8a1a58e4.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b8a1a58e4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7066cb71a34a3163f694583876e50a6a2866741f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b8a1a58e4.0.tgz","fileCount":52,"integrity":"sha512-2kvSiOHphr9BTX7C90ZDMBYzQoXRUYjNSWcyizGpQ2of7YKZyDrmOciqVSv0VG7zGYUpmXn/4VXtZkgTb0zcZA==","signatures":[{"sig":"MEUCIEtjZ7pZivQMAKk5XJn5duodekc7JdP75MKOVZ8a1bHpAiEA5nP/4GHnHma6076OU/HYbX+Bt4r6yHQYU/rjodUGue8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/HwgCRA9TVsSAnZWagAACnQP/2x1XfS9ekn/PhdCcSYo\nGdLzHEbTfFhL7HqizkVViOsdI5w5OASCPOeS8KYMkLA8DngMsZvyrB0b6O22\neWAf2qVb3+aAlpP1dgZXKYxqJ3QQ/l9TyG2MmMzPGxaop+b/Tr3MFNjAl7Zv\n2Hr0ck05VwfUFUt1B1nYdgc3WtDxyb48o+GntsMjV+d0s1NrQtYjNu1N01tY\nvZQh7kvavNXATCh7giR3SIgYr8b3MgS6jZO3C8FsAz5CeCzOCUfUEnz/jV3u\nVS1ukkiKCB5j2L8CGkFNsfeQI7rUQevFKyeso38bqFu1iZM0IdwqPAjhenSh\nwH6SSwn45W+1Kl0RNXpuwICtQDuR2DDyKxwf8BTuhk19pvB7jhNJQHH9nxRK\nIMKkhMfQjoROIoI4Q6zl4iBqyH2F0Oc01gBH0c900Rrkg5t5La1HfSra6rHW\nJEZDcr4oZo+XG4bVzJDhyiJ/WP9Gt1gowrhGFaxLijh2a6UxwKRyj4z6SoMb\nP/m2lPpMrQAzCbcOdOKFK1zCqLEXi9Trdg8sbpBnhJkbx4ctr3QG4rCOwn0z\nyGsktpRJKu1t8TDcu//++Fg676CA2vKEqoyGwz8B2ci8MRQa1tsYZEoyeI2u\nh+dc26ea+XreGjKR/TbCRHEpdjI1r1CWEn1YfpmzPNpDNreM6GPyXMuNvrt2\n2pe/\r\n=s/+h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b8a1a58e4.0","@material/tab":"10.0.0-canary.b8a1a58e4.0","@material/base":"10.0.0-canary.b8a1a58e4.0","@material/animation":"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/tab-scroller_10.0.0-canary.b8a1a58e4.0_1610382367880_0.07018831636261003","host":"s3://npm-registry-packages"}},"10.0.0-canary.7584267ff.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.7584267ff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c62d71ee5c1af1b17ea085a4fb1708be785fd75e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.7584267ff.0.tgz","fileCount":52,"integrity":"sha512-M5GI63uIUc6us/B5mdVIj9YDeDyCZNvpIQh+T6QHFoW8oXnoUF7AlR6aSbcGWUXRbiKnOVCN4f3TbIslzEb7yA==","signatures":[{"sig":"MEYCIQDDkeDCVBPZU6fM8v7pl/hN1fWKus5oAkxcDbBqQ+SLjAIhAIJCpA74c4fE3YfbYcZeXciyxk7YccOvkXWF1iyyJVRb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/PfDCRA9TVsSAnZWagAA8oYQAJRIrb4vrVGLyzlGj8x2\nabO7CCnaG2WnlonO4JfS/iu2qCdIsYdztCJxcVbZ8E9gpIiiR6jcfOJQDXc2\nu9+dvkILOkIZBfHj1DvTKIT4XVYQsj5oIARowUMgUzt/zg+BYftGeV32OKBs\nAe3yMB9OvuTm4uklDRjAQW04wLHL/B3UxaSrL12jWrYE3HqR3WA6Vf3Fb3Tu\nJK8zEUFJ1g/wFY68IXSTZJ2PO4bEkuRHNmDvQovnNrL0F3pnDQSdNnVUpNv/\nap/+7iuzjsgbIE0IZyTo6qepR3vtaXbsbzFBQC9Ysk4cKcVkMFJi+Keup6CM\nro0mS7KSXypewYAe2xEdbBceJGyRXfNdDUngwQ2kYZd4hGAEDMibtT2V4A3A\n5d/3VlB+kHugLjG9s6/nu4n1Qbv4UJNpxXg07jWCsePlyJdeOJcYF3u2c9da\n+WkqshbWFH0PlnMWOcEetbkwnNi+24W75lfMCKfkK+lgoSfjK45QXWu1ieg2\niI7CAdu84emyqv5PA50TbQMgfWMaY4C8PVAE+vDzOCDyl1YWneizEttcHcwk\nbT4lw2xbrgiSWpf+NldEwGp+F8QOhZ43gYyMu3H7wPvFE50pjUw3oKKmkC73\nuTtSqLkSjnOJY/0vGp6m4jg9yBcV48ECDUap4f1XctNGR8WMq1VIekvR5z+j\nNikV\r\n=J+qc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7584267ff.0","@material/tab":"10.0.0-canary.7584267ff.0","@material/base":"10.0.0-canary.7584267ff.0","@material/animation":"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/tab-scroller_10.0.0-canary.7584267ff.0_1610414019127_0.7844499411931041","host":"s3://npm-registry-packages"}},"10.0.0-canary.251ac04c0.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.251ac04c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8e1fa0bfeee52c5c427e120f039ed3ad01db4422","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.251ac04c0.0.tgz","fileCount":52,"integrity":"sha512-buBgOorlhf0LqbS0R5DRdZj67XN4W+o8H8uc0RA2yCXA1j3wbDS+M2ud2ED7o0eA2++570zT9YMh/5SMtKIYcA==","signatures":[{"sig":"MEUCIQDHaOERErKQNWvtgSNRQWylTSkk7Fj5Pi07N89xgWlljwIgJylOoKcZkebyZRDHZzRktNXm2Rg78FXt7iOGipfHlxs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/f7yCRA9TVsSAnZWagAA6GAQAJ2dE741pdNIq2GZFK4r\nNBuUKkH2Ka0wlNawkpP1yywVat+OSELmEU2xCfXvjJUMTPTda0HnUKKkHjoF\nS/arEDvxzHl3gtlD4PlBt7ewZ+z9joq8dqi1vegu0++VUj1RPWvulTypcBJI\nib05M5Q3BC/2ww94XLgmwi1Sf11jkxMHUW+HyyLLuJINCtAU+QZhyG1nN1Oy\nq6PIEXI/pco56A3jBUh/jXM9yeW80L7xb18SZYV2GhnNtTcqbm7hM2BxbyUE\nohYWd9R3+EAD2KNkMm/v3150VsPNBoyxiAj74CM7llr52Te04pNRuwQMsy8+\npUce4iADOB3RX74CICg/xdaX2Id+/kLunQBFASNfQv0LdeXJWUfbRFvAUBp5\nmke9jK8cdoGPopopUOngOwOErO2n/Ei3rwSnHDItMYviSQHfiuiLWZ2gcuaT\nNDqxeg49UHxAGZY2dd3otMDbKK8RF5WG/ye2m1cXNxUKmWU0IZe8Af7NRQH+\nL/BofGlIQHQZUd5DwZ8onxMTRcGPb3bj5ubcIQL7QWlVlhQiFJOgjUXzJIiH\ni9nS95jiTn5w5UbUOn8FzujVjXo6PlPkC3I6qB2Kw5OBSRW7Gv4zwFeNJnae\nc66fzWLPuKmPAFAGQEjf4nvSquuKQCggKReovM6CGvipl6Cr8Qx09otIuB0R\noKi6\r\n=Ll1D\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.251ac04c0.0","@material/tab":"10.0.0-canary.251ac04c0.0","@material/base":"10.0.0-canary.251ac04c0.0","@material/animation":"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/tab-scroller_10.0.0-canary.251ac04c0.0_1610481394127_0.8971666919253942","host":"s3://npm-registry-packages"}},"10.0.0-canary.772cc1068.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.772cc1068.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3c4e777c6697483a77bcd8113cbf1335a29e0668","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.772cc1068.0.tgz","fileCount":52,"integrity":"sha512-u3fnFL+46dv/3+iiRz4WwxQ38pDWPsQynvAOcZed//gIcX1BP2sbx1UMKgLWnWieUTyIjOWSaF/ZXC57obtotA==","signatures":[{"sig":"MEUCIGAbSb/V2DUBLZyZxa3u4OiZTWCMEAm9Lpdl0ekUNoF4AiEAsdD8JDm/9zfOlPTdxN209IqOVdSV41VYBtR/AGMCC0I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/4t6CRA9TVsSAnZWagAAhKwP/iTfY02VZRHIixawSaiA\nr/975IcFKv9FGHHRODndMZ0mX9FKBujstmcFG95zLP4IRCpzqAKlo/j+DHcZ\nIiNZWTntMFhhXQqT+aLLf1X5I8c0bwAZRGA1SFKpG2KWYQYymdo+ApklL4Mi\nsqSs6sggBvu9JZx7KmZmG/1TFN7c/koTacQZZaiJHpoQcJh8NzoF8b7QD9bY\ngO+2V1WWkTWAVe+Iffe88am2pIYrDFmwIr23TstJnmFGvfz6dOs8OUmgwZCk\n76U9ygYSuTWMjbLTBcVwZP7SJQgTzBCA7+7vi7wysU7l87t804vtvYNnVjX7\nctl0XMxu8MFKBO4ztA4C+XcstQihSbVDsKbgvk31e18p+7MnOAHlA4hrmPjw\nyBzUso8M9LFIXqsqr7e6E2n1VUsqrUrwwRkoQdHajbIGFQy4yjhYtFxf7d8f\nSlCWxR9VYnzttH3WPrPmjFnlbQqTAY4UaCPlLqnYDNdOFyUyy+34DMbc29E3\n7cOwlUGkLdAlnL8UaSjJfzGSHJyE379RFwhjojQwXKr/IgLFNjunNwuLpsBi\n7j/4aIoO1OLkpQExzFymFY7sDZIPD1kMYj4EzEw2+g6W41+0nsnjdZNALiad\nkOu4mebj/InjR2y/7dLSQABDUNDg3DRVLb2MBMxq7iaur89QwVgi8QXAWFEl\nMfwB\r\n=GVqg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.772cc1068.0","@material/tab":"10.0.0-canary.772cc1068.0","@material/base":"10.0.0-canary.772cc1068.0","@material/animation":"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/tab-scroller_10.0.0-canary.772cc1068.0_1610582905696_0.14633323943675758","host":"s3://npm-registry-packages"}},"10.0.0-canary.fe13dd130.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.fe13dd130.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b7b0f0a1e8e5c82f5662da380e313d243f50e5da","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.fe13dd130.0.tgz","fileCount":52,"integrity":"sha512-nrTnxX7fpZiLLSzhCNkvMKZv8F90PHLN88VOYtaUcMg+66Qi3VMUqT/26Mz1BOCV6DGih1CWcnoO8UyBWrWWzQ==","signatures":[{"sig":"MEQCIC/xs+T1j4/D2H8Y/yrEhe7wzzqVsqZJeYSkYXNi4JjCAiAcswPfWX6R7eR7MR16zh0ILR56S2wIz1pl3oJdIgC/pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5pACRA9TVsSAnZWagAAqtAP/1zE5YEBhx2fIJ7ZjTv7\nLe8TTV9xD+Mnd2FbqBWoNyCHCUIHQO+HUU99OZnpyqEAYgQPKqsFWnXMMIl9\nlHJiKYTZJrAfF9aLUjnj8Gil9uiNPv4HwESM6IXPV0JWGrf92nsO2LtxMwG6\nXjJ7azuDbi7s/2h5/egJVXvKBEXTo3L4AC5wYMEwZjLI8HHVajNs+CEs5RhC\nDcj4mIrS6O5KRmlf7T77ZfJSMPGkn1c15R1y1YynnQYx2CIKl0udK/EeeTD8\nAKSm+y9O85DMoJbDiDSyu/R1VNrcx9pD2Ai7j2KO//K5QFSlbP2bganeqZ6O\n31H/9cHcIplte68XM2KOpBCUwE9GtUody07Ei6lXxuBYsnULbNHHfICeAngp\nAG0USCLwz2hLgOqUmW4g0kILWlomCwifOBtE91eystOZxrNKE4V1PEVNnqPF\n+DndqeN35GGtryzYsVYt1htycJlS7MOox9e0KV34d6X0kjssQEOzfR+eJJP/\nR6xBedMD2vvokCQh+4ZNHNiKFKhfd2QRWElhxSHLz5I5rY5dK4tpFswZwcrm\nX/EtW/ldeBsVkR5b8BpSePF7gMQCfxLPLmrMZPdadVozmiDgoEhjLKRGeniw\ne2msCORr/dTmz+WMCN4tPxfUS8TdceU4Hm9mry6e8hQGUlM2nHSMYkXeky/K\nBuZA\r\n=Oqy5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fe13dd130.0","@material/tab":"10.0.0-canary.fe13dd130.0","@material/base":"10.0.0-canary.fe13dd130.0","@material/animation":"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/tab-scroller_10.0.0-canary.fe13dd130.0_1610586688327_0.8242952588820067","host":"s3://npm-registry-packages"}},"10.0.0-canary.c7c5da28f.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.c7c5da28f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"511fabbff92f4e73eb3c52f853e8bc9ac3877cab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.c7c5da28f.0.tgz","fileCount":52,"integrity":"sha512-NxhDE1aZ10S4lxL5qOzmdjSZf8FqzfB8TJ3rG/jw0ekKn3K06IsYZrzmyex+OblxTeRAUou9SJN3g+EBfdjmcA==","signatures":[{"sig":"MEUCIQD9gqvxQT63u2gA68bVLRh+byyYm7mt9pgwejkEr69DUAIgLkfY9wqlqkkcrllJUWhaJxfvM0oV1p/df7fa2b04GsY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJf/5/YCRA9TVsSAnZWagAA+gAQAKIfTLlvPziTjpe+YWFz\nvSsaz3aoB/VryPnyheZ0wAGmOOz/7hque09049cpIYM1rYakdxJ6brYipwrw\n5+te9cop50qS+hdyraAaPMIq7Msxpv5XsB51eM95SzwpL7L5/+lIxqWAhmAY\nLeY32i1+qeX8xyt28lwctC1eRkFiCmq8DTjVXVxmsK3RdKU54CK3TIXte2Ql\nT4O83YyvTrz1CrQZuTFMyf9Dhcbm6UrguTVSvtAJWe7bhqQhimpCnrjkL20Y\nZNGmPkS+4anOuWOhJxozU0zBnVteC801O68qCYICqzelYjbrUvifM37aEVVr\nxiiEGDLdsNOV0ZL0XcFGzErXxOJEEhcHFulmlmOkxdFwvdnNlnSLvs/Fk90n\nIcgk3CiTRoEj3ljl24HWuyEKqbCbAqPBvTEIt+YmHHG428RjFpaws3EQH3lK\nbRk6uy+zz/ILgebQHgwwta5Np6mm6Z8qXPPtM14ekWWKW9RsorGxt3DSxOha\nClt0nrclLDBTk9b0D2AB6CygFT1xCE+lrHb1faQHeAEIuGX+pLKrPkRrMxmN\n2hYQ7zoyMDvbUHvnajs8asFgeahaYtMU+C5ue3p5wrube1bv0KC/2+RdhUXJ\nV7UlBusPOY/Wq5mdcwoOXDHzAVxsEwxXBhASs9fKECoFJTkC/rtg3QXj/fqw\nCjMF\r\n=3chM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.c7c5da28f.0","@material/tab":"10.0.0-canary.c7c5da28f.0","@material/base":"10.0.0-canary.c7c5da28f.0","@material/animation":"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/tab-scroller_10.0.0-canary.c7c5da28f.0_1610588119861_0.27414664476344974","host":"s3://npm-registry-packages"}},"10.0.0-canary.b2faa116a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b2faa116a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f96a16f7fa6030ac934481465c2e86f8e77e274f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b2faa116a.0.tgz","fileCount":52,"integrity":"sha512-1G0qQZ42qvMkBm58QBjLzxUebtOuWzsmxL2eCfosTKNgSNlAh9k94udIVOWGH9Yvm15OV85zIi/B7sUXr2R37Q==","signatures":[{"sig":"MEUCIGzEDEfqlOFELATZzzR0WK9127es6wrLTTumdPnIdklUAiEA3Hprf6lf3/DiLouk3HDXsSwsLCcGHJG+AtRoEyuZpvk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgBzK0CRA9TVsSAnZWagAAWVUP/RDIeOPNgoWUPrJEYaI9\nxDx+UntNBG/e+XkrnG0u8ZpTtqUYue6vE0/srqqjv//W48whgknScECFXR4T\nMqf3GYdqw/by6S0hAWLrT7OOyFNqxB+IhcKJkblmFQG1PtPiv3kKVDEXB6Xx\nxJZwupjbJ6EhYqtmoG25mp3875LIZlG4GSQnlMkyoS1Xqpq23TjsMcrmyPAt\niADksYqWkv9I8JY/z7uue+tkBl8/aejjfVuWGVifKclqnxENHtTrZRxVhUgh\nio15P8i2xdt55eO1GzMjkDoCt6XP4ghG1ogkAoOxBUntHm0g1fMlDr+FaN5A\nMZlFR+lnfOE6Fy2D7QV8anOd0NPvDAwVfCSXmE3l1qspqU1dpkeOQAIrHj/R\nR95/ZG7uSeW0X/tXzcp/YDcULR0kvKMm/u72CSXMv4alK155w2MsqNn+T1jg\n8L+zlOMbP0xpLAqs/XmCrnlJutFEY4yA1nu7cBN2XEyZhfkhNOzGkZkMfhdk\nYOo9AlvFmW2ok4G9nR1pN8IAOZqJyV9BBBtIueem4blW8wM+2o25lLYEt9We\noKsR+G6XogkpFkqzT/ZBt6iGE1mjTkiQWFfXDmKGqYvMniN7FoQwIXlGmH3B\nZdtuH/Sg9MlTazqgrJ2MqWr1rDNu/J2NtFSdipIg14lSWZwMC/yiNefhZpaN\ndtIN\r\n=G1q+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b2faa116a.0","@material/tab":"10.0.0-canary.b2faa116a.0","@material/base":"10.0.0-canary.b2faa116a.0","@material/animation":"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/tab-scroller_10.0.0-canary.b2faa116a.0_1611084467653_0.5290185615435445","host":"s3://npm-registry-packages"}},"10.0.0-canary.0c95c9f7b.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.0c95c9f7b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"860600f98a762ffb482c27cd2a7bbe0a15952313","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.0c95c9f7b.0.tgz","fileCount":52,"integrity":"sha512-TUDHlc+d0ADGU1g+uuKGoG/lYHOUT96pPzv7xMwp0qPg2lmo0tLNnlZeKQZQlVGxBYKP6NfKwU3HZiW6m7ES2A==","signatures":[{"sig":"MEYCIQCYUktsEzHkeziUMt7cOtdl0VoUfIpMgh13AbxsymAxEAIhAKq3c3xlkf6+l4LwEiJArNeo32PC2ZUR9G3Z3KFxuF64","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgB2NKCRA9TVsSAnZWagAAc+wQAKQ6uHA+sVZRoYfg2MxK\nBgZnWC9IsLuqvW4b2AR8+RySBy6AHvTl5sdZOhRj1x9C0IrBUak6tAMP/2pp\nQtenw0thiLEa5mepCDszHp48ihs0I/2FPrAGR4UvCAXG9UaoDNbiaVPLVX1G\nx/R2QcESVDEvHVqnwIkXRkRTEN80G6tsZNyZ5QcLBJF7ej6Ho2u7w3YzPHPz\n9/2rMvgSBsTjHq7d6kY8rC+GyhiM9dUCjlAmAMAzf4EPSM3epUeCnXWpuSyV\n6bf1WVpWI8MebT3bjPMj4zAu324dH7mrxJbe2vULcG4tMXTWPUP4KwVjMaeC\noxVOUJWBaeMSwlX1cJ9XNo4GH7km1VWZbsPz4y8LB/Ypm2o0QF6fOdWw3haF\n35pLOWNJWmvNauJ/XBvkNAwUx4VMiOI3BQd+gbrgGz1UGyqp4jgNtPAECKae\nwPmPyrytbyBQiCv5qhse4t81D5n44rKhdVl+FZ7lsIjtN35Wwr2jVNLx1fpS\nuQFLO7hDvJZ/w8TZhceIzu/xlHNh23zUFQJEasWhJGZLilLf79rX5Q4rvnPY\nD+NsU5hZIWDW9DpqRG+/xDx5zSj/0Ciw06S9Ij6ApppeX4hdCP4EYa4LQ3zO\nvRzLFesJUzoGzVg0w7wM68dNLCXwSAb2eXYfC03CmZTQblK/d6WVR/B7CyxJ\nGGS5\r\n=Qb+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.0c95c9f7b.0","@material/tab":"10.0.0-canary.0c95c9f7b.0","@material/base":"10.0.0-canary.0c95c9f7b.0","@material/animation":"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/tab-scroller_10.0.0-canary.0c95c9f7b.0_1611096906439_0.21475041091985791","host":"s3://npm-registry-packages"}},"10.0.0-canary.5268222c4.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.5268222c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bfa800a64c6583bc8ae485cf041ed7f3f30a41d5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.5268222c4.0.tgz","fileCount":52,"integrity":"sha512-yA4rVdoq4wSnPjzPoI/9sE14soOpTT+JDHJ15HvRHWaYT+sdeMGWo9xZFv6TCgbIL8RWndOBBwm9VDfJ7yjM9w==","signatures":[{"sig":"MEUCIETTPdKZtdA0xu7SS3p/uAuCG8NZDIr4HSJAWtBZCEleAiEAjgXvQm9OcJT8oJajFrw+jW3+epCLh4AWyXCme+lfpCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCIKMCRA9TVsSAnZWagAAZy4P/1pEk8Iq3mnHOXQJzpKQ\nR5bLOWpC8xxcF/hiLnlcrcGz1dA8E+hEQZDV+6+Kdmvri3VbL9SHUZ/1jC5y\nKAT/0TL/4KQVmjvo7DwvkKqvObLvGOmpCxZ5dHyxOAA2PqQ6ViYK7fKGjqlb\nd4jAcgtCG8gQTRskmpNTs5RVA5/kyD6KZqtKeaHJrAA6iAyqJMS7JAfBmMeb\nKiixWi3YSCqSHC/+mQ6635e19SuUnv8yBUcWcLly+idJ3URl3ZIt8+4sdyOZ\nhjB875+vkw91KJtX2zoP25jMUemTqWUNj21xL4YndGrOxt9iPE7IyhNzPv+V\n9BsiVwzjXeBD+8xdpv5owLbLml6ucKQSiZ+3xWRtLHUYVWTmLb0pSJSIvAo4\n+lQSHqt5Tm5jQ5vblblYUxC2aGzpPL+2ij72N4J7w0gL+1u+VaerA3I9Ln6C\nn/9spOiNUQO350PXfmtL269yRt4wZgjAq611nltGi6Gcl257T6ISWQHkeO+r\n4nDDJuuBksgRq31UeA3P6uifcTwkdBYo1LuArKibSDVufCcGb2srZ0ZgLypu\nTAtERVRMlGqhTVVDcAbl3yOa6Ok18YQV3C+BFy4IsF5LxUKe9mL3ncAry02C\nw3q5/Ln9QI4LlCHjT4ak7/x9j39mrm7v4eylgnd+67qscfl4Xp4U11TgVcS3\nGe2e\r\n=hTJC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.5268222c4.0","@material/tab":"10.0.0-canary.5268222c4.0","@material/base":"10.0.0-canary.5268222c4.0","@material/animation":"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/tab-scroller_10.0.0-canary.5268222c4.0_1611170443620_0.5001081135080412","host":"s3://npm-registry-packages"}},"10.0.0-canary.2ed2d829b.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.2ed2d829b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c31af5dc10abd9aa991c63eff7902136e7510f64","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.2ed2d829b.0.tgz","fileCount":52,"integrity":"sha512-5xreqkJPBRXpHkrjj/8nw6m+qt28EUgLQhS/vNITUSUZVboYSl41c2t4G5PAsjjiAQ1q5huuglLkYFmpyX8y4w==","signatures":[{"sig":"MEQCIF/5QcG51fn7k8lCMq7TGX4Ytcm1KAR5IF7S/6rPeiJFAiBJ2hQrLTk36Eh7GyDhypmVT1UmbkS/6SRREQ1vrs4tMQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCLgmCRA9TVsSAnZWagAAu40P/Ajok37iAJrUrtzRg9tY\ncfHEedUjLmFl2nWD9KloRxhAATAe5fMRjSw0JzInSuKcdnJbu3h4tv5TuwE+\nMU4raSXhHOtY3mY+F7fVhhBqeamAHe0r4vIahFM2UmrKT4UPoLxSghEtGuil\nrOtohTXPybcTrrbA/W3Ks1ef1MtYuG2d7AANTTfoLiMoKL1zouMivBquEpT2\n7I+/oomhfjC8+8u83gY/XCFqrpPWU8qVM2fcuypTZJMWEdlx/vMohNSVonqL\nitbF+kzx7dGqZNyKsh4/FLCIx8ssWI4kImHCFOv+Pl7Rr/kafsnk5LmZcsbq\nFSTuXf16mxeXIL3mtVKjQoa46koJq05zBoVijKDvMNqzotMSyI2geUpvGFXw\n7FOSUpAvjOSpcdyC5gFMNL5J+B5XDGKvbKRxoK9gjzfKyhomMYwB9zUjjykc\nHP5IqPkuu8z1A8BLTbfwsDH66f5FGSvzByHcXmyOrA9/0ku4SC0cMsDA6GbA\nWgtsHbTMWXwVlcUSY9SoZyRWo9b9cpdcbj5xQOvud2TDInUj0NYzvDmpfdSG\nAayoMzW7NvdY2ZlPX6bsOc47Du0hqFEvzf1KomZhQxqqciMertVYfupFLy/N\nzTMejACALFjUn02lNa8I62UJ05ltKnGBVJOL9rxPMCS/jmbFZSxfYC308aez\nEGLA\r\n=KahL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2ed2d829b.0","@material/tab":"10.0.0-canary.2ed2d829b.0","@material/base":"10.0.0-canary.2ed2d829b.0","@material/animation":"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/tab-scroller_10.0.0-canary.2ed2d829b.0_1611184165458_0.26901776402306354","host":"s3://npm-registry-packages"}},"10.0.0-canary.df00c2b30.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.df00c2b30.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"67dd97ebbcd18ac4bef8e641937bdf116f10dcc4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.df00c2b30.0.tgz","fileCount":52,"integrity":"sha512-81j2nnK6OPy704lPAkZLIrIjJ8pcGRCBz3P5prWBLxZEzSoC/3c/fr5fKxorhS9tlXBihR5BQMFflJdkm7sWxg==","signatures":[{"sig":"MEQCIF6kR3w7aos6oDs67zpQaGkh85Gs9X08GeMPUvzkTr5+AiALYz8vxA0TK8aXqkQWIMwP76VGefThPDfeeIWw/vTpWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCdxgCRA9TVsSAnZWagAA7U4QAIBuVjU4wm4gu+VtTHWH\n1IK0JzvSD+Y4YMAcBT030SFyri8qRDzh3m8X73ctfW6wqB+/vVO45rqSMM50\nF4I8qP53gOe7cviBB4F2iM5qBMAD3Br9h7LC7kttzKHwPVB10OAbHQZgzhn7\nEtjTcSCds2CxRxwcfzlu1qiooQltAoPgdo97UX6N7anVQDNjrh+ltMwUWS2a\nt0bUMRTVUAwnrA7nsCi/M2O+Xbapb0rLGPihC4JDcMESBmGkstCr20gz1MaX\n1Q1DSi4NZPoLrG4KyD2NLLvvOhIYrf1gjtgQtjyGLenrj5hhmYZaRmjtSg6t\nYZJfLKSKGwWM/AG6OiF6Jrb/LO3AF3pgZZ2/lazc6zz73mkrelvrWxkwHfzi\nlPm2cYqM7GCV2JCC6divbtt4+Cx4vVv3V4a9wpep/0Xy39uNVsovStnLtg+4\nxfidZ8pfozXaLymfPEeNKDg/LMBUtVUtgiBnpuOi+5YOMWUjaPAwFOkYmbek\nhOcymjlM9EIFYuD60qwrKAYGWO3kWAKiJVWFVVT5kZrn7YqcIWRdj6wIzGTT\n0DZ8/OMM6jsaLuV+06Kn6PNfXc3/15+wOIP8W+VkdpH0AVmp8/LJBidvMh/Y\nuIiFe2hlLdlVcifb3aMa1ZrLefgZfW4tppFDrh5GBrHdtZlT0QXby3ecMBDQ\n2giu\r\n=lxsF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.df00c2b30.0","@material/tab":"10.0.0-canary.df00c2b30.0","@material/base":"10.0.0-canary.df00c2b30.0","@material/animation":"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/tab-scroller_10.0.0-canary.df00c2b30.0_1611258976347_0.35402812344036594","host":"s3://npm-registry-packages"}},"10.0.0-canary.fd61b0476.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.fd61b0476.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8b5770d678d058521041b53a8753ebe8ee9a1287","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.fd61b0476.0.tgz","fileCount":52,"integrity":"sha512-IdiPsr8xQqNv2hM4HhgkjyyCsWAdM/vZ7Hq0/XmzHhL67o9DlYuVYGHngnOz7VZrN+GOsbq9Fpb5Qo/jDgiNzQ==","signatures":[{"sig":"MEUCIQDzdg5C/4ilYh10T8g4sMEtUCQh7urrAdtZSG8WNhGUswIgaI4avk06YdFMy/4tosjzYGRsQ9Kj6MXkQ5AFloUPJQ4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCd/OCRA9TVsSAnZWagAA+CMP/RQq8UZ+jcorvbRO8lNs\nyBtNkHcK94vIjUqfd/K7pQtl+GvaU3Xk4E5Vy1KXvE9eENokB/w0mGBtdqLS\nZ6m2BHWWg/FhcLioUxClPVr5puZT52inz0c0HN09AZER0H5TuxqJVpJRqNnZ\na2sMEfBvOpFeB8HgZFYgFfJTwKhD3clbCNjf1Gj6k7XrxUTF8KDACIiIqkdD\n6FGN2QfS0CS0b0PCaWyL6YYXMIPjGkb6/xmL+jTilobwkEuVSZyIsYG1C1Lc\ncygaxckGTPet7qKXQcsnRlCyDasO9cbv87rCdE/1byy/de6QZRYSKzENruen\nYUVPdkl890SseGO4HiJCgewrMxdoCKnOEa0yhv8XthEUJ//eZjBlFSwvbIxv\nH49STUMvHR12tysiAvnTRQi6eSDIwXLY9dIyb5wDiTI5Wq8kWkabRBhfPFJO\npU6WTzFiAYWvVg2xIqtJocRdJrN8dj/r+ZtNwQpAnJhJftpBXehIDIMxEGtC\nMSi0eeNAOVzni1/GZUImqECP3SW+3ppWreCqYphl6c05ZsME8yyqlTfy8alI\nonLzWT73UYIkvOLTLvx6lBozeojajGLFXXtGbNXzUUVWQZmFkINfO7P8fmTT\nb4DPy5X3J90ce4Ej0KolTJ9WJPW0lOsjS8XKxTI+Kn54zaiDalJcD6ROKIwb\ni1Ks\r\n=tKXd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fd61b0476.0","@material/tab":"10.0.0-canary.fd61b0476.0","@material/base":"10.0.0-canary.fd61b0476.0","@material/animation":"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/tab-scroller_10.0.0-canary.fd61b0476.0_1611259854303_0.17790908772076053","host":"s3://npm-registry-packages"}},"10.0.0-canary.3fb3a0265.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.3fb3a0265.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b8c74a04864e28698b9aded2471577ab793d8d2e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.3fb3a0265.0.tgz","fileCount":52,"integrity":"sha512-Wn7CPL4VtLl+Cp4jbUub4ls/TecTrAcF81zP8Mc8oJ3X1ftBt2KsyUjPgzFh4ToGR/rJ5TkuQxX5sNRIN8lvIg==","signatures":[{"sig":"MEUCICVQZOzsfEmGL5ONYUSnehLlyQoDTFT1CcRt87TH7MoSAiEA6ifEGFK1dHhqsz9sPqtIrLPm+Au1dzPAqOnJWJ50GiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgChbvCRA9TVsSAnZWagAA560P/341Ar0yg6JpXWpKucpP\nv5X+U5chfE//BPH3A3KpZtH6UDemRZ8O50KJsAExiSlpQLsRu64cZEH0ZC9P\nXRWtbJooJot7hAiuLT0tQDyD4NacMGVc+tqkXwS9uzg9CSjbKcTWNea5J7XH\nfdgGiO2c9LVx+oJNwf+7zm9jvarxKQ/9XszFyn8QH+yf90V3Va2zUj4Bta4O\npKzigc/xAFuW12VpL05rKCFR8SwEaSJpx3Wx1b1s2NBhC8u4Hvmpu57pckuj\n3epAuRJYWPnrHx5HVxz5ybSF83kIQtHYfwqBs07ZvhAZ6sV/i5xD1zOHkH7+\nfPFxPLX9ZmJg+ViEkZIv/AiH9nARzBGZCMJ+LFywsMBZa8dC/bcPr6kQ1qnb\nLiUCngMg7GuDdILrL5AYE7GhENYYv3JeqcYPSORWomJ6S9DaRCFZZ6iOzjBL\nTTp4/5tv9NXXI9Wqb7GB4oRxrl4sVquP4RsX9QTijuNxbuJ5IK5JuUsCjSon\nbKOGgIpJrhljsYQjKsXGA41BbRqUdGq9YeUqJZLyL5fKwkjUdhU9nj6NRGOr\njMCH26fPd2LGxMGrj6RtIpc3zA4jNt/bPqYaVDjjTaslS848BX5PwOXt5Syh\n112/ho3I9Uwf3Q/wkwD/DwEoYKz4uQdod0R0rB33z07MuoV97/s9kgzRylpd\nEij2\r\n=F6kO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3fb3a0265.0","@material/tab":"10.0.0-canary.3fb3a0265.0","@material/base":"10.0.0-canary.3fb3a0265.0","@material/animation":"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/tab-scroller_10.0.0-canary.3fb3a0265.0_1611273966510_0.7533132557318238","host":"s3://npm-registry-packages"}},"10.0.0-canary.07deaec27.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.07deaec27.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4aec8be3974f8afbccdd3eaec4ff06a8fb002231","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.07deaec27.0.tgz","fileCount":52,"integrity":"sha512-NVwxEMUxrKtNdUyyZatN3vfdzTcvpjoAJPzzFXcsQzlLywov8lCAzu82RaR+GOo58R4/XLsvRXQavoO2TkiT0g==","signatures":[{"sig":"MEYCIQDl2LTwUd3OGoVftTNYjUJADNUAEt38fNK75iNJWdMOCAIhANhxcOM342N6r0dFz0KEb3+ss+zCVD/eh9vuwBHGKxeu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCwQECRA9TVsSAnZWagAAXz4P/1PkpyHfQIjO9rGLMFaw\nUAyivVguwzuXMN4SUHap3H75TzYG7i7T1OWnDUPp2XHgUqhtNQYmedKUteKq\n3mMxEkzDwB6x3SQiFLK7ixh7ni0XfgkA2izXZJ39eKdlreH5ozYE/tXWA3cn\nsj7rXvpefR4pvUqhgfjA7fofNL+/BThnKKVJuFE8mxzv7FgDqg/UHyrqTGCv\nPw2oWQJKqobRGe9FX5w5GcE8fho38bx+QfSRdhoa4i1W4tTleB2GJO+AwC7i\ndHZ6DbjCGerZUSdoXE456vfiPqWA/7OjuRrBj1YIsAE8rf1aqmJUU23wsuy3\n79wAKcwYy5tTOUUt00q5xABWrPzwn5lkCKG2sowdNbWteJJaUMst1wvfIQqT\n9lTQM3Y7oDHrafh/brWJ7AMhz+ejTjUjwFW3ySNGbu2iPh3b/Nfu56bkTtJA\n7wb8fk0PD8V+dDGA+TpvpZBiX2ibqW+rZRe12inG6Se07LrYDpa4Oq9Vr8V1\nYG/YMT47ITVLeLXZ0nMiudrPccax/+jdWaM4lvTbQld7v/dPN4+UdSKd+uTM\niTOYuFtdjzQcdZF6UsBxhUtaF47/cLTglTEDTtpDRHgnqxOTu4kCYBa3cPSC\nM0QPafLA7W6TRWhCIhzfa3n37f+itzGXyO7gIvBPaskmdbOuwLpHzuthesFV\nz7+/\r\n=//qF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.07deaec27.0","@material/tab":"10.0.0-canary.07deaec27.0","@material/base":"10.0.0-canary.07deaec27.0","@material/animation":"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/tab-scroller_10.0.0-canary.07deaec27.0_1611334659908_0.8127020702896348","host":"s3://npm-registry-packages"}},"10.0.0-canary.d2959b16c.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.d2959b16c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b0a172b8c1042cd10c540e52b809628a32d86b7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.d2959b16c.0.tgz","fileCount":52,"integrity":"sha512-7y9P/hBhv89ePVdGHp/s1FXiLK8XUXv8c99VXMI4C+VIoNDAXc4j7f1Vh5SgG9IPWUf34f1OpSnENtr5Myf1Kg==","signatures":[{"sig":"MEUCIQDEHFmt8wkpF7knYOO8HaIwzsEllJbIh9OBMx3TZXoMHQIgasiXyVzdt/3Pf3hDbApwaC4GMLtG3nsTzIOLVgsOSOE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgCx8hCRA9TVsSAnZWagAAgZIQAJj5AU2R2nR25UWRO6Vj\nPRXS820bu2Kg/T9FVxarm2OwRxQHqnIUm7sBFbt7GQ6+8MI9Js5VrTnhchLr\ncCTL8EWdRhgVpYIzx/AwD38ZxJchhw/9FcCpsHcObfpNPSJNhS1YjRlYi344\nL5TXqsP0bRV9vBzGG0DaCKi3eRtzw6ypne6pZ2BirmYH99UJc9P6U9gUJ6Y9\nGAJyfrQ1O3F6DEpBuoBqWbS/V7pUvUy6qDwfZnb0sZUCy+U04eTXl4743KS3\nXzKLQ4pOex/ZIFUVygWQ0ln7icY8Bo+JJl9i6myEdmWIZCfbxCNuYKuTYVw/\nAIfLGpyDzYNnmB0JRfmbfn6zpM3NOn5rbcvTwWqYGOQIkYXNxgZKdde419Qf\ngUKTAY+yPxXeSakAX5ochdebt+ZWfNACWx7qu85r7JOYS33QxMNDeqxnHz6E\naJgxEZyiqG/MxbsASrDd4sqxjalZ7ISfdKQBbcy+uIfp4vG7L+/EoElyl/+h\n0QP2sUKdC/X8lERg9FXmzDeBCPXFLAKcZ54O1DymmUlglX4En2ldsskHo4cC\nf/Pa8ygPEmWdq+21/z4AZuj+T5iNItKSxZ6wBtWrXlHxG3uzEdf7s7FkIz7q\nFxUFAJtviq9U9EgxQqnd9vlQiIHImbgRNKs6BJj9h9NPB3YBrnWthZ6/13IK\nr5UU\r\n=yEzj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d2959b16c.0","@material/tab":"10.0.0-canary.d2959b16c.0","@material/base":"10.0.0-canary.d2959b16c.0","@material/animation":"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/tab-scroller_10.0.0-canary.d2959b16c.0_1611341601422_0.6093045807269386","host":"s3://npm-registry-packages"}},"10.0.0-canary.75f3bfe7c.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.75f3bfe7c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d6944fe805ab26868eabd66d3e22127d00487c31","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.75f3bfe7c.0.tgz","fileCount":52,"integrity":"sha512-1uGdueEx5zvJLRUsBKJgTk6EscroNCDiUNYXwV1TK/kj57xbNhUZYmacZtB3KV/Fpd5JMmbnXJDvas8FagGH9g==","signatures":[{"sig":"MEYCIQCAIEVqc+xzq/nlZO4c/AAwzWbX5vArYg7xALyToNCu2AIhAP2R9wFyQSfFJ9i9lk9yTpmCLWc9swJwyMUy+Jyuotkp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC1c/CRA9TVsSAnZWagAAg4YP/1eE24Zrn9nLra6/gLzt\nvKSqlZanC/Z+l2mUj5tQigcbMUjcBGEJKxuVuGuNwU658DpkxZR+jfsJPl8e\nLWY7bPdCjewSpOjKf7TpafR0mJzDwCrz29tVUA4tREDkGD/5H8g6vmK2rCtX\n7Tj9gzFbJXJXYu/I7fE7cszz4Q6aChzf9LczZ9hiWDTtfyaahbfAqLNUtYl0\n9NRLxoTJZ28az/+se6Pa3TRKrUZu/XidU5rHIHaAndjoEmSayxAuJhpba5G3\ndFL7mrNn9Vh93RDjbQRb+JRBkcwxkbP4/t8wlQnTsP6nZkoiMHB0adej8+rm\nRYqCdWP/tLFTN1eN/DB84KFqHbwEsV8LkZWknBGJ3R9VBKc5Mx8T3muDmL9E\nPZTp+n9sZlh24WKMDdjNqoLe2ntUxC6fET0KoVWTOXUxZ361f2nkoEOm3IZG\n2RANYQZs7sVZU80TGz1dZHbN6WggmotgZ6yR+0AHA06n5cVA51gCRDo/RrlH\nEzzmcT8C4tD2o99+1ud83NMsPF4mwrVOb/tCulVbp3UpkkSdpzSxfN97Xyec\nhnEUyFTQj3auNWXlmvDMTWfeeGp4B4IFqawbfeBbAsqeKNdqCskjAiD4V+wh\nsQXI+GO4oBJJ2kVB263MFf4G/k0QvMmu0705TKiTYFrVgpp2osQ8n2eEkvdQ\niVy2\r\n=Zpqy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.75f3bfe7c.0","@material/tab":"10.0.0-canary.75f3bfe7c.0","@material/base":"10.0.0-canary.75f3bfe7c.0","@material/animation":"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/tab-scroller_10.0.0-canary.75f3bfe7c.0_1611355967277_0.3341737906349731","host":"s3://npm-registry-packages"}},"10.0.0-canary.b9adb7a0f.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b9adb7a0f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fc038480cc44bf195304d30efa3899fad99d0ba1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b9adb7a0f.0.tgz","fileCount":52,"integrity":"sha512-4phUCERyCKhXNmgjKUFrNzEU8uC31yhaQRZraehX0zsAMuFIQ5nMloNF8Zrl6bt1JgpOVfVODMBUld8lfbB2oA==","signatures":[{"sig":"MEUCIFXCtfvVa81ZP5Zwgd6IO8Ir72oIRYI02xgwhnq74K7cAiEAnxC6YwctIdB1rNiuQq2q/oacOGawgV05Sj7eyQLDw70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgC2GnCRA9TVsSAnZWagAA1VEP/3aQjcKel6ad7SY5h6IQ\nGBtal/L6wjOddDV/nxH8V0PPJmYJsnySD2gM5634bSSa9ADcqAF3++O7cucd\nDNdum3B45UjXpJaG+w9KEHYPv3bbqb0DjMF3h6aLa7nQxCteVza2U1s1iVwt\n0N8k93y8vFSfMVZ//qhRSeX1o7dkR9plusG+m+Hg4owAr6IUl/56Wzl4fpv7\nUQWdkFtLbtBF6OULhXKRAIgB2OFs+mrBjuCExoIANwjWIxLVpx9WQYVj/jM3\nzAqNhsrb7v6OTCJGdSfpBjO0VsGW+LTQu4mglc+/whYMuJrI1EssAxPfKShz\nULEiEGPid1SNaYw8v7jx4xWwsNa9eFFC+t9xSomA85CjLlyo0q7+O9HF4yK8\nqOdgW6PlI+ylvu5Brx4bwv16/Ec0SYdksvr87lxFhENg2KOTC914/EU5MQlr\ntQ1FELuastyIrsqz6dpdFEYJvGsMUYnpiSPCQLjyqP1DIHuso3hmFBDb+mGx\n9ca4dR9Hdh6J/F+EBirxLpBLofFMO5WHH9az7X/LHiO9gnAjSXBURcS+ztIk\n2mLmSBKk6NXSJR26FRgy6lhSzrcPnnrBWvjaZafMETGVqsPg3cXjy0Y8paVq\n6e+NqtDS79XV+7qX3s97drzDdX/ZKEIdjZWMxo8lflqNeTaQIhygGfbMKHXr\nx92k\r\n=Bw/2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b9adb7a0f.0","@material/tab":"10.0.0-canary.b9adb7a0f.0","@material/base":"10.0.0-canary.b9adb7a0f.0","@material/animation":"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/tab-scroller_10.0.0-canary.b9adb7a0f.0_1611358631180_0.42649467956638665","host":"s3://npm-registry-packages"}},"10.0.0-canary.d29ec2862.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.d29ec2862.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"45284cce35ab8403d4dd44b68c5e6df0b04ee7e4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.d29ec2862.0.tgz","fileCount":52,"integrity":"sha512-fDYDB66YulobNjXicH8Molee7R1Cg4nysZ3CgklWdxC6b+WOXCjNZLb9EOQTRBQ12co93fW6gXfq1D+l0k82tg==","signatures":[{"sig":"MEUCIQCg6pATjYvvq87hUm2s0QVCo4FNCL+QU7rPWaXA3Y6q/AIgcWiVeNBdLnnZZRJMp4SFgKl8oBkRAaFx3Sce0pDfUXE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322407,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgDvD1CRA9TVsSAnZWagAAMTEP/iTRBCrrO154X6bQpLfR\nM0wu1W6AAXUYDCC3/qNmH+0bFvdn0sSzRh/hw6JF3nCMghey0Dqp5cZK1TD6\ns2LCyII5j2hf4Xe7v85kYYiO5GsSYgSBlXj6ZIMvbwP76+mKQcupZQghLdj2\nhYYgmFimt5XB2sjAD6LLo4PV8fWQOWKdPAlfhL3zWM91sg3Vf7zDInKC/zd8\n7oI/VBWswmsdrZW8XPjzExNgTIXMFfQslBYzGO1pdV9grINBm1+6uZxyjxYR\nSOVMLoT4DATOCrj2PwEvuwfwwZI99x7x7YF9gmaEkhdpKq32L1vKAZoApfd9\no7OQhBeQCmZ3lG3CQt5vWLJSqMqTGknJngKUt372HCu7257BV4lQD0NYh30r\nE4Z4vZfUMKiTR612hoA9tBueQeabLIcVLFwj5fbkxPSsC/U+hiPeUIYw/zOy\njSBEt4yWVC/hoGGIsnnP9AG2DmPZ0O/HwQm8T8+hDvljQgDzcN4mQwBl4LLN\nXQOnTGxp0jLS8CsJrQzI0hMuOA+E6JnHEoWaTwPojWQ6QDwiHcrwg1PgkuVd\nUevZk81WgS7oKu687/JLlxPiQcgJMEddhG+eNyiC/S45B64HhEGd1cXl3mCA\ngH6wI4TJT99rpF+POUdDgSkMBU58kGl1rPOoh3G9xmoYL6DU+PN5oa+3fPxY\nO7cq\r\n=HoAw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.d29ec2862.0","@material/tab":"10.0.0-canary.d29ec2862.0","@material/base":"10.0.0-canary.d29ec2862.0","@material/animation":"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/tab-scroller_10.0.0-canary.d29ec2862.0_1611591924631_0.40829089740665214","host":"s3://npm-registry-packages"}},"10.0.0-canary.96be07c68.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.96be07c68.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"516a8c4c04335f27a570fd8298fa1e4810db6238","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.96be07c68.0.tgz","fileCount":52,"integrity":"sha512-JBEJHxA3vl7xERUYJaEvqSrUsJsXGfbzbjpckVDrgYRvHxJbG+saqswOo4wQ9vyFIuWBI3s/iejtJUMvKdyVPQ==","signatures":[{"sig":"MEUCIHHKxJHqKstFwFDTUh7fJx0q1Yl0dpIilIwGK+fEbfRdAiEA1zPsj/QD11pdfeu+uCT+48oTl5VPZ8E0u7U/aRKo2oo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD140CRA9TVsSAnZWagAAgecP/225vha9cszZ+0U9GoUA\n4AW10/RLldI0GIL429h32+5FsMAMY9GTx1ooT1PMSjftTYK4n5H/zBOGFWhm\n0PhgRcoEsgxSOPYpmiHB3HomAmdXPBRJbGxgN9+BQBWw11G8Lrz8G5GgWxvF\nDgigBtVCMkjYHbxjJEvwNdYScHg1kaXHrxeEJhdhyDhe9cH7Emt3XM7idzcn\nMAj4zHXsBMHGAy3TcKjDlMNN7dyKr4Rt/ZfGpnaf8wpkMFWvp7W9d9yr6Lyj\nKKTQlOPv1Su7n9UhZqepij4Du/rOUKBJWoCC7y0BNti6ET0vncxklvceln00\nWfXfMXAjqCWEWeS1Skp9mWLOSYJ00OmfATL3JlTqqLkHAVig3uSs8KNHwXZ6\n9l1NU7VJ0Dyu9c2JupkJhVSjQzimdEvDoLXTI93WAZA27KbbLxqXqzXTSoWb\nHccxiqvsAIHfxQSlrMfhAWiQ4MQy5z5iv7E0+9mjC4i2ZYi3nFEQpQXzAdth\nRM5z+R5a04cXw7dVhjVkB+LnQ8UOXGxO9D38KjSmZBvbbAwu+ppxKfokiO5C\nDa5d7JR1eUFdnLanOYRo+vFPfuFGjZrNpmErQdXgCMD3roYJAM+xspo8gGu/\n6wtVKLzFjE4uIPc2GqRUgGyklZHxN9F154p0SuJWlEfT4YrDjJEN8BxSsIfK\nLsi5\r\n=8NJ7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96be07c68.0","@material/tab":"10.0.0-canary.96be07c68.0","@material/base":"10.0.0-canary.96be07c68.0","@material/animation":"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/tab-scroller_10.0.0-canary.96be07c68.0_1611619892398_0.8979569238407537","host":"s3://npm-registry-packages"}},"10.0.0-canary.e383944e9.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.e383944e9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2bec5a1cc292384a9ae12891583e2c81b37b2c24","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.e383944e9.0.tgz","fileCount":52,"integrity":"sha512-xpjN9cxiq70HRCA8XAnkEq9UBCS9XX3oQwqCmUGSKqk7Wn21ZWoK1JOFSCi4tkk2tHbv3f0kfe25y8yXM7b8bA==","signatures":[{"sig":"MEQCICWrmoSnCP4q1n7m1upl9ygOpF1cs5b+IB/ExSaXAC4xAiAP3JJT3/YfxhzpYi6uUNPg0e7vQKNKmaYkFwjhRAt8qw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD3RkCRA9TVsSAnZWagAAyJ0QAIAGbCD03uYuDOzccP6C\nEYky5Cw9H6M1t+q8YeTJ6X63zJQKPv4kkOC9qbXphW6+51j6kUeZJk7jEQlo\nCGAKvvBeAdoP01u5+Y06bfsRpytVQFCx5T7FIOh3jN+4k8mNY9sFyVVILqkq\nIJ9D+9Z/f1TmM8a0DfzgY94Fa3RX3OqRBTxB9Pj+tG9zkKzGwv0uHacORAs9\n209N5BjohWI7vp/4oYwqn8OkjqLtrYAyLXsHMrbT3bXXa2774OsFgpWE9Ep3\nSUXtvqsXNauU6s56UdxzkbRVhgp2Vz23OH0qYXKWZL91m4FjNiHxuaamiyuI\nb4x0mxGnd+2UDjuKdwLVw75HtVtDfJkinTCBjkPn1dO6L1FhR898WbXPTnVl\n5i4x1oCz5rD5rXNgKMSI7T2YZzfI7tGYXNC0ZQUyAJttBUxLhNKINdsuA3WB\nXTOua6FtNliv4lv4RcSNFRO70JupfqD+7LZBaLcZqm3hOwug+0yUX3/Ttc2d\ntbEh1BzwUi1cCCr/wpZU7SPeraKzlFcF8CepZPZ/zvP4vUytqs068LY61xHE\nuvfsohxmk4LZGUrEhsN7qvSDjw9SAJjBBHe1vumVBOMSU7cadY0H40BEjm+f\nXMb6nTAFYfKrRRLkAxW4539f5GNeYP8c8kBy6jjXEUCcq+bjsxcQWlk6sgS3\naa5a\r\n=R5bl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e383944e9.0","@material/tab":"10.0.0-canary.e383944e9.0","@material/base":"10.0.0-canary.e383944e9.0","@material/animation":"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/tab-scroller_10.0.0-canary.e383944e9.0_1611625572483_0.950146680615475","host":"s3://npm-registry-packages"}},"10.0.0-canary.623af861e.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.623af861e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1fa6060ac35068ac7c196eec9a827b9c6590c96c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.623af861e.0.tgz","fileCount":52,"integrity":"sha512-ZDXAsSt7AGmUaCU8oCiGbwTve3WRZTKs1McGsz75dk4D53RLA2fnXZValzyidJ+/yvGcqpgncfXEy1VBJG9G9g==","signatures":[{"sig":"MEUCIB6xkdNybKCHcwaT0vfvUoveIDep3aV/Plx0O57UUOX/AiEA2n8ZvJ1AcbJtAUA8UdQSmPNzuMJ+brkm8XHhd32SAhk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgD5CSCRA9TVsSAnZWagAA2xoQAKCzn3T9symD/39Ut1Uy\ncyST2b83aERboT7zQUvbW2hPL903w36NeW9ppaL9US5THxGw/3wbYPMmMSq1\nTNtWhx//nOFbbThdmIvwiZxGzHK0h81su5xAGVJscY2XY4sPMHJMD6wVmDYQ\n/sN9I+ZBVvHeQB97vTB8sSRwvdx2liluC7SbJw4jz1/DCKJFqb34jac61jaR\nAFAY7oFW3kvNWz3MIFp98NQh83V0D/9vihU9J71voZP7U+7oiLlq9VSzqJPb\nKPlEh/Ato1EVzDJMh1W4RMfsH+su2Jut0F2WXTKijkqJvl4xxjWxL1SoWMG0\ninbd8IJr2u4l80F8foUfE6PeJM9Nee2QGgQ6fdkyVtBOLNl1OKrOdPIsL8XY\nhJbx2AX9KZxExp7hzy0Hof+nS5zsBmDukZR1UV109SuI/qUH4Nbe/xyw6ozM\ntXmO+AEgfRduElN7LdUszeKYM5n6ysPEYZywufU5BobqGACGk0onveiH6OdC\nozWP0q7/0FJIUQMMVe7uerVZ9Fabz7uW32J+eD3SGEYVQ977ygGiv3g3nu8n\nYqxb41vUH2AdgkfrLt0UAZkz+TQdjwuZOm8oiz9TMRG2uE6+PB/2gDYyQoXu\nObtnX+u/jN+NQ5CZu3wRtsF2AFQGBmvUhDzy+pX7xw2UNHjZ52j13aV795TY\nCj22\r\n=vPGy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.623af861e.0","@material/tab":"10.0.0-canary.623af861e.0","@material/base":"10.0.0-canary.623af861e.0","@material/animation":"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/tab-scroller_10.0.0-canary.623af861e.0_1611632785583_0.8559613641791421","host":"s3://npm-registry-packages"}},"10.0.0-canary.6863fd43a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.6863fd43a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4eadac6dcd3c6adb003007b41c65d41270237aca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.6863fd43a.0.tgz","fileCount":52,"integrity":"sha512-v1usb/A9MfPGLXaZb0vTvGMDZSe8ZAEgHp2JGtV3QhFqhjpMZBQSrxnK5DP0k9JzZ88gmijl1TeR9YmVblUsVQ==","signatures":[{"sig":"MEYCIQDjHkzeMtVo2Pt/EjnTTVLV/uMV6ZZsL9SWim95wGu8QgIhAIVcgGe4p91NWCBUvFrWxKrVWKS3XNBKUftlV84x3mxh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEIr3CRA9TVsSAnZWagAAfxsP/jLKWWwyDKCjqUxesrhL\nLM/WDwYwe21ML4JgYQYyvXS367itaWGwyUocp8Kk4LM/kyVAX4Ke+OJXErWT\nZ2dOapYf9eqCGSobcLxUbwc2MsmJ1brWKC7uOOeZvB7Di3ouDrqY9jQEXq4U\nnv4mKfrN5CL2K0MZp42yW4H7h+H+ogrro1qanvWP0fUTnXCWto+cBR9EUaGb\ntNZsH5M3qoe72guRZDIitl4+RupZ/b1qLY4jyTjjvXIId2Kij4FtTwhqvpyF\nV7kKhLmzNl1wRK0gzYRe3jPt5x8GjHeZByYC82XIbmKwrrn43v0cDbcXyNsV\nFqx5m4IS8nzP5PGPGqk3Z6t7aqrkrIYW3Wxuzsn757jsY1MiU52JfuSjEAzJ\npN6478mY/TZjRvRgBc+StEOegy7w3G5km6GiQ/IfuTckntuT3iS3pctSyTgb\nah/YExfB6XVh0u2L6LJFKDBdUQu1SAtbgadv0UddqZjNB6wrv88ooq8emGdN\nfprxW47rasOSII3+CAKInKmSI+x+7CNz24ym911y5goaw/2CZD1fAwZgBFNN\nGK41vGpV5apSa0hqepQsR5eIetrtaqn7jPVy1WF8k2zahEbsBWwJAdif4FIH\n/hHCwOIXdeieAl1AJumhYDzrJdOLTcnDnnbqFzVAW7nu8sL0bgUxwAKRQVz8\nhuDY\r\n=3mUK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6863fd43a.0","@material/tab":"10.0.0-canary.6863fd43a.0","@material/base":"10.0.0-canary.6863fd43a.0","@material/animation":"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/tab-scroller_10.0.0-canary.6863fd43a.0_1611696886558_0.8491249653621933","host":"s3://npm-registry-packages"}},"10.0.0-canary.ea55b87ca.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.ea55b87ca.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e5f5493b9ccad5c1cce314ae0dbff1d0a00987ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.ea55b87ca.0.tgz","fileCount":52,"integrity":"sha512-Rl3NVcaNdDos1bEM7zUfsGi2nAVLQjlGuoUKaEBHUZZHok60BsMQmTmZ0A4rG0PCQLwH+O6mgflSR0IHAcLdbQ==","signatures":[{"sig":"MEQCIGEnhP0sXbYC8Y1NPuTG2+I+E6+s1PtaOGc1kt5tsCVgAiB+PaEtym4VvXXkgKqAJdrFkKXtzsVznRXuyR8aX6F2pQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEKoMCRA9TVsSAnZWagAAcFwP/iQDu4FeHNR501i8xGD3\nJ0lF9jSr9Pjp+YVQUjm8VirEoBLL8PMCMuj7YD9hCsO91pSldbKj5MynRQIV\nZyUZa3bzVR6uPZM3eXJ34MpbCZgdMB53jHEKHaxjygDFqG9I11j5GGzfcGf9\nnD+um7eIwmVWyq8mUn7YECzWmfHb2u+toFgPTkktUl91FVpfPMPpZmSmzwuV\nM2I/NgDhdN/eqEQ9qjVDqV33ZzUUdtWf782tf8AWloFVZS4UeFtRxirjA0sO\nMPZs5FlkMOGOGeL7CNXYtPodtk1MFaEH8nziGMipXMHC6QzS5whPv3sY8s/h\nxARLtrTiOojpRRAcQLrwGw8Zdn4W2bL9yxCPT+ZGSyRxpy0BRYj8N5+AvArD\nTWVmsfxOp+S1eZO47s0P5ILwjwTwLTIu7OZRgz2XDXtiusTMLczuwnl8Iowp\nf3Df1Ll9uRbuHsgEsK7REPnjRGNR7mkWde4I9GvEWqfCXUO70aso+BmiOe4J\ngyJ5pvRj+uf7O1KsyHKHFdDPHt2b1P/XUN44E5S8EJcUnlkl77/B4neUNy/T\nc2k+nlqbtJn5rOzRrXTjmD2OJWRdSkVt8hKPhxIIl+Voxv8/sEJELJcqCF4k\ncggn2gtHqrF82qFwPBjNTSHCEWX4uLCFm07FOQ/sTn5y97zU5VJUFZWVZLQx\nsWgZ\r\n=8Qpd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.ea55b87ca.0","@material/tab":"10.0.0-canary.ea55b87ca.0","@material/base":"10.0.0-canary.ea55b87ca.0","@material/animation":"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/tab-scroller_10.0.0-canary.ea55b87ca.0_1611704843937_0.2891222265202289","host":"s3://npm-registry-packages"}},"10.0.0-canary.e902ff05f.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.e902ff05f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"59ea515e5b59b3afd532d90c5b3420c5cc539393","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.e902ff05f.0.tgz","fileCount":52,"integrity":"sha512-EXFGyxLZwCZQdLNfFY4rBftJ8r8bk3vvSm0bHI6c7b/FEBR7RESfGkrSbiESG7BBTZ3e7ErQv4b7k+o7/MMxOg==","signatures":[{"sig":"MEUCICnyHdvAvjRthskcwHHpkgxhxtgQePDXIHhNU9Io/g6fAiEA0Qp1PvI3Mj4IPA6RRe9hCGBOUEar76sJPDEnrcCHj24=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEK5MCRA9TVsSAnZWagAA7iAP/RsyPuSxxZasjd4ccPWb\nUDSY1w5943ROA9G3MauFV2Il2MU0LBNblscr9k4lf+lVpuuHeGbfz4EN6Ntu\n0GuulBgF8qT0DdMhKeSvDTJ+tCStHqb7zWRPSkEGLVr2PmYmARoFpdaJPhiy\neSsLusJt0lufQ4DsNcYBGP4IXeFBjNcON8vDrmLixh0sw5poU/pZ9yE2P+bo\na46sfvS1KgIBdAm8FovG3OgC3tfmBUj5H1dt5MLLzU+NX64a8C8USzrN37y7\nULkPIkyKXt8JcJtFBLoANufkoEoN6DUCD40Fnb7Yz99VLmY1m0gV/Q0v3RO8\nu29P438ygwT1Kf9uFO7SAG//3Qfcr4MMzoiqOwDOf0yhuHUl1EMYi7U+gec6\nGmiT+PgSdw75tFtWKEbLmo3ufs2SFmFbhMOeVNKYF+JFxDhSjj084F1Qhxhu\n2TjDwsve92Ig9SRXU99hVmMDsNcu0n1eUj3FMmVY4fK9zBpmw52D9lTge0zl\nbJn5oVzDJd6cuTTLkB9XTOYUUSIMp/pktBpQnyHvfbO7pOdql4Vz1GG+yBac\nrx2Ql/VT/R4SV5K7uelDyBAG0JEq4xiv8AP/mOupKoMw8nvxAPK63IaEP0+W\no8mMJp/mBeBHliSGzpKGFiCL08HBYZbGOArVf7H0onFIIShmlVhMCUdy/WeN\nNWQF\r\n=Uqek\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.e902ff05f.0","@material/tab":"10.0.0-canary.e902ff05f.0","@material/base":"10.0.0-canary.e902ff05f.0","@material/animation":"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/tab-scroller_10.0.0-canary.e902ff05f.0_1611705932229_0.7579991300167217","host":"s3://npm-registry-packages"}},"10.0.0-canary.2c9fc538a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.2c9fc538a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3964f5400fdb6c1930c369311f9dc869e2f4f309","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.2c9fc538a.0.tgz","fileCount":52,"integrity":"sha512-0woz3raTZVhzOpmzIPQrbc5j6sK+UvVUBCpq9yDnn/lqm8MSOP+dACn6kfmE6fDWM+ztPz2rO4Lwe0VZ+yG08w==","signatures":[{"sig":"MEYCIQCGbgqP8y7deInLQuRYPuMNt9om/BGLCx4B92PVkbyjHwIhAIf62styJ4j+JIHiJOXieW/zmTX6J+vV2ipYvOTDmN3L","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgELO1CRA9TVsSAnZWagAAlMIP/iWX7oo+7G+H+uuBFSSs\nwWxleSorKpE29gOeIfkR+WnSyJhXj7MFRgCYmd0bQ0ch10Qhcf4tmiXpDXRH\n4p1UG5bzzDfDP5889hHF4mx+ClrSveHHBN3/+X7jb1WOnaipUu6YO3l1sVvP\nhq5h+KViMbNzsyuFkNYPO5ekf/UOKgC7D4vWCVLZ+xRF5YBJZU3yFdS1CE9S\nfRMnr46rJmFPBmehDpJPTka5amcmYTIfMuE77mS/AVt2dfdCER+7e1hBX3Hj\n2a40a5J/2tDcGXdPqwtIdY1QjHIPl1y/IxqY5ju33Oq6er8RU4kuemysEeke\neTZJPz3C5txVSnTcCspx/flPkMol0kJflMon6x428y1m06U4G/Ldq/I4UIOC\nZ4xBmb2GM9AEURltwUrbokq1AzWKhTqWHq+oXSmvhz7fm8dOZqVPbV7SwYur\nXRV7+eqATa8lx8u/jo+50/XdegoV52erhvX4IBpWYRvFEhMolVYTUtoPpjA+\nrBEIWyl5UJ5FNng1Ew1tJAkpOuxypaF2gsCKi/gUy3IJalpi1gQie2temkAw\nDjScerNoU2UC1p6l6mokLHbo7whd6wgJ4M+/YjR/FglDEO1eRRM5Z6lZNx1b\nhAOh3eMfv6F219ltxITdGnCICj18Q5nvrLf90wZqYRGb7sF9TIEpgHJpq4FU\nB44B\r\n=mnmU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.2c9fc538a.0","@material/tab":"10.0.0-canary.2c9fc538a.0","@material/base":"10.0.0-canary.2c9fc538a.0","@material/animation":"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/tab-scroller_10.0.0-canary.2c9fc538a.0_1611707316627_0.31847594006745084","host":"s3://npm-registry-packages"}},"10.0.0-canary.6bf56aaa4.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.6bf56aaa4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"861d21c0b40db0042193c0f13815f13782b77563","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.6bf56aaa4.0.tgz","fileCount":52,"integrity":"sha512-r0UE89KW5wVMNBPH6BnlzGACfL8p0oVGS08I2O1wVLAFfQrToInrDbxSb+/knLDGFeAvBLY1dWDMuN0Yf19VRg==","signatures":[{"sig":"MEYCIQCAoJgBA3wb6AjpZp70leB96nqa8b6gSb49bF1haQo1/AIhAIi05u7UjHXYWZ3Nz3XYhiGMNGt6K2pVXk+THIE42xqX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEMAfCRA9TVsSAnZWagAABMcP/0mlOOzrl29gZllp52n6\nXm/av3rLrLPuGhSQmJftEqxKlOvXFVhjlT8XEhufKrlPTRYBB9ING8dRYYo7\nGSFOCKAUnpOGzEUeuv/2grx3+xb1OJyTyxKgtthjBabZYf8cZBJJanRe7Xe7\noKt18x6CFazzo6PVlWIMRIDuiHWmdq44VnqDo/rY15on7pxqXXmmPuDYrzy4\n+4E4RHL3dGx6ffIq4d/eHJKZj5O8CThrP8v4DNXMdvLu44yoOdqrS7Bj3iEv\n3JliyHxIg0o29MErYxemG5tXQALhPwv6tXanJiegIOvX+4HpNOH28H82rKv2\ng7X4/vx5fX+KN09Ye//Im+t43zaKtxTCa7UqBgpBI/zE6COMtoEypDIQ1Mh6\nrYHQ2YFnPPDSyyJbYulaV2gFAeAEXf5cjvjKx3dKL9aNj9RtjvkFu2WbpGoG\ntk6OWjAPRZctCDbWe784QV40tH5ooPaqTT4PcK81lDxIEDWLn4K4hM3FqYf+\nGsJZ1x8QRsTk4UE52yn0FKp+H74aIjDMACgsijGcagayu06IGuN0cpDxsmnB\nre41cXRcUzQ+eoHArZHb2yJnRk4DGzDaU4Uhgy67MBC/XPVrbSekvxdkkWTM\nsF3QpBVcDAJNaZhNuRNCOxbQF18+b6LIrGVUFhrMHxuDikIR39IyBiQEzQSp\npVYd\r\n=Qiqr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.6bf56aaa4.0","@material/tab":"10.0.0-canary.6bf56aaa4.0","@material/base":"10.0.0-canary.6bf56aaa4.0","@material/animation":"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/tab-scroller_10.0.0-canary.6bf56aaa4.0_1611710495094_0.7850200643445293","host":"s3://npm-registry-packages"}},"10.0.0-canary.994873795.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.994873795.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f65872057041eda451b6ee4e749be85f4fb2c2b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.994873795.0.tgz","fileCount":52,"integrity":"sha512-ZHdfxgwQxV+JLUkPDEIwvPLpajr6Q966olMlbbo7cSTOYa0Io8AsKy+HFOrrFLHD/bOR/rFLsTh2QrcNOIG/eQ==","signatures":[{"sig":"MEUCIHzFjWGqTy76a95LEf/94iyak7bgm896MVqky1M6EtSNAiEA/e2uW8RBClqSfDgUS8dkDk1HQ37uYlAy84j166VHcJo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEX4sCRA9TVsSAnZWagAAcbYP/1pPJOOY4m+mcDJxVW96\nD7ajs1uwz0Atpu1pEBdetJN9/y9Jzr845YCmMuZepSAKHW46/J/13sAYdOXb\nW2O0gS1/9ypdw5Yf0YJR3ghim2SRvfjMHSGDgy+I7M6xnUItth9aJLF7ku+P\n/piW0GzuXd2St/+sicCiuARRyUlB5CA8/x9TkO0ixkUN4CaejAW+TE8SZcv5\nltDq8ag4fzY05DxfUCiORmzIz/XsoGlhpBAjnIUizakhM40MlvVLZCpgbxep\nSTnAw5trzPMS4hWVk6YByCW+eM/mnd2mygJYNWZcJkUu0BdKCCCfb/WfLoRA\nrvHBFeliU1FnO1F/F3vwdFcjn8cRYmCDHPpxr6+B3YSwP8DVApIKBn66gTo0\n/gZ81vk56m81Mn8WrKtoFK0nKpLq1EuG+4LNVTVeR9xXGZ2tTuBH+bJSh6zs\nw9pZsUYh87rYjeIPSfhZVzY9BAQWcbJrb2aOuAzJkGUqzPsQ6JT8z2UGB2Qg\nOmKaalxNq2YG4RPuBRzRtBjidkWo60vm83VPV7Pv808CjIC8WfOJDhBzd7v7\n2XlG5+E7a/URAt577i/+8QBoGBidSwnIECGQpQGCzI8QvNGZKIN77jL5Uyxk\n1b8E4Sw9K4nYwFtizLjxEjgrvByDR+vHaHKMTHkzPtrm1p3ejNqGXIFDX8Gl\n/RKE\r\n=24vW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.994873795.0","@material/tab":"10.0.0-canary.994873795.0","@material/base":"10.0.0-canary.994873795.0","@material/animation":"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/tab-scroller_10.0.0-canary.994873795.0_1611759147799_0.5003962818275731","host":"s3://npm-registry-packages"}},"10.0.0-canary.96878e1d0.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.96878e1d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"89fe8a6da347aba4729f6aab1a3e398eb414474f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.96878e1d0.0.tgz","fileCount":52,"integrity":"sha512-335nVuy9uI2i0f75MVkPC/6zU/B4TdjASSSiwUAA70qi96LWHqg7Y2Oj3KiNQffiFKz28Q8VJGC7VuxEI4AkYg==","signatures":[{"sig":"MEQCIGn73+UCK6hzdsQjkh2UG8JY092nrizJeHUWLtX4vx9TAiAgERvDEgLQyyvGWluB8h2jOrmVOMfUDuupa8tEQKIjhw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEar9CRA9TVsSAnZWagAARr4P+gLKtKit9hHH+o4gxNsY\nP/Rg1CkiDvx1b9VYUg2qqpFWFZuontpoqxvcaLZcWSOAwUkV2NetKbi/OpXb\n5hffjSe7fl0lEpMDdJrR5UWBoOgv4jbplUQx/teWzzLqzn0smpIdoZCI94As\nRFFYpeTviObgfOZ/UtFIFFoqG1F0d1C8OZST1KddT7yaDd5xvwmdS8C1IjKW\naZ4Stuf5UIvMbgUVyX/grkAQfnGJoQB3gSHABCaUJeb3wlARPWWSMjeTmfru\n+/xQ8bn1u+prFHQn+q2CJAEDfqoxEmIxiDpgqPN/lyP88y3wEORpUq0cEADz\nN1XUvowVUc/ewGVa9a0VAiFiOwVmOQOHSxirr1Wkl4WMpYGQ54cnjHDHrJBm\npAjgPiRQmITJ20Y51bnkpjqspUalkWlbXc+hmB5XVkodVpDyA4NnkeSU6slO\n1qR6H0UPteWGv4lKJRtLqp6GJ21eYnRuZH+toZoPsJA/OY+0n1J0k0gEew8T\nSd89npZ9LapUDaxTyhMcXYn5uCS/GYpXXFyAQsuWbAvrrc5r9o7HxDFcW7iT\nRdllPVvNCLvT7eUtTYTyGXynBzeG6+Xpm8iw3UwFvnr73fNxOPzshUv4w7a5\nbMEDZO7aPR7yMhbi1rvLSXJ5fzpC2u/p9kG4mr6dmJkWmUUBb0KbdTdJIRyl\nsZiE\r\n=pnTT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.96878e1d0.0","@material/tab":"10.0.0-canary.96878e1d0.0","@material/base":"10.0.0-canary.96878e1d0.0","@material/animation":"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/tab-scroller_10.0.0-canary.96878e1d0.0_1611770620839_0.1596043213004934","host":"s3://npm-registry-packages"}},"10.0.0-canary.3c117cdcc.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.3c117cdcc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"141898876258ac0edab0f2fa576b13b29cd62dae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.3c117cdcc.0.tgz","fileCount":52,"integrity":"sha512-u172sd7uHKy37dbIBvOwTKiOedS7mPZ37PV8IYcBpN7YT90NZdK4PdIz/PfDbsrymLp3IwqO3XGQ4tNZYxSkCg==","signatures":[{"sig":"MEQCIAZyA0MKaXu5MFE6ZY65wVE/q7RMYS5CPB7ZDUCJhsMhAiAeaVtfYdwfXgnc9XSNY4h3MQAAXD05piUldFHUvy5X7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEbITCRA9TVsSAnZWagAAlQIP/RojRZGMJcBsuIkoWzkh\njp/EHURKfrgk6/+k16O+LxwjldYb9XkcLnNdc/gtfEKoCYr6ckGi+c3J0udz\nT5MdUfSnc2hW8K0Vh1EMDCAQRDNXvQ4pTpsUmR659KYjZVAqXP9L9K2Zzdzr\noSMNCn2nyU9w18ns1X74QL0v6eozYHvH6KlM6tP9PRD9WOpPxhlIJ8eHaD5W\nP1PmMQ6wFRLMXMn4K1zmmjg606YfRF2ianE/hWfQhkC6jAYZ4fwB0tj6NJGq\nsut4yqaZ1CLWzP+lHRAy7tb0zM7Otw4dF4O4hjSge1c8yOviTuvZRWp+ZPz6\nvK8FBxCwGFR/Wzh9C57tBHlsO+y+vJIzdeFb7FUpaFlnNAlfSPFqptOiPvqo\nVyTFwYvqH2LG6986fqT63qu2ELgMGaWw+hRJctnmZjldFcYXTeFZmMgwictT\ndneM9YNdGWqTPPITfPhwYrKDS0gJ+ZkUG/pevyNYuwAvSLM46MJo7pbuP74u\nEmQe1Onwj+0/wn5XNAuAyTgHKOs/J3TG4YgIBdtjMJ1v5PNxttBpES0JCimr\nvPwfl3+XEedDjIMBqdFMEwWfdXXNGW9VyIWj/QEq3uJBodcxVrL3PN/ToHbT\n5GIwd/u79tbsCJX991VXQX629FvNnVx9SyQOyKKPbT7oTOc+9JcvNimqwxD1\nMdGn\r\n=WKu7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.3c117cdcc.0","@material/tab":"10.0.0-canary.3c117cdcc.0","@material/base":"10.0.0-canary.3c117cdcc.0","@material/animation":"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/tab-scroller_10.0.0-canary.3c117cdcc.0_1611772434633_0.9518224689940105","host":"s3://npm-registry-packages"}},"10.0.0-canary.b411e7033.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.b411e7033.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1f24411c464b0c917810bd23dadaff46c2a2b3f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.b411e7033.0.tgz","fileCount":52,"integrity":"sha512-FcxO/+2JB2vVsOeD2SanIi8skngCWtMIpBRp/6x1WRth5da7CvXxSOOEu9NdXqKfk07lNY7lOVi6Koj/YgRdCg==","signatures":[{"sig":"MEUCIBJMd3AIqMzzMWCDL2vMuqrIJ363Z47qGZPe2ZQpCzXJAiEA2mFwb4uVPSuyOWEv7HkbthK88WyNNizG8gj6I/mS9UY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEeOWCRA9TVsSAnZWagAAgscP/1rf9g5VHppe01s3jH+Q\nXyZbH6Q8BIHW7reI5FxP+NrhoxR9AZLovqJXyS22QBHHs0531oQ9v6tuNGLB\n8wm+QH/ECQxrj5AyrKmNk7eACu/xJu5Tw2bTjwONVrjbzib8ol4slAdvWw2k\n5nq4gW+yZJqSCuJWmDsLkZhr9isRQtPYd118LngLha39lv+//5drj+k1a7Ld\nVZPyUnUl6d7EAUuYUvQHmAetn0jp1cMicS2xCmTcJREv31h78NoiZD0WGOsg\nIfjR9PAd7xBq+eItv2Pw57D8F5BYG0n1OuTnAln6a8Ix+3+UWNwCcUM9/HIC\nNYFmVtKuWXMl5n4dPDby+XMN5NotidcFrse2Io44x26IE/UucaeN083lTYCv\nEOeDA65uVGZCmHjKV77mvxxrzlwyGfay+z4LeN5LX3wNsdfP03aG1fo4BJw5\nAPilrsnQLxY3IKjBuWRehCDpjxsAI/BfbJiDtJPt2jBIf6iDEqjr+KMIseTB\nBuDz2swrWxOekWeb+rM8I8/chj55ikpC8sJrHQH32GgtxwnEdEK4SJyLElhK\nWhvMeRas0eowLs5WtHiuoxVBrsZMGlMs2UjAS42isurWbQXiGlMIJ3qzUeri\nBObhvYD8l2b5bdZlIXwpFpJKc1E3u7TwV+Sow572cto7gBJdFebCy18HdZrE\nEZzD\r\n=/y4G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.b411e7033.0","@material/tab":"10.0.0-canary.b411e7033.0","@material/base":"10.0.0-canary.b411e7033.0","@material/animation":"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/tab-scroller_10.0.0-canary.b411e7033.0_1611785110313_0.5306967892899053","host":"s3://npm-registry-packages"}},"10.0.0-canary.a9ac16b4a.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.a9ac16b4a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"742696b0d5f785861018a3094265d4f10fc6856a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.a9ac16b4a.0.tgz","fileCount":52,"integrity":"sha512-NDWucoZ7QbLlD2CItv9OanXiR1NuAFCMo0jVWd7ybUmlSwahqaaloNccKMunVrmVKzs8V3Zr8aD5FVuWlgkE+Q==","signatures":[{"sig":"MEYCIQCDelldzs5V5HkRtyYo010waMdU1uhCjAsZwapZgwlmDgIhAJmfTG0NpdJiEPRKFvgOy6JSkp2lQQc35Nr4Vp88IcEF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEfGaCRA9TVsSAnZWagAAgN8P/ilQTGWZzbXhX8e2ngU1\no3IIklXiWnHfq+4lktwvRQFDSMWuXfilYHrfSquhYLh8++IrvdKjd5Pjkimx\n0Kf5ijorvGRe7Dq8I6BzbsOvY1A3C9/NeJb61jsvyD5KdMAdQAfpjRFXfKR+\nNZWjkyrdZCcC9rMxGH2gdGYu3z5MOraQ+R/sWOWqAZFkk9p4+dCH8fOHlI3z\niCoC4fg77k4/MMG0hfNOoN7afOPIBxvNx3c50cz5mOOvgXh4pSSI4iM2ujgR\nPDXuB1noH/ZQnpcUHxYN5sKHJfIY1S9uRqod9fXfVLwJjHbdT+SDts3q0weX\nHPnCAYksyy8eVCixmqFEX9GezeFiAiWu0f2y+V7ySDtxR5BlQ69tXoBzfeB1\nuvzybu7tTTbxiwQGUGcUxHWxYAQU+tPNvBpyk1wN29/P6Dd7Pmqb4Q1H345P\nu3VYzwnUOjXKuXsDhN4wvnbiJmvhBBahSCYFnmnPDTRoohi+L50I4QLd68iF\n1RmCwFFCuM4mk2cdigKa+UIhAM6OAkViIXp0T8bFAgOuHATlIW4P5mNDRBhR\nvJJ10DvFYeZ7lyw2Qx+W9MN7s+DH9PO2fRA/Wwf/jmqC5/Ks7RyWYpn8T6q2\nGrTqIVPPM5NH46U2PIksUs6LmgN2ZoyVwNKrPHViR1zSz8fA0CpG2HQaoTx2\nrqPr\r\n=SCeJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.0","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.a9ac16b4a.0","@material/tab":"10.0.0-canary.a9ac16b4a.0","@material/base":"10.0.0-canary.a9ac16b4a.0","@material/animation":"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/tab-scroller_10.0.0-canary.a9ac16b4a.0_1611788697952_0.5656041808457277","host":"s3://npm-registry-packages"}},"10.0.0-canary.fec7b42ca.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.fec7b42ca.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d9b1f58e86c46463b84ba03c32460024075e6fc3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.fec7b42ca.0.tgz","fileCount":52,"integrity":"sha512-nwhN+WO6abvS2GSRHQlUyI9JMntFyjYpH81j/FEgKNFeZnP5IxBYKolmzkPMkPaOpTfzmUji3GRrjDbAbPLZeA==","signatures":[{"sig":"MEYCIQDKiPcfVy4gj7uxDn+0YbN9b/Mg/SXOd1P28iwGpOKCaAIhAOeg8eAlJZ1FTuYPGFiSDZcSQEEkyaOL+7/qo7Jf2G/P","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgEw1yCRA9TVsSAnZWagAAY6kP/il4buy97e1iKDFUdpkh\nBc75tR60IDXPYc6jJVBwdWWtSLq7mm8ss0Hnogp/xQ9aWeoqElnl8pUHjIlE\n4Jsirt2TN+WDxrjGXHEiSIzg9xH9laYrCS1hyBYwA6x56qw5HysegdUAvPN8\nEFIR9JHU+knAO6RadcFldB9tEamMNl4Zskt0xbrdu7zb/+/vOv0PrX8spqEL\nmPu3QF+XiGA9cf8/mAANn3t376G2iPhL1+Bl8ZH5BWkRjpYp7VoTtAQU7u1o\nWZ20Yyvl/l3Q3xtLHBu1vnUvu4hfuEmpW8ILEIPPasNzFfM/9++I3eTbhifG\nt168WCMEKb1OGw9zQPHhSHnbDXR+wcXukReeCiM6oDUypea3nICNv0NHNL2Z\nbLwtgrn5BNeQi6YINaNtexl/BIbxru0pjsGWJpig5XWbL4Ht9MiQbpwiFXI8\nL3iEWSGerpWalfs+Aqk+2xEfqDUPCp21t5wQD2xQe1YnEG2AMlbvnIOLRZ7G\nvmynyzkrBEpk9VDPO4kk9O+YuDfJER3s+BgtutRGxiPv/qCdw9oSKB3nn7z1\n6vdUdY6yCCKkq3Qtd6xyTNjv9jRc8H9eEripvC3seA3zqMe5x2ExcGKDVFKt\n3Bk6EEt+evmPNjwxvYs+e1y0AhOrgOMyDUIYnxa+oq/A/RAY17AFSmnHnqK8\nYclp\r\n=Q7jr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fec7b42ca.0","@material/tab":"10.0.0-canary.fec7b42ca.0","@material/base":"10.0.0-canary.fec7b42ca.0","@material/animation":"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/tab-scroller_10.0.0-canary.fec7b42ca.0_1611861361778_0.19375501217610958","host":"s3://npm-registry-packages"}},"10.0.0-canary.8e66dbfee.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.8e66dbfee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7dab580621961da1a525c4a7744313cbdc1a7f91","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.8e66dbfee.0.tgz","fileCount":52,"integrity":"sha512-4tRTAm7qN2yXUq6g3s84932LR8Bh0303snsK14wBs1BxeQzwBnJJ1zO4uPZMY7DZxbQRWOAnCY0PKTSQL11Aiw==","signatures":[{"sig":"MEUCIGmArvuvGe8V3N8Cjww70nQBdkEK2BV3/bMxTWPE7LKfAiEA0rHooCaFpt6/LoLBYiI/WNfrPGKY828tYc76u2kNPAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGI0LCRA9TVsSAnZWagAADr0P/A3+OkNsKmJsBiqmQFz3\nR1o9g+i+PHgSMQMSXYok9TSdOg5axJBLSTSkPxabSKnoIt8EM7azdGFmsvjj\nB+DqxKHBW/jhfHpOyOa4Ep27769s73bCfdCa5vuLp06KLtotDmlxsLwJSaav\nowy4u+/wPcJNGHQwNxDhoJDnk0N8N/EhkYW+ngSA70p7v3kvPwPP+bQJIG54\n494yirrsNGWhcsFqXrU1DiDoks+ht3dYOoS/GoiL1CstKz02r20xK8uLutXc\nxUCAeYFc0cKDax9TKtDxOcO9L71Mdcn6v/Ixzk0oj6teSTa+tbncX76nufJj\ncx5GYXPnv3ZoNbR8XbfXXhaJaA1qVo2luSa8hDj8LC5chr6xjoBxZp/J/IAp\nTit7CUhNPWV1Ljim2tgaaHXA8q/cDhcS0aauxnmPvoD2YKy6vZcFd3xyXD6D\nJXOw0fip3VcFeWbIzSawYIKzuqPwBGUML9Bm22XfegpovD75qb8OdY405LUM\nIxqRlgx/l5pGp0emlWmWGEQCI88snScliPBTKafW39L+J2gQMAXYtft/gGJ7\nbEXxwYYGCxo+vXtGCmeToEj8gW8IK96d+OCrTKEMOs2Kq65xByK2CMx9dMRf\n908EHlOxvTxGDD5HbdevKkYZkil8AeohSGsnxiBkx0212UEyG1eQl/pdacCp\nYYns\r\n=2sIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8e66dbfee.0","@material/tab":"10.0.0-canary.8e66dbfee.0","@material/base":"10.0.0-canary.8e66dbfee.0","@material/animation":"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/tab-scroller_10.0.0-canary.8e66dbfee.0_1612221706822_0.12272409291009945","host":"s3://npm-registry-packages"}},"10.0.0-canary.637d15da6.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.637d15da6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c0957edf0d044e7893b6295a04e45cd295593075","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.637d15da6.0.tgz","fileCount":52,"integrity":"sha512-zWp4SlH3AhKiKRu3bOZwSbPyqOeceGNl62YLzdLLXMu4NcF/LVI3E5A6xlSeyEZyCQQMT51lRSfECVb25C02yQ==","signatures":[{"sig":"MEQCIC6QfEH2ANCgkGoJY3SxF6+zffy6ZmuUbJKwVpLGl227AiBSn+ULsc8p8lKLfn7DQR/4Ok7WU7jz3s5LUmdKIcC1gQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322423,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGZ7/CRA9TVsSAnZWagAAaFkP/1WMBzWj17O6W0VGLAAH\nEUnYeDadn3hL5SkEd3IkMi5xdqwucxM0gnA/kL8Xkcj1H3ItUWhpBNc6y4PY\nkauaw7WU0ftmF6Aza4WZ+SbhBfvClKSyOQRM1IfP8YyrWEiFo7IgHi27Vd2Q\nPqQT933fK23QcZmSiw1wPEVdfkIPBipeMRw50cT0g32adpGh/MYFPycrZEXe\noWiOzGqeUgmbnIaJgO9VZAlfHmQgzlsLUcQSxqU4Yx8zixn771T1rWt1yPpm\npep2pNrpvEcoc2ON+UHycVroWknCsxDfwCbNAT3796/C77dzTU79ICmzPql2\nI401tEpZn3pDuBkT90gSLen6s/XVr0p99jVaXTOP5ENYqDJn7FtNms+0M+dq\nSSTuhWMbUNeahgvSBuLk+rn+KnFshv7JRQ5QHLlHcAExLxB9qTQ2bndO6TQn\nPDpT6QWqwPp3PGhm92wsiNu9bW9qc+BlDKH9tS4rdZ97Fg0SFJtER1Yb57i+\naKjB6IfSvSyMV4Je4jy8HulKMGwxTZa8kijk38cTBLOkdru6qYYchPGqhJFo\n7ppSC8h01yn7GtMxECyo5kaXJuqzZAwyaxrPIIqqGiTFuMXQoUDGEZWaEwBg\njyjr6mgpv4x1ULXIyPM61DDKY1cOyF7EwQpayL96B9foyS0SIse8+OZccbfa\nyfhE\r\n=e4cG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.637d15da6.0","@material/tab":"10.0.0-canary.637d15da6.0","@material/base":"10.0.0-canary.637d15da6.0","@material/animation":"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/tab-scroller_10.0.0-canary.637d15da6.0_1612291839212_0.9049670424835794","host":"s3://npm-registry-packages"}},"10.0.0-canary.fb793939e.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.fb793939e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"59faf58d069d6f2cc466fc03cb6cec36c462ce54","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.fb793939e.0.tgz","fileCount":52,"integrity":"sha512-8zM2ItDAQhem8UONOGGjpgWcfvn/JBdFCwl0G2qZFl1rv2JUg0T7CxK5oK2rFwWxV6b6/fVBCd8wUg6VhOabvw==","signatures":[{"sig":"MEYCIQD0cBrrqhkJsYSgZJOhyeS9/ZKmR1TqTmWhMXdnlYziKwIhAPwcJ+F50+3hosrpyZEnnThH8U0PTDEKx3slxOolFxMp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGePdCRA9TVsSAnZWagAAb6YQAI1jnITiSlJGjoUwqdtk\n5bqV7udE5qEiNlhJVVjM+6wiWCrnH0gEm6fFbPTAR6ljZp5FBASusikZEtM4\nZpgUKxyfT9JIPVglDDxESwrc2iHoCGLRpTEssrSS0mQTODWQGMpIE/qTaocJ\noZpD0QKE5UpypUGIr3CI0e2hYgDRiwWHDv88ECPkb5XtpmcYT3+g4McWrmnw\n2/LmNuvElmm0SZL+1b4u5TLug6Rhn9OKK/gK6gGAdwQyt166hv/qLhXgPU3V\nMkUkGDM3/HmyT1O2nAzfdAPwE3tCxY1tx1RJhSYInD+ahQayj/8c89eMowzH\nILRCLEARgRB5Tn7435PdIN3tDqOa5hzWAQd8mOoiyAu+jiJw3I1RwPgHh6gW\n6r7i5hSqxDMgMPOLtBsSb3+shFo5Sm7XXXE6uW40zqXNL4jlaGmF3Zv5KpQn\n0iDJujxWgk7cLKlUz9RVsUQxXbDTWPhAiU/XRbFHeowunfw/WBOX6NlOlpjO\nV+BLrFa+RiAW262BO668SHBklVWA+Q8EVZSurga5NuxUEDkw/ihKqi61Puzf\nZeYpjsdRsqeQQ3NezbQmQs7gLExqSz2x+yTz0c8Hn1mLRDDvSKCc+d5w+ohp\nOo+UkLWhhVvxx1WTIUGD61CFD1Wo7UOj8UgTWXscDSThD9wBmh4e0EFD6X9O\nB9xK\r\n=csN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.fb793939e.0","@material/tab":"10.0.0-canary.fb793939e.0","@material/base":"10.0.0-canary.fb793939e.0","@material/animation":"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/tab-scroller_10.0.0-canary.fb793939e.0_1612309469464_0.07830005592930989","host":"s3://npm-registry-packages"}},"10.0.0-canary.15a4d40dd.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.15a4d40dd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f1ccc0675a6cac4380d06d2eb3960a0e4edf5066","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.15a4d40dd.0.tgz","fileCount":52,"integrity":"sha512-MYwTdhN+HwcvSzTj/qfFON4bWw3gSxhF3hbtGNl7ECN9gh5WDzuT48Jn8Gl1wNu7SwRLD+Byv0+eEX6Zg3B85w==","signatures":[{"sig":"MEYCIQCMRIxEigCCgFt3l+wf7EM+9uexcnFnclXfF7+ujIIwkgIhANazR10XaaB/YvxxqMEqq99IcPLqdCIxq/CTieJEUISb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgGghCCRA9TVsSAnZWagAA3MQP/1bk6zTRzBMR6pxDF161\nKeLrKgn4E5mfXn7W2J7AL87hbRmjjL9Y38m+0TNFm9u7TmCtrSfeuyB7RUXS\ndtWYP8vG2Ta1AiUc0MAMAb36a7MT5z5+uI7HpSd/RPHeYRZ3KJrepzqWrq0A\nOGP++aktucJbgdHrSnfPzmRcclbM54ZDvYV2v+EdsTgdPB2Db7nNq504U7fk\nhEia0hQYbknEnbH8fKNyiYgCKFHPSSgdh8dI5NYANc3RiNg5LyLDelydLTdn\ncmT/kldgz7JyBQ+OaGWTYqWijv/EGkZO/cy7jbmJpB0vAbEAJzajY8CcdM1P\nw8sXlncu6YDOpuu47Ydzo+YTsI1oP0wwduWXIqlmpHNw9E71I7wWPZMH3Sk4\nxSI+oMZeXAFuPCawwTLXcQ65Afs1JX3U/jKGQJUDihWcpSv1QalzLN6VE5rb\nzc2lr8lxDfC6DUJj14B3og50fCCoKffE7bTQSqU1ETktasLWlDjXXp4lq8a7\nVHR1TtSkZ3JrkSYg3oQefeCwzafV0S/7ArMLW5J7M/e8LwYq0sJardaRKQIx\nl7uoDfyXXQ7VZdF+61LULo/dHzE/F6chtPGtSYFp+Y4UoMnYLTWbkUQbY5hH\nSfybMNYPpztp3ed47eGV8yKdi7MYGMcD4A+sPPbwv0KmC4XLsZIJE1Tzj7+q\nUcaM\r\n=b1k7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.15a4d40dd.0","@material/tab":"10.0.0-canary.15a4d40dd.0","@material/base":"10.0.0-canary.15a4d40dd.0","@material/animation":"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/tab-scroller_10.0.0-canary.15a4d40dd.0_1612318786126_0.07996817537308831","host":"s3://npm-registry-packages"}},"10.0.0-canary.7a003acf0.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.7a003acf0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e042804a9e815afd7b4438f4870a72bf1f6c8137","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.7a003acf0.0.tgz","fileCount":52,"integrity":"sha512-h/84q46B1+6wkULtjqnD+7owA1Nmp++8+iuDiUsBVCXPeq0dnD79xlbreyAr6c1BVXrJgGf9ZlIwebbegXSPQA==","signatures":[{"sig":"MEYCIQDa4K6AuDYD/UVzZjYFi4WanAp6v4nunE7yc5fReWPq3AIhAKY/pIhnvzWGGZqwR3XXCPfDZMPweZVEsW7v7sw74i8h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgG11qCRA9TVsSAnZWagAA34YP/27OPZi/c0j7+7CtSphV\niJbaq7I8Lo5p0qv7oxDJNsgJPz4rD44FZoJbJh/35u5wX577dGD+VL9Ig/pP\nsGBnPv7PT61CGXak64jxi8VcMrRZazm455efk6UiTEQnfkKeiwdu0h5OwYCb\nqM0r7rsP4+YEXIpvmmqnoXEw0S+XLdr1eOf/RTxpBlk/7+akNXzIz/a5XJVc\n3+691fGLtkd/WdB3W0sC7fiJ0vCOAKqSF07AQ2saqtKyBHXb0XIhEvYzz3eJ\n7fhJrGsCoeOSayKh6fZGUP6j6azFC4FSHlI5rfkOtFIk+r/5XW2ozgsZbHIt\nfyIKoKKAy9OtBIh8yfYmikTG+AVxB5Wj24SccQv2EO3PgZ/tZrsrRA5orak6\nKNP9/Vqg9JBKvZbWp6j4x267L8hnnlr/Y+4NmAI6aSudHHFfgsJ16Bnbzy/B\nlYo8r2ilHVxYzZhjSV4ueY9I/osoQetc2inEHvksoyINGIGBUL8wsHpLyGJw\nHjCkGa7NZE7ykmRpPEA8rkscyDN7ocOmp/cQ0SUW0uC00K7nuyryQUOo4zxC\nmvlMkVmgVdsqI1Af8u1u3etM8/hmivZuGojtmFCSaF85FFBo0qnzVqp4greq\nLsMilaKBbj3yEtwJuSglctQZLInh6hTvEXkK3t8WrjFQIfbZCPzqe21abYsR\nYPn2\r\n=Niq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.1","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.7a003acf0.0","@material/tab":"10.0.0-canary.7a003acf0.0","@material/base":"10.0.0-canary.7a003acf0.0","@material/animation":"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/tab-scroller_10.0.0-canary.7a003acf0.0_1612406122278_0.9159947989770418","host":"s3://npm-registry-packages"}},"10.0.0-canary.05f249666.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.05f249666.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"de8ec3babd3cae0bb5d1c7877c2cb278e8ebe6c6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.05f249666.0.tgz","fileCount":52,"integrity":"sha512-4HgQ0ldfqPtniMlogGi6w+medj6Enkk0mro3TIuRybtndy9uU9ITBB7CoyxwWvvxTnrmnahGYOZb9MAdQrB74g==","signatures":[{"sig":"MEUCIQDHYt/8MDX1MiS7B7zF0jYxJr7GTsB6YuTJvQaUS3Q7NwIgDOABfVzz5ZYXPLCXGT7FCtuybyu/UJeT8v6XqX5JXA4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHDQoCRA9TVsSAnZWagAA8W4P/0cQg2qpPa5xPJJ8yckX\nj0HzVYXasgHuhbKa4yCsqy3DJxzyx+miE63abrto4z/JIryc4lqJfNsEkDIR\nSyOZfFEDGVggny4G+MSErp0prYTctPO+W8Cz6XNPdMT3LKwOdvUP59tlt1Kq\ntEXHr8JjlGbLVKw4GP7tg+zP4G2eGY2Om81sinAG95TpzTQeG/pEZCAlJce2\n34ijD3My5tCGeA5Ue40W6r62wS8FE34SMdAN+zvuNxqSFElatqJMcZAoGx7Q\nz145sQqiDDmbo5/FoQ5YtCFlZimPNZUd3xA+TJqorEFMqvcNIWEbiB2tQspF\nCzIjS3mGQqWbFsGJJlYq796TKKFhWU650XbWPOU54XUR34E5KbkTzsI9pj1C\nuNjLZejqMUIctw9XZnWpV+lcHnnqql49CGFHbHYk2QFGBrItFnjctRq5NQw7\nMNnmBLXeCV8BzJ94tcUMSNODMNGjHH5E1Zsr3HMGTBWr2YUHP/M8GwejBcgk\ns8cX/T5ItZ8lkjcgXWCf00J3IkuQbaQAqyv+ghheVi2rAbEmv0krFwC/opLx\ncZ4WmoU4xCfH3qb2iGKbQN3G334jtAvCKbwx6az0iTtswm31LHwiqw79K1GX\nIMxW6VrHAML3HGsH4H5xyZUHzrA8e0Iyq3eQVDAlo8cBehAjyfT6S//w6cqQ\nvFZo\r\n=Z+m6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.05f249666.0","@material/tab":"10.0.0-canary.05f249666.0","@material/base":"10.0.0-canary.05f249666.0","@material/animation":"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/tab-scroller_10.0.0-canary.05f249666.0_1612461096365_0.6665825346504133","host":"s3://npm-registry-packages"}},"10.0.0-canary.1a3a39629.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.1a3a39629.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e23d2dc39b2973d7ee63909a9f3135b0be2bc1e3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.1a3a39629.0.tgz","fileCount":52,"integrity":"sha512-GKf0SrsM9YrL0X/OWir9md3mbKcPStllGa5p//AHzXZef4AgodeLbMvTlBsuQjY6AGjsdX+Hu9Ctb0yI8oeocg==","signatures":[{"sig":"MEMCIHazNX5STeZ5NJSzCTPrGqXCSvi9lnORETND+Zwd5VOuAh8q5hX1iH0y7Lmct7rwzjOEeV9mP2ytws11RWR2KL8z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHECWCRA9TVsSAnZWagAAWVgQAKRVPIyyeo55tjSETKwg\nKxPcw+0I2d9x/N20whC2aSTwf0CmWRDNJrah+PNG/nJ1XPvWHHBu0Gn/J6nv\n5XK+cogcW8izjF5JeiHlTOKLzHogkyAPxdf/NW3KKHKCtI6yQRDVBqPnWTkB\nC4pRKR093aNk173zjtOYhn5h3+6XhqM/vhMKOKbgnjq656tl6mUtzPk881xO\nNvHq3nTfhzLWMa6H+MwGAGk6SpngQUZ23N61ynj8qEErt9rZ704aRnn8sCY+\npTH6lzsaQRW1swDV0HGI/RHQaIZacNyvrUsU53LhR6i6lVmyH+FUKieJYHES\ngkak+AxoHsk7KJs7a/Mmq0226nlnFz/npd36GSJXEgxkjdR6q9yATFvwjdUp\n7reJZlFZ4ZX6plRlmq1QkanWxDkYyvvgPv4kEuP0Yu9+95NkiPGGJpthvNZP\nrhgqVAf4qDdBzjeeW43r0eeGiZPQXtwboEpTXHdGOw6Z2iJXCHsZQVof7On1\nbqsKs95Khux4c0zeBrwgqxbVUdiGhWjOCy71CrLZC25QKH3W8qB7U+JCBSOP\nGmzemyR1zwPp0SHRAloIEF9r9CtUo8QRD+RHMUJCtpgxuGNzAPC2TX2obijW\nLeQmsWnk9Pj//PoLasl70+IrknzlmLmGDtVBb1gii+yDRrI72JhXOyihYQ4m\nolG0\r\n=tI+I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.1a3a39629.0","@material/tab":"10.0.0-canary.1a3a39629.0","@material/base":"10.0.0-canary.1a3a39629.0","@material/animation":"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/tab-scroller_10.0.0-canary.1a3a39629.0_1612464278157_0.5221020453976277","host":"s3://npm-registry-packages"}},"10.0.0-canary.8b1cdb1be.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.8b1cdb1be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b733eb3c08b0d054ac130312ad6e378544f88de1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.8b1cdb1be.0.tgz","fileCount":52,"integrity":"sha512-XtBZBn3cYxYIJ7l1FCnaHupuZAaL4gdrn6DYvsi7sxZfXNtbdQb8PJNXgbJvDd3q1ZY2gi3IcBtRScbh3a5XDA==","signatures":[{"sig":"MEUCIQCFLFGWp/GQdED1L0adkg4rcmlF67lQMNdGYhB54ofg0gIgIo1rxhEWImxpSwv3hfdVhEvc7rqWYyqvlEcheDwZrpE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHbdCRA9TVsSAnZWagAALW0QAIHvu33LIwQ4javEAxb+\natRUICtfDlW04m7Zez4ChM5usbCPa6Olmb3OuQgkxpzyod07qQPGr1X/mDfL\n4P3XM4PVIlqMgRo3k8+9nCT8gqFv/OjYZ74Lj6qsuxOcRf6Ej8MXZWcDSNpn\n/m8KuqU0Y29EGuNzaI6ZXNAjFPexwEq3p/RO2w7yMhG5oZWprzOzsaFl++0f\nWX3N5/VXZPKr6X/H246MuN3+MS+G2lOctw4Z+hionrfKBW/8OhRwaToPZudt\nMhKlqy8JLBsY/Z85w0+Z0hi+DkLm33aC2s6dUCDLJqmT7uuTrSJ3qJLT/nRh\nw1mok0DOrvKEBoT+igaQZ+X2GjdukLR1YJoQrNIOVSdbEGb6lAljLfF/Fr9p\nemv5FDX+352NLGyWwV4z4ZOkolf5mq2IPwLSkcVwQ+yywdv4dMnxbAAzaR0c\nPRXpbQMPIJoC4nqkqNvvMDekNLFYZXS8unSYdpWT/JMOWM7IoBfbyWxhvfOc\nP3Gz+3K4dIKFb02F6uNQQ5/t5guPs84CR7C2nvVcaKfEwYO8FOKS0LBt+bus\nsRPJP+XO5ZlqYveisCP0gB2+Vl8QiTbIRZgWEBNMXGsH58/vHebD29Jm24+1\n2u7mYHwKLX43W15DJOf9etV9TD58GyXjZs29DbwYZH1cWmFuiBEssX1z45eU\nxeWP\r\n=2w35\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8b1cdb1be.0","@material/tab":"10.0.0-canary.8b1cdb1be.0","@material/base":"10.0.0-canary.8b1cdb1be.0","@material/animation":"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/tab-scroller_10.0.0-canary.8b1cdb1be.0_1612478172839_0.2554692144861239","host":"s3://npm-registry-packages"}},"10.0.0-canary.8271f00f7.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.8271f00f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6be441a128a54776c0e120bc2d8ac78bca74ef65","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.8271f00f7.0.tgz","fileCount":52,"integrity":"sha512-RP8leJtXDtRSw3ThEpnnWzAxtTFfh/MjwxUgcs7vnMwOvo02tDupg0RNiOGLI2HxQqjv/lt8092GKzo9++Mkuw==","signatures":[{"sig":"MEUCIBO9quK/SU3lRiAnVUklj0G/I5Dm5JWn9i38eMVUrZ41AiEApXGzsKHBzDVvCXPQMww7kp+IbPXBjKBkBwV45RRThjE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHHzgCRA9TVsSAnZWagAAcVgQAJ+rKC1ed7gYVstCJEcI\naTCbsqCVP9hYUJ0m+GPz43K5pepRG//V99S7Dvys71X1STTW8j77gHm3f+kw\n+SnYD1DXx4Qkz1oQLyUCYV9UbqrNhuLCMvwyUDEk0EZfuFi/y6JvBZ9GoJLT\ndnF2kOvDaCfS0uca4o7E4rKMXZiU1yYTxCJAUsXlMJ0gbd8dLxXchaqJm8K9\nMyRXg6q6UqcULLQ7DURblfvaxjdItdvVV2FEAZVtfJl2EBdZfHOXynA3kk6Y\nS3w0qcUPVrBEAR13COZmg5c7o2vFPnlo0J1TYSOQ8BvNjduVMFZZXxoPOZZX\nLvXAAiFm9EHMHbDyKjhQFYwwH6lFKQQeCKau/lHdCpzTphrOJ8yhXZF9SPvo\nBIlhudHl65/n/awT1HGVNkEnijyi33PHMGYizNnIQkU8fPD4bCxFAXub9XfY\nnEtH9SG0jYrJ+0X06IP84x9OxR/cfGG99LVRes4HmAXBZ1K8JYAv9L1kEaG1\ney7M7sJZO0ltI+7s4IUy17FmAQ9arFNjDdh++D8qbtbm1lf+U824YVrjf1as\nX1pVpfpc3L+hPody6xu92ahs01pfstQBeJmPshRvRtslYab1zc494JF0D+Z5\nVoMbHrmlVEQ4Na2oLK2xhfL3U/fJCsIxfpDOT95oYHkdtclALv4gd70WgwIH\nsCI9\r\n=O1Sy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.8271f00f7.0","@material/tab":"10.0.0-canary.8271f00f7.0","@material/base":"10.0.0-canary.8271f00f7.0","@material/animation":"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/tab-scroller_10.0.0-canary.8271f00f7.0_1612479712378_0.9892763649489391","host":"s3://npm-registry-packages"}},"10.0.0-canary.533092a90.0":{"name":"@material/tab-scroller","version":"10.0.0-canary.533092a90.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f2febbd934c50ffb63472381111983d6fa3df89b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0-canary.533092a90.0.tgz","fileCount":52,"integrity":"sha512-Lzvbf69LmUoPfHzW83tZBQaO1BmFKvL/29H5bWdbVNcTYFYbZEJot1Fiy4hIHemVxyC8uP+fMnAU8FQsoS1vTw==","signatures":[{"sig":"MEUCIE28UMgIIfbyTqb5yUZH509fhdTYbp4pB81zs7IksSDtAiEA3Dp6ybaM238kZ7MZ2RrccnGZF+4a61Gp8IL4/9lsX7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHL/vCRA9TVsSAnZWagAAkTkP/Rmczu3KkiAtNz2QNL4t\n4kowDAjmY5DjTWL0X80q/w+o27kD2gmRwWzTRHLTJgXbj0nmw2zNOYgaTMXY\nMwv1cuNytDw/ltL1C0XiSg22UqpgcdjP+TTscWzOrk8fm/s6bL16vsNVC1g1\nArmtRUXNQVFlmGdPENTurlJ25VROT465/abS8H/MH7oRJ9uQ1U4pYC6qBQav\nWuGfKc0cc6I7PLQM7h/Y8fgh2Wnr0qKQQyCUCqMNTRpDcV+P/Mdrn2fcIQ2I\nyXMqFmtYm5ZZQgCyBqidGlOBjEx7MckSGpvN3tWsN5WvHhgIwZniDqrVLrJR\nyLw4kz2fzz8z0zzZwxFH+Tup2Wwh04+BoZadPGAqIuKj3l8zD1sbDXx9rOmO\n9y3mX3B3VpaurzwACG3pJ4pQx7DARA9ueyzVvH3X2PIo1whqwjB28zZjTOpR\nJlMM/X/WDmum5uz1ZAmXIQ1h7U31NHzedBL95uMU12Flf1CTXvk+3J0T/Htq\nxxmgli/20a0e/X4evXJ8LQnWcaJ1AeICpVoWT/s5kE9rp8Jky1YZYTGhYGFS\nqhaApXrkymysi6Kmc4zZttLl8Gb4bIrqwJlP2nDUm5Y/Rdzh5ZmbYbqJAs5/\nm+B2D7biHv+fMa5U4SzjTTrrnsicyaRq/JM2h+Rv1yvgI/KAyvB/9bvZBwAm\nFjG3\r\n=BTUH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"10.0.0-canary.533092a90.0","@material/tab":"10.0.0-canary.533092a90.0","@material/base":"10.0.0-canary.533092a90.0","@material/animation":"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/tab-scroller_10.0.0-canary.533092a90.0_1612496879000_0.1443587070543806","host":"s3://npm-registry-packages"}},"11.0.0-canary.633a9fc7a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.633a9fc7a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2053086c0007715dec198e8aa5e48e1107f41b25","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.633a9fc7a.0.tgz","fileCount":52,"integrity":"sha512-Mo4CmeL4IFP25PHJiTm0alofq2gBFeR+cl2/Sbb2H+1ptiBQa+8F32qUb+MwPDXe1ZSLBAu+RnxrEHVq8ANE0w==","signatures":[{"sig":"MEUCIQCvpzx5gRmpDZpz+r3eVdaX66o/9KNB3KtibjmIam/4TQIgTVP0U61t3pyYaM2R8qdVehhdOhuPi2701yWZyvTeYwY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323271,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHW/0CRA9TVsSAnZWagAAacMP/1sxtEGSNLt/PfIgjMGg\nxlJiGM4uKiuz6VvauCdXG34IdfpFAfnl8ETkkDU99PlOHZj3KVCYR2H4VFwm\nu2NcSy8UQY/riCFWc90LVQ5JBOmxU52lctaB5ZCyQ++/5+lXYS0HR6WFKH/2\nX7yBRx8Y+1rvr5MvgNrkWRh/W/7ONdDnDgAV0PyQ08E6PY5nvKFb/LEn3d4y\nB/QsQaU6KgCA0aqINNlw/rDk7EqoZe73uL5y4Hwx4li4ACZ5GbTPf6LBrjEG\ngwI81eJAoBlkwPZVOI7y7LpFIRu1XFDa98SBv75uAx4PvVJ/XgGJdi2X3m8v\nVl7n+Ped1irHWMj7fVqWdy6FwpKLLEE3us6HgYVOIDWZSAPg0/EgLV7hgJ6E\nwToY2n+E1kN71uCon9Y7pJEjUMiSleC0LNdfbCiCLjb6CsKuNcEoIzS/G1rt\n3p9Hj9OZgMueEvxQkuUWFFFhGKmhwjYuDaLEyvhCq6bgSrMCCjkVNXlwwnwC\nFide4wLeygpE/pZjirzyerLDi7OHNmWJ9FpsHoy5tKIQ2TQSVSF3EaVGbup6\nrdfzZiqDGcQhWHybKPWJMDot8Q9UaNW4JwNpIngQYPQbciLa/Q5eCR06canv\nrCLfJvP/1EYEsPF06yKBJH1/Au6h7+Be9Ybxhq8Lx7btfI3DrzlPwrxpcTJx\nU+qY\r\n=88L8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.633a9fc7a.0","@material/tab":"11.0.0-canary.633a9fc7a.0","@material/base":"11.0.0-canary.633a9fc7a.0","@material/animation":"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/tab-scroller_11.0.0-canary.633a9fc7a.0_1612541939934_0.0743067085649094","host":"s3://npm-registry-packages"}},"10.0.0":{"name":"@material/tab-scroller","version":"10.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39534cc970b22656665f49a7d448c088871f35c7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-10.0.0.tgz","fileCount":51,"integrity":"sha512-OT0BNGg5Lai8slprm9GfGKm0npZCh9+NYoYic7nNII3icpqCbgnayyZpHA215tQ8gi6wx+UEm+bWMlz4TEGlQg==","signatures":[{"sig":"MEUCIBgE6SvCL3Fe2YK970NIQq6pSf7+5Y9sIhkxiW4ec4BfAiEAiAWLQpi2Kmy9j80xmSIr1Jy6Gx44YBKNvo0VoCQ7RmM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":322780,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHXBBCRA9TVsSAnZWagAAM2AP/ixBgmwGc/mzCHT8tSF9\neDplIIcZy5X+pnzBrD9ZVid5QKTDcBBTgrBIHyY9hjeGDYSU3px9l6AttkDJ\nN4u7K1T30/ry97StJpTk/ltG1NbAQl1tH7HNhEw2RLOI3pwjfizb5cVTxv+5\nlT0sm4gOKT6/F3k+S4dNOQMgR6xrpsWlnB7zBo2UbFFt5bZmp8gsZhjr2uAV\n0KSqZSZD5FJ+tA/Yl6rL6HkxRBqEirp+wAFt5zzCuKmwxj35wLUP3qVBq5aV\nwODPIs1wi5Oy7awFMQs4gymKJ3lyqT/tpJu/W0I8GaKkrxZwfxcolSa/UMq4\nqgFT2SCRabgqLZCfbyAuGzZSVplyODqoQ8M4p0UjvrbtgEJNKirRLiHkgXPy\nXOGKJcMFzfSwnqDEdAhnXrfnofy21hdbA2v5rlzoLOCN6MrIju7uGu2+wAGb\n+YOsh4Wwdf1ZGWcTCsUpvc4pMSA2g85EbKfrE1w3N4NeUS8qoIjsZGN/oA0h\nH1dRxBKUKUkp8+GYVnjQp5FeVUs6eQwu6F7LuJbi11+IxZ+37vEoJonPzOcT\neSKUlbG06/L4yvA0G/Pz1fAVffwM54Ag7qtKu/D5flqjkSb95inOHDOsrTvS\nBSOfjfjsT8L04Xbp21Bel6NBW8w2HqUGMv4/3uoyeMZ1XRiwZjYnuquffIgl\ngaH0\r\n=8lri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"^10.0.0","@material/tab":"^10.0.0","@material/base":"^10.0.0","@material/animation":"^10.0.0","@material/feature-targeting":"^10.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_10.0.0_1612542016694_0.5688727191181351","host":"s3://npm-registry-packages"}},"11.0.0-canary.b5227247d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.b5227247d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ef555695c10c578a09a435ffe65ced9040d08091","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.b5227247d.0.tgz","fileCount":52,"integrity":"sha512-zF0olSt40u7GrBEbXvZzhVdkPbV+54GPXcFWVI5EzdGnrt31FNNKzDW8jAfCmpFKR7yQnHA8RxG7odfSC7bwlw==","signatures":[{"sig":"MEYCIQD0fWQ6sSs/lVtgWcd8JLDwjXlKOLPUltuKTa5KmqFktQIhAMTEbV458Gfw9Zqg9YNdV4Dwe3B9X3aDZN3jlUucisU3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHYPACRA9TVsSAnZWagAAecMQAI7sxiNYpYaWpE835bAk\nocBlXU+KYZRIfOl5GH3OU6Wbw46xCx/3TUwwUfPrEj+KQcL2CAb5rad+2sGx\nyjOH971XopPOLGadTJxcycd4coiESu5zzmJqmzwqWjMGMjJNrVD1zC01njqG\nO+RYNvOEX9F1qeMYq0kBDRp1u94GGqfw5JsOWusHv6GuvsuHzXhiPV0GIw+2\nxoPDlZm3hT6oAiwy3uP1NgOi9h7HjGXiBJAqP0HJDd/TJxXkJgq8odBT1nKT\nSNEN1NATFD8K/j1Nm4LFXlzHdRSajcIYyac2eacZiu3qJfODAz3y6HiQjaOD\nY+fzwtaCwPE3qhNNvha8hUc0N5LJe8GFw/FEIp/cGvzOAvzp/w+OOHV1rhlV\nn47FEg3PeUyQA32AX7u9uC6McVnNnDAjgL35HzUc47P9x9J3shRgXL7jnqBn\n3ghbzD9ts8rFkwrwKJAMPyYj+LrL7+WxLOnwntnLbXl//oejSJtyJpqtWs+6\nx18yhn8ZkIM7V8HohyZgKwgQz3mZ+X4KudIZs+l0tbM8VrKgjfoIs92UavN5\nrtLaXroMwcvjEDqkqDCBHnuKwFnpHYS7FTsteAFS42rPhhoiopwPv+kr3Xoc\n0StzGYMoEoDMMgRwBDq+XutTMOsJkG/6/7AwKYfoRyctJJx0k7YJed63gfQp\ncsU9\r\n=cRbt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b5227247d.0","@material/tab":"11.0.0-canary.b5227247d.0","@material/base":"11.0.0-canary.b5227247d.0","@material/animation":"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/tab-scroller_11.0.0-canary.b5227247d.0_1612547008461_0.28165460387956975","host":"s3://npm-registry-packages"}},"11.0.0-canary.95322b11e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.95322b11e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9d216743a044ea53752cd508a6df41810fd9147f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.95322b11e.0.tgz","fileCount":52,"integrity":"sha512-9ELbW6Ali2SrUueTLIyNCLbJJD3oee7inpfvyFihC08p9fCQ7XRJv3umHbz/KKdq02oQ+ud71e3fO+tc0oZtBA==","signatures":[{"sig":"MEUCIQCyyDu/4sSpRoNJQh95raoxq8XiIbiKpVfksP7rGcEgQwIge/On5RAZjuKem6ReGeD6G/9+o/6LFgMRenmDu6Zhrpk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHdWqCRA9TVsSAnZWagAAw04P/AjNz6rqq3NUCiRbgRsE\nRby27TfHajLb3scjWWIWrnUkHMJEEJUGbXAzIHKg9JwuyKeKmIqLLtvAIuo6\ntHLKYtMwrH68S7YgDF6ZMbiusa/tEiyYllqiJ1H4pjUGjGXA6ejESxQicBbI\nFityEsL7ejvad5M6x9aPP6DWdp2o4o0sOxyAOoSMQVa0NAiQQFGwCdwjC4TM\nhf2oPXF4tWwmOKhZ91PPr2gKqDV/k6e9+6pOUWiJnB3m29R7LWRUuxe0CtXE\n+P5cPPpbTOJkCT012LBHMrxwu6kjkeuU3Ri68MrujHG9H2XHmQ4uHjL0X88u\nen/PTGUqt+oZCFbRq9TpmzPNxRwxbY12WAQy/LfEvTUeaJSzmt9nh250jUsz\nSRtSbuO1NzNC7qlLtsZn1vHwD9gTKNFVuuoWjq3SaZgeJLXcwnFy705fiZrJ\nWcMX6WdVPYu3bl5Od89codRJ+lcFZqqiEgsqkC5oC1+RmyX+fF6WtqbIMcvn\nSm1Xdll0WuNPhkhmzKYk0NowPpahXY9yY1pBOhFj7rAOpKlPT9k8Hdoxppo7\nDdcbNQ92KzSKNDKrjOhJgwOA5fK6DPtgzl0FGmyxC+NZUcOtJhqerUiiJ50V\n8uvdmruWeDDEdbD3faLzvFFmwUoL/BXetteXkiSEtl6X1FVlUFUNRWnAiaUf\nFTiW\r\n=LO9B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.95322b11e.0","@material/tab":"11.0.0-canary.95322b11e.0","@material/base":"11.0.0-canary.95322b11e.0","@material/animation":"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/tab-scroller_11.0.0-canary.95322b11e.0_1612567977705_0.06015243816849547","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f318ff0f.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.1f318ff0f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f0af9136e8ca5888b1f2a16a48cd819dab973116","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.1f318ff0f.0.tgz","fileCount":52,"integrity":"sha512-rjElFrPUXO/1eJa0YQeNACQ5exqqV2ECWjfF5F3mYB9y13gLan4Sww9Fakj2LFnTIXbZgKPonJLzZXudayRwzw==","signatures":[{"sig":"MEYCIQDidmfR9TNsEN4G7yHru5cWzy3EcgeU93glKR0nDoe6SAIhAO2bRUJxdQvp0GHVAjD0hGTuvlKzP29yBCjPOGFtaUbc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgHd17CRA9TVsSAnZWagAA2SoP+wYdwY1S001y2I5mdA+v\n5OTEhVJsFUujXaJpzunu+Kdz5xBx9X0WPqZi6HJBoRecfXiafp2aH7DNibCe\nstRB2U9jpwDh5leND7PjsQZVF8HHW1hBcIIXJIyXd8dtmG6cns5ruZg+Mm/E\nM5OZET8eiK6ir3GnXNiNCmQQVOJ5NHlH9vAwT60CF2Bqu0yccJs0bO2jjYph\nRtZ84HTN0TweaY5ZlUEy+V+pna4pzTHLA8TggMW8BGcQvxurY9VwrzajB9Zb\nxTbaycp0lOwU7DTFFoR0+juYafil5Iu+pGAk2Oro3ZPaF41zqTfMlyzPZVel\ntR1rdl1W4ycY8T2vXxJe+23J/60198+iv0uF/0dKIDVEGxlqsPMK2jWJXXB0\narTc8aQF8hH+3ji5AxyrBrmB+QluAiGDCD6xDHRASJtxTol+7TwhDBHtG1wd\nIsTxsVwP2+MsqFK02mcGeNXeWRIlD91SZSRukoql6eIII0ZDrdqXqh+CtxaL\n2BebahCI8weqU16kXbY6yvWI8sT6jJ39IgC7SHZe7VLzKMw4FzCJzFgpFQIc\nqvEe7OtS09958RQL9egerUFWndZt7KnJecdj3/nTpdx+xIqHpeuXdeVKBiiH\ntCZWqMHL6/9hhPjiItt/JPsq5kHvGmXqt4vUEfdHFBb4TxOf0VuuD6FFkjbv\niGMV\r\n=w9lT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f318ff0f.0","@material/tab":"11.0.0-canary.1f318ff0f.0","@material/base":"11.0.0-canary.1f318ff0f.0","@material/animation":"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/tab-scroller_11.0.0-canary.1f318ff0f.0_1612569979334_0.9063117918055801","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab12cf7a3.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.ab12cf7a3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"534a968c3f7f03866bfd0d4be26dc1670d8bb5b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.ab12cf7a3.0.tgz","fileCount":52,"integrity":"sha512-My9wNTAtF9ygF9wuJdXvEo1cjKjWDQKcx4GzsW3s/MNoMxY8QQV60xf1fHGA8W3vOEO1djjKDV9RXrR/+P0VHA==","signatures":[{"sig":"MEUCIGncHvQ1+Cy4tJT3WQAWWrgS3z9WcwWzP3ofDBOV0dB8AiEAsHd68tCxKpsI+RIMEbiSZKarGCn4XEKKRWhIzJL+8XM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVMiCRA9TVsSAnZWagAAwQIP/1Dg+RLaEtckefLk1QbK\na2hQO3medrIiMtTRqBr0Ta8ppjrRctCS+7u7y95C+velmNMDetPSuWAaEpXz\nt9hjbOm2zh6jtBtVy3bCNcFb0rGLuopbzSc17MEY10Ks8WAmg4P7t86OE55y\nuMtNrCciWl+q5QUsI9FYHbSDejoT0Om2cCKlHS2BDitw0nU2Hkyucp/pq5sG\nUrtnbT9kOqHz/9/2o4iK8SDAIUbnS0DrUWyIFTpmPJfcFR4DJfIP4Ra/YE5M\niD3pM2yqz5ObFBUbiGiMBWT9EealI7av+KHm33pLgmt9tw0cha8DdKox65r3\nSGPzUhMIPAxiJgikuLosvxjv7Pfe6UARbJZIU/k1uO/pWPRUuD+DChGWH4Uh\nFWHlHKbrs/pH9bHIurqpwjOD/uka41nyu8lBuNeKCYPtpMtDQTUv1ErWey+w\nloG0/ApaSrN9anNoAj/bIpK6bwafcBEYJiYEOUhocGrL1G6YUD+HkJzShBBG\n7i4IVHcZ2xsXO0RFiK9lFvSSSrBqdezrjwVFVrrtH3KERcGlHztgeLj62KZQ\nS/o8uqVV1Ob+W+u00R1MWP7mDcyCp2vrYHZABgUxEQ7AMYvDufWD9t8KEBsq\nERDDvW8f37sbzs19780Vy1dORuctc9nLFRxBW6CbBuhsdObqEekICEuetovh\nCp1g\r\n=MXEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ab12cf7a3.0","@material/tab":"11.0.0-canary.ab12cf7a3.0","@material/base":"11.0.0-canary.ab12cf7a3.0","@material/animation":"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/tab-scroller_11.0.0-canary.ab12cf7a3.0_1612796705948_0.4266603646919611","host":"s3://npm-registry-packages"}},"11.0.0-canary.98db2c5ec.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.98db2c5ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f317ae194fd53e5cb73273d1eeedd3b349d15617","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.98db2c5ec.0.tgz","fileCount":52,"integrity":"sha512-uc8SIW7FJr6xpktH9ShNJh02Lz0YR/ZI13cf2v/66iHkHygATrhMWmE4pUKNosOjk4ziXi3YSSs8vTMMBE15sw==","signatures":[{"sig":"MEQCIE1nCq3cjkDVbDZbhNb6GH7iJb1fR7b/t54HqVaagT97AiBOGrU6mXATqr+BBQLoSkiluEZK5uJY3tGzXhyLIQKYNA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIVpmCRA9TVsSAnZWagAAaakQAJYaP0ARhvJw4PQ6Dnd9\nq+zq/8wI3zHiBcFexeHskzwcI4TBoBm2rVVWf/i+UFKoE06I4Npu5JnGYC56\ne5qA0GWQOGSikBQPS0omASWVoyCHEnDGQH+98GH0egKMBMZQ43qVrJ1TV20z\nFsj5O2IZdCSRXxedcQBbPbpWGuZhbs2L41R5XwbIEdesoiDpk8EpDb2AO2rZ\n84YDC/AkuxObAnx3Xgq07/ibfKWztp7prnPim4e3DlCyRbwdqiYmWkSk3YNq\nw52AjaWsntU8Kvk7Kwoc9P+ico8sbXLbqEb6nNEt4W6w4HqonFJiiCIrooXT\npc8NpF2p7zpD2q3PmI+J/jZMfwlKuZliHaGxzPHJ921X4ETFH7UUdjBloUo6\nOXReREw8m4hPrXAjlWFQb2pgU5VnB+XMOtVDog/GOO2rrJMCbBh1N8X9CXFC\nDyHtSCJ8CF1XwtoGATBqAlGHJDUi2cLxcIKw1OHc/ynuqZFdK8LSNWfpB0Z2\nFK7fmLc6QplEY9uXJojtOjsPFu7SzJEsbI6ouPUk8a5JKfbxYCvhllv4+gDg\nemQuW/jEPsWG3Uy2nXxxpMHkZWfpMXadT0us610660GmUv1JU6JAVOaJidjW\nyl+jo9Ko2znvTVLlB4lsE9SnqaxGGqoXT4X/3O8ZQ5AU30yjgNAoydAvbVnR\n/byp\r\n=4DvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.98db2c5ec.0","@material/tab":"11.0.0-canary.98db2c5ec.0","@material/base":"11.0.0-canary.98db2c5ec.0","@material/animation":"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/tab-scroller_11.0.0-canary.98db2c5ec.0_1612798566081_0.8215621038750809","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f86b9f6d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.1f86b9f6d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aba23c69536e64ce126aba9c7e4782a19bbed9b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.1f86b9f6d.0.tgz","fileCount":52,"integrity":"sha512-aUhTA6xMmH67QJLoAZ4Fp6rKHGLyyQsM16KBS41vGPxnD0Odzc9wx2BGyEYsq4kbBgL4bhxpejgxTgurRycZSg==","signatures":[{"sig":"MEQCIEEzVUZH+Rg6trPIspQ8hnGXWoUO83JGrQfe+rqi5uHrAiAvm8fJd8MaWmL7xcNK03pEJHM3k6YDJvd3+P1eG6ZfOw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXJ5CRA9TVsSAnZWagAAAeUP/RBF0gTeFCTLE30xS109\nmzMwXKp6X/hUWj7gFFCRDH8chg3ZhKJT/D/m5UVOlpK82rou9iQdLcaqG0nc\nujzBW+FE3AbbKpZsHfo08IcqB3yttakKXm22QhGJYzrZwV62PfzZlt4h3r+m\n6v0CJ3WLjTUnD4kq3aVbq4quST63r7zy1PZjTLQmnI3z2xV1avha6cAkNerN\n8u6gWInXWb9kSRDp0fcCUpSlIM2BTh5r7NLaYdF4fWCpaq89wU8+48gltYyS\nas/Pf19sPLbveA94W0UDrUR/GDGJkTTgli32Uhg3Tp5VKtZ2ThtDxee8MBSy\nFXMhYFYuoENlN3uSYepOG5TxSL3V/xZMG4BUVMNVXYz56vuHXYnP9GskDeba\nLjsa2Jz8Vj4vU1a5n1mgKMQEECSvj5r+3igMO6SoEl+oeSti2XeC21mITZmx\nW6fJ+0HL3vS+inJVVx/MCO3Z4DZusxRWIkV5iiAY6zOO1FGjdhYdyLIzXNnp\nv1fFWsk0jTd3maOLz7Ppu4E9nuBHFlncX+sLZZHt3U08WbnBLNIA9/T/cxVR\nDYaL81gALqVtAm5vV75L/zfY+NPhqZTp0SyM3RdEbOht0dSXJ2HFdnR5EnLI\nd9+hIQ119RN/tmm/9nqIE7XwNvId95uYdpl0JGwXRXF3O9HGfhhQLmG9ZCzR\nJYVn\r\n=yUdO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.1f86b9f6d.0","@material/tab":"11.0.0-canary.1f86b9f6d.0","@material/base":"11.0.0-canary.1f86b9f6d.0","@material/animation":"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/tab-scroller_11.0.0-canary.1f86b9f6d.0_1612804729134_0.36900467055942876","host":"s3://npm-registry-packages"}},"11.0.0-canary.aac8f5d9a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.aac8f5d9a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1f75da8b45058a24a6ce585b5b082e12364c9c82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.aac8f5d9a.0.tgz","fileCount":52,"integrity":"sha512-Rku/5Vz82tJgdYkabrZUM5UZTyiRfO5OYt5a0an96UXtapNsKGMUT2DZh1FREgk9OzzW+JumaMUWUPyXMyJASA==","signatures":[{"sig":"MEYCIQD7zDwErME/h152il6lmvuyJLe0eHPqghYl3YU3Wbe1eQIhAMKZx9NK0PUmYGTYFC0y7+2t4Iwf9MvJVqkN6aNBIe9u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIXySCRA9TVsSAnZWagAAYYIP/0Z5C+imu/Q1ygbTkYDp\nS5ITmvY8WdggMzNLXjRlfhfuJYTirAEFCVN3PZ/JdqSWP6MNPDGFabT8Sr7a\nPkKcc7kZXa03C9X8zLdq6RKYomPBjigsA+EL8Lm1vEm98Cs/mR8cu0ocTw2C\nPEo4JpyBlJOgICiPrXeh/GCya81BOrlRM95Ag3iMvVtbP6p5U3SH4KPUFXpf\nHsfwn2QTyE1Z64h8Tpy9xnM0i5t7UFkcQwk5lNbS4MalxsXecc+TiIALKWMW\nKsrqGZQk/MZ4znnEJ+Eyddy2c5xmHiQHQIMa2arU+H+V871QvO+ZkoySodrJ\nrLCjLbMXtuHC3H5cyj0AeC6Wl5UyOGj254p7w19i8aQpBiEaDT7U/931aQIq\nsEKJRPbAXAaMmQV3UGZ5hlXW2BHd+q7nZrCa9ZQaghu97wjIcOp2HXnU/j35\nLzC5FZXOJ/OvSRNxtoL1nEzOgklFTls2DMgEPRRgjqMFtku856n9wHmACqKK\nLM7YVDhMTSo32nisV35GY3wEhqmitOXMUVo+tCTzPyNIV7/DFeTmzw6XSuxf\ngEdKlVpqPinEJ5S/NhbuQHwiw1ryoZ0NYV3H+QGFoqUSZv7qX7uWlwhPQ5bt\npQS0QyMSG2WQ8GERn4ejnL6bd7wVfLdi3lUORhpeAJCzWxlcT9NqC77G/KxK\niJJ6\r\n=hhEP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aac8f5d9a.0","@material/tab":"11.0.0-canary.aac8f5d9a.0","@material/base":"11.0.0-canary.aac8f5d9a.0","@material/animation":"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/tab-scroller_11.0.0-canary.aac8f5d9a.0_1612807313566_0.2602508572414137","host":"s3://npm-registry-packages"}},"11.0.0-canary.750e18fc7.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.750e18fc7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"96f3605f0d60812afc0b6b379cd2370861fdbe37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.750e18fc7.0.tgz","fileCount":52,"integrity":"sha512-X6REAfLf1H8bIK1r9CLWQvItzV9v2ESI1MyfjY1YHNfRpkWv7yFct88cY+CiVktIsMRsc/kACB19KAd8Fg9L3A==","signatures":[{"sig":"MEQCIC/Qmgy+4TsIqJ6jHqcyay6/bRCT1bBvaS3WnRJEuW2/AiBldXA5N3hADoFEJdu2suUGMo3AZdh40xUg7gMWqKhsGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIbBOCRA9TVsSAnZWagAAGUQP/3P7OIcCORGvleRoEsol\nh+56hWo5My+vOfeGvM6A9ecnibISuT+6+C9GJFhiyJ+KQuu2yD61zSgefKBo\n5oCdr6tYdBWGJgeqsVlU6EgXUYwCLtguDOoayJdSHbXll5zIGbrsdRUgi6cQ\nkBMZV+p8h06FTWTli93Zn68utFro4/DEsk5NDzEBBioAATyqIV8k+kKK4f/G\nLfMmRJAT29W7oXIsvumSA3fPUHUuq1URQn5bPc+ge4S7ziDs+CzycSQ7vH3C\n+0Qbb2BuHxTBp6IsjkC9gaB/zoF6HbN0Z2diTQaqb4WxPxCXaJPtSJAgSXXe\nxkVtCch6KfZszcvfJtXHCivA+qLa/AJhdNPhlKc47nwYBp2KzjOZZD2EubR/\nqBeVAjRihHOsPtyzTVdrwfi2Qb/0en/9POdXtLT7KbSJmVxVYf5K5qPjJcVN\nfOjQ2hN88K94CCMR2TkcSnbmmjYFlwqnrbNF4pGaO8mquwI+GQOxQEtDWGkI\nGR1SE7vIxbdoQYjKXOa+w8GSWX0f76izs2tp/ElalpksK/qHFDHxM0dcsh6I\ndqpgcakQ4fvGz5nOUydxEqL8+D5gSujGSoIAafMjki/UUDV8BFKsNUsCxYpp\nr8vHCKBXKVMFNsoxcIzha1w6nEQgxWwe5rstHc7El38exQmFzV/0cIWTo6Fy\nzNNy\r\n=Q4h6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.750e18fc7.0","@material/tab":"11.0.0-canary.750e18fc7.0","@material/base":"11.0.0-canary.750e18fc7.0","@material/animation":"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/tab-scroller_11.0.0-canary.750e18fc7.0_1612820558248_0.480649863017073","host":"s3://npm-registry-packages"}},"11.0.0-canary.b62b1266d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.b62b1266d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4768c4096c7457de3228f4b3563af162b13127ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.b62b1266d.0.tgz","fileCount":52,"integrity":"sha512-ceHaLfxEUWI7nh7DJB0gD7I7go0kWJ7NcM5IbApRK98NGuWfOOZOsPr0mMzIgShfjuJj3//0AF/jXcZC2/lNUA==","signatures":[{"sig":"MEYCIQCsDQW0laZmADAQHAPf2z4HGfm/oon8SdlIZt/ID/PUuQIhAJ/N6lU9aUfFlhnWzbahYq89I6JkTKWG3xET9sEUH8tg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgIwR6CRA9TVsSAnZWagAAKusP/2Yzn/KaR8iSrqWzJVq1\n5tFiRI2D3wedD1dzvikUrxkDckLpOqaFLdi/V9cUtI8+VC3fqH9pf6gywiMk\niMbYwIJ6WUPq4fTzCTtUmrsFi2qt5y2tHC4yq+ee39uEBkAjfHWrdjJ6R8MX\nN/b2ARIynwsUhHhpHpCXn5yvOgT4LUsZzouvB01B5NEf80eO3lDG6diPsGbZ\nP57VA6gHTWYqCNYHUsmGwPuEK3QHwa5j2wYMSo+kaoQrxag7vAvzeTcLKzbk\nL5jd22fsNK0xpzYUPoHqRa5mtjQEYVs6JSON+DfnkJkFZFDH1RgCuq0va5dE\npvzqqVim26bueFvTwEEjh3cpKMZ8BWorIM2jdrGcthb8auQBl/gohvidNn6Y\nDZKrTpGY+AZpkj5dC+Ad8XL21S6Yo7NuXJVwaqBuOL/y/IQ5Ow5k+SSrekuK\nMbzM+G8h0HmoRQ2XXqLk+p5eg70FAX3QMq2iB2UWcBNExWKJYDxFEc+LXgrE\n/tPzXQ1m45EQCKmpCOmOr4D4bC98GvZNUqZar0eJBh+ck7cCSK4Pr7+1D7A/\nMdT/cv0Y64CTYYZ//jvp06daHCde+/g5YVn/fXBBPrLtdo+bdjU3Wt3HJoAA\ncIfEEpRtTIkZmfKjelP6f2eITKiycAcw0mIFbLY/IW3KyhfvRcxbisywD7ZV\nTeuI\r\n=hWuy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.b62b1266d.0","@material/tab":"11.0.0-canary.b62b1266d.0","@material/base":"11.0.0-canary.b62b1266d.0","@material/animation":"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/tab-scroller_11.0.0-canary.b62b1266d.0_1612907642146_0.6768514080801691","host":"s3://npm-registry-packages"}},"11.0.0-canary.a6b3101fb.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.a6b3101fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5898b0d0ef5ab67c077d8a89bd9e5ddeaabbaa80","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.a6b3101fb.0.tgz","fileCount":52,"integrity":"sha512-nC5XA7g/qqYI7sIXvakW4vKOIjK8YvLjNJXWKlYDtyH4bITiTbLEb81vUv8wJOr8ODRpB+Q2P6DvMyCJQb0OCw==","signatures":[{"sig":"MEUCIQC1AEAEZFulg5ba4Etw/POjGyQVWEtFS/c64haoanuS+gIgJrqkg0WM6Cqygk1gPgQzA3RcMO+cihOnIo8xtaArknI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJbs7CRA9TVsSAnZWagAANjEP/1CT1wJSCTZ58Q7i64NM\nrbSEUOgJ7wSTsKnSP7PM6Lqsey6vm3hMDbS2IKX6aLOqk+LiGKRcOXzyLFOp\n0wAdTqpENSt2eJ6LAQDNV4pTwkefvrP+tMRW/AHqnHwnGp25ed/cYTdbXwpZ\nOzFYgO6u/r3FwVLjPT6dgmAyDylkllz/Q9jjJDU+kk1gbpvmYGxQ8h+VLMeL\nGbfSqMqWyxxy/AUjXLoi8E+UWQecMp5fD2+B9L2w1GWlewlhAy8X7o4CXG5A\nnapTX9ZnKnmnUS9I6aqUalTm8CPSjKIPq/y+DHS3I7OJZNvaEXubtEefO/xS\n567wEF/0y3zwYXsbzYmJfzjCWyeMwh+L4ed+S2qiGcbyZ2Jworf9k4j0taRp\nbbip1Q0LC4tFoGF0DrHAaBSuwQlcVnwFT02msznr48TabioS8T0E5xflGbuR\nI8XmnEGk+rfM9zwreDTr5xvNDebziM6w25CJZlFLkPowid/8ngMSm1JAeqxF\n8rtECz84v6fOO6z2p/cJjy5MFGMGpF+34TO4rIQJPxYz2OdmnPEwNhVFaEW0\nq5grDUxEfNjRBlk6MbVBuWKmufhFA0AxVSvJFz98zEyN6iLA3MTJQlcIwhOX\npxxCJve8lHbyI6Z0/Ur5lnfrXpu+VE4p1821jfn0qkBGvM9bikklsJ2dBshh\nhBs9\r\n=Toy2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.a6b3101fb.0","@material/tab":"11.0.0-canary.a6b3101fb.0","@material/base":"11.0.0-canary.a6b3101fb.0","@material/animation":"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/tab-scroller_11.0.0-canary.a6b3101fb.0_1613085498908_0.5959543333811175","host":"s3://npm-registry-packages"}},"11.0.0-canary.ed88df700.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.ed88df700.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"52b852adcfb8f19df3bb5db8111ea9a29b8a1f8f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.ed88df700.0.tgz","fileCount":52,"integrity":"sha512-RxamzJnp8qoUj5RW8kIUBDt8IDar1b81A1wuJqAipGp7d22CQts3wVkBt5ObgIWaxF8a4cgL7u7jL3otNZxVzQ==","signatures":[{"sig":"MEUCIQD/bbt/zYCNGD/Y+NTUGE2ANlHqPq17007m82Nk4UkB+AIgUwMicCfeWgWM5l75qo63Y8hX2FEEHonGmHQ+tV9Nc5g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJcbuCRA9TVsSAnZWagAAiEcP/1SVDIcZAyz5T6Mp9hn1\nLfG88RUQcxBBfABaiIut74QsNKLB0xvVfYxbMhkLfXjok9ORofw1V/cIwf4b\n5Vgka+VEb3HZZUbQDQh6YEGz2HpwRBfSKoOqzEeG3djvAeu4oCfFxwoKpbOd\nCf4SbtVLPIJmHbr5gqNJEHK8dJuhb9pqMJ2Zck2sYvIGtjcvzNxoBOtUCdSC\ngaUPmArneSyis8BPTANA8Yvf2TZfCkt+gYJvKD887W/wGPJWDMFC1ebx6HkZ\naid2ESg5Mq+OYUP40SWvlrq0rJjZccCgCZg3C9WUHnQ/f1OAO0eUdz0yzSJU\nXQgfF0b/HqeJj2hMT7u7utasJZohZL0sfK/rpKgPV7u00XYFf0UTY0L05K+w\nuHex1IBTfGdPh0g+cgphUtoqQLKLu2G9VzaYYLwzBLbLWMtVIopTP3y72/Fn\n1zv51q7SMRZOuu6Um4fpMIlkh4dq84MTVU4IyA1ajQTX3t9HLmBhUQWJvXt4\naqr63n24Eo+0PKIVspXSswXaYj8jbga3OTQX96hSQl7AxMjdl/ZA4IjtPVek\ncXwMSoIKU6kdhNfhuSNtb8sHAteRj8qnKlGskVjiTaRdba/qRKXsEcp5lBBX\nSWI/gWWS892a3iTS+Io0eWgQB3jursfyVyFr0wANsli6UQ7C7rf6Sj/rtCns\neBcF\r\n=QXlc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.ed88df700.0","@material/tab":"11.0.0-canary.ed88df700.0","@material/base":"11.0.0-canary.ed88df700.0","@material/animation":"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/tab-scroller_11.0.0-canary.ed88df700.0_1613088493755_0.8573174631774998","host":"s3://npm-registry-packages"}},"11.0.0-canary.d30efe6b4.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d30efe6b4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1de10399e69004e0e18bfad4c39f50224c0fbe6d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d30efe6b4.0.tgz","fileCount":52,"integrity":"sha512-LAvvklaQOnj7zWaJbgmeSk/wgGzLwT1MMcv4bReGNxerl1WMs1aUTZSrfpG+MTgKB1z9IQ1Xm8ymytSdE3dl9Q==","signatures":[{"sig":"MEUCIQCILFInMdtUK4zNa+2mXkV9jb4VF60VCnqk916+Yb+XogIgKFFve9HW8RaxFWDcCQqmMTNwdjfBxOWz5gLy96L5agc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJes/CRA9TVsSAnZWagAAt/YP/jL/m8aezHjF4LRJKYGo\nuIsapT/2HZ8CG0JlxzcDleCPmdpjp7rGlJfbThExzr4d7UqjZG4L7puX0qHP\n9J1FAFgEC5Q1J1aW9aHZSBcW9oX34BB8VJHWWTcz5EeuPBqF913VpakIHLfM\npBwH6ykvE/ZCIpUs5BsyeDSpKE82kzE4zF+mzC35EgAfSoqk6e7eDcR1duJt\nBare7DLNTL1/xF/Lp1a+wKQAdUf3bck02aP87eS608BhitXVGo1XyVv3DDmJ\naz1XADItGIT+npcFAa72MJfwhIexLFNU8dtTqUYjQSs8IEAof3anumvHlh0S\nI3r1JeaUXZNpEjZvHPnQHNDMNd9gFNlLQiJqOp+yxYa8OtI+DrvckSlpXlLc\ng48CfNc0SCoiyx0XVXY3UedShs7fB3L2VgkNvu8Qo+Wvea2aFVqL8KKfhWhF\nBa6qythgLjsnThu2FM9Y1gEIAuYHRj7n1tQJhmS1G8WWKUNMHmRNi5ntLOlP\nnuM9Ta9lRD2iTuwJs0r3UjLsGFRSX1iWKNCW8M/q+q+BUi+ER14/3ljf6X79\nwLklNt1eMmf8NgoD/CDKPchQ+1rMa9wlXWWUp683MCmMOo/Z7x3x+Ei7cMJp\nyPnOh2A9Vf8ZHhdByW62UVcOywX8WeGYyJts3JCR5aTxg8spQu90GqhjdN7h\nSy+U\r\n=WIq5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d30efe6b4.0","@material/tab":"11.0.0-canary.d30efe6b4.0","@material/base":"11.0.0-canary.d30efe6b4.0","@material/animation":"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/tab-scroller_11.0.0-canary.d30efe6b4.0_1613097790579_0.2241483071301167","host":"s3://npm-registry-packages"}},"11.0.0-canary.0393bdc4b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0393bdc4b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"db3cbb9b38fa9623ffe4686dd0867af33baa31ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0393bdc4b.0.tgz","fileCount":52,"integrity":"sha512-OMiWyH/QWICXR7GrWPWVDwWNMrw6KLMgNojv86B6tKHZ2nKY8a+r8ExJum7VYEQXtFKEc/+Z+dKtWN7vGPX8hA==","signatures":[{"sig":"MEUCIQCJpkKIu3DGp9ooMKA8+Y++IO56zhUTfzWbESA7AGzPwwIgekI+myc40mencjoXdswfDSVLYbDTjIKzu/MfClU/rRw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJgTOCRA9TVsSAnZWagAA8ZkP/R0lE+ghMw59x1KNPAw4\nY/yW8q+hf6w7JHgKVE+jxOvoynptany/1Bv3Pky+ytfynlEnRZZ85/bPJaZs\nUxec8fX9rulja+cQscZJQbiQWq4ZWTy1hINUTMMYbYl4cqH7b+38/NJyV/rY\nfwG75K/7y6rDXCLYN/h1322aBP6/A/spFmjepT+gbD5GY6Vn46NLFZAOycC2\n2201de6ntNEvDDKRS13+em+kySdJAmCdgNZJiHomwoCk8r9dalXM0CiTbZEy\nODZxZHQjxNzoEUpjsEx7JmWkP+SKS3A5WN55YsPd9+e9MVLh7B5DTAezk6g7\n7X6GPTUpZyOCdtvJPyMWhr+Wf1UgvNgbtB5txlzdQiyhlOtzOIjNdZcQjtDY\nTB0L+1P4jSxNCHPYfXHy3WM52pmryCuZYjKmkdiHnOdsrQSheb8RSiT+GGHw\nc6kh5+a90+hSOqBZFlYuVrUgyE6ti2k7MRmOCEe9YDh8P0nGAwpzbv1rdfg4\nMZngwvek9FRX19PHFojg5MtDqVGPlEzKME6mx0b23qkiKuP7tBnkgaE38nbB\nSqFJpZXDR/HEz+W4L/NuS9LPZxh/wwHfd2XrpKWERhlKaTquoR2+K2OKEQRV\nm7g1TSf9lEaOdZ3gYE3wSLmAtY+lZhfHN7xT/UfPLrnv9BHLEs7j3fMe2NyX\nv2l9\r\n=Hl/J\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0393bdc4b.0","@material/tab":"11.0.0-canary.0393bdc4b.0","@material/base":"11.0.0-canary.0393bdc4b.0","@material/animation":"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/tab-scroller_11.0.0-canary.0393bdc4b.0_1613104333562_0.031449753363769206","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cd26af4d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.7cd26af4d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e68dc631680b16831a07cebdd3926d4211ed882b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.7cd26af4d.0.tgz","fileCount":52,"integrity":"sha512-eblG+0BDcGBxoq2pwiahu5Oqm6s4Z1Qpm5Nu0JXQZSy05uYdsGtEiK4p9PG71mGuWt5pwpKBD9D4HoALwbfD8g==","signatures":[{"sig":"MEUCIQCDWXkfHv9FuoiBBl/QqwGCVn7CwBjyAjFY/70Ig1PgNgIgDVp9t8F6AQ7xB/Qb/3PtZiOjLtvG3Jb4MqZufkzt7Ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJqYtCRA9TVsSAnZWagAAKnEP/AvJUuQcdWk5dcJGH9Z7\n6AQ5DNhBIRuV8DkbBQOheBKa9/VRH//VrTaT9giGIOxNVtaxFT8zdt2Sujtr\nxw+/Fz/SKnWuElKlMTxCrCpy3t3eB7hx4yTA+jmI1uEQJPm/7WZpuL7My6IB\nWj30cPp5ChrU778lkS/7rhcbPOSoituiXc5l1JC9ohtPpNcwV9czeWLNmUzs\nOUJO9Bd9rUdBsKhKX3A23Izy1DhSyyNMo+DtTumrSIW1plfckmjPwM6QaIMQ\nGmCh3cG6QggIHMwg8Sg+2eEEOcAn9LyowFNkPHqXB7vvUhCgX9T8LubNp5rp\ngdvcIbulKJCKzwBFoJo/iqwVi968k0bYyWnUndGMETGOXPlN0h0GjB9xLSOQ\nT0zYm3X6L1AIEML2/uBcJTxWXkMFVbfAsvRejEVmZwRTEC9bhPh8Teswibgl\nFVRexTWqKCBAeIv8GzVUxsSmd08BFlLqAeMA2gHnTnsq8PctL5FsX4KxprR5\n2dHbKHKPrqy1c8kHzle07iKG5+oYg7Wl9VGvRgubR1D6Hgn19AdDOHpzqjpu\nls3eA0apvoO1390gLqSQKXy+5atu11/NlgQrY5f40MV2RNBGcBZruRqhLwKl\ndHVwT9wrE+2PcNTAUDeBaoiOab7/J6Jd4N+wuTRJpiJWikFOZqCqxPq2UyIE\n8aOY\r\n=cZ9N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7cd26af4d.0","@material/tab":"11.0.0-canary.7cd26af4d.0","@material/base":"11.0.0-canary.7cd26af4d.0","@material/animation":"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/tab-scroller_11.0.0-canary.7cd26af4d.0_1613145645126_0.26748456778995067","host":"s3://npm-registry-packages"}},"11.0.0-canary.71fe9a067.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.71fe9a067.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5bda12e8250958ae8623c71a9a1b53629891e376","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.71fe9a067.0.tgz","fileCount":52,"integrity":"sha512-uuX6X3pCEPVX3+LJtyKHDWptPvbzF10OQNKHMiPVN3fViNLWjft+wkWlGt008o6qncdP50I5/xA9x6/Dq4SXsg==","signatures":[{"sig":"MEUCIG15GjTMHqF7crVxV5IH6MZkcEGBp58QBu0mRnjX2avlAiEAz7iYdJZvFqfOYzd0LPut0pjy4zmy5rH5yRJkOaZ4WYk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJq2QCRA9TVsSAnZWagAAPqgP/0DOJK4XbzEEAh5fVhtg\npIyq36gt0py+iakOYsVjP4PvUZl7Lmufssuqs4FuwH9DLkiosYZWHs9GRTd3\na/l5NQQXZKS7qpzXJB2GaRa9Jrl/mkgj/KJdXxmA56QpK1qNeVGSAnXzycW3\ngdYEq1hPB/rFiidNFTE9n8idF1lKgIV0lU378voPh2egB9xm2xvzMjKlZ7Oa\n1enWm+aJI7noSafZlu/ceccJqMCUwQpmeVlfiYnOjLBo1IBMsRN+bwPaEMud\n1yIBCVeCW8OxJFGrLph17KodqUfUxaaAng8XihZtmCBZLRgcjQBOw2Tf/qFe\nj4vldoHSzV3YqRYCx8KffpWwtXC5fPpyFk7n8Cel/5EMqROOcf42H++tt7FM\nJwdRj92P1hOqcj/MFJDEYnLUOQd+QbbS6ZcERx964XhWxyT71me2OPOAEAor\nBQ/0c1bATW2UTHqpAR0tCJQQkboS4jUJVaoAk5c3Lr120iveG0vn/3NXC+Ve\nsFxBFuJRyacT4vsT275iK7lx8AyMmIW1UFv+O6KuLoqWxTmJyKj1UJ/EUpyx\nLKzTS1wx9/juGSVC5ZIsPfj2tl3/VFAH/LMvQ+lqITZOIIe0RXxTl+wIwp3L\nwosBah+Kix6E4HhUzG8F2iK0ZSn2gJvImMefcymWnrud9szqb7t20NSjVRYH\n597a\r\n=jKWn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.71fe9a067.0","@material/tab":"11.0.0-canary.71fe9a067.0","@material/base":"11.0.0-canary.71fe9a067.0","@material/animation":"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/tab-scroller_11.0.0-canary.71fe9a067.0_1613147536047_0.5791471203652594","host":"s3://npm-registry-packages"}},"11.0.0-canary.0fd56a86b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0fd56a86b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5999aeb677f628afecf835092fcb93c3774528a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0fd56a86b.0.tgz","fileCount":52,"integrity":"sha512-KTsqHgpKULEXB073fVH0qU6r2iTY42XGEjpSYTPdGzOHlP1IOTzbKjuSy0j7BSDh7nltxikB9/yEa/B0SWVYZA==","signatures":[{"sig":"MEUCIE/y+VNr6HvED1NEWyH/9G/fkpBszC68eAoWK0//dBY3AiEAjaJXakiECpwL3FYZ5sbOSt4ZFsUlM+g09vANvCMzW8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgJxmUCRA9TVsSAnZWagAAvaIP/RDoa39ZuAQ+xoOFZxCA\nD5KhMa3dOJ3RIRErjl8yOxZ4725tQA6sW7rw1DhrsLX3hihVG5SHl0wTGNro\nwLVP0NHhabHmx/tDAVgmmUawdMYl3aN2DX1MoijlkMpSVa7/SFNysmGIBgy5\n2SKue6PaxX05kx1E8aslHHkLe56NYv9NOxVMKqVykv+b6bd5ZAJiAVqEDv5B\nkOV+71KTSReSZwAyiPuoRA4GtqtVS7i4Ngl81CMV/JUrAmoPCuA+9WlVeMt0\n+/frl1hLtxtMexGw4fFJ6Dw0YjbN2uS9VowKGMAtK5bivP+3COQpFWKmbu/a\nE+d9Q5Z4SBSV+EkjLeP8+MHgNJfp/W2SAVL9nun4TAd1WY1VA43koBJxZwa2\nAQ9eqLGrdgG/ppE2jQFtk3iq7RTZHMuUGZd3wwABvJ/FajpRCY/kr8K+/rCx\n8TCX8g+PAFpb3cI2GurTneAQ70y21rXI+Z2f3VrXy+x729GvfkTyoRD6wdHC\nBQieI5RHCcGdTrcub6HC6JlgMGnH4inafGewc5CNZfvyi8887iWSFBqn4tiV\nvzsThaT7wMkSCDed1VKJi9dx7CntRMPd2SVcDpADZWypJTPvaYC244gYZ5qE\nLQnTF0CHkIHEmnAe7yXTZmUrNf7exayl6cLWg/KnJbtVpqHslD8FWWXnH5HH\nSALn\r\n=dHbm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0fd56a86b.0","@material/tab":"11.0.0-canary.0fd56a86b.0","@material/base":"11.0.0-canary.0fd56a86b.0","@material/animation":"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/tab-scroller_11.0.0-canary.0fd56a86b.0_1613175187799_0.23373064694912782","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19bbc4af.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f19bbc4af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"75b381a9c91506f0505f01fdf484c10454affc46","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f19bbc4af.0.tgz","fileCount":52,"integrity":"sha512-5wBEgjEhTpZr4dodw1BfR8DNC8gN/bAvlX0SQthPv3HScISq02pZCB1bxcv9Bgkac1qEefifMoqStCs4m7FT2Q==","signatures":[{"sig":"MEUCIQDpLeobRIv8e1FbTlUHiHBRew/EMKfY8DMslFNrrQNF6wIgAfla7nEcXEhrcZnD/RAlBGdyganWixpLRK9G3S+LKiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLER9CRA9TVsSAnZWagAAclwP/0qtRSZLuNQxagHmWDkR\nYUgYJkRSnu9yIU+4932pjfuHx9Z11CTgSdppcTEKDUxR7LnbbA9U+w24iLah\nQzwwkBy6gfO9dgRx44+J7iCmhr3dw4h2tSLXLC75PIyNHFgT78TZqp8TUZWc\naJQxjc2A+0KIwQ8zRvV2ElRsNQ9CTebOGzqQVvTpZJX2YL+dIAJgEeZ0T6U7\nj1cqoKmeGzGIvyuTGRCYEOVcJVjpME39YArHv7oeiSDYsHlFJxsGdXC0tgPV\nJgramoDD8BRDpN0Ls2d94yI7rvaRDcI6hFsu+K4C+cb9capEMhlZNggxOGlH\nJGURwOxW7WouQ+bI6e65FWPASn5q4skNVq8YKL3fSW+JH+/2ECVbnZQnYa43\n4/Ob69ZxonSf8DJ4YhDXfU6lwEPuvu8O6L9AO/zJtnQ12KdNrffOl1ohiARp\nI8G0eVgqz24yJ/NKbUZR8Y8Wd6It2FLGG/tXekJCoYDnjm9WuW2d3EJdsl/X\nQizzGyxjB6yBr7nxMLN8c/BRMk2O6xhvMtnGA1ztIHtfdOoa9QVweyaV096d\nmuKYdFg7wvm9TMejB0k4+bUaYoWlNj1d1wD4ZBzJ7QxQwDAdTfbiI+gUMM0R\nd3fQKa/PRCbunimEOrwZmTyuNdbJy2fGNmdDtDtDhZfEJRfKcDyIBG5+keh5\nRg4n\r\n=mvhf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19bbc4af.0","@material/tab":"11.0.0-canary.f19bbc4af.0","@material/base":"11.0.0-canary.f19bbc4af.0","@material/animation":"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/tab-scroller_11.0.0-canary.f19bbc4af.0_1613513852616_0.9035900455832659","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9cac96cc.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f9cac96cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39468043a5c10467084cd03af00a68a076181749","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f9cac96cc.0.tgz","fileCount":52,"integrity":"sha512-hgfDAfo5RE6gTHxcPWuwR93b0PLG3GPrAKH4MLWIznc1Is6gAeQLRVvxhB4gW1S+iWf+MFY7Xw/5qcqpGUXQAw==","signatures":[{"sig":"MEUCIQDFooQRvQ0Ykv45OY0EvPYaN6z33jkTmMoS1cLc+ib+nAIgDtUS0jgDAk8pBR7R3RQajlVEFLtFuf5b4qm9+4SMNPQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLUApCRA9TVsSAnZWagAAU94P/Ra+SSRHNKSrz+30Iykd\nSXi1Rif5KadaoHQDwYL5Vf3eJwXKHbj7sd7B4uH4MmVzbbypXx8ADIIGAGX0\n7SivKHwtHpUm5ibLD3EEUZgzdCo3OJXz+POH+RSy3PVOxOoPgn392XvDSqKy\nisHcyW+rpTPRlzq1TSBvvzIeWYBFKepIcXbQdHoGmY9fW4t2RCoKA8UmEB2V\nCWdDQqQ18+tr/azvJosar9BMlYCrhiHr6UwxDR50JVjTchMWcvdXoXGYaCfW\n3zA99AlHQ+rIYaanl0q/ZGhJqtHYoZwUczK0HddRVszxTgStbgvG1UHkx5ue\noByPBrqP/P2+x92aVFm6l7yL4Awpb7ozIdS/zialBbGX4FgiCwJYTO2+FwNf\nIjkDWXKHN1sA6LauGUi9BpiUOL/VySqKJ760C2s0gwT+20gXHacPw7UTWNVU\nthW5t+W/Ffghqh1st7IGz9romma9nr3+Lzbq5P61I3ipm+s9ibbdtm9qOI+T\n1hl1N0tNSfyLsF7xNQJ3Cpu/+7uia7Trcuc7lZl/Od6TUUW1d66b1KHMENaM\ndQupFC/0GIET0eRQIo5P0+vZD8p8Do8oh1lofEPM6mFqnSm/HR+gHbx5Kt++\nYguS8/SGMqUSfhZQ9znBSi8SFV67a6oZICqnzxk9xRWn8QiAKOckyRlrpQw8\nuDSO\r\n=nCHJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9cac96cc.0","@material/tab":"11.0.0-canary.f9cac96cc.0","@material/base":"11.0.0-canary.f9cac96cc.0","@material/animation":"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/tab-scroller_11.0.0-canary.f9cac96cc.0_1613578280881_0.4651281037651833","host":"s3://npm-registry-packages"}},"11.0.0-canary.79ce0878b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.79ce0878b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e1f55c414c3051b3bb25fd25650f3260da77d88","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.79ce0878b.0.tgz","fileCount":52,"integrity":"sha512-mhn5bFaQh8ilSFZlGmoDj9o1TuS3snkO6FDDtJt3UEfsW6aGjvdQa5IFZhVvkQPebMLe/Z+POXfs9V0xin116w==","signatures":[{"sig":"MEUCIA9tJlfahIxEh4YLJUlEjZpJLnI7ZkDb9TvhSdaEhMx/AiEA4WjrlOJbvfe7R9M+dYHKsm61nEY9loXsznojLKdY4MA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLW3dCRA9TVsSAnZWagAAmVkP/RB12/jaMhgLgwNzVs3r\n53jkUSNoYpeaHapn5b4O3lDIba4v25ye7STww9Xz+eyokKu0KSrjnKad1t7p\na31p0VNFteDYy6UT3Cp07UJ1nZlh+2BexvnHF6SfXn9iC+8iYz3c5Uy8q6iC\nCnuiWFvpdIeTThQuY931G/zXb0qBsgBaqjqOGJuxOnsyW82WBpUMmJQnRd5F\nGY/McIstVJlcDO0CU1jMbaf/C9hkb2L/o7OmOCZLTidsahJ6RLKnz/KQNooE\ncdPsdcBVIZOpp6aExh7th6jq3MlJuKRFtzv+R5CsW2s3Ohk2bIBbc+ogIuCP\nH5LNfZPwTzVeqq0NX4VYYZ70e7NpworZR7Xnx9fMzQYBV097vMWnaQnJ8XPW\nq2KjBmAgybKxMEhXYFJn9BTmn1yyquPkxFGkKDtxNYGWJ16UBFoUaptNDEQm\nrF9q724QDsPur+Di8x1MCnjjb7+WwrnvUxWLtl7+1RCKic7rB17BzHE7Fa6H\nXcsblGRoHhDq/3A3AezQeLpW5CFTTUN/9xpN6BZMFOnsFQivRflFCAPMbuDf\nCqqoHlvx0GVbpmRk4VkRSxGnv/4DHJrOk3l8fMc9iDuoW5VBGfj+s7vvmgPX\n7sQoSn2QsmQhIKHw7jCe5Lwxrpj2ZL7of6cVb6OQ+9e4Po/v6p1TCuXggjxc\nCj4W\r\n=Y+eE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.79ce0878b.0","@material/tab":"11.0.0-canary.79ce0878b.0","@material/base":"11.0.0-canary.79ce0878b.0","@material/animation":"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/tab-scroller_11.0.0-canary.79ce0878b.0_1613589981295_0.8860447499576163","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6e507b5b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d6e507b5b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3932716e7d925e0b8bab8066fc6d44857b110bcd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d6e507b5b.0.tgz","fileCount":52,"integrity":"sha512-sIV1zKw4U7N/bqjFJhMklbVplUA8a1RyJspyvudvw3K+PrtoiObRzt64YRpU6+qybBqHIP6SGoW4MHE6DBqC7w==","signatures":[{"sig":"MEUCIBh+iCIQDZTrUcG/w4AvguGoQHGcz9ySIRV+ix0HEazWAiEAvqOT6fXRWC28qdhWuZjZ8S+BuVuwOppFty77mKXBonY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLXWeCRA9TVsSAnZWagAAuxwQAKCaWUElVyO2+oYD3m8v\ngtVJOJ0HFG3/qj60fkfLlI+TkWmDCKoJ7yhDI33qCCacR58+VPB2JZ1g/ltr\n1djw7wkW1rOkumYQfNpmqLHp13gfiLuT2YsDzjfa5cFlzbkry55x0nw5GfSy\n8XRDAgB4czK2wck6FQ6L33lYoZ1Uos3VhGLheod6uZtKh+OEIg+hIriOXgFF\n6IG8YPGwXHKI5ptmTqLyNJ2eyMIX4sRd52ZJ8c4c53Fxg+DD8073XDBWgFgP\ntLpzFjszd3F2g7DpMatKN842i8ZL9bUK+g7YmfOWCj5EwKgvUej5a1fdxv3T\nC3Rav/iz0Rn0K82mjQHI2TvjR7VUhYP1Rj85oXowtc155W0uB3ubvKp/+5lh\nXNUf3V91h84/HOsvAWDHsEr5FrSbFT4lU8IW0I3MY0MGc0cJSdhZYIoBv2JJ\n5Vcr4PvfZstMHyfnMLE7bEj/JG9P6xGasOiYq5/d0SCB8MVIDJJDK35HKGGE\n72oYsMbtUa2028O/5dp8FIlaF0uvaSTk6hIQI6hZpdZRtgTvi9qwnhrT7pII\nVg+LDcvjpqLaRf0chxZowC0Q4CQKZgSENTWV9vrz+V9nurhYtNrM5PJlpGhg\n/o9cA1RuHsmnoq62NyWrOY82cuVceqsJt9XKSg8LPGNfnF0cl9+c6bEC5m30\nrYcj\r\n=/fck\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6e507b5b.0","@material/tab":"11.0.0-canary.d6e507b5b.0","@material/base":"11.0.0-canary.d6e507b5b.0","@material/animation":"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/tab-scroller_11.0.0-canary.d6e507b5b.0_1613591965736_0.6584362582232703","host":"s3://npm-registry-packages"}},"11.0.0-canary.f2658381b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f2658381b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6e70f1fc37b659f45da9140196dba85bf1f9b3a7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f2658381b.0.tgz","fileCount":52,"integrity":"sha512-r+jNHZphesYO7WDGSKAreAL/RAsLlI6xFHJ0gMW/t05UHSaizpiOLIQz0erWCocJJPEWD57d4AneFkhi9jgURg==","signatures":[{"sig":"MEUCIQDu+jCtX7BFWF7FhxBgUglLBmS+Z0kfH5Me6Wn5mG867gIgT/uMPOO+/8BKseRxstOj3MpG1QTWZaBP0KF8VhhtYJE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLZyuCRA9TVsSAnZWagAAaqMQAJCDIBKO7EWpvyIHBCTk\nx1RrL87jUyLJm0FKEzYg4fkDryWyuAkydvxTZvKT6pb2RNDVQsWMRQgiRHRu\nrbHTAw7eEuLuP5uPvaygIrz5OzHi1NWq67nKpWOe5epmnSBI38z7HnAX3Bw8\nF375giLrdQfb9zkXlGcKI4QBnj203MO0L+31D863jnHeO3pIZYo7poHSKfPK\nYA/Bh+C6CRr+aMKvIU2H3yLjW1OCybaEXpDJ1CHAwrbZLP2fZYeGzuOZg9RQ\nLpA/MsCYc1+FcwpDUOQyay74hoMx6RPS4eD80HHDaF1IcxAe6KlmRBKolMOP\nfHwHQDf6BLjP4DCRBmZV9W+CUxs20vAGz6i5jZuwJxg7ZpEOrsVe5jqrLnZD\nPw5e27wq6SruQC8kqiwyRZydRoNTUGoUbZAd2NyzN5juIDLuTRlySeLoHF1y\nYJp1jxW1KMfI7U9l3cuahXAYv+MQD4/tTurhZKx1gW/teNovA6TvANiEZ/0C\nSIGx1qbEJsShQXfwl9etaHrx/sAWxakVCja4iXoiKEY7/OotQeSz2No9ZzDA\nddIh70jdlVNBpaT68l7Kid2G529bdC0STmFt/JaOdYUdUS4D3R1LvymR8ToQ\nrPVy8ZMAbK49+mCQwLU8SadvPV5jgqy0UZMJVQLlMeJybMv2qZbU1CfEGL6B\nK4Ev\r\n=TALx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f2658381b.0","@material/tab":"11.0.0-canary.f2658381b.0","@material/base":"11.0.0-canary.f2658381b.0","@material/animation":"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/tab-scroller_11.0.0-canary.f2658381b.0_1613601965958_0.42152625790821485","host":"s3://npm-registry-packages"}},"11.0.0-canary.97c4d4035.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.97c4d4035.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"69d019ad9d9190ad88369e87c06d04ed2ee89cdd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.97c4d4035.0.tgz","fileCount":52,"integrity":"sha512-LSZ5s2cJwqKIWmoKaQNm6Yzyhg7q22LwWBE3rH4AQ3TJmqcngRhExL2TkOMy4scLWxGiIjrp8HFPcjp/yOyHrA==","signatures":[{"sig":"MEUCIQCwHJ/hBCp4BcsRvXL1etjGlMA6AqKxO+6WcWKtDp+K5QIgIMyMoY2sDdlf53Bem0+Y13YrGyOHVmzUY0cYJPmNDfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLdKlCRA9TVsSAnZWagAAozMP+QGUVukrc+RA3w330gPP\ntgqo2RG0TpJwXiRTrw5hUiHdspuexg9eL59z2dzS7YB1GmsYinBib6cMc4BR\nmrqG/ot52U9QIXZ0RplnO2FjnTsTlyrHshwf3/xSoHIhBDU7EyJB2TXerrAh\n9iVTfgO8AkXu3myhvM7dcFiFd7u1Y6dzvf8kQJXb6KvgToB9xLfxtnJul33f\n7QcfGW2qiQ8I95kBS2pPaXGAEYU005TAcvH9Xc3975/rNKf7NCDYRtk/rVdG\n5NhGdhoSklEPpXdqFJuDydXhfC70jpQkvtH6wkRQBER3xowT01w9GoDx68W+\nBBbAMHi+uwQDvHts4oZwGd0ZXYc+QauhMWlychlgTIv4FQhkq9v/heuwILd6\nXjBvAsMy1qvUAP6jffjTgAnltcepTNGwYHwsD1iWqkiQW0GM6WVOeeLJ05QQ\nlvKVwayMlPR8s2btW2VCbEzwqgEwxn0FufXmFTUu9Tm39m0VLC0QMgwMtZN0\nugPMGUGvoTJUij6TUUUQi3XY19Xskwt83Qy+auiv4p1fSm3Qt13qGJR3mMGP\nF/OMzh97rDQssocbJOtRa5UR+9UtUiYTfIfuzEwzkowLUxlKiTepGiRNxdK1\nUPUOJsk+FTymieLEzgVRuDzWd6fLabRjfsGyOcS/piV9cnRmCFPyBsa/NcK8\n9LDZ\r\n=7004\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.2","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.97c4d4035.0","@material/tab":"11.0.0-canary.97c4d4035.0","@material/base":"11.0.0-canary.97c4d4035.0","@material/animation":"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/tab-scroller_11.0.0-canary.97c4d4035.0_1613615781373_0.8235420003504603","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5bb4648c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f5bb4648c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8ecbb95c78e2ad36b0d1868c5d0f9938b2002b9e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f5bb4648c.0.tgz","fileCount":52,"integrity":"sha512-jV+usa5WFrrnLmNR3r6n0/EmkaY3TZleOkQBnWuBQczMU/S1P6AOl2Y0MvriroOY++WRQkV3O3lJvqVyGcRUqg==","signatures":[{"sig":"MEUCIHxUWFZUdteZ0fr5VZ/iqZo1CVjqxbqRet1ubqkof77DAiEAjl+Vki7yWFhKG5pKvWK9goUzdkMpvxiPUnH9OFHWDAE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLpCgCRA9TVsSAnZWagAA7ucP/R9Q6fg4KH4RB1cc2OWP\nVsBtaefTDy2Hmj78lMCHJPndp2uDakIKE5gY3DADNjRRPsdvvIemf7/bQfSx\n8Ll/AY5Lq7DfWiTCviSgv5uR/YDXH2bCqZj5cNe2c48Gm49MzpDfchqcMvH8\nE1F5I6Hcg1lNCfk9pFDEPzu7qS1s2fFKGBIq0MsLIzJ1LI7/hfCKKENWu5CV\nTOMpi9n2bmvqYH1fFxtnIpkD/kvJ0MEXBwuVbKDTAXKugCROmrYgQj/nHHXB\nKnMze69XdcGc7KYZregVAgIwoVHzOozcB5GgDkJeYjdGYspWRwOBOoyJwmF6\nKJeI+dyp+qIsyCBWsCwxeAtUwhjTMiM4yMY+XHVM0k5gV5hFa0f10XT4Vc+8\nvhoImJIK9CiIpzQ0O80zMPVHOyMRxKjNCrBNmarGWDRUYc9lhV0/vBUxOqDh\nt6tj7ghKHgNfz3qMy5QbRgom3371HyqNyEe2dnlnrH2MP5/ufr7y51LDUGoa\nkCrJvRtXfDlACyEPBJb0Ad//UUXONo/RFK79Hdo5tAD2UPRDuwBYUPuT7n+S\nhOw0Q639byksHzlJs+E9tkE1zrHbvojTeDuCIf1pUyI8Yp5nDaI3/ixQtMxj\nG5NmSI12bk+mYYpIROanA8lkwwbryJAERHpb5SL47zRGRi4dEMu0Enmp7sy5\nMG1+\r\n=h1JM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f5bb4648c.0","@material/tab":"11.0.0-canary.f5bb4648c.0","@material/base":"11.0.0-canary.f5bb4648c.0","@material/animation":"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/tab-scroller_11.0.0-canary.f5bb4648c.0_1613664415583_0.9025691811215675","host":"s3://npm-registry-packages"}},"11.0.0-canary.302c7a960.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.302c7a960.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"255874ac2aa4ec2d4907c50f42ce874e093c7612","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.302c7a960.0.tgz","fileCount":52,"integrity":"sha512-dn04UwXFQvzbzFDvekeO62D1fe7+h9Y4YwhTQdbQ/p1e88rEVvzn95XwZtUuvBfoG5sGyHv89UK2YEmoXhKlCg==","signatures":[{"sig":"MEYCIQC3xYg84FvpxSN/CHlSDdgZBuEmI5eB2W62Yy/dtQYZAwIhAK50vNjm1clasQi+bZMSp9hWlGXYuzQi/ws3F0TQPR8s","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLrRlCRA9TVsSAnZWagAAoZUP/jM3mbRHwaNnon6IBuFG\nAYlG9v5Yi+Lqjco4jmnhBvPWGbvF8OxyKi3o99IwFTkfCUNOqQ0y6P4Oguxb\nwwQ7q9OSObFnnfR43gGBAXM6zslZ5N1KonPV14VJsR+yI9c360Q67A9YGVD8\nSPnDnpEm08aBPZcTwuWLTgDy7n0AE5k/5Viayiv2fh28kq0ZwkZKgtj+Z2yt\n1d1MsawWJHAWtOhWhf5y3nU5d7XrEK1aLTzA6sT1Us+XLp/XFfDZ1oF1IALT\nZvFy32T3VXZDE4mAf7vlXqgc1oNkLcXlhF77gGtgzF5zBat2hBf2bPXsNv2g\n+oB6OVlr/vVInQNiFcqPygs+uvOJKz9cRTf7NgPKzR1cx04s8Vg18qKv69pf\nC5CvbiLn7hPz4kZRPmPKsj9gZkVYJmJdIruv7tMqobVY1N/w4K5iBnOPD1HX\n7i78L12wGO2kF4UMjnCzGRn6C8FuAOKdiv56Hv3onRaGDdFA5pkoLXC3ZHZ0\nsrDcpffm1onZW6x2D2wXfion0EJV6R7VOdOVOKOTe2Y/GkT4sQAV23Q63FgC\nhUQ5hGkgOZzuK/6kXcns1+Pi/D0n7QW6uRAn/gGl2Mot2vuNZ4V9mk3Cxzb7\nco1Bkv6xMN3ujTG7XdLbnk7zMBBamUTGXDJA4+9L6Ksum0XkvLe/kmdnSAcm\n7gfG\r\n=NYfe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.302c7a960.0","@material/tab":"11.0.0-canary.302c7a960.0","@material/base":"11.0.0-canary.302c7a960.0","@material/animation":"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/tab-scroller_11.0.0-canary.302c7a960.0_1613673573012_0.8122229522050171","host":"s3://npm-registry-packages"}},"11.0.0-canary.aa0aaf026.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.aa0aaf026.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"692ae51197ac3f428cc2d18967ba46408e649309","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.aa0aaf026.0.tgz","fileCount":52,"integrity":"sha512-RkS0fn1B61PGItncM+J0KlvNgUtjTzx36SAmqtFRovpBjon//c2tHQ3sjx98fiuctjz2UjSLA23+uMk0ekMYMQ==","signatures":[{"sig":"MEYCIQDDhqPC50PyrZKZbSbsZrZhUy/tVGH8k2ONsKjuLWltdQIhALiMGRlYMd3w31uvtuZVZdi8+eTAlmaidHdypPVKtNoc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLr7/CRA9TVsSAnZWagAAK1QP/1WW34DC1xR1yhnCC4qo\nHjzC7GrDsovT5EKzFi+ZgBzRT3aDwzV5WaO/iZNeuXC6gowHeeQ+DV3ywY9q\nSfQSFwxoWJKY3lA5rk0IH8iil5riTvKeeX66tTTp3rWY44ftFjqqLdpXTrHv\nFAEIIpExqFfG9Ytg8Zf/uT1ZSlwmOXOxTu8H/V4YzPvTBBaiCrNeSQcMmX/6\nDPcM95ILBSglbK/O/vpXFHR9jfnMtUUKAb3s83k8wJ8s1X8VRTl8p0lJ//KD\nsrOImyHdHYsxiDjMpXFp6HsARMDZ2B1PmtI47FaEC830Bi9+J4ZcFxEW/8jj\nBm/n5NNDLxvml46/Qu+P2Fl0MlEAa9DiO+lAfHrGcVCMuQnAh0t61LgXC/C3\njWyl59mT5VSQPAyG+ShYt2OtuJJ/PegiuldV/ivqlmMSmCeZJMtiUwGAXYBP\nVEpnKP/kY1MANO8E5nbv0c9dU288X3Vc8XqW6q9S86rHWnQB5E2GcHBBSX9q\nefTEStmpdHKfkfY9GK7lKJjfPILQes8WbcBsKqWfMFIZFwxeiVYKYpOn8wLf\nhSYip8FEPJqUn4f+GMPbm+FP0vjXTtKvYAm5imaln1NHOFVI31YYGK1543mM\nmfEWgli4lXDKv8wXsjjPeeFiJZSFa5rMAqZA39n7fypvLKqfe8Dw8x2nvpJG\na2HG\r\n=/MY/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.aa0aaf026.0","@material/tab":"11.0.0-canary.aa0aaf026.0","@material/base":"11.0.0-canary.aa0aaf026.0","@material/animation":"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/tab-scroller_11.0.0-canary.aa0aaf026.0_1613676287019_0.9913236997258479","host":"s3://npm-registry-packages"}},"11.0.0-canary.07ff0c452.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.07ff0c452.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fa442ded38e08730ce21f7327865b5031ed7ea07","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.07ff0c452.0.tgz","fileCount":52,"integrity":"sha512-5WSQOUQI8pxJSxrIm4IYM5XiZ6QMLHcXr/iLftvUZspgsvoQReAbtNUuBbcIQX9+1BfQAFkBurrol84e4g1NcA==","signatures":[{"sig":"MEUCIBdtsBv1LcCfWF1mMMHMRxRtApiQH6WhnyzGXdyCPzudAiEA1CSMLHlgW+wbN0BzzRJyorg0zmn3wedx4Jy2edAPydo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLsOACRA9TVsSAnZWagAAh+4P/ArlnK17BM/jT7TdCPHm\n+IRUwVdgG83aJ5NoCo7xgprSzS4y5WtrMSyBoMHFCUQXK2CaeybwsOefG2KA\n1conRsOj/+muXfafNP1cppk/XNHTkyo/BLzcXrRwdMNqBT94gWwrqec2AeyB\ncCY3GNyriSWQN07amwNBPWyZlQUtZfcXm+6mSwC5IjbjHeFx6QU2kbD5gwt4\ncl8CorUz3+s72VZZEK8hoAUQtX9ALqRFR2oEj2AeDAZEV9UKsVrTZu0ML9hl\nCkwLYK7sbzfJ4WbZNYlz9ktw6PUevxlTkhdyr+I+hEsDr8og275nJw/j8/Uw\n1BB60+y64GBnr6EkxqNH4pTMjJRW2RnKzi8lMD7vzgMq0H3O29yVeqaWCcJ7\nb9p9H7iIFatC4N5Y05E+x71WTAlpcQH6F6q7l3Y8hiC3sReMkGqwTGBIhXpA\nJfFUMqTVVNLNfKgTIL2VW1kBI6+XpSHtpKT2lDZB7l4gbewmOqEuLox5nyCg\nrHcdEXS+Gs9Qmr4diW9BPeoSHBOeFetdn8xKQGijToSp3UEEOcVYFk1L6n+g\nY4AyJS2pwA010UZRFdUJA/a7I+b7KJN2SF1NVNflsnNdOihvCXuC6jhGx8tC\nABnX2C6iyNLnHDptz1Wl4uWIs+szsLvrpETJoqLEYHEcvt4aVHW5u3JLgNGd\nIwnq\r\n=fu6L\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.07ff0c452.0","@material/tab":"11.0.0-canary.07ff0c452.0","@material/base":"11.0.0-canary.07ff0c452.0","@material/animation":"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/tab-scroller_11.0.0-canary.07ff0c452.0_1613677440252_0.7191654432379082","host":"s3://npm-registry-packages"}},"11.0.0-canary.bed7ecd3e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.bed7ecd3e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"09ccb2a5784c4c95beabbd7e59e19a4fae667521","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.bed7ecd3e.0.tgz","fileCount":52,"integrity":"sha512-LHye/RGToaQ6/6b1kWDnJS11tyykOmttotlFhkMmPnMgum1bz/W32Zdik8ah6kdehEFV7nLaXK7L17/r27GG2A==","signatures":[{"sig":"MEYCIQDTX3E1Wc56O1fMeaPFMRddNdthghTxColYBmErEP5exwIhAI10ufJuv1qc2PyXLavD+vCwScsxA+fZonxyO9UxcrT5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLvgyCRA9TVsSAnZWagAA8SUP/jvyjovjroin+gP1uP4r\nEtxKSA8kQ8lIma5t3qT+rSw2pSpaBy8A+i4bX5Lo4bC4S37//kV158jdQVYk\nABUYgBc1oMD8Ab65mbeYWmKMs4rmYU6rIALNX0SmfcrtTI5igwdFI24Jh2kK\nQsrSrd5e4n2SaGUppkVKBVHpldo62zWG5XZP9V20zsMg/duPTxqrlukwcGTI\nCqdHyT0YoBh6nlrDHPcyYTcSq9HDI7tqLr4DPaBo6RgtocQ+IPbKadiyJhoD\n8azC3guGglSwCkXLh2lNHDbRM3AT/BTCOqG2DEih+clrYQTvwuPnAhZc/UKN\nXYDCZsurMkYFPUvPADDRgXF2Omsa2fOc0xD2WCWgKXqooAzxQPTQjSzCfz3i\n1ICKtkKca6EWoEyUGdlkcd9LLwWSinEotjeiKmEmdRRC9u72uJjNBNc6+49r\nQNjk5711dJHkSc45JjKyyHI2qQa8VkNNOSoqhzvRMbGRS5cZozz5EACxwSZY\n9QEGt6XQDtDadX05ZR/HewJ0ezEJq/OtKDPwkwQ5HywLrA+Z77dBqtvOPJhb\nW2Xelx448O7mCygYf4wjXuEhdMUsGQLzKncnKyiFQGPVaYbzQGz479gHQALo\ntXjaTagvmpnGwg84qoNO5JtCUv92GV46UwnfQAvRNinS0DU0+uI/J3V6bIzr\naM97\r\n=2nAZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bed7ecd3e.0","@material/tab":"11.0.0-canary.bed7ecd3e.0","@material/base":"11.0.0-canary.bed7ecd3e.0","@material/animation":"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/tab-scroller_11.0.0-canary.bed7ecd3e.0_1613690930421_0.5536642783133441","host":"s3://npm-registry-packages"}},"11.0.0-canary.06dead2d6.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.06dead2d6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d1fe59248125b22a67a374f492acf0075d772d9b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.06dead2d6.0.tgz","fileCount":52,"integrity":"sha512-wtlFsCkbfeFazm4G5S1WhuPQX0ZIielc+RVFmmKSFzI3kpdHeL+lvV3i5ABmEl6+/nhrYjywiMxI8d+YgfPBrg==","signatures":[{"sig":"MEQCIHxyE6zeDbXDS+477ajfgTod3rDjk0KonX+C597xw0/UAiA7DqkY5dEO7a+nBoc7gEjvLjWYgpF5JfGHXQPeEMpGLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLwh4CRA9TVsSAnZWagAAoDYP/3f/YBsqL62oNNb5KSoE\nX4RlxpmAPE6tUANFGZqeLm415nkUaTjjNCCYWXKe0HpzHVtEI+xiEnuSGiAB\n277kNu9rP7APy6dDYEkjtb1HYC1LBH7dtoQAudRsIEjAie7I8AzAmWfAnPM6\nBw9M8ZTkGAVYe50YWMhtNalycaJpmg18tAdymszCt7FK+8z++KERifPB0lGG\ncq/bweswHCeg+meNJKaaot2gk5SA4iE/7+Gwcqt4YguwUnKtEx3Lt7P8rz5Z\nmcGB76eayqLBQL6N0Oa0zNrsA1gkO5/GrHyYqqGyM25gTxgjYUFJmEO4pWc6\nFdMSGMY+n0I+5XGuycE6rXUounhtOZnYEmoZyZYj/OGwMnt7ZFAwFn48ua8S\ny5HeCS4ElVeStfQD54DiGqRDbWu6DD1JAxQjHx3lAQKKC/Y4BjL9l3AlX+sw\nOAvBntZsxqC6P4+tjSiV/X0yx61gPJH8ptU+ET7Ao33fsw+0z0lBNY79p2EL\nP9tOeDKi3ew79dJfApWrJG8WUDnSi64nrRUKZAE3gPMpZzKAqobOTf6BN3A7\n23EEFyRZFbSq8PwJJPBPn9fYpqVUAwomrE4DFUiniSkU3YT8XD3zjRc/qq+r\nsIyCwIAbkCqCP2Ds72dSrXcy5h/I5II820a0Sz6JHZCRYVAaG+n68ES/629N\nvtZO\r\n=Bzwx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.06dead2d6.0","@material/tab":"11.0.0-canary.06dead2d6.0","@material/base":"11.0.0-canary.06dead2d6.0","@material/animation":"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/tab-scroller_11.0.0-canary.06dead2d6.0_1613695096264_0.9026127089726981","host":"s3://npm-registry-packages"}},"11.0.0-canary.cddb03553.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.cddb03553.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dcfcb4d666e4c1a0b8f7bc0897e06bee3968c24b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.cddb03553.0.tgz","fileCount":52,"integrity":"sha512-6nX/z4as/WVuTdrJOVbUcmVQI7d1h3kSYtbcg+I5VrxocGma3EFiwsm0yh/6eU1fm4Wia2nA+83zEtKVL9icKQ==","signatures":[{"sig":"MEUCIFUrKag3rc9MlkyXSMtHmrmIYgLkdJfoZaKOXRymIs6+AiEAtmhXSX7xeYq1QSg0MU9F0t1eIbOp1o6xgJWuJqbML8g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgLy0OCRA9TVsSAnZWagAAtXIP/RwCKawdVgH9jIsYB8Rh\nTAqt9ol2WjGmZx+SO6FNxYWLJ9unlHy8NzNH3dRZV1YKCU39mD0zoYp9BDa5\nuS9+X491+I1D8Xp9Upf3nUKOr30JqDIlLYkSgFe0M2At26+WqhEbejMcDwv2\na7m/h3P5pyTO3Asoc7mV1Nh1vrzMTU5xHQRKYP6omDT3cS2xY3oB2ohJF3qP\nCghFg3JJZUl61K6pjGoeGi3fBgniEjvrLu6Ve9KzHGrzdbjIf3P58NNWXvRY\n310MvqrPpuyo4N94BvkN6wfLQhnERpORIInnn+Fxg37QjJNARTDNkNEOTbdt\nfJLuxLqNHoj+9n1TPVCjKEMiTzIPfXap5Sq1Jjtf0l2eKuS2+5KSmO9zBUzT\nvusgEfLEn3SDIM9D0lp4mo8z1UzynFSa3NFteKSM0994FmmglDGcaAnfdRj/\nISS4agWuXKcEecAs01op22/TxZMC1E75zuVtKH2wQajz3NSYm30FdqLi6sU/\nnUMjHjQFc0Ja9RMUUSxT/KofFa+w2J0QQ7TsNwXr6DqfD4iG/276j1ipGZSz\naXjlfpoOfKdBFaIO4IvbXdWlo0wNAlDCjkk7ChFLRjNMf5W/4STXt82OAvro\ntE5eb2QCh1DVuFDrlaSCcgT7QslJzUGIsa25MA8Toog1zIXzbeZEQZ+dNy8+\n1Dpg\r\n=Yitx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.cddb03553.0","@material/tab":"11.0.0-canary.cddb03553.0","@material/base":"11.0.0-canary.cddb03553.0","@material/animation":"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/tab-scroller_11.0.0-canary.cddb03553.0_1613704461921_0.3281946569076273","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6d8d0476.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d6d8d0476.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b017f4687715b1bdbf555f9588ddeedf7ba9541d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d6d8d0476.0.tgz","fileCount":52,"integrity":"sha512-BNZYA7iW+is4V8W43HqzuIc1Jv6FiRepztPvMZ7L9njBuE2RAU7apMAbm+Q4jtMvk/mfF3r4JX7aAqrTHR1Ucg==","signatures":[{"sig":"MEQCIAuhSYA2qpATk12ODVjo+3GBwXl8ija6n5jguSpGywR8AiA+gh7jLwLzwahZnLb5aFHnxvoLM7oX3i0Ro2nFlYzWoA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL060CRA9TVsSAnZWagAAnZ8P/A/OgjfBR1fMzPizkOB0\nAVINBbO3LXLrNb2xu/BTfreUaGO/rfmNU3CHE7P3WsXr/2qtBQHe14SY005P\nhCDDumdiZtOEBEXDuraEG7Ez/LvZr947qG/oTyidKJj/FJQNX8YG7nJ+uPGW\nH5eHMQirAVwW6xRFYj4Km8TNsDbqE+f63zum8lmG4S+Vygoz4dwaQ/dKlPYx\nJV+FwlJmR1OKm/JUHgG99lrTIUr7annOTL/90ISbJpjgqAi/gSLdOebSNWuj\nyKnEN8ZjrXo9qQDxr8y190XuBShQo26Y3CEvqnjSc1yPTvyI9UU2F/XICVN+\nR3w0o3B8gL5rcDJaKEbM0/3PtaJcfY5zIifChdwvLJxo4cXYc5dxXXRCHHGt\nH8JqfPDk0B7H8u9E+hz1xa+WmG1NK8Do9bWqh8jNuFbiH8yk0jI408GSCuQR\ny6/KINvJP4gHehsVHyE28OZ+gK/WnG+dtn/0eN81/A+FvhYk01Li/nNP+7sS\n3hj1Tipb8ZRqWcC/PXo4vNVSK7fD87+Cs1Mhp9pRkjmrMcL5HfDN1IcSsWrw\nAOHOv+VwzOhGKxZBCXYGzOccktAWzExjkpx2koQrDayHdo91VFvRbWr2u+qE\n5DvBtlLjMjA7IyJJyy/QI9ctpjQhT4/j1lnVe1phWfk8smEZp2/yKaE2C8Ed\ndUbM\r\n=3x69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.d6d8d0476.0","@material/tab":"11.0.0-canary.d6d8d0476.0","@material/base":"11.0.0-canary.d6d8d0476.0","@material/animation":"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/tab-scroller_11.0.0-canary.d6d8d0476.0_1613713075969_0.10069307781206205","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b4a4b2eb.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0b4a4b2eb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8bcd578be28a4043c886eef4db6ae3a08a251554","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0b4a4b2eb.0.tgz","fileCount":52,"integrity":"sha512-YldPboOa+hRogM8+L4YFahLQVicBPTQIeffgs3dh7U2DuUhAZ/A1gllUmcPdrIkzg6Yzd9jbI6GVH4Ao+xA06A==","signatures":[{"sig":"MEQCIFNCh7jf4r29oE6PMfub0sAZTr63Jdb/lqlnuBYZfEduAiBUzlsBRdv3u8CCsCd98506geHdTaz88V7xJ72xBlqDTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgL91+CRA9TVsSAnZWagAAjDgP/22fdFXwYbosGSzT12QW\nrI9rXXgv12q/EB96++O82AqBcowvm5aYkjABuRs5DFVZZDdzuG954q+V0MOY\nWQdpK+ZM07pai7C6WEH2FZh9y1NPFMrt/oMdMuzWd6UIpsERNa9Dv+qmIU2E\n4by8gIFBVMJmbkRS1A7PM1Yb4hpSPIsS0JGZrlF1jmGvdN/VHJwAkcBf8wRF\nj+W6wXQnY5lofbhpg017Vlj3oJczx0lZfGiegZ4/WLfWpEhqSmnx0dSMKqzL\nLuJ3W9rWECgsn0UO2L/RdipkSh1SS2SzxllkqV3RxyKFj3fMoePaDL8v/YUv\nRSHaTgahkCta5zYZcmQlIQPhU0d/KO+9HbMsIxsN0ZhYR85BDVfcKy88Qdv7\nkebuGiV6v93PK5NTfBiSYQb008AiB69JSStS9Xek4vWzDW3UwptM4HRl98uO\n0QI79yr1ap2PglEQLx/zLIoZrUJboEiRrGdatIqay9TqgUJdGuzbL+y000gH\n/60TMbGhiGprZV4HXMiKXP2Ye5Bnlcse7hH00TPgCj9K5UVaw0HG1FBeCTvr\nDPWk+ZZNMlPbf7oCPmEQAq4PG3zTzTJ+W61nLhBOiPTrBpTV5isxaIpM3EAu\nkyX/NYAz1xZIDt+ru+HcE2X6Jiyt+Jbu2iVWJpyKn04Mkg4BNZuZnwESXgUX\nqILo\r\n=f/FD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.0b4a4b2eb.0","@material/tab":"11.0.0-canary.0b4a4b2eb.0","@material/base":"11.0.0-canary.0b4a4b2eb.0","@material/animation":"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/tab-scroller_11.0.0-canary.0b4a4b2eb.0_1613749629621_0.7985663344572902","host":"s3://npm-registry-packages"}},"11.0.0-canary.3201cae47.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.3201cae47.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aa54e403d9ef92e34353ad6d85566bd88b432657","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.3201cae47.0.tgz","fileCount":52,"integrity":"sha512-gL5FB5O6v1rQTrEKfn/UKjm44ATKiq2dqWn6BmaRHRFiMXBBloabs98xGP6yHUXk5ns2mVNNFSs/mFbeCtYNIA==","signatures":[{"sig":"MEQCIHtPvVn+3/+YNW1IbjRm7wpBrAJ3NqkHQvkNtiM+9wouAiAsXpZKMGzkFgAWWhTATcT7QHXWbC9UuB9p4HPaiwA98g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgMENnCRA9TVsSAnZWagAAsXgQAIrY51CSftn0GnOfjU4Z\nLa0ZDTdrYDQRne+OVqiD3ujDM8Ba++XjHpKpOmTNzYlqdieeSHtvegwimBhI\nT3ubkz3yWtCUaGqaSK3Z7YEOWHFgZxYAVBTAaDDsj1ZTLVX+6Kw8qr40ndr+\nEdXDek3xJpgRS/xcKXMrJyUrjpZYfLAoXhtdq48j/go8c0mYS8FaETch7uTV\nfbkHVsN1wEJvnMxJ2oIxblHbg4XGpTig3stbK0BIJxppBkV0xu5akrp+JQ+8\n5PBSeTsDJpCtgWbEk7zMK8KFaS84WLNDn+M3hGT4bEMBbLiBQNbZupINrtCF\n7Ib/V/k/ScC0KLn3zhymllXZ0jBgJjrmzH+jNSSErnFygg5mBopETt7ingCc\n25itrjn5duy2b0Vv8u+IZJlRpcVq73uFRLURSaIymj8XfrcyxxfhzGEKvUik\nBkIIqBwoULwohQRtTjTMZo4g8eq/CpzW1pneBjlz3O1oGrtuf2OxHa4aTx0r\nwwdq9kCDTHqT6vSTnSx8k49svDnP3W0rYBSXfKV77EdBsoIWaDNo/t7VmVlr\nQq+umMACoKsYmfpuiLcDY43g3OVkNJGBerN05uasMkkCeu9UO2T+wU+gZ9sm\n8OYwW5PmcPMWfVsJaIxhK+ApETUslvOs//7MVbpPy7JqUKHSHCONIbdH8yRF\nSdbv\r\n=HYgt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.3201cae47.0","@material/tab":"11.0.0-canary.3201cae47.0","@material/base":"11.0.0-canary.3201cae47.0","@material/animation":"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/tab-scroller_11.0.0-canary.3201cae47.0_1613775718509_0.9860776407262248","host":"s3://npm-registry-packages"}},"11.0.0-canary.f1b1fd5d3.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f1b1fd5d3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b80bd48188bb85b9063a381acb08ea774265a1f6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f1b1fd5d3.0.tgz","fileCount":52,"integrity":"sha512-qSTZpve8pY9l+Tem8LlJw2PZjZJTaBbkwLEaj+UvVFapPxkknaXZFKSzWxK8SnMxgqadcCYfKqOssaxBQgOgQQ==","signatures":[{"sig":"MEUCIQD5amGnqcl2TQ7zS52TO0dOvQlOTerHRrVxBIX98cih9QIgTGjypVTWdqJo1jPkzZn1RItF9ZjeoD6ntAsgGJ9Hhjk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNAsZCRA9TVsSAnZWagAAhWsP/0vnK4bZ6eZPapa3TvLF\nP6UpHGx8rLtcwrvfxMdmU505USf9HLj277E4s1SYHPn5b5wU65SnDkHZKGKL\nhYf1EcO/Fpx3LMzAEd0oSIXFsdiXm6gK2M+EADJABSt75qYXyHoyaKJkH0dw\nyT5eQRo6L0YwbKI+HyANro4gjyS53PWng9qZL+pEh2z2WSbMaCWFkAgpUa/1\nPSfI73pYYYaT973zxy+c3L4/M0M/6ftYJzz07Bu+YFPQr9RRN3eGB4AAPooW\npaIgLVLZ/Wl+wgE+bv+LmrBnDOoVjHT+n19J0YveDKWEv9T0+zpQO01Hvwpt\nbEGpX9y5S6kl2PLJk8K13fVintBoEGcYnE8oYkzB7KLlWr4PE9sCgbgk+Ugx\nRL9YgMuFKr8k7/2k/uq6Jm1EBn2lLqhL2q+zTJXlREwwOKUvXvWuEewol74V\nmoj5tVnkvxvS4Wv3znYZX4rVdwnkUUL5ymQpgU0sc6yCop3D9AKvaRUdG5+b\nFB5VS5vXZZp2MEF0sSKUOJX52C9h4PgGL+gFaJaZ/0/5d4LT3vst1NHXERu/\nHIH2nXw1wDKlaaNzn0/iZZ7B3wOdfJy5Ui1Zna078tTAMTeCK+scJ2nXsH01\nUhARjOQOgqINwCx+qC/51Ip5FxEPC69LSWFiCxoDEpo+yAzD+CcHMQ5DS9MW\nqO5B\r\n=5wv0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f1b1fd5d3.0","@material/tab":"11.0.0-canary.f1b1fd5d3.0","@material/base":"11.0.0-canary.f1b1fd5d3.0","@material/animation":"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/tab-scroller_11.0.0-canary.f1b1fd5d3.0_1614023448781_0.42504841569732377","host":"s3://npm-registry-packages"}},"11.0.0-canary.7899e0fe0.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.7899e0fe0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9bbfd6fc039d58412e398aec2419b6f4fb3d5a6c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.7899e0fe0.0.tgz","fileCount":52,"integrity":"sha512-+ujxYTyDfwPksL2rKqHLRrfc3zYKA5IfzHZ9YJszM1n69DO9rAohtPW3DBLzFAEbSgti8N4YQOi7DjafzZExcw==","signatures":[{"sig":"MEUCIFmS7wGN2OxPqqKfpXPoT0SHAPwAaCQ/PY49VN1HEAslAiEAkX3QH0N/iWH3Sp+h426MJD5T3mdAtu4GItpmWbRvIDc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNDRpCRA9TVsSAnZWagAAUIAP/38LI99GoLiz81e77Zly\nTSfZvJE6LONGYxu1ApMLTqpTCG/qTxpir9Xo8AT6nzUn2KZgCSmPpuLdNnxL\ncqefZEiWaPoIVY7Y07yw0TlkmsSUyXe61mKcLA/iWOBRpEeMcMCWxafM8QI8\nAbwFwDvAs7AU8O82Goxm7NJXJSAcuF88YOOwh+pGdoiEY6Cvw/RSBVon4Qkr\n7mGVUzJ7+fgVPDoLJ0sgfzToi2hv2uEIXm3dWOS/EV04kEqgzzu0f4qhm01n\nzLkYNnQe0WtkjE2OFP4OfxG20Di+ANyH/uhpIvjrZZ9tSP0wdn2cZb7VdhOd\n8vO281XzGO3e6QRzMMdidNKjLAJRTyV5azbgFaPJiL2Z+cxkWC23u7YEamhp\nNqdUeLr1tuxi6XuaEHP+R7xI5NaDZJyM4b3ytLWJZ0H+DsuCYLuhOUQIYjTR\njWvIuc7OG1Pv6pYntiA7OXoEZzl1JM0q9fnFSIsgJ5UAqnTJbXiaec0aIEml\nX/crrE8gJL947xRuhVJyI7H7Rw9/RkqLCAzlnABNmn0+xTaTY4fU8ElPgnzp\nyIrvLw201AdK0MK31ceIZLbuSl01oINDTtxfT4CWVd/4Ayhek4DPhlRd3P4M\nZAIP/fGk0ePZ0WdatpZpsJN7T97+vf3DB58VEPOqhe+8cE9YgJFpWSUG2Wxi\nDwzj\r\n=zDy7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.7899e0fe0.0","@material/tab":"11.0.0-canary.7899e0fe0.0","@material/base":"11.0.0-canary.7899e0fe0.0","@material/animation":"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/tab-scroller_11.0.0-canary.7899e0fe0.0_1614034025011_0.3870904445636798","host":"s3://npm-registry-packages"}},"11.0.0-canary.f19c86d13.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f19c86d13.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"67059b74e8c554b371c316627afe45e7aba8117c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f19c86d13.0.tgz","fileCount":52,"integrity":"sha512-SUafiaf+ygkFuGpyPCARF87fPkqwjH4BEushFr2lSpsQZaYcOaPKdjLgZ/17apmZX5gsN/LWSAypYfxnlM+Hsw==","signatures":[{"sig":"MEUCIQC9MS5ESHSkBhV6IpJMrWVOo5+cWacbl3QJD4yelWhBMgIgJCbszOjoaXDwnTYXAAJs0JuWXU03Adp8qEfJlDensWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgND7qCRA9TVsSAnZWagAA3ykP/37ZWKT6U8Y2ophL+3db\nQ+/DoQXf3zTttH7DW43sscb9gjDdDxvWLas6tEkPWMIXANr+k8DWqJ945z+U\nYLrugfrOhOl8vN2DvKzD92TT4gBQnIDqska/e15FPWCkN5EU5q3F12+hv2AJ\nXm9yXHesbCEmpySklb4j2wFUK5RQUhAsv835sM0tP/DPX+6Cy7lyVD1puCrs\nGD0qYXhkSNmW4SSIMbNfYqGcDKrnku947l5A3Veny6WHY8Pi5k5W4QLZHF1z\nj/izM9PEHpv1BfvUorDnqbcCMZpGfz1uuknI4CBNQnnr2R/VWtr4+hhqFVVm\nVeHKCw54ahMR96tdqZmE6pqec84ztLTWg9cYmltIgfBdTaRCtnM82/vd/VP6\ne5BCcqqD+8rYK76kb4J1X4KT8ORwDMd5OLLA5VJRXfqcvy39Ib04JXZi7wO6\nHUjI9sQraaAVmgf5ah/HBjd5aXUQ1QQEX2M2hjr0QDR3/DUyBZJV/YUXrvrR\n1cePqQZ3Sa/NidQw9PrCnw5Q2I5Prf4iTXDes+K+ZPwbJJjpMWrNqtwKTQqm\n9Jrx4YqB1xR7Ngp2U5lSbqjUwAHsRm1Xne+Mb0Kv9UFYnfCLPyuVSGKUNhj/\negGzuDM7HjOWet5FQTKdRSWCgtUXzJrQxYiKT4woLR2BeJ4RJGcSuW0lRyGy\ncbG0\r\n=NoLw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f19c86d13.0","@material/tab":"11.0.0-canary.f19c86d13.0","@material/base":"11.0.0-canary.f19c86d13.0","@material/animation":"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/tab-scroller_11.0.0-canary.f19c86d13.0_1614036713956_0.5650347619767475","host":"s3://npm-registry-packages"}},"11.0.0-canary.60e892d79.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.60e892d79.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9477348f1caacb549136ab5f1ad427d6ae167bc3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.60e892d79.0.tgz","fileCount":52,"integrity":"sha512-jXE3jyDaFQ8iriDcGcI8Dxm7esE0YMoTrbM/2SMBAYzJOB7sOa/X6olC5pDVq7aICdP6VWrsSqLfdkKzADZwFQ==","signatures":[{"sig":"MEYCIQCNJQtr66j++35qOanBXNc3xYaFrEYgad76DrkbUMf1UQIhANgZyzbvBbWr4NZnmyRr4TcPnvH6b2rgxNR0DCW/7ADe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNFcyCRA9TVsSAnZWagAAu7EP/2rkrxooRukrRKHdqTHt\nAYg99Nry6snAm9o7wHwrrenXKroQJhO2gl3oxOk/P8p1jRMW+5BDgeJmGGuZ\nOnkb6uKaQbXaciT8Eq+IbTm08k+gWJr0PxSKS8S6/JiWA7ofeGEuySQMshCx\n0wChvJk6mMDwg8c7i8nNvvYgTFtQJNN6yKJWSi1QsaiOndXn4rLn8DqcMIgd\nfsN5TGDUqiDib8SslY6p93WJd0MFZDDjzElEbETUCJgInErab98ssriY0gZB\nq2eJQu2u75cQ0D9+GCVbdeDzQwbvD1ws3tOF87QWQg3hz2r63z5HOj1baDjt\nY1nl/jN1NWNIrvcuX+IS68wnysfhZr6YKcPKFzovdo7piMZTtDfGMYA1+yOM\nC4+vXKdx3n9JTSkHymYk0ClgTCArtcf55xtep3h7HzSIAESRzmqwD1kDHapb\nVJDa2vf5tos2tdHeiq0yXmvkYd1SEOyCtpLkvGzqFfKg4Oo4DRX65EiFS1y8\nQHJ/Jtpx9a6oiE05NAVme0q8Uryg31+ii9LvH2A5akAqDHLr+w2Ee0sgDz62\noITXjTzHkP3/KUKJq6equTt4pj+d+8yx3fesjH3uHVee/7wzXB+EaYJ5k7z7\nHRofULmSUevtdPpIvXQi4BaSL7UVOZCJHguU+C6ZhQIS8kSk+Ir5H1NbbOjv\nIaQ3\r\n=g5P2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.60e892d79.0","@material/tab":"11.0.0-canary.60e892d79.0","@material/base":"11.0.0-canary.60e892d79.0","@material/animation":"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/tab-scroller_11.0.0-canary.60e892d79.0_1614042929710_0.5771010525559424","host":"s3://npm-registry-packages"}},"11.0.0-canary.c96bfa495.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.c96bfa495.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6b70cfee89eca59a5ebaf9ef834ae753b59ecfad","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.c96bfa495.0.tgz","fileCount":52,"integrity":"sha512-xxl0vGEDsyoOLnFJ4AA3SusJTEdg9HSD+7P4DIr7EfPK5vvPQXsnWl8jzKC/Uq2zCI66qH5tbfdagZ3e62RywA==","signatures":[{"sig":"MEQCIFn2sbTgLCI9q964exwzG4gH1d6jMEjHBAnoP/0ZdJDvAiAI4Hl8SeHIoaclGW6yz8/nj94ihj7EUwlYSrIsEZy/uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVjECRA9TVsSAnZWagAA6oEP/jiKbVtCDpBcS8J31aUC\n+J+csaSzLpGVYxeKifEFgLlbQGyT3Oda4GoihYVCN8/bOVXOTRcAAOhqeCW8\nQ1yfWfwZTioWoa5TWfgeN8HVA1mZJtDugXvXqbMEXS1XZGFUa3BNg9NAwpiS\nXcLWYiIpEjngG5m4qBcgoTXR1t7EsccMW5wzUUarSR3FLhZcGZgt5S8KKDHT\nv5x/gBjIg/1gL8XUPVS03208LTLXTJAcH4VQrN6cQT7pez76cbtjIAssSZng\nt/j1MZT5qR/icAXNjn6GeBAutoZYjoKm5l+IQMtZ+wIEwNbdztQEalzfcKDY\nMoWcDnDoNz6uZmvKfMdaNk/tPP18y/ivFCR4qey4yGbcHdgRO3AqxmfHgOtV\n3O3o5i+Ly7qDCVySYmpdJXXTJU+V5TImeykc4DagHjgwfqdNW9a9PXGwgpBI\nJJPL+xWvV/QAe9XZxa3kqeRnkXQYI8fCOGBtursi/S0VG9WUgJDXOinBN6Qg\nh+avWnDy5RQ0R8gCDskm4IrwsCUiUda20Imy9PC9OrkgzTefCBjuwxDMqeyN\nvGnusGqQwI/wkkGXdAy85IeQGVs5s/XGxuh1+1i8v/WiQIAkQlxjFztXLEKU\nAF6kV4kCd/EumQIKQSAlMaDlZgNE3mIswMudE/vAN38i9OCDlcli6P+/X0Ph\nPPxd\r\n=lgmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c96bfa495.0","@material/tab":"11.0.0-canary.c96bfa495.0","@material/base":"11.0.0-canary.c96bfa495.0","@material/animation":"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/tab-scroller_11.0.0-canary.c96bfa495.0_1614108868363_0.8825042329697612","host":"s3://npm-registry-packages"}},"11.0.0-canary.fa9b59f67.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.fa9b59f67.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a2305f8c004cec2637bb18645860ec787cea529f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.fa9b59f67.0.tgz","fileCount":52,"integrity":"sha512-Rz9lNiZ1ReadwxGyVBI+veumYCcL7//GcHS8ldYOeUZgfe4CZi4I+5YX8Ijoc0tPww9CVNhrf6UYE4+voGyHGA==","signatures":[{"sig":"MEUCIQCUrdQwVbnz4C9yBa06u+gF2kOq5W55NMATo3HssRIpkAIgd4z9DPLcSC5q4149wXfzrix4bF7vYMa+T3qzB9sf9so=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkVCRA9TVsSAnZWagAAUaIP/2DT3plIsq3QKDmCDWVQ\ngTkEeG7TZWDQQh1D9qz9H0DyqmNM0j9Hw60G+AsUGhDFnnLUnkc0KQpTwTeG\n0vH9Wgas7M5Og/gUA8ZfOOlsvIHfgGuEnb9M3Ti45VhukOUwXC+nMG9rQHN+\nwWuJhoYxEoWTy6YH9Y3ARTD+JY69AVFp292ZlmrFqevoFIEMHQxt+6dyzU7R\nN9H0jqbgYWAlgZ9lwArq6RwqUa1Tn1dIQ+N6nX/2lW4LGREZs7LgL0t2EjGn\nlYKQCovSfZ5BK8SRyVOo0ArYB/4ujx9Kwxhpk2h5hUZFieAY4cdc8QxC/Thw\nGiLrDbb+gA3oWobfo7jiULupCMG3l0RTnb3wPrXK5Sld+T6GpFhzAeM3PKR2\nkrgRxdbls2gVEIitHJ1z0CecjblTrVZaz59oQw+6Zuz0ygYu9O6PWSyKUpdb\nB2UbFBa/Z2k355U5uM6Ag6+7D2HhQGcldNnAaMvu3i6976m7KfVG+aqQ2O39\nndKEVRWQxrknVeb2DwbuQBrV4UJi/EP1qnrrQG93yJuhpy2r8gfd5N1mhN0H\nqJty0UFKheyQbK8zsxse2JWPuJ+TbJ2cO+MzC5atG+VK7DLxirAbpk4UzvLS\nYWPk3GjJVBq9fCqmbaAXW7cIsecjOHBzbjYy344/2a12T2Oh227buvZMX2r8\nvf1K\r\n=0hOm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.fa9b59f67.0","@material/tab":"11.0.0-canary.fa9b59f67.0","@material/base":"11.0.0-canary.fa9b59f67.0","@material/animation":"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/tab-scroller_11.0.0-canary.fa9b59f67.0_1614108948733_0.09389909635583926","host":"s3://npm-registry-packages"}},"11.0.0-canary.869e3497c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.869e3497c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c2ea430fdac75d58cecdac9b3f977afe0be5ba86","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.869e3497c.0.tgz","fileCount":52,"integrity":"sha512-Wn3odjeScEgwRWleB4/GPl5RoKGVF9enr57D53CzgGGpsvasEPx23htOGH+/UaRgVkpABC39/PKkZvkPeE10vA==","signatures":[{"sig":"MEQCIAMzlTY8vaYfE16bacsbM4XG/7rs2mhWV1ZzRDaAxvxrAiBGqXbxhTAHW/YXcJnyI6bl9QD6GZIfOe5zAJfh/36NJA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVkxCRA9TVsSAnZWagAADx4QAJiNRERolFLGrLPA7iIE\nf6wW8mJV4j4klqiYZeZGiECt7vRKkkP5lteoGSfjIZXzRRzVADo59CCDjr5k\n7AvXj3/V9gfKHtURu7LDigWxj0864jf89gh22t6MMgF3K0Cl07Qr/JRQ9eb+\nXgfg2srsV5/pCJbXyncyvh3DBWsglG82sOofvOM3Y4cag8L6ZzZdPCFpdNGL\nqYx7sSy6OwRBBLYJqQ4hMFctYD0a9nn50y2LIRBKtSMnBeSF5/cryv3uzPUV\n2OGIpnujXe0Dd2wQnFXVO1GYYl5+ZAhRtxsTtFAj6bjoe9+mPD35pDqGSVno\nMmLfoSkPgFO0ntQOY9brjMQB4PkmQAk767p3gZ4AA5mWukJAE9pgvWgju9N9\nJW0mEUzIg7pewh0kNRsoPaRN+Vl1i0XZN7xVBMfFqF3F4I7LimFk4How3XOY\n45IXHu33UrxAk9Czt4efd96Uajzy4rV6nNn1H5E8IWK9TAwd1wANdsSHsQkn\no4BIZPlQWwdBOo58K/H2jBhbj1oP4Bfc+g6RXDP3Q7HLhrPi04tdNUPjMh0l\nT5woeazaT7iIx8Qv58o/uJIrxqv0UxTD3US7WX0RxTgHHtavqYl+V34eu3AN\n9MXT7IuOSZHkmDwutv5jh6tCXTS53Icl5j0baGW6boMCkbOFK92G/rolQ4WL\nClkz\r\n=+z7Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.869e3497c.0","@material/tab":"11.0.0-canary.869e3497c.0","@material/base":"11.0.0-canary.869e3497c.0","@material/animation":"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/tab-scroller_11.0.0-canary.869e3497c.0_1614108977362_0.6812127097803542","host":"s3://npm-registry-packages"}},"11.0.0-canary.8ecd7c9a9.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.8ecd7c9a9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7ca9a33ea4d3766812d82f7a3e68970cb80504b0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.8ecd7c9a9.0.tgz","fileCount":52,"integrity":"sha512-GukRiHZ3Y/54vUhHMbdrvLaq3MQP9ia6tSiIPz6cFoPVa5EKJ4VoUqs3AtCOQit9O+nG47zPPhgaCpAm8/Pirw==","signatures":[{"sig":"MEQCICAr44ILE4VcgJopdQ/ONbssR+ETySl/izBCgHrAfYbjAiBngqhztN4VppZWsgyHAPVVG5+1mb8/91riheLNBfWpjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNVzbCRA9TVsSAnZWagAA17YQAIMaUfwpiXd9B0oN6dz4\nTQ+Xilca8IYlBYl9aY+QqyNkjIFVu/BYoC2X1HhndHJ2e2o8KzgAvObjBmlG\nprhQozRdFUMKGt2yt+OCeZaIsVBIzIOCrHekp1iTcPQeeRAFNfVii7pdayoy\n/RvfIRgQ864GEMGr0rGbDUGdDVZGR/hxNfXxfhQacqXkZNX0bAworoTElTxu\nPzFiCPnI8YZt54dOUKSBKYPZf2uT3tqwd4e4EEjwu/Wxlv5diYbTDSdT5kmB\nylLLwQ4eNKzuMYaOY3VlCQMtfCfGw8n1h+spApIVL0X/2I4UqKkOu4TcAfnQ\nX4/cRBOhwXTAFYR0evHHihkmtMlNfxCFPSIVZ7+mOWoIT8sd0xSvQQu2MbQj\nsQBtm++sC+1HcgQAw89E60dckj0ROJCzx73pX6j9eIifV6pdG20TjjscFOg4\nbOj1HmZsBpMgzIcXwoVdRg+KL7HIl4l8hU192UDnWqGUBPUUZueYikU+3ghc\nz8IwA2y+S/edPR32p9uk0lGTz1zdaLPPvB3u16HYzg83q+Lo3tcqYPf32iud\nBQ7Im4u36rQwll4v0OvUecuHUOc+eR3FM8HNEKbMayLGDCVY7U/v3FONhm7E\nvPjKmFQJVcbr/zeT365rbjG6J2pmFZolBd/dNyT+X4OmStJpOr35IytytFul\nSneW\r\n=UYHA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.8ecd7c9a9.0","@material/tab":"11.0.0-canary.8ecd7c9a9.0","@material/base":"11.0.0-canary.8ecd7c9a9.0","@material/animation":"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/tab-scroller_11.0.0-canary.8ecd7c9a9.0_1614109915173_0.6911688369816207","host":"s3://npm-registry-packages"}},"11.0.0-canary.9c85d505b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.9c85d505b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6a1896cddfc332efe219363689651b8d2cb79d49","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.9c85d505b.0.tgz","fileCount":52,"integrity":"sha512-UNfDwP9CLYOD00Bjq5d2fhsYepfEsFAkYFWZhWEts+CWFBgdOc3nCS4/oRvvQqe+iydqfxJdAZoTCS0AdB/A/A==","signatures":[{"sig":"MEYCIQD1iDTaV6tcx4NBXBid0YXhmr++fzN93wHPwdx5UaAyJgIhAPnmbzn5uSvDjP8r5CcP8L+WOwmxbQkM8bZVA5YTihnC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNX7ZCRA9TVsSAnZWagAASpoQAIMUK3MleFczN3kw/7fP\n77HVnBO/lPWdAKGogdbpIT7kr13cwOAq+yJAP2gvrnYbqG2b6vU+npLZk4jm\nYoiBocnTkLDXlIMgTu8R4AbYDkb3rbdhSR6edVFsRVhRbBEXz5az1LW7TERY\n13HmxuOQlgrFWA6x0L/NhM3X6eCFKa9CUK1p5xHQLH07m3jeZvKIxyGTQw+m\nXkLV7upVrtsiZR4lJdyIQzK8pMjwYGJ+dDf6XmNToOAc4gkHvbjQFkpxutdb\nFi1oUI0hv6enPM4yoKIQTerXX/J/+0bUzOiSEYrTXRk9xgFGaVwJ9XZpJNv6\nUs9zJ52YI1QmcTRKQuskUpmM/d60+2CAZpVEQ1h2uFlnKCpPMYxycOOJ4JkK\nwArSxufWmuFV1uj5qDg0EaBKfMoGRr0AoXOwruNQ9yhIx1a4CqwxA6iyrgob\nGfT5ABWV1TIz+7T976uAL+rpsqa7tFOWRodHa5XUfR2DppBKiH1neIRvZ/tt\ndWyuGIXyaq1jG+U9RQKqOBK6+LvTMhanO/XezmwOxElBl46+k442PIqWgN57\n2XU2RQG97QsQg7lXIwtGm6wg+BSM2SveDUTSylMI7nWOQpYwVveoeOC4pnYX\nHRIroQywhsVuHejFn0YduBqNL4PAZK68gkZ403fcPaBenO3LTbEVRm8JI0Lo\n8Qtl\r\n=MaP7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9c85d505b.0","@material/tab":"11.0.0-canary.9c85d505b.0","@material/base":"11.0.0-canary.9c85d505b.0","@material/animation":"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/tab-scroller_11.0.0-canary.9c85d505b.0_1614118616790_0.7902062978014499","host":"s3://npm-registry-packages"}},"11.0.0-canary.9f2e85fb8.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.9f2e85fb8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"11d3dec5b29955e5202870e4183d2a395596d97d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.9f2e85fb8.0.tgz","fileCount":52,"integrity":"sha512-CP4K4tpvnV9KKnTzorvun0PP8gpORyTKgE6BEy5WL71A/0R7g6sK1huZ3k7e1DI5UE0K+GxahyNhAxYwR98c0Q==","signatures":[{"sig":"MEUCICtXDd482J9fTPnM0BAWrm3UwF1gQAlc2i+9a32UsypKAiEApLcFsu82irX9GkIADJgV7r1qH4dhZQLhcpSQZsB+p4I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgNbCuCRA9TVsSAnZWagAA7/IP/1cYVVvjwozzdFo6ndgw\nAQMykuWVdJO3ewwjsHfn8PrKSaZ/Dhhb3MldKLiELQpooseoPxqKFv66JpLq\nEueXC83b3VlO+sjqfcXncGNPmXJccaVmytR5nb3amdkD/Xywd/pk2zCbSap6\nqtoQqfqkZID1O9IuA2p4QG05woWRXxzswb0KmCo4PRvpd+H3x9VrQ9yJtszT\n70mLsTN0ayxGeVZmdk0MF1bL+GvZNSJ7E6mpHipdNH/h0XGwQ0yhwMH5SAQM\nZt/+KqcIBS9A9LwlDFfT4wrjAFILXScweizZv7CwvY1JbT/8cGhKKp+fuK+d\nIAX1hojU/ryprtVIWnLo4SF3z5u1u+bUd0EXMZc6CHsMd/pp4hm1uD+Nun7V\n8O/2HWMseG4ksnu9RPSn7cCoTc9dvdUFQWFLQOUQMBWwW9hkjwm9BElgpRw7\nbiayCbH+nHH8bwXe2Op0CyWQOOUYk5kYuDfnssYPYsQXYZ/5vwrrqYusb3wU\niw7oe3128nAvwdfmd5YzosAaQVrkKi+aQaMVb7xeutWx8nQ79B9Zx+kfcs9r\n6+G3ZFF7olHY/9GE5HqK0iODy2vcJfSYS7Rst9YfpSxfX2Zg8OjNzJO9XNLb\nGJNAYuAjrGyUq/Yr9d5t+f16UA5cSfZloFCGLz7oGrjgeSogQiTIWviXu87P\nAunP\r\n=S0wu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.9f2e85fb8.0","@material/tab":"11.0.0-canary.9f2e85fb8.0","@material/base":"11.0.0-canary.9f2e85fb8.0","@material/animation":"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/tab-scroller_11.0.0-canary.9f2e85fb8.0_1614131374252_0.7283917396597588","host":"s3://npm-registry-packages"}},"11.0.0-canary.19c4f29ef.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.19c4f29ef.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9b120a50d40684bb8c4a55e4168f3526f19f0398","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.19c4f29ef.0.tgz","fileCount":52,"integrity":"sha512-IkIabreTkQpS/vxHjDX64uCIALzmLyBIFMszSbTfjIqj0KUXGCidL+y3ZLrpFnngnUEwPplDone93HFsJHrl5Q==","signatures":[{"sig":"MEYCIQCpyErFq8JNUXoHY1q5XBaB9cXsAAAoq6bu2SrM0O4k+QIhAKW6yd+sdxATMWRPQbDVHO3S+/pv+cL4EAN5/zyGzXrj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/lICRA9TVsSAnZWagAAHTMP/iPdOMdxqY74SZhpSOGN\nGLWtPN1u9OxgmjFqgdSiYe9IJHH75xOR2+TNxg6EECEUXtsNbzmWjzaFDfWV\n3QItGZY0D+E6D+cUDFYqlXcr4XtPSfPCIwHYdgxOkvGXgoWL+sVOG0XCi8uS\nHOccr4av48716Qpp0n+qtp6YjQw30m7cM7zS/vDJqkC7beiffFI+D6QlOiJe\nFgJ3zaNkXyDuwwEoM3lGa8dxOEIG3BPANQn3IrlhbqQodK9wGCCNKiIWV4WO\n9NvEYRoHRoWPVT4N/lvaM85PWqSe7umeHdhRQHIaLwGx3zMDS4LOaJeblJ3j\n2Xz9J6Zin93U2p2E4Bk9pfqkJ2ObBKt1DjWE1Lv61Ax9YqSCNqX5Hz5Cvy5N\nKoYs1/ny9UpfuJzOLwiJo2d/KeJMTpjBcd7a496A4zkOsxIWxh720WTf9cWz\nynA3lkkkuZk5quuVS2LfNpRqEoDYbaJ/5xajRxjN6oeQ0bplaNjByJDEb9Ur\nU9HdLSXZYDSBXVk2M5zkXefiKCfw9wHv4TjofKB1OaGRp/KX1MkQuCXGU1vA\nu5nSYCf9ocfFQvGcHaXvQHX5c4aKOzAe+8vCG4uMq2SqNPCTZi370OlCseKp\nu1vxfjqWM5INUmkJeelypC6Kyplch3wCraVO+Ix304wlqh7mowjFY2uDvbyo\nFJbn\r\n=C/PW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.19c4f29ef.0","@material/tab":"11.0.0-canary.19c4f29ef.0","@material/base":"11.0.0-canary.19c4f29ef.0","@material/animation":"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/tab-scroller_11.0.0-canary.19c4f29ef.0_1614281031765_0.7964577003654469","host":"s3://npm-registry-packages"}},"11.0.0-canary.63df6e9bf.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.63df6e9bf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"805011ee69123b831c0077f3766fba3df32487d9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.63df6e9bf.0.tgz","fileCount":52,"integrity":"sha512-wUKmmaDeZu0sn4Y3exr04cYbH2ZCtS5WIc4hBbverlHteFK6PVAq1T8wj4NLGD/SdnKwzoyLRBv77vIxtNuUrg==","signatures":[{"sig":"MEUCIGHjW/S+SHeghshcXWHL0EIm9stmj82EbBQ4yY/21zKTAiEAvEKDJEixJXcAxw5bUzJzDgdtQd9YSIdfh6syI6ZfpkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgN/yuCRA9TVsSAnZWagAA7XcP/iUWcaG2njpXoL20+BXB\nRI0/0QQ5v+ozY+HHBwPsoFzvE0Tg4MiyPm6ZpjnSE3qI+rFlZm9ReW+7Ljbq\nNu4SRZj2f6B76U/nfImQJHqirl/VFRUVOXvF8+zZR/NK8l53Jo5Iei2ODiIH\n1jSC2fohJ9YS8xeFhM1mutkdTqUCSCZFTOHueT3r+RXvO+WLgh0tL47iDtXZ\nHJHF0fMl5WNQ/ii2miJCI4TShc2q7HT1S52qkcPAJi+UoD7jHoU6JMCxS6+g\n7GLbIg3yoKIOvu726VWA4fO62wWbk/AAXySbNqRsAZEfayBxrjeoyV9bAp0y\n1c77mObEg8syP+C847yDqUTpTGfoihFPsdDTp56b7PDR3MkjVqCdSWC+1pXJ\niwBxPJ+QyA9IC/zqtowJkNzhmgNH+VLS7BeMTAucLqgfiejfCOLpNURxrVCD\nY5mxurqhWZLb07BYefRJgE1If+2MFUIfeBfKaF8vUtuCoOFcK//hcghmQMEE\nfEgyxVwse92zOxMbHig+cwoyommAM/v7+ybjwYTGuylesQlyGV3f92i1BcU4\nquh51C7r5Pd0sr+vU1Iptr0JxJd3xo7AxPoNbjI2roUyl6mOPGVdVSzNT8Rc\nR+rDV6Ubz+95p/sVuIwwIWZB7A+JyPuc+CgEmRQSVvcRG6czeSaDAsnEs1+e\n7yr1\r\n=UhE/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.63df6e9bf.0","@material/tab":"11.0.0-canary.63df6e9bf.0","@material/base":"11.0.0-canary.63df6e9bf.0","@material/animation":"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/tab-scroller_11.0.0-canary.63df6e9bf.0_1614281901923_0.16642517282085922","host":"s3://npm-registry-packages"}},"11.0.0-canary.981ad970a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.981ad970a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f896bfd18173bcebb6412cf54eb9792740e0fc39","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.981ad970a.0.tgz","fileCount":52,"integrity":"sha512-Cac7vmj26FNNEVimlHOGIioPK82+E5vFGtXCR/Io6d/bAgzbI7coCAo69GY6x9SDwpdWUQeAJg+fExL8P9z48g==","signatures":[{"sig":"MEYCIQD1kpUpBYw4aWVeTTTbO6ePBjzf71EDrmawL9ip58EfzAIhANbBMw+7uwD5GhTVoYNo0vBQqrwg6EIF8Q/8g4ht1XeM","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgODwzCRA9TVsSAnZWagAAhNwQAI/H//sF9TFho2lK4I59\nB5ivg3hRuStBEzCAuD8UMbsapXaKK2LFSEFF5+aTLKIcyXxQ+zmuqFE1PIKy\nyV+De9p6+6kboOnsiBdEGw7d2c9XeMOJ7dBI7rFv2CHyHu0Lme6uv8vA1NoV\ncOxmTKI/cdZyY7nuIrEDASADkaWVSrdDemlwbiEsCUoVqFWOnx1YtvJK50b4\nZQLPAaCDTjgWwRqdzJ6ZXekjoscAkct4BQEdxXI7DBMnB6yGSZExmRVbFDsF\nu/zeeiwD4JkWA6tfWasE0EvQ3vSI/Ud5QpK2an12y2MKLU8CWEw5IBECKieA\nNkcDMTWnfBTYuOc4Gs2Fx4lkt/k6xqxeHqe4oiJhUvVtaKgqCdYfdUUSOwCY\n55YpqzCUbHE0WGa+Y6XWR5Xi6eGytPASomFHWVHXqlpiSqiBCrZL9is+SykT\nr6FGQn+mAKLSkK7SzCIgDbA3trxObqAsnARKzhvezhxH9OpJtKFKthzkaH6F\nTMDCjiBzpFA7TOOCU3qW4x4phqYtaqWFsZx90bIUq5FlOvD6Dvra6eHJJ9DS\nxFJS7nEnvkcvG7newzgmX2RpaXy2l5puz5+Idi+OtGqTBHNqSPSzqlD0AGLM\n1HwE5v0bJn0asXUxz1UCrPUuR6f9xZcR1+82jmK6x7BhKTVYKvGxTVsQlVWe\nzSXP\r\n=mjEe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.981ad970a.0","@material/tab":"11.0.0-canary.981ad970a.0","@material/base":"11.0.0-canary.981ad970a.0","@material/animation":"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/tab-scroller_11.0.0-canary.981ad970a.0_1614298162703_0.8933767117814513","host":"s3://npm-registry-packages"}},"11.0.0-canary.f9c9e39d6.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f9c9e39d6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e003cb24f7525d73e8b894d8a163fb721fc99611","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f9c9e39d6.0.tgz","fileCount":52,"integrity":"sha512-SZGLPK8gsZFkfKMzzrlxiGUDlgOnjePQqrDUADyCsnsrmuBAuvt35YItW2dPJ6NbRkLyXeCTzneloc4PZS7yzA==","signatures":[{"sig":"MEYCIQDdbQZuJZOnkIHfbBTb0n5W7GN53gyf/BwU9QL4rvEzAQIhAOlZg7hSN1giRIXUaVThhn1+znDEQUJbrhe1JPAaOB2l","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgOUCRCRA9TVsSAnZWagAAX7EQAIQmdwt6NSd9pOzMKn0T\n5kuATlh1RjSgfxZTnHHaqqXQXTjU7ahqt5XAETxrDy7mi7mduy6BI6tfqXHT\n8BOGhcI+paeupeHxgEezqDZvTfLT7miC9j3Ul344lidQooe0LwbEfZRR60K+\nb2eiofZg4Rc8IysGF4MWQhYBGtKznWrJQSM9WRfxfWrQykfPQAj+EC8+Lflt\nNAdnE5JXeJsN7CucRWwE30sLr443bXGSdyHNIgAsDMmeXiVdImpGam9BRiw4\nkrsul7RrHiwX215aExQEf7c2kvfKcNL8AwRI3fVFD+9C2TZuYEAaxDxg6cDG\nn1SqHD+MBEh5GdomDFwpG/lKR4EWApPRyRm4XLullNH4EMJX8+Pz1j8edAny\nEP+/bTBaLX6rRwYSc9Im464d0jRQUQJZjqqx7YBjM07zMlcoJQQYrAlBqCYh\nkUyqR2cVWi0xIHJ2aEmr4+CKeo9RS+oSA0kf8x5TVoVKRyPUgKsVb4RQ0EB3\nw8IuITX92FzlAF4ZFSR9cnX8/Z7IkdM+psUYJWzrFSTdwcaF1c87IFo6tmao\n9Ca8isdvJWafg6mT65RpykCFRsMnKzkaP746ePCrtdBOxi2GJScbJNFPquO4\ndrEI8s1Co2C1MhnDUvVyEFEEGtPBly3efcoJp628950zymMTB5IZJbSx7J37\nWNkL\r\n=1K80\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.f9c9e39d6.0","@material/tab":"11.0.0-canary.f9c9e39d6.0","@material/base":"11.0.0-canary.f9c9e39d6.0","@material/animation":"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/tab-scroller_11.0.0-canary.f9c9e39d6.0_1614364816840_0.08155254737018747","host":"s3://npm-registry-packages"}},"11.0.0-canary.c97d7d881.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.c97d7d881.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7ae18aeac875215a57358a05cc8cc3963e279627","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.c97d7d881.0.tgz","fileCount":52,"integrity":"sha512-TpBE3cqLB9cwalGpa28kKay3lPKiMKH0+BbUpkZlQ+CfVxvpq8qv95XK0T+XLhaNkqeFIg+d0lJM71+Bb+TGPQ==","signatures":[{"sig":"MEUCIQCjjUFnFH26v3BiokznWb/8Xaxf3VVGjsjvg/m/0d7bkwIgXuyWU0tNoBL7zB8hGvfH628na4v8mGM2cv3evHLL4ko=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPVSDCRA9TVsSAnZWagAA6hAQAI0eeQvBENci664cyDMP\nOS68UJmrs+uknfUGwaFtKk+ZJYM5bUO4rdEPfbVp6lxPdqEoJCUkO5BWnDSy\nn3X9dyhaqfBG2TBtseY4MZyjB7OE6FreUOzisr/J8MDAQWRcMPljFO1OtmTv\nfGf4Bcu+uPn4ddEXGpfODr/oggvRxSgvpFmkN0daCCs1lHK9H0rtb83cWYP/\nRlJwfcEYQzU5CeJNddBrp/dCq1VJvqiaf698n/JZrHrAAtNLlRoTS5UQEVYU\n+/TYRFHgoMXiHfdouFjmEjVTuaoul2y8rY6cvNRSZozrjNbzaMu0UchXqcYM\nQADsXPf4eVJLZPZHixzkh3euY+8TWhZStqBcK4zmC5t8qm+tz2GQ5ryyUba+\nB4iBFi1BtF8qaOo6tJaqYrNw1FL/EEO1FbI6DxUL1QCmLIyOO491GDA71/GN\nA3BdOT5jsEdFXWllKYhWdgVMt9cR7+Yvb8gXU/8pIUY5DcdscaOuJvnOpOR7\nuIWalzGDeHEDVrKNsxO5BZbYxyjBmxXdPdB6qz5PHctTKPAlu4+o49joNvI0\n1bejDzBYdbFMGkYa4neW1gHSV+njQpbl8XWvM1LIuMY5w+zS0nPVlvIrfQig\nrXSts7CJ7BYzRfv9tEGOURV0lrvBscaBtMdT8MoGM41MxkOR4cqjoQx6omZ1\ncVoh\r\n=FxxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c97d7d881.0","@material/tab":"11.0.0-canary.c97d7d881.0","@material/base":"11.0.0-canary.c97d7d881.0","@material/animation":"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/tab-scroller_11.0.0-canary.c97d7d881.0_1614632066686_0.10918235361215567","host":"s3://npm-registry-packages"}},"11.0.0-canary.bf670dad7.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.bf670dad7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c4d31fecf458666fc2ceda6d2d94cd8b642fb6a6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.bf670dad7.0.tgz","fileCount":52,"integrity":"sha512-eac1af1vK8aj5wfbw91qDkuN4UslLA9QGwNFlW7J2/9HQX0mWxxteKZFGQD32nE62k/qXrTvqIzdG3fneEa6rQ==","signatures":[{"sig":"MEUCIQD+gP0+FoZ8FSsuHffuevcXefAEgkBjAceKC1YG+dDO7QIgUT6k1cfKSTUZimFHJANd7Q5u6N+BGwA40KyRImq4kyk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgPta+CRA9TVsSAnZWagAAA14P/iLL6zkcq7JtnsEcERPT\nfzT2nBuCvX3F9KE2PjywkoUvk+RIePmNUBgyeU4/+7PjvVFNOZCdv6chQBrY\nsJ/QeXQoYazz0rgJnR5N0tA8XEcNflQzVDHgn6x0fuCWLnG/bmHeQ+VURTjf\niUIXUvQWUwNcJy+rQ5RedczckxfEKXSImDBwdpGlsB22AAEotwXwPIbFsIAx\n4Dddo2KyOsul+jGQVVEPE9TN3rZNvhktGE3TwRUqQuTF73zCC9vvIkJG5YvQ\nS5cF6XqBKUpw3njC1BsmYgcCRN01cIxSvoA6U1XedBffgD/nF1In8kAnMo7A\nEyy/PWT0Xl5uRT+pqHaq83vIyeGVZZFM4ybZ4WcHJcdO/bR4uJApwMlDPkoW\n49qO/nKUn4ZkPSFFT81wUrjEIKhUEBSXrfNsgqbnk80CjLEq89SX6l2JjdIq\npRp5kxIPEBLOAbyl+0QXNaNvriskn2+FlWqxYNv/cKr5PJEwGajhRkyH7XjU\nwT7naMYkE8c6vG5qZhTBKdoDHxCw9z9aJsG92SgahLt4cTZVdJij53t8PAcT\nEmX8Tb/oBppiIBfZbd0u1NeFvYF0RC5zrZ7dbg9ggb0Xrn5MQibob/9feyqe\nxw/DbPTp7YThN8qoTyskn8aHliwlUTpRLL+kxU1fhAHdsJMCyYXm3d3tIPCX\n6mBC\r\n=98kV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.bf670dad7.0","@material/tab":"11.0.0-canary.bf670dad7.0","@material/base":"11.0.0-canary.bf670dad7.0","@material/animation":"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/tab-scroller_11.0.0-canary.bf670dad7.0_1614730942160_0.4310894789333708","host":"s3://npm-registry-packages"}},"11.0.0-canary.c7d98fcde.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.c7d98fcde.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2a5cdf56df8c64d0863d4577cd37c4b79cb6aed9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.c7d98fcde.0.tgz","fileCount":52,"integrity":"sha512-RkGpBVphsCOyv5Ftyy89U5J35DJMuT2Fc/Z2jGCaKrjIT0Oqds8Trxq2Ga2G5LGxN7V/2V9bN/RapShykUqU9Q==","signatures":[{"sig":"MEYCIQC0NDOHwGmiLj4ttC41QTox+XUC9hW05F8KPOnjfGAqlgIhAND+xfcJdcUf9DWUeA+T7c4VGPfD008stzD31VYnVQ5g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgP/KVCRA9TVsSAnZWagAAdE4P/0IKlKP0gsmMzE/26FLV\ng9QFRlA7mVwmwDKfHEXojKDumP0Kks33+UUem8uE/g+mkWvmXgeXh4jHXCr3\nE0WnFMIx8xfNblzJ+VOqCkwyvLG0FVT90Vu8LcFZ0e9kWlcCH9MGWG9xySJZ\nOn2IAOqlfQsxCsD/HvW33nsM4zkiflT0CF5U/agpVBRc1omMMvqWuCFEPHW3\nBZSr0oyABo+jY8hP99I+Qz9BY7vJldRtPi6ld1OBQlNw2HmkqudmPFvaMIcu\nFmE8/ULfZZ9/iiwZvWmKWvKaDDw7rv+WVULMeDxeaU0ZS5iTI36J2emCrQnh\njs1bb/uf5VBzAYr35f1uNGRnXMBIhCHk/0XfrehunJfdp7pTV26erbgpXfU7\neAyQmZR+162QBzbaF/mcKYf0JiAvNPfkVDSeNkLZIICC/LKI8S2kk+XIc5Us\nYl+oCTLeYEeHGDJRUxlzN1yvJhoU4h9+JEgjYyqZf0CKZrt71i/CpAEjCble\n1CNDVTmq6KSgsMwIypp6BLlRHGsMqcRmnH1pPL34YTL/pRDB/VduhTi1nwNi\nNU511hxg1w5gUB0rI7tWtgFdoeBUQhcHwas8Xf32ZjdxlNFb4w+mehaBMvNj\nHy6/DyghwAhQK2aKujPIPDrmTlJ4V04QxWstdvokB89+Ga89ZVGogWYEcWA4\nJ8dS\r\n=HBdC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^1.9.3","@material/dom":"11.0.0-canary.c7d98fcde.0","@material/tab":"11.0.0-canary.c7d98fcde.0","@material/base":"11.0.0-canary.c7d98fcde.0","@material/animation":"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/tab-scroller_11.0.0-canary.c7d98fcde.0_1614803604847_0.5375196040335912","host":"s3://npm-registry-packages"}},"11.0.0-canary.4fef8bc1e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.4fef8bc1e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fcda91bf1b5858476215fb7acea1fbc8fc098497","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.4fef8bc1e.0.tgz","fileCount":52,"integrity":"sha512-1d6ndix+o4fbrNRIToZbJR69axi5PdFXWcbVUH/u65shGCwN8gdz59ogtYIoW9bMS2syU9OEJ4NLOvR0bKRy7A==","signatures":[{"sig":"MEUCIEo1pAoI2qLDax88V/XyQdGZIKDDEMR23Dkdv0Gpub9VAiEAsnwvVdql8Df6t0E/69yw9EuoI2Eu8uG23U/wzhjOyiM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":323272,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQBrjCRA9TVsSAnZWagAAJqUQAI06sX30yERwUQItfvC7\nqCKwplZn8CHaSdJ4Crr4k6QRX43XMs9frhip5y2N5i9nIx/URN2vvOFl4DqK\n4a6P7KGeCfDlJT8zPMr3e62W5mYs53BjHeGtDTpDicbAaINCi5jOOIA+OALO\nVC3U41l60BO7zZtuAcyU5Pn7PGOJtUJmqe3vFAZG0V5YlF8qSHElivveFV9l\n8RYDQqldVRUYNjdh5ZXaee/gFJd6LUKs22zKZcSB4n64/vHTlVdY0XY8JM6V\nagHSeAECv3ut0ZvmdshQlaQRb0tUhajOhchiuED1OrHkdElBrHzyYyLEF6k6\nfJKhMx/zwwGPaXTe5xrEND6nxnOJvw769ZMsKn2eGYThmBR5uXLnKHp7kRUh\nCm0xD7pzNTbshJi9MbT1PDJUsAxTiWKGdvgiJ3upih4/UP3MFcgtSwDkUn/g\nXatuYz1ZrcxvDw1WuMMmrix5koLqvw9bPwvsrweNX5xVe59GTTBEC1AxPhRb\n+o3e3nWMyJhj+lZeXy1tLqLNsLLKQnVxHWRygEtnUjACyye5XFoF5jy8yRXw\ncFOibhOekwlMM0O4u3VlOUpoa8I80WAbSp1uGYm4g+zydS8vxMeC5wa2n4VF\nGaPs/aNv2HvoRKUAensoebpn+dP+sPcvttR/tKoZ2z/IpY03lCFSXzZZXq8o\nDug3\r\n=Om1k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4fef8bc1e.0","@material/tab":"11.0.0-canary.4fef8bc1e.0","@material/base":"11.0.0-canary.4fef8bc1e.0","@material/animation":"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/tab-scroller_11.0.0-canary.4fef8bc1e.0_1614813923073_0.1600720830819884","host":"s3://npm-registry-packages"}},"11.0.0-canary.afae3a3ec.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.afae3a3ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b59a3ff02a2f8449afdaad2104df82a1dba8a3a0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.afae3a3ec.0.tgz","fileCount":52,"integrity":"sha512-6LnGwREAf+XkOita9wQ7cOkzHiJKMoWOisBrPiNGyd5LfburuPaYFj6tXAE1AEYi27/8Rn//EIfN8b6X7aKeUA==","signatures":[{"sig":"MEYCIQC4KM2JGap4FI5n/b4np3HoaknhzlcjsXkSR+/QVxyMTgIhAKbvZeJy/fksi5hudcAMzwUmAHaxv3+luYmZ1pz7V8PR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQB8YCRA9TVsSAnZWagAAEOEQAJ6BPU2TfRrI79lqNYu5\nYEaUy+flOHjDgt3WXxwwyiBhtcUAH4ww5KJiyRTVrWqQyNuWB0Nq6qhpXsc7\nIk2/mymFOHX/wpi4P4CzXuGBCwSRmSlKgjN/gZ+3ieiE0mdxLjDnPVBJAEbn\nhJvhdr08qsK7eJK84JA3ur/OaUpCEuuIxaNpuAfrjGHXr2lxfdB5NgJvm69J\nYGhbhAkWYxzIQfI07plA2RZYCeX0hT6q9kUWd0/HpPP2M2lcMcnrJzoL9PDw\nFHuZzhFjUK1ynBeEGWgMFFhKD4w2JOVXSsvpLRxW4sQt8qgMWSohK4CsW3Bn\nMZ5RdPPsN5c/3TCT5A/4SvTaLzA/LKlHkaotEA/kDsRjCACj0uEru2Km4B6T\nLaSfWywaNPzTb4Oo18h3WnPnMyZJQr9YgBFV0COVB0nQr0KO8PFh5TxMfVYS\nZhOfNcTZNETGOSl2ehLLpQ202pAXZ9cpx18fivVg86QhGPNRCMHhaktFNpnd\npUG7yfwI426zbrX/bCgmn3g2XSXD/Ll5bbivh84w0LwvmFe5ZF0BOyNnttef\nH2I75O5eLvrpP+TfsBRWLwg6C48SF9+PjD/VPY1EjQ1aS5Utn0Es+q5av5Ml\noI5LWzLndlV2g21UbPocQBTj92+HJQ0F/2QrtddawNAdK7SkhFWHyJBvZMH9\nTPsN\r\n=dVDF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.afae3a3ec.0","@material/tab":"11.0.0-canary.afae3a3ec.0","@material/base":"11.0.0-canary.afae3a3ec.0","@material/animation":"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/tab-scroller_11.0.0-canary.afae3a3ec.0_1614815000352_0.5065608481966037","host":"s3://npm-registry-packages"}},"11.0.0-canary.0a0b10f22.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0a0b10f22.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"30b548f335919284106df2f6feabeb64c8af5c3c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0a0b10f22.0.tgz","fileCount":52,"integrity":"sha512-Ms6lwR1I7Um1XTGjaZbnAsJzl/RyXZ/y0BbI8LkAYsZOUBmb5nsztsi3OAHBO8NS7hyCpLNcfAFoHrCJp82iNg==","signatures":[{"sig":"MEQCIBoTAjQykj+8UEuPT7I200pfOnnxwrwGJyA1MKMMhXhnAiB3AdWqCcMSxgKAGf4R3xvHDEc3F6WxwWGeMstfaUz9wg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQCOMCRA9TVsSAnZWagAAoJUP/R/DioG3faMYYf3NMQrO\ndP4i1pXW9EPG6RKTlf2HmPRM4bKKC3QouWn+7rYx8qbzRL/3wTe0vqKgWCSF\ndJ8rONJljqkZ0iG1h63ZbdPc2q5o6xzkNiCZEIQGv9X3mmh+sZs0wEZOz1eP\nRom1li5F7DO45b27dE4TOCWDSkCg2I9qF89HueUXRE4R6bBi0mx0xRo6z9mg\ntPsYFwDSHTzP7+lZOk1tFIrFUEWrfn0aetdtM1PlUmYscRPZZvxoEdMDhdIO\nDygrBlSVQT7ko0rNOXhEBWXzGvbw0+zZanE9kkjHV6uL2+Vy1+70R2+ktHjD\nG+6qG8Cl5dvCKFsJcdjDl4WYUEhya7mBVsDlemAB72wfkjeJC1/OeSBxCduT\nXnH2gVhl1PT+GTq/8KMGlm/tUT++6klRXdkNGWkrPuaWzyA2ZKhQ0uYiQXWg\n5cvwtujT6DaizTWXbxBE1BMPAmfuZDRP9v8/NABhpVlX2CPQz20VpitgBmw7\nEF/FpQz24utQOySLAoo44bIP9SIOHQbKWAE9ZtE9Ekar9kOLj3HmaZb060Pv\nCcRXkuxlZtjPWE8s4WJs8OcaMddZE5nbzVWiNNFia2mKyI6YuGoFrdNZCQ6N\nw+mZ9y9NJoqigkzMkqjuJsPOXFuRQmd2nHUMP315m2eakwMjmAKgw9Trdo1x\n/Nuq\r\n=wwQZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.23.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.23.3","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0a0b10f22.0","@material/tab":"11.0.0-canary.0a0b10f22.0","@material/base":"11.0.0-canary.0a0b10f22.0","@material/animation":"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/tab-scroller_11.0.0-canary.0a0b10f22.0_1614816140356_0.14070596249110445","host":"s3://npm-registry-packages"}},"11.0.0-canary.6f678a91a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.6f678a91a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"15158a9cf562ba66ad7d7f94c87919524f5fe9ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.6f678a91a.0.tgz","fileCount":52,"integrity":"sha512-lp90aVcr+zrYRnTaI3W21TT5tMMFrZlhpqjxBGYUZSNbfnWmocTGt7TF1X7AlvpQemeqMVpEKlK9vSsfPY36ow==","signatures":[{"sig":"MEUCICQmDWKrs77XgM/8mVLoz2kvJuVktWiJEH1k/8hE1exdAiEAwzpuMx69elYAvd9wrg3sB0ZzapqFwuhP12G6M/IQELM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQSnOCRA9TVsSAnZWagAAE2gP/09rbMrrorzqsYM1btAk\n+P4lnGwQcMlihDBndsRCgCCYGq+T7psnv7SMO08RYTOLRW2bp8PddZyfPZAD\ni+/T8gcJDU8UdHwd2VZ7dgkeDjrmJPclndJDLXEe6iyb2npm+BiciU3m8Ot/\nxCm9iMOZlz7I3/vGnqv74ba5+xj9Ak9wO5/zclcAln4vWNmhEOX18P9GsIgo\n9ZrWdHXeg7Nw9jVl17qpbUQOZIHOI7oLVukV3tmxAGlVUXjyi8gONqEJmE1S\nGWwq2i4pQrO/1PG8AtmBJIM13584E5XExyabn3fJRkiQCxira8PVAOy+dnEs\ndCqZhOLqHJxB23zgLUU6QMaqufwGOR0IC7y5Fw7F3c9VueRBBZ+Eikl2VPlY\nWEmwVSK9P8pIVYJ0BY/zni1kn0MNQ95Ag5Bdbj11vAFcbCtetouIMcXMVCfT\n1pR5j6DOF/I7L/G4rhQ6OtEat0uRTdm669yjYCYS1dW6XIR/y3+EfVJD3qrR\npDQ+uAVL/0QARQDk2VGPhYBlT9UnGJaXew7QUT9Ybxwz7Y3M8Cu/O+pMcrcg\nMcYpvXi9Cofg5j5ege58G/sI8hqNQ0N8kNDPTW1KMIPYTG+imLuIMw1HSdF/\n6a6IO7sSFCsmS2x/LC9dm888kwvXSTF3Bn9yrzNN4p9JuviuYhGzYsTM2Apy\ndJEp\r\n=sZAk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6f678a91a.0","@material/tab":"11.0.0-canary.6f678a91a.0","@material/base":"11.0.0-canary.6f678a91a.0","@material/animation":"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/tab-scroller_11.0.0-canary.6f678a91a.0_1614883277595_0.6194153489315586","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5f1b613c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f5f1b613c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"27b9d2791110e972eeeaa4ec7c96216fa07c3e02","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f5f1b613c.0.tgz","fileCount":52,"integrity":"sha512-HrVw3y28gYfvEGscg30zI30TCOX2LRJu06fdkDpvLARHyAhDe2C6WQK2hDBzcKjqYaDQE9Dij59T2Ics8IRc/w==","signatures":[{"sig":"MEYCIQCIcgOyiuuAxe00YH2P3a/YCvsKvnbqJ0Wcmeh34C1GbAIhALxQXaXKUtl12LY4aBDvUk9NFrpSqxE0+cD06aqB6dAw","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQUgoCRA9TVsSAnZWagAA5a4P/3muD2DOyNZUr+GGFSIb\nGVbEr1w90f6/CYbs31u4wGGHlr/jfb5Ot/YJxJsI15Q3INU0zhzywg4jlDxF\na5Sd9V7KfhSMU+6x0i08OozFplHHVWpHCPZ7ASaqRaRp/KYEH+xV2F+WOJJR\nnoJOAsyze+l+ePPPqqAFnYv8o8KM/DABSgF0B3VAja4HA+G9vsus3WZsurNn\nplAEtuDktWM4rPs/xd6wP4/NdAR2kavjLexfG6HQz6G2SsZ1uZYxZe6AMVLc\nHoZFchyMdTB0menJRWwTIPi4tM3qmasZWYpQcQKPsylQyiyEx8sdabcHQ5Ai\nvCVJeilWX0jP0Py82f6uUzw4queo0fSwx1Uo2+hTP97otXXBfI4lkj50I3Ri\nFOb2PRaqORZG4dskPhVGRrceKmQxHNjKn0pe/eD5pPBDXrAMFGAK7K1CXQ5u\niNhx7ybA3QCiPooVC4CoAhzoHSBYpQHTVtMkR1pWSe8bzGM5x3MFbvd4nUn0\nQHQIgxFIQxS3UlLYbH82FqN4rTTOT+sbqg60j3AComqrfdxKvhJOw9CNWbFv\nM4MO+BtfbE/9PWT8Yn91NmYzF7aF43neG851RYtDkaXEKSeXSjq2quOCL0C4\nGETEFN3I6Rf54ytYL3i/OgxmiToN2W7KKqLSz9TWXZJh+BtosDQ3hOW90m1Y\n2u+E\r\n=Wh0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5f1b613c.0","@material/tab":"11.0.0-canary.f5f1b613c.0","@material/base":"11.0.0-canary.f5f1b613c.0","@material/animation":"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/tab-scroller_11.0.0-canary.f5f1b613c.0_1614891047478_0.3014310099954618","host":"s3://npm-registry-packages"}},"11.0.0-canary.606e767ef.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.606e767ef.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bed6d548abe58fcd39d03fb31453f1d899bd4508","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.606e767ef.0.tgz","fileCount":52,"integrity":"sha512-gEmMUKYGIbCAPLlaMMUcipb4Q4akWMXRFXwfx08IzsuzSrQSh2RxWmUB5dFYkuhRbzmUeRmfGjm6RKc1PBMutw==","signatures":[{"sig":"MEQCIBJc1Yhkhx8ScL1LIPQLdsgDkRsmpWSB3yzLbJMPd9GnAiBfhWAsyhWb0w51p6tMmSgJIflJsWzyAEq+/qfR2RF2Tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQVVPCRA9TVsSAnZWagAA4bEP/2SLlkxDVfuqHW2WdneY\nshyXjn3PapcnTxdv/8wsLFbpNttl8YVxSy2tDP2xwtjq/fEOvA8/b1+dRD9Y\nNa4qqSnbNro2XJlNowQS88hULuu8QxX13fyxlYucGywoagebWU/Mp/9HgDPt\nJ0s3k/6vpX9BkF+0c+7Sdp0i8k1/zbU4HzBpGfjrqG33wUGGgnHdCj3inFOQ\nzxwEozBiZ30YQnpD/YOw3BswztaSj7A3iSecOSYG2ZP7mSXG80BbmI0td8M5\npWtEF9uiqqXG3whQwjUlc5WDJipkxb23ePptvhx/aIoHjp/9bVTo1Nm4nAf/\nevG1NtgrNht6FArKqxkYkZHM7LnOkevdbqmbjHrwwwJOG4hLj6B9TfRd8Du0\nqL2I36129cAJ4sZB93joV1fofpN6wHLlZ0VTeYc57oOvGMWGoS7NL2iLxFv1\ncQzpWUFD21gCCGowjfHJZozvhCfby9Q9VunIhdpI0koPpMHFbw+AAEmgBq7U\n7yxbyoxH9ruCA+rmgQToqPJDrHwaBVNlnBvhRe7/N2q5jmdBWD3BdCphyiRn\n8iXDmvkMWvSSWOkaCnCPEvQWJ9J0/KOmrnQxefTqhGGrtE37qBhSPtbcKgA3\nmnG+tMGl9zfE+y94xozg14kPeuKEjiigHfSYxDrkWgODrDYgqepzhBxBYrUl\nemVz\r\n=zqWA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.606e767ef.0","@material/tab":"11.0.0-canary.606e767ef.0","@material/base":"11.0.0-canary.606e767ef.0","@material/animation":"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/tab-scroller_11.0.0-canary.606e767ef.0_1614894414725_0.27510239823997784","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77a4dd1a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f77a4dd1a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dbdc25f2ef0d763e58c1582310b191474c5e00ba","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f77a4dd1a.0.tgz","fileCount":52,"integrity":"sha512-83uNmbXnZmegFvX7pG54WEuO0+NVkXUddfB3jN/btSOP8lvcqHnc64Ze4Ysfpr4Yt7LPEocFX7e5X8ou1gvJTg==","signatures":[{"sig":"MEUCIG6jBI41fVofL/SzICIYggZxzsk5viT6cNGdc0BNOwEnAiEAsVsOUvwJZGRwa3JUPs6fE0hvCIO8PsJdboXhWhphXqc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgQwflCRA9TVsSAnZWagAAY3wQAIJXwcm4Yc2FhVNqCs0f\niBzNTr5jTXGh2jJcT8L8Hay+tXWdBfEUc94Fp+Pdo2iTwP/qT0m+NG0f0Zfm\nRbonDBFBs9OcmZVcG+hP4mrZWjV0nTxrlby8wv1DE+L69YF1B07Fr06J6cIs\na4osF9rInJvmGxVoR43qM/7PWV7KbjJeHmEotREOYOpO1LPCzO2BoDVWPmi1\nbz/hl3JkKBWo3LK+Js4Pxnx4X1ZObRkYmOlvJ3uxNjtR60C6vcxZpU/cCH3R\nkWCQuj0hl5aD0Yf1SQZVEzkNU8WqPaDf/hrBfFhg2NnsWwcNjG2U5IMahQ/S\nRQVRr1pofFv0r7JlvDrXA2Nfg3WRDo0OesunfpPIheBYgZqz8sZjzwhhUxm8\nFumZgeW4bNPcv3dN+wHZyOVcnVYRGegHeXjZySCKFb8bDo0CqHrI+71e+fFE\n6r40oF2wJYQAH+/NuMKqJvE7YNeZsvWzwHiqrp8Izra3k3Yo3b3+AuDLNIit\nj8o1ZHEKFCpWviERmewr+8kFx6blJ2QyV6HWAGAR1kKBUYyKBTGjKe/T+83C\n+JnBxw8mvpuJZINzuUUIxVaMRpm5UjP8jFZdIXKvT0wWfd3alI5obk3vGkJD\nkDw5Ge4w/jDJ66yZq0TGkJIvGE+LPFSgnUU12vhHDX0FFZ7F7bAyDvnKrY3y\nwr7p\r\n=aMq7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77a4dd1a.0","@material/tab":"11.0.0-canary.f77a4dd1a.0","@material/base":"11.0.0-canary.f77a4dd1a.0","@material/animation":"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/tab-scroller_11.0.0-canary.f77a4dd1a.0_1615005669019_0.5202245980711744","host":"s3://npm-registry-packages"}},"11.0.0-canary.2d6ba2c23.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.2d6ba2c23.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7f4ebf711a40e545ddc1bc068dc2b69c52331336","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.2d6ba2c23.0.tgz","fileCount":52,"integrity":"sha512-ReXx2PYHsFK1uccoKqli3KU/EeViGRwGPe+U3zr4TXWJsYm4QtEM0azVKJW3oSkGpqXmZkzybJn05FCfTE3LVw==","signatures":[{"sig":"MEUCIFe5RhZVIvOCTWmEE7dY6XuWyrUa+Xi975gYZJJQPOtWAiEA+w7KghNv+Sp91CUwzNHQfOVZOO3EYZxG4VEvTkLg69g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRqkCCRA9TVsSAnZWagAAtgMP/0TOsYepRB8KijRVxthO\nmV+eU3PHi2Rllxzw0/8fibXQrs0KglM2In4d1rKaltd8ZomyeIH9xezjvZmh\nHHMqj/qKJvx8yjTH8sEr+o9p8E5X3PO7ufAKncrSrQBh+V65oDtsbRybVogZ\nA9iRyXXu8WteKIQuO77XsETE6o9CMiTIX5wjs+Ok8JLswPoewnlt9YvM6R1h\nF/ol7oedks+7jmWhtT99Z3oNZhWhr+2WfRNw2/gyZIW8eTt2LOlz6/Hg/+SE\n7z00sLu8cZC4f1I52B0i8MFN0WRuFwHrCFmwiHPzc/kLplh2Q/yXwM8MYWC5\nxkfVcHr5bs89GU4P1kDB02UxeRTXXYr6KH8+CE6Cjv0aUqAgMxAmqnhHAZSc\nDAClGu7GLPWUK2/dhkecfn+FJtxz1lm7DfKmjz9/U7lf5OyCa0owaXDXN4m1\nwhhjMpBGKFRBwNPmc1gshs9wFpy77uaI0C6O6XW1IR6blWLN9MlcXb+iNWaN\nDoOZmkzj/2ZMpWrMB5uZw4793p9BiBJhWs6gm6Nljp1htK0wLXFxT4OeNpoc\nLCRZCtoxQwB0H5dS+CHPMmPExa3btzgtm0JyUF4PjQl2aCK8olt8a6UMT7EH\nnS9AjM34gk4YIFWPbhN0V5R/nVMHt3jjeuP7hpguucxcsw/RhoZ1IKEH+CpH\no+nT\r\n=I22+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.2d6ba2c23.0","@material/tab":"11.0.0-canary.2d6ba2c23.0","@material/base":"11.0.0-canary.2d6ba2c23.0","@material/animation":"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/tab-scroller_11.0.0-canary.2d6ba2c23.0_1615243522267_0.5705514896556356","host":"s3://npm-registry-packages"}},"11.0.0-canary.7522dcaca.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.7522dcaca.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f9bcf8e52b83c743f75468c1f267d463146b0a08","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.7522dcaca.0.tgz","fileCount":52,"integrity":"sha512-6L5dVgcaQrbCH3TLJolVaJyL47a+g3o0a6ft4PtEpiVoPIzCHlVjkPkBbrLXq06/m165Fw6jndL3yKETfCi/Eg==","signatures":[{"sig":"MEUCIQCxJ8TXmLBhv9KxO0OpgfOMvCFwz97gCiJMheeSf2TMnwIgIqOlF5dRD0mClnE0ESV2uU9OE9FZK29FjT1fKsG5kNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgRsE7CRA9TVsSAnZWagAALZwP/jvRyo43Br5AnzHX4bPs\nXVGZvKPFs1UJ/TJlDAENs2DYWgMWOfr4uqY9M5tHQ9TbA1b7Svp5iisvAkha\n1U/RYFuBnmEcF0GxzQGUjw5ZH7Dld6TCzp4o2P/4H/2omfeYXKQjSJarMEZx\nyEwUb1hAeh+UozsvUH30oxH82GdPiE5SRXIhifui8DBET1yqCvxBGP+j64b+\n2q+5ISGrg/c3yI3ukWntcetqDED6upfGFELgxgO/SRg0tdps6GiR09MfLKHC\nxaWeHn1405zx4j8WcDHtHt4vMVuuZ5r3+86f6Rg/pxv4odPq00q37iSFO/gv\nFbjIQqEwVIEiCx+sGLuoH6eb7GH+G6PrBNFW9nls/jccu1Oc9LG05D84Lpfc\nq0R/bD5nUl9DV/vFfAcSp9dQLmCeWDSvXdrz/jB+go/YSqqUnkkKGBFsgbAg\n95l2ql6hzFD2gcRdNaKbu0RBt+R0eV0Epb+6AisIQQiHcRJZ6P7uS0bkx0gJ\nh+yqwEOuHkeP2E8Q+CAMgWGnWP0ML1O07RcvXWKOrxvDRofBZeeh/tize9fR\naP7KDwvYK626tiVTSC49CfaL1IfvQuSo7D2/6OyTJ01fo+vWaelg7SgqmSS2\nKqhGSWG2jXqapadvfuptlPKfRzOEMI4d7yDXOZO5ChZW47FXWiXfd3S5frdW\nxBik\r\n=RyEh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7522dcaca.0","@material/tab":"11.0.0-canary.7522dcaca.0","@material/base":"11.0.0-canary.7522dcaca.0","@material/animation":"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/tab-scroller_11.0.0-canary.7522dcaca.0_1615249723041_0.8164744034422446","host":"s3://npm-registry-packages"}},"11.0.0-canary.5c0ab7401.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.5c0ab7401.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"92758cb0278e155b16da4f3a7086fb48b7f1d2c0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.5c0ab7401.0.tgz","fileCount":52,"integrity":"sha512-qwz+NieoPacKU+k7mOwVEDaZl4L3Wcd3cvWjr/oJE++uZo2EOm4RLjMOkVHGXXjk/SDUvsqfB05tdWl9TBe/AA==","signatures":[{"sig":"MEYCIQCL/RRduowsnrt1+Y65lpj4jQPlo//ZgzRhABTyWgwKMwIhAPsAf/t3IMWR26ts67pEsFcC7JLRTSdq0hJ/T2wG6gV9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgR/xyCRA9TVsSAnZWagAA320P/1T9uKlkBUpc6NHBzZW/\nCMIDOdKMnUKLUJO3rxIBo4K1pQVcV6Nuq1W75o7gLr3WFUlcaekLtJnn3FfB\nv+mHg7Lb16weA6kCZ8juntTyltE5JSch9Q4rFMpsq/lpgUniIwa40QVzlS29\nRvjTMyT1B3UexrsfwO3UgUBQqQB0Mj621H8OwL9F0CsbtZa6ulP26D0nIcfp\ntYiam0q4/3sbySKmo0gP9xvz91qqiI+EbS813bASlgqnLNtpA1bPSdfxmp78\nnJDocKTB1X3Ah4ZJkZU2wQFk0HyBzi6FeVX3+m8YssY1QTi3Ej2VDgyL/se5\n9jVtB/xo2p4hR0og9wLAlapweq50btRPiBmSwfvf2FwhEv0zGdFy+aN+RLAr\nQsIw9x3qBeqtgCnfjM/eQcfEbdI46uC5niJvF/MvCG/xIO95eTeHJjKySZLl\ndSK2MhXYpFtD9ayTzM/K31GdVa4n9cm9C9R8vwvoVv2XdvBVO8gFHNqPbCYe\nBDbf0MBsAtCoirdS+R4XqA9O8225Buh9rQqYrJcFkjA8P8EKIfMW4IALK7Ha\nvkzApqYwIWM1Ogxo9kffz4asjbLDyxOGeRwTwQLkqGXoRHJO3hDqDf3g6u0W\ntBgDI+Xpy483saJxzPGlc0JOCRxz/Z/P3CWTczNc/gAO7EEjhHjg0oUWV36G\n1f3S\r\n=zii+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5c0ab7401.0","@material/tab":"11.0.0-canary.5c0ab7401.0","@material/base":"11.0.0-canary.5c0ab7401.0","@material/animation":"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/tab-scroller_11.0.0-canary.5c0ab7401.0_1615330417580_0.9084570709688067","host":"s3://npm-registry-packages"}},"11.0.0-canary.59010b6dc.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.59010b6dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f8e250fd3331b5f4b9c1955c9836ea81183f82a0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.59010b6dc.0.tgz","fileCount":52,"integrity":"sha512-3TRLUd8NhwzIny2EpENggloM5apx9UPIORjF01aSYj1MaJjaWs4TAr1hE/lO9Uxvjg2ivxbwXE8BiJ38NpHfGA==","signatures":[{"sig":"MEUCIQD+F1nUPL6H32eBWupBmazjShJb9/jFhQqFiUcEYmRd7gIgP0KqKUi52c22HGhgarkkpwxqpVJIyuoxr03y9D7NbNc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSPrACRA9TVsSAnZWagAAmUAQAIFsjd/YJ4IDLUlsxcCp\n69XoVYKSGcMZzI79ZYeTECHekfPRQJL3G+IQ7Rxt+Dpu8umel9KYUrmD5o+R\nD80ztiklrOU/4pXhRh/eiURmjo42nQf9W96pSZ8Jpvhmlzl98P6bzw5Mial8\ntPX91LOPeC7RpZRJmFKtcYK8ijT6KevmUcXy0cWOJAub4QKBVt1343BaM0yH\n1BmjSTPAvBrE9It6VC5CfY9Cm7xrOnCOqGYheeBlBDDxI23KRduKSXVH9gvp\n05j7zgSEfb6SOzCuCjUum90mwF6uvc7w3+qVxvNydiEXDzWqFHdbVZqqvzwl\nRrJ3k6kJR/LMqV+PAVMJb/0pvkGPutEhdUyMOCE1+PEDUrP7l1dmDHZ10k5P\n1SmG5rtD/EWMicbXR7hKLTXmqnlXa5g7FyfAcPWJdMUo77zQhFlF1XlMJ6dU\n7laLtOemF96NjLmmA6p5HjjKw/bmOdgM6b4jR1xXCV+bdb0C0wH2CWwbo1L9\nrYAnDF4R2jEaHQO8/eg9xcE/BMrJ+hwx8qnHSUc8xvqAMl9iVSX+DE6AfHL0\nSSidT9qUdFCZhFPTDQMbewcuq7NNytpwzbJEupY1OcqUuCKMLPC0YZBH5Vsz\nGI5ftJRHJaeeTZEWo4wlw7oaeKzQ9GEAxnFwk7hTZaATBItgDdY/1y9tWxfI\n/ccp\r\n=xYle\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.59010b6dc.0","@material/tab":"11.0.0-canary.59010b6dc.0","@material/base":"11.0.0-canary.59010b6dc.0","@material/animation":"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/tab-scroller_11.0.0-canary.59010b6dc.0_1615395519246_0.9315832789697085","host":"s3://npm-registry-packages"}},"11.0.0-canary.9e52f5544.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.9e52f5544.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63ba99c319bb4c11734f4b1fafc8cb8440aee5d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.9e52f5544.0.tgz","fileCount":52,"integrity":"sha512-Q+ohxwiI6l+oCDTugycnMtTR8fn0J81V1walRhxcMrJFrpeDsbt0FtWDaiAAL6x+EWxCKTKl2BkTiAjyh8MUCA==","signatures":[{"sig":"MEUCIQClQQXn3up02oGoQAoZT4P7mXh0pqantgiiERuNteRubgIgALZA1mVI/qjZiSKX5gfA3lSsDBhcDAXGQEs7XAbwkk0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSVWaCRA9TVsSAnZWagAA0BsP/jrRp1Ph2xpHY8OCGm5y\nUWacPesnyjA3TQWsrECnfpX4f5vsQBpJUCqFCIvjrSMpQd0ntd25awidbG1E\nVg9jDk8a6X6f8WdQLMFeO7IMaqiyPHmppT8nFgRE4SPRXGgI5Djz0aM8krMM\n7cK91XW0KO8Ug/IK7Di0stXFFOabfWLJmaoBkWKvU8oe8dgWHHDaCdxjOy5w\nG7Tamg99Ol0BcOWP1SJHia9Econ113/9FhAz3i6GVG+fYr6W3x0TpXwRKBAS\nsBfidAGjw0j4pSmUQo5MwU+ZeuxN11EC1Ro8fLWNGldWp1OOe800xCERIsWa\n7XrurA5EZJ2R0lBlgFeH0iHFBHP/4/j7x4tJYFvc72JwY8klZT7c3d8HS/LI\nGuNqEXPaxKGFxSa5QiNQpHfD+V+Pb2MObkZF1mLlHsO+/8GfnBv2x5c6HUVJ\nSbqcLIwBRZPqezlyqvPW1fN1LVZ7G+bzMloe1zGTZ8IfWFrvwIHkoE7qtrNZ\ngtfU2hFyhMMnS5TJBTFywFKMowgOagYFD9X4eKcVdYfYq00leZTsGZMTuk3y\nrO1q4aFeTanlKUDyNJm51zh9jFOGL8OHJENvUh9H0JbHz8MhisYV7P8hkSEp\njL8c5VUG7y1WjmPUhx10lcpPIyvXzmhiarvizXpCAryyr0qcJvcU1FHLp/d1\nvIw5\r\n=Tvga\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9e52f5544.0","@material/tab":"11.0.0-canary.9e52f5544.0","@material/base":"11.0.0-canary.9e52f5544.0","@material/animation":"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/tab-scroller_11.0.0-canary.9e52f5544.0_1615418778203_0.7443416518022343","host":"s3://npm-registry-packages"}},"11.0.0-canary.a678806f5.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.a678806f5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"73b08a447b7b390b2e2bb62ea1e109baa1c90ba5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.a678806f5.0.tgz","fileCount":52,"integrity":"sha512-/sbTQZCKor64hr+SAFJpkYwPO9wLmKI7hxwt6AENwiMp6Ubkx48wNR/r7T2HyMwoIoKFzYE3z/hJQ+uWdFpA5w==","signatures":[{"sig":"MEUCIAxwOYAT/fTAV0Mpe+3mblGILA/Vh2knADPk8CmP3NdtAiEAoqsU7vaSlbm3LvlLqaG2HDbFx15n3krTPdwDh/8PVjA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSXeJCRA9TVsSAnZWagAADOkP/RZaIm2LC17Epx+gt59U\n4Gn4mpN8IMVkPIvgtN4V2z1uqHU7J7AwwaWEhfo43cL2S05B5fIm1CZhZpB0\nQ7/WoDSbjFhLD2eUziiCYOlUYHjTiFv/XksSKc/wSeUSaFOr2kEeQKvB/fWi\nbadtYOTNlQ9TVy07r83LrIHiSPvdR4oqPn8OTQuTgZJ4S7FhjNpKQ+GXvdY9\n9ZWV0bJ69u3sicv/+GvSaJLGBswSWsQ3hjI9dIYpmVxJGAXiabE/qb1XzcWq\nvvRKGkHmjylP36yDq+IQNEyK1TtBuiEo+9dAiaNpItp2NL1eZX1HwpjWLsTh\nuNShynWVKq6zdDwCtpNWh1g2p/jeFq4kMIGRaqCtEc8/6iSmT3FrIlNVk7Pj\nvZa5qrbbpX/4RVl37ezuYU3lgwGJID2mB3wOhDn0Ni+/ODNu3zk6jvxHCv3R\nfphplDkQdkn3jQ4mWFV7euHMdxWhkG5DmoIOFuxCxDxSNKkdMPhsLPgMN20D\nwO39r1VfOTxpW8Vq9+U9E3YlDr4QCWLP61q1twmK2N/2k+mv3DSzb1J3LarA\nxs1YoUvIxVwIXyBbVvavszv2hmyeOeaI+kx1XdrCtcS5pnLx6IC5T3YzvO00\nwRkxgR1px9diuoIC3MNxAV+L99c0BbuZqaGDzvC2pQz1Cvui7qy7J54UPrrK\npuEZ\r\n=QqpJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a678806f5.0","@material/tab":"11.0.0-canary.a678806f5.0","@material/base":"11.0.0-canary.a678806f5.0","@material/animation":"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/tab-scroller_11.0.0-canary.a678806f5.0_1615427465351_0.6360436812388657","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2d22df5b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.b2d22df5b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"daf63cb688a82fafa380732cefde0a9b68fd89d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.b2d22df5b.0.tgz","fileCount":52,"integrity":"sha512-6hTc1RfawTfylJE1gFz0EfWauBKFzmGqvrKT5oIvsdzl9kPH/MffnDUZ+R6o2jqbdE2XievwtvpWfObiT0GNfQ==","signatures":[{"sig":"MEUCICBhx2OXWlAfl1pr1XUjjSE4/H7DhIOoYNjd0ZNrFqT3AiEAtsu3/F1epOKA8jCGkdj1P9K1qJRVke8eUPBWhpmAuUA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSk2PCRA9TVsSAnZWagAAv48QAJEaG1x8eptAQSNfRs0v\nIssEwDG9e/YlAweWcuKedU2GzcP0tzPaH0aUAQTjLCnjQTxFmjHpN1jcteoF\nWwFhEGbcMTStUlSkc3aU6gYPZ2DwRQ4OwRIiw5FPN86Hwhdt/Vhis7utatrA\nt2K7BB8ML0yd4PBkWZQla6j8GvDgArVW4DGwa352hkU9+ORWBSD5yFn5iDVq\nQ8SerLnsl6xGFlL5QTaQTqpJFL4U6CsiWUjR02lcdDMYoi7kMZGa+YQwr2BU\nq8SMFQjtU0xRbyRS0DN7EnZ6irP5uyML9QpYa1yd9O+i64usxIXvaQ7wDElK\nNyjrWsVdZLXhazwkoy9I+UqGIZXVPhFeZo2000TDY7hWdVDC4X++9nYirWN4\nsqA6aBXGRFhNkdUCvVlFF/QrT7d0pd9fuaDoq+c94nBfzQj4crb2bZUeeStV\nFrZ8kQzA4W7HUurRrcsLndwVluY6bV/hdKyjIOogL1Q1EscrLZhY/udmre2E\nnw/u6iFjlRtWWQw0TyUnXa0H0VuXam83mBW0ZqtjYsmufTSROGv7vQt1n3H3\nOoGKpLk7ihYeqUgn41OUPJJqrHrD5cPlvaNKRKTchL2Kq2o2wal1SdpbXyln\nL/hJ230QjujVidDGLmVZ4TNLXCbKC9D9pDAQCFmC9Qveb953PSjEbao3MejH\nnDbV\r\n=OaDg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2d22df5b.0","@material/tab":"11.0.0-canary.b2d22df5b.0","@material/base":"11.0.0-canary.b2d22df5b.0","@material/animation":"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/tab-scroller_11.0.0-canary.b2d22df5b.0_1615482254932_0.3878640284384154","host":"s3://npm-registry-packages"}},"11.0.0-canary.81911b707.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.81911b707.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e1ee2c97965003d14c22d12bbe5dbf7d307c5c68","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.81911b707.0.tgz","fileCount":52,"integrity":"sha512-miB/Av08UCOJ0CyVQpiICiakHwMhNNokp506V0iLylAQUiB0iCq7z9o0Ti7+7xa4FAha+lTzZWrSwxsl6Reqtg==","signatures":[{"sig":"MEYCIQDCjIGqB+RfMn7KNgwXkFFVTF1OHUwG6RHlVzJdRStZmgIhAOL5DpdUa4/IMikTGtpXgVtoLgj/TB+ee+/UT0jUhtIs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSmBgCRA9TVsSAnZWagAAHgkP/0sSxlFvuHO03mmww3D+\nvnA4bLfDI1ndysdZyfkA+IHmfPjXwd/eaRc/OeET9vXzUzXy2LwK8K9n7Kxw\n7nJFT/ncfgJNNcD5cumbM1dl7L3qAkiZmgjh2GJYJrQL+9GtBvGa5FLW7Bkv\nRuVwEMch2alsE5TvdnWuNtgph/kRP1lHem0yBfkbPCUtss135Qy0fP8yPmTd\nQaigeYikE9YH7cwVffC0Y93aXQ5z47I/dRQT01pO1NXPAqsHbgiBWHiAndKh\naQdcXAdhR+BW3DB2sZzqwXSEzym7bm7NwMvWwt+ZtWSjZ3RkYWqDoQCmYLbx\nWff72mjzdC22TUwXbl5eMCNqD8w907Jx78DW8AQV6snCJ9ZEeZZhG4HKdTg7\nqQfN7Kks5VfEEpvIk7GAyOrFIviSoVdQmO0mtSy/xa1Pk4RLX/5FHv5RxuFq\n6nnX1vBrKpAmNCe7+IBeqEe24iuT5QqKZ5v6P4w1O7q6KPM0Ysm1eku3E+bl\nMcWWHdJud+ZPKyG5ZvBC8u2LRHh+XFDYl2oL5rgseL2xYr/g7ixRfiA6al+l\naiDybbj0+dXructvbrpS0wj4qzKYCEnn2NlQVKcbrkF6WIPef5kpf9MCL0F5\n9R8zFoMcDxidbl/SnKrAGHm4m8LodIeScvGLZbVrTfyn8r90dExlrhXMEI1q\naIYO\r\n=qc9C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.81911b707.0","@material/tab":"11.0.0-canary.81911b707.0","@material/base":"11.0.0-canary.81911b707.0","@material/animation":"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/tab-scroller_11.0.0-canary.81911b707.0_1615487071573_0.8041680579943615","host":"s3://npm-registry-packages"}},"11.0.0-canary.9eeb35c38.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.9eeb35c38.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"08cd48f81c5d8237f97fa8ad0b16bcbb8d6511cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.9eeb35c38.0.tgz","fileCount":52,"integrity":"sha512-LSgMmX/phx2neYxTKFnWyn14/5uM3sKkEH1KNsvEahTjJmGKRPEbc0r5TeQSuyeMH0F7OSzgibdfTaI5x3fhNg==","signatures":[{"sig":"MEUCIQDZELv8Y+UApy/VhPUs5krX0UCQGq//9qfVVo0h41na0AIgCutQ8fiFUey5xMIlZrsVOud3V20XM6onFhuhW2V63RI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnGbCRA9TVsSAnZWagAA/yAP/1A4eyW2LR6JnTvXGXkg\nqKKSmP22iq2ajo+2sWXHldX+MbolDt7peWT4kNRT3Bjzyu031Jd5R4H2/BaG\n2P3SG5nMj9yHf1hhq5jpr7bdfJv5jcKLEIW6i0xunIZu9ehhYIJbbDaQ9TJj\n9PJHYBaR8T2EIulhu7edtb6RcTYkjlbWIfAWrSWxqE0qx7/aNu1m8/KUv3Nq\nkSSAqbRapmlEeEt8hF71A9GCGqzXWyX0d6K+jh3BL8Y0qy/UpBP31Ra7/MlP\nVyUOw7G6en9r4fG9ZlKzm3f/r+GCL9rK+VL8wYFRN+SL4DOJp/gvwbsWE5am\n0l9j/7ha6qoD+Nx3JHttN6TG5J3daM4Gh8gdKUUGzc+b2XAaTtbRwqTjZpNg\nN2k1IbMLwqFRCI8r7TRTTa5MGRHX7OmGWl+jlE4kZ/Tz253PVlmxTXTKGpMu\nWj3j2RpOzSoyioTMdgZ7ta4jIfhd8At0BmkA2ntHrGw+T0SUVA7KpcF94Vgv\nv1IAJNyXkS1F777Exlhn1xvqyBkHG7+ZXRzFNQb8UBnGatBD3ksn31sDHYPx\ngyAjbljiyMlURzrENJxlnhLZLmyCyNivUY9iYmwpM2cytTDiYwblK4ormi4+\nOdWtbWC1xWKS/a5vzyroKj/I1BAzxhxwisExFKZy62/sd9OsAO8Uh5FCi90E\nRvyc\r\n=1GE6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.9eeb35c38.0","@material/tab":"11.0.0-canary.9eeb35c38.0","@material/base":"11.0.0-canary.9eeb35c38.0","@material/animation":"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/tab-scroller_11.0.0-canary.9eeb35c38.0_1615491483374_0.43291112194411085","host":"s3://npm-registry-packages"}},"11.0.0-canary.12be3e95a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.12be3e95a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f01268a9026a80dad5ad9f7cbd6f54721881fdb2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.12be3e95a.0.tgz","fileCount":52,"integrity":"sha512-wcY7L9aYgP+4iLvvrBSEG+39uvtbW09wmwB673NbRHCwo8lGh3ct5YgoUaJYvDLe8nl3eJCvQxmya4j1F2ad1A==","signatures":[{"sig":"MEUCIQCeZt9GQkaBA9vidgwNWm2oA7PVgAqhwj1v7gq7IJyoaAIgNcaidqpiZpdKrsw7jrdjAWi5QxVreyhVQ9lqc+2tfys=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSndhCRA9TVsSAnZWagAAEAMP/RCIQu/QCY8fTZCGAmId\nRAi3rAYt9RpEud8It0OLr6c+iAvmhzo7ssN/mwD9XuPnHOHFRZMEpG2Q/Muo\nFfq5/tlIdJPWNRLi2GQHuTnm3/fQXIHn967sV+/MJJzvQW6+Vp9jCa29L+Y+\n4Ks3w3uWxbvodnRypi1oN2Z5OuxF9Z/aw31Pjk8KgSXeojI+5NoaCNT9aRMR\nzUyR+TAELMeTN/wP+oxyNR7Xk2nAXs/W6x0Sjv+YLbIkIVeWl8+pnC449DRC\ngV04eC/0R/E9aAUYoIDAow4p3LnPAK3SMclF1qZAsKmZh2In5gbd7rspvdsh\nnr+qTKndtPhJk6Xqj+ZXo0kTw4YkXYjCdOLVA8Xy39WpTu2XkWEPfOOl6Ti2\nfcWbL29ygOzqW2laf+Ez+QeCDXte6AQxJZcUsbPA/4seg0k4dTN3l/RvCACk\n4Aud3BY4ojj2LNRFPUgxDPZ7UHf8BC+aqezY00h7l3cbpalvDmKCZZ5hV60b\nOpm+U2m1FIN/8uMO/5dOmV3DigmJt7Iz+plbcb3nHY4RmOfMqZTB1k3oyspo\nkWaAYui8sLxVP26HKzy7DAm/xocCoueWjoXtc7OnRcEAXo81HkNzUe4M/tIs\nsItavSF52zeBYLbAjg0fIvDrlGGlTMAsAV+57fnZXCt2/HGw1WuaxhUvxSe2\nG5Jv\r\n=BAHl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.12be3e95a.0","@material/tab":"11.0.0-canary.12be3e95a.0","@material/base":"11.0.0-canary.12be3e95a.0","@material/animation":"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/tab-scroller_11.0.0-canary.12be3e95a.0_1615492960659_0.40215328130373895","host":"s3://npm-registry-packages"}},"11.0.0-canary.e683bdf4a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.e683bdf4a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7767bc87439bd5d92f71352a554df6fbf2979807","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.e683bdf4a.0.tgz","fileCount":52,"integrity":"sha512-D3LrI8yb8cggfivKEdEoo9KQfZoRWvZgoKJGtodbZIoyR4zwAR7mmRmv+GrcZqWyqk4fvFzT6hI4W7n5wz2JDg==","signatures":[{"sig":"MEQCIBpgfskmr7UXXwLpq3ZvDQA7RBnbo9Uqtw1TcMtQA1fhAiBDBZoMdvKiwIwM/SKkP3O9YiFL3Z3MRw5WLnLe+chDUg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSnknCRA9TVsSAnZWagAAgI0P/08ARJJIRLwSWb2SYW1I\n6FhTqIMkb82cBa+9pdb8OkO5fKULzBcbs4tBe4r7qI1p4UHaeSxuoh4rZ3jL\n/uec97A20RkwBHDi8sJay5gNav2WexhqnqFgNQQtjEtEKTN0o4eedgrEFS2p\nZBaPesHTW+nX0FOdfKPr/XXHf9fKkWBEEAKhrpYosuxMZetfdejvV0NuYyD/\nuwTASM5dFBHy9F7Zvt8bfz63NDF1OYela3TCnlrygW1vuHEJn+b2rcqgrXen\nBjVn8xhbRWZKvMe0SwgPvlpDwPcqnNaFHaA9QSRykHlBD6uvS4Vb8WKHRQo5\n+CiON5qnXHAedLZFrlj5zKcLOK9gHlos9bcYv0/yGJtt2UsjFJ+611qKFtJO\nNHS1EuWM67BGUcRbXZYxUigf+hXWEjgt07TqqUWW0ezWJRywoh3RMzBJLJLh\nAKNgiElqYFFWepGhA2cwXh2XT70qzPyEFtv0HCmvVsip9uGyC4ojxr5tYtRI\nBnoDPgYMpNFSI84mMAPbD7Cs8CMAw6Xye8iEsp9d84HBn3feWVMoSviLIx4k\nOS7i6UYsN5xcE/zIMNuxmY43mfe6AapAUV3qzXYdawSnAa66hqvoNCGEiEKH\nHNm9i4tpY20Lp1tMucZy83VoJeN2HPFhzVprKN2mOlXG5oVeM4ShZ2fXoyrl\nOzBD\r\n=egeO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e683bdf4a.0","@material/tab":"11.0.0-canary.e683bdf4a.0","@material/base":"11.0.0-canary.e683bdf4a.0","@material/animation":"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/tab-scroller_11.0.0-canary.e683bdf4a.0_1615493414739_0.19280460034172275","host":"s3://npm-registry-packages"}},"11.0.0-canary.a07b6d486.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.a07b6d486.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a16230a33307a42a8b5f823b70836c574fbc3006","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.a07b6d486.0.tgz","fileCount":52,"integrity":"sha512-FHuw7fgowNOhwD2jjrZhRef2wQfk4P1l7XcxEzKEq0dY0flxF+Eeq3e1UucrPoG1EckAygbmrYN+TpFPF6wp/Q==","signatures":[{"sig":"MEUCIAP/lszOynqo7/huSU5lX9XeUbuCCNcE6/9ZHV88wTLaAiEA6Fw6OnlMx+TytnO3o5zKPneKxfgx4BqomQQwVF7SYQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSn7aCRA9TVsSAnZWagAAkmYP/0Naezk6hAIhNEJpQSru\nmBYJChKaMkhapMOIVXlph8RftEP+fckvebz7qUHaxkwys80/yLihJpkYwrjl\noyciEAaoRCPlKo4oX7o9ven053nOKar4BcqOeOZtdSdJ4jB+BQvYTxIOw6Kb\nJz+hsML29NNGNhjLI7qvm5KaepMMr73M/kJ0PQaCzdXhFvvlDmxuCG2ZMBUa\nYszeytHZIJJBAkPopS069K78fdCbVOS1wB5Xq40+5XadG7CV7FTHLg6HzZpe\nDUV/wn19X1R7iT/ri1pYLNywzseZ43E09lSuEiRQYTFr3I/0Ht0q8j4tlATQ\n0H29tZPgDm5PzovgqTtBmDde2V1EylEwJIFuKUcq9ceL56JtEi2GdaNuTrTn\nXyXQColXoPC2Jel91jnBw5UNqLDKE8WmURFiT/khYO2fcMbbVo50XtF6uGNW\nuKMM3hl6mSX4ej2r59LBHRrTkHPMIJKQQN6k+AYP4K0eA1YvLH1UX2gzTFMp\nXh0k1iMMYlUbWOE0aC9o55pxeJkktC+3vkClZlOeIG1qGabMhVMNo3Wo1sn5\nW6l1AlkYmELPy+71Wsw1txC+Fl0jfgVpkvkIf7wnIoXtAbZchw6b19QkhHXU\n4ULrZdMVJl5AbtYd9WTigJ5QRphgpF88Svygcp+Tz85EjnwRGi8LTKWWyvhW\ntWzP\r\n=S1Dt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a07b6d486.0","@material/tab":"11.0.0-canary.a07b6d486.0","@material/base":"11.0.0-canary.a07b6d486.0","@material/animation":"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/tab-scroller_11.0.0-canary.a07b6d486.0_1615494874393_0.320158181819872","host":"s3://npm-registry-packages"}},"11.0.0-canary.1e0653477.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.1e0653477.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fe09a350c403872bae0df1bcdadc66338460dd62","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.1e0653477.0.tgz","fileCount":52,"integrity":"sha512-TOYgpWOkYwwjF+hgZALTcCtHjD6A96l4WiJTcBJ/0lc75Su1TxY+R9tRxppwQ5jyp73qgPcFuv8KdtRgz5Otrw==","signatures":[{"sig":"MEQCICrlfoWON5OaOywR7xDBLflSgeGIC93peA6K24CdtNuxAiAJApqIHF0QU63MjE9MI3CpQD4spjb4KuL4zKjSns7k9g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSoCICRA9TVsSAnZWagAAHIIP/3lDjS+s8hzQFWEIXmEO\nZ/SczCfqPu6XGLoaSdzKLqOGDEtJMlYBBIuBuQIgH7xcBeobKIP/pByS0IvC\noyFGsKrhPqYvs7c2YHDJ46n41nL1lQ0qpU0Xgz6UISmPrF/TE5KKnkM0SONg\nyKdfeVIvB+cyKeYcmKAbGJnxSnSdf1hyjBy9LRpt+5sflwg+4KBfwpdm79WC\nsnHK9dEqfVkieT1tvWIR7gzdMIGmwMQs/HMlgf4HBdS4o/MlWDSEGFutE041\nGVjnYM+9/QUB8mu5baVXK3Hruzv2JYVn7kClqlD8rUXTxDvV1soCqVY20r6P\nokAKPw1g8UkshE/jtWR/GcwDWOgDpxBz7/HAtFwtHcGa8/xA4b2Gts8KLDiZ\niMc7GaPraNd6Z9Y6aYP4+9HF+um7bConFOX/rmrXICLoESfuLbubf6SYU4n5\nGsrpFbfV5pDCbc3bzNeemWqVTaFw/6WelPfWMNDxv08YCSTU0DLz9qI3Rwaq\nnIEQAz1XE+JS2aKPapFp+UFrqQFR3aaxtxIDaR/lbYOb7UJ1efR51g878SsV\nmnqSbbUTNk/yQKhXgcZIcDIYFEY5CaXoSWjqcZCE0hg9xOWM4oUBi+I3VPGr\nJMv8iHYleQ50Raw7IygKOsulMKrDkY7GIB7tUrkNtpnH4T3zla/5ysGcIfn4\nSein\r\n=T+Xz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1e0653477.0","@material/tab":"11.0.0-canary.1e0653477.0","@material/base":"11.0.0-canary.1e0653477.0","@material/animation":"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/tab-scroller_11.0.0-canary.1e0653477.0_1615495304086_0.7246281865764879","host":"s3://npm-registry-packages"}},"11.0.0-canary.148e8cfcc.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.148e8cfcc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cd52f35b389d919dd43e7bc2769bac9e8522f0a3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.148e8cfcc.0.tgz","fileCount":52,"integrity":"sha512-8ZttqCJEo3UBzX6l2WKP16vWcHKfA/M0pzGnb0OG/OhkXDRj6fGWxZt7H2A8NMpkP7bZGasmy75izn8fli2r/Q==","signatures":[{"sig":"MEUCIQD/7SHRFWCT6dKKxnkIMrwYEZGRXBesGpHWmP5bNRI/8wIgWrCdEGL11bkK3KylPh58uUHF2iJJ8S9YIZEtqNvg18M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSp2LCRA9TVsSAnZWagAAHQMP/RBO2OixnEEthiqoKZqj\n31REBGW1x85S+C4CMe88W4bV3KlG9+44Q/YNUpxsyMLHg1mi0sJiavBkdyYT\n0Q28/JBXMtQa6K9Y9z2ObiY4Ih7WvLpZUILqGiatpoM8z/xi3x5WQXOexjJx\nvwK/NHuTsoKOWFOBGxUv5afDXC0NtSVIwlBy2cRneZHssT3YTfeT2cP/12zg\nfmY/uL2KwJKQNAGSEV7h4MZdG6GtkOJwtUGh8j8ooGKX/DTXgza86jo6RMkB\nwBpZ3o0cLV5dcWpRHqOaKEaQnXsy72xvK3hLMJgsarC7XiKRZ9x4W7fV/8iZ\nA9qsL0y/PHwuc0tfpf9lGBIHJfCOikvuWuWsAO00nnhfxOLj7U6j5D9wEmfF\n8S2fknhKoUOpy5ulj8SCLQk6OJNgtF2rtOrVhZF3ItBDHdlzg9Q8xIitxpyG\nQ3Z2Bly1ETW1kYpKbJORYs+O1Bhe9h6r0cSvFQ+sG72/fDSmoBqC80LV74BT\n0miwaLrPzjSu2Zf2jj8QL7osyFstgY3+TyZ/UznN+muRPOF3ujTbVPDrepdY\nfI3xPPhJhD+3TiME1adN2/sBDAuF8PDX50vsU4qiaLbnBTcvBLX3a/DECYbS\nprvU4441PVRnmuRbM/ntZXBPS+RS337fYKug9c3AruQaN7IQvlfb6akAuqbv\n9VHi\r\n=zYmO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.148e8cfcc.0","@material/tab":"11.0.0-canary.148e8cfcc.0","@material/base":"11.0.0-canary.148e8cfcc.0","@material/animation":"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/tab-scroller_11.0.0-canary.148e8cfcc.0_1615502730746_0.6326092742274738","host":"s3://npm-registry-packages"}},"11.0.0-canary.73a227194.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.73a227194.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f2f8ce3cc74acee85eb94db5c298151a37129c8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.73a227194.0.tgz","fileCount":52,"integrity":"sha512-DGyVT7aoRvRIt8WVYRTzaByquFxA4rSfflwXmV82KsJlS1TvfyqqUYGKVu4vubLiC+By00+8tleATOhLR6ggyg==","signatures":[{"sig":"MEYCIQDBqwRn/gbmlD94ceory9wTdmAkrWu1I1zqXOpY7YfTLQIhAKtPl+cpUzkACH/QkTlMiaIE35VFM5xbOgTgHyWRnPTx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgSrTwCRA9TVsSAnZWagAAPKsQAJJ+TU6Q0vJRqeTCRutU\nsTK+gbOydZUTlCTJKWSL7C0X/cKISKciqiiEBkQRANyV2PbfpthtDwLVkcdL\n425zyBftmkP3ibNEEAhCtzM3PsUoXNlcQSpIf4f59hU9V65jXsB0nob4+agb\nTpfjxTKhJCPERrvzdF51kmKDkkwlsTvA3V9H5wotq1BY/XGQ7eH8YjZdkYdA\ngQT5DHQ+Ea3N9A9obYOrydIIo6BQ6Y8QZmhnzj23C57/5X/xBe4Egoya/9Qe\nCBWEO1cpdqE2s4h6PBAUfvdC9w1Y3fYaaoT4e1KDTuw8/fsnjaqvVQzrIZll\n2S49l0D9Uu45VRCFCfAVz9VuevLhQp2cR77dI4cBkWj208sRB7S0E177XPqX\nHDvPddNnuVm222pwj0JbfHoA/cXl3HLEcxoc78m6iEj6Tc8C51pyxnI+sCxi\nBAqLBpLneaMeDU13Ss8BhLT8b87OpWJCL9Hqd18MNDsagTdbmXZvuv8C4Uhj\nBNqCzPeATLVt6Ey6AZFeNZc5YXGVc7LFtYyhSgYiijgGmL1yCNfM5lFBrJTL\nauVyeee4stHVqiIgpdGfXV73O02W8f7AMWgUn+vziWi5/jhKhsPEGJauJESH\nkWx5dM+VcjHTVtlc6wFPYu34fNrbU2pJwkIR4Tmk90CIwS6Jgvv9deC/NFnn\nPfPc\r\n=IjVZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.73a227194.0","@material/tab":"11.0.0-canary.73a227194.0","@material/base":"11.0.0-canary.73a227194.0","@material/animation":"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/tab-scroller_11.0.0-canary.73a227194.0_1615508719441_0.6859792800455606","host":"s3://npm-registry-packages"}},"11.0.0-canary.f8579b7ea.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f8579b7ea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b3d3dc825dbe474e183dee012c488e1670ba62e8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f8579b7ea.0.tgz","fileCount":52,"integrity":"sha512-JtTzfeMne+ou+EO8aYhFkiwa1H5lDWG1Wk4cxGnbnsuRZBNg+ZXjTW188ddLI5bDAFVIyBnwRY5xVrRWnLyO1w==","signatures":[{"sig":"MEYCIQDiAdrQcstbZi8DIsCltbIqPAfv5t0OYOzLJ5As+25cKAIhAIp3O7hEkEAy67Km5Ypxf+/wyV+5PjRONZiAybqckVEq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgTB2kCRA9TVsSAnZWagAAwlUP/1gxMO1sYoJsW3K5x/e/\nthPmxoy0TIHIv8UdgsukPZwliUfxQtbZaGipgOT72LM0MEKgz58ygy2HQJYw\nN2a4L+UyljIZn0foIC6pLx2O9oGoqMyPAN9LDQErgmw+RbT7ZizXl8Vtd1nd\nSaeeXTlIBUX7l1VbbnWD/ZXbnlwiZyDi9lj3P5Oe6T3CL6V5yys3HJAqzXg1\nX1pnlRwXMxTShPUf2gYgRQLydYDFMY8k29J0ycxsSqf/iZ+CLpetuEnYqS6F\nusANyGcIREF9Uutkl4rxkpJFfp++MuQHCNP+Ang0Oucyed261gBr5JDEgkHh\nph3C8SH7SVXdAUcXRcnB6tbB2vPzfP5Kl7PTQuTrCJpuvF4tdpG2Vyvjj+cG\nncHLb3j1PwiicxG1H8EcWmL16ef/P65VC9aznrmgTYeJOFnOGiMjQikBevN+\ng16cTY5QaTYEieSjyto76gbdKGvpm9i4mzjdLbrvVInGrR6CmW7aJDi+txC1\nh9VzKet6hUvcTBToV1sDmlrh3yD7cbrXh9O65OS5aoWWHLm6PPLvqMWyOqbL\nDBaxSTax/ocryPpGZkRV1UhznEA5R00sqKH+AYH0wb7uYO62tGm9MU5qdYql\ntszasdOowqs3Gq83V4242+hJLGPDkFUljG9YmNAyZo+4+nko2wYQT96ehp9n\nO629\r\n=Sq+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f8579b7ea.0","@material/tab":"11.0.0-canary.f8579b7ea.0","@material/base":"11.0.0-canary.f8579b7ea.0","@material/animation":"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/tab-scroller_11.0.0-canary.f8579b7ea.0_1615601060065_0.04044602107565676","host":"s3://npm-registry-packages"}},"11.0.0-canary.d2a39d300.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d2a39d300.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6212e2aaf9a1e8aae928c2c376938da03a5bf150","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d2a39d300.0.tgz","fileCount":52,"integrity":"sha512-Pw+uTMF5y3FVyP4xxpF52OxakMNe5UfQCObD2Vs2eT6bdaq66WIx/7Avi3lUqzm3X6GtjSMEi57ngiydW/aB1Q==","signatures":[{"sig":"MEYCIQDSkCYL94bxy4woflWtA3C61XtmTdfKbLCfuaTHvzTkCAIhAIf+gCnzLuVKWP4N+qp7d5v1cmauLxzumJjijCSjMOaO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgT/1/CRA9TVsSAnZWagAAMUQQAJMyIiX4O2LnBfQ58xr2\nECGZmlVncGPoiR7FdONY7h44XpuPCzm/7gYVD3OI4FiS8XIRake+baQNOGvm\n2ZsBJf3T9lGvnT4oMhJO12t1DMds8z3Swo0NIj6pe2PaCj1yJrveuGiTobdm\nDnyGvrDBeYFLRFQtSByoEfS/sposDns+RkbKCQbCz0VYirPMnKD5HKWb9oz0\nydAiIpSOdi4Juj7pv1kss+ysSsn1ToIvcxzt4S/qOHq4dIS0rgAjVWG+whVJ\nksWIJD+0+XURrPKeQdTv1BRa1IYvdNUfyj5xoQYMhASswGWPv/8w2L3mfnDW\n2CYlMq99xu0J/40kzhtZpMwSccXSKntQxHD0+CxF2/O/wi7wGvzJT7h2BIgh\npfOFLcOtv925lh90U1uH64GalECS8rc7mUhnX/bgR0wAOpCj7Gt9hs3QPBX+\n1PqIdS8oVDAMJ3+jj+ppXxyC/gL/WpNzY6906nrLj0QWvOj//tUJFer4IgnJ\nXJ78jE1V+Ue288uvDksarvbzDa4Xc56ex5Fb2zpGRPB4ulJDjBsA3EolzS0v\nc3PKyMZMAMPF61R+F/bUnqSu03rDCLTDI3qwiWwwPXsSnmB1xd7j9rrfQUl7\nVaA3p522QALVHVvhZXzy/95Cqi68HANy0gjQL6fJWPyxjYXKUOua0v6buaAl\n720l\r\n=a1rR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d2a39d300.0","@material/tab":"11.0.0-canary.d2a39d300.0","@material/base":"11.0.0-canary.d2a39d300.0","@material/animation":"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/tab-scroller_11.0.0-canary.d2a39d300.0_1615854975457_0.49055129157540067","host":"s3://npm-registry-packages"}},"11.0.0-canary.7cf67823e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.7cf67823e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"134cb155b5cdc5f57b79e19cd8ffa91ac7ac088a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.7cf67823e.0.tgz","fileCount":52,"integrity":"sha512-Vbn+fgR4s8G1gqn09lst8YJPMFmE8MTwm+VVZCnbt8wCNfUAcNiiM9c129nTBuvD8uLskUbgLWIqmPX3emUkBg==","signatures":[{"sig":"MEYCIQCoe7Ad3T0xHzyh90JzcynnjdhKX18+cPe7EwqNv1QjhAIhAPg15DlR4est50S0Hs2oJ7uSk3m2vHKq7JBH6IpyF4DL","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUPchCRA9TVsSAnZWagAA068QAKCWBNuy9Y6GOj9BkIvq\nbxz8Ug4X0ile+yRVNCyhL+lJoxBD6jqoN7o4AqWKRlwBy6rk65bYqXTOxnW+\nu/pnV8VxeOJucvvFd/KSXpImK2f1kZfSERr4TbSgkxkDJtHrHFerIs7hKVcl\nlVg9pvIZTFIM+EobyoYBSd2e8bPbi00N1rlkxNLzqpuJVHzJ0JTeQStIWvz9\nIJpd+SSz0Wrt064sUfUwa8vclUv64HjXlJD/GVnb+xzlwfoWVxIvdSslXNsF\ntIfqlh5hD3Ncz1Oc3rxi9rLw3U6LCyzsQtsaemtPQsyTKi6towPc36/Q4e1w\nmdSqtG14JeS1R19SETuDv/Gxrrfb5R2a198O4vGzm4QAGCymFFtYzc51jDC1\ndrR0KETvSO71t5ZjrlMxhoVMLEwXNYhNihRNY5V31inouVWjmKRq+6tNoTPo\nKAzAMHOhtOPyuwvaZUJ0Vvj0zT5tsyf12J3DOHBG+ODMsQSZaTThp2pHs0Jh\nmWu97Zg9CCCfwxrd87YIpzdzQpz7hcoRvXDFw1o5ePlJ7bwcfUyvbQUX8qtZ\ntSK6RfIIdCKmQyTpLbhfQCsz8pKAWoAJ66Wl9OkiNY+gYpXnZ84gVFnH/sJP\n0gyWX9wPLIqOTDASVLDpIKM8ZEmO66q2rJgOiMw/J1LawfGwjJCrdV+1ohZF\nLvr7\r\n=9jKs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7cf67823e.0","@material/tab":"11.0.0-canary.7cf67823e.0","@material/base":"11.0.0-canary.7cf67823e.0","@material/animation":"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/tab-scroller_11.0.0-canary.7cf67823e.0_1615918881411_0.8076163983443614","host":"s3://npm-registry-packages"}},"11.0.0-canary.67d780c79.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.67d780c79.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aef0cabe0d4b4ddc6fb793809113602173d5f7cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.67d780c79.0.tgz","fileCount":52,"integrity":"sha512-JGycoei8EA3BZ44FrYEK4xEZbIc2FnWlj7wTJCue64rgSQFYHxxCBt80A6p6YCJdQ+jFNuNFpq3H08mFBxpTTw==","signatures":[{"sig":"MEYCIQCVQT2pZe559fRMeCcATAXzF38/00TxLmTiXrRCLrET9QIhALCylfIQ6yhAYBmP4qSdYjRUamR39MhhqrSkiJenR1LA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUQuyCRA9TVsSAnZWagAAnhAP/RqynZ5FgQRNqi4UBiYh\niW0YqxZ4QGI8gkMoulCpTTn1MmBdbExpRo6h8uD05PrOnMQ+UjLD1Vw3Cjd3\ny/h7NadH2OQGoFeDhZPOEPZZNGt/3jXjnptKuoUUEI2dGNzkYQ6LR1gJeb2S\nlfcvzYQJQpRCWU2717cTGYqoe9EK+d1bFJzPl6up/uEvlc0/gizZVAbPuLy3\naBgB9xiql9EFqPdQuE4gdCTtFoboIalZoTLy1CLLIpGgLHKwvtXGPoRjqz3K\nlHt3xU9VUXWtk1XUcElLCd7NSg7EriOg9XDuesQYxNtWZEtTe8POWjQLXFds\nyScVSlnW8c6M1RodlPtjI4NQO6YCPqNFVuAy2UvD7v58Q7fH/7r9oqvuk7S3\nJgzurJKyIsSDxnEW18qR+vnz/IhDfk0BQDQ328w0eSSRgGQdF4sZMG+sY8VR\n32cu5Cq6sw9wIu9CdhRhbMgtY0spujwuDxkyVnY+FF4xMMcKR2F7dNjGc2xa\nINqIMoJ17MtIHwB95PXYSAtS9dT4mpt9d36EYzqLRW/9jtGUOO3STOU7W0Kq\nwludOOdVGaAdAa2bM/g9Bnx9OgnSbnhiExOlfZD5faeKRfyK7esw0XQxE0NV\nZle4aM036bfl5q1D1hZN0XU/j1J9W3zgZWUX180/a+pdxqWQi1YcHm2xpXJR\nO4aQ\r\n=KYn2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67d780c79.0","@material/tab":"11.0.0-canary.67d780c79.0","@material/base":"11.0.0-canary.67d780c79.0","@material/animation":"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/tab-scroller_11.0.0-canary.67d780c79.0_1615924146010_0.6266158886945925","host":"s3://npm-registry-packages"}},"11.0.0-canary.0f358ddae.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0f358ddae.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b2ef674be59d44e99e68b65e9b791d758f6fa1c7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0f358ddae.0.tgz","fileCount":52,"integrity":"sha512-z6HTD16wSvmVu8W5YHkZ/bTxe/hdk/LTHzX4+1E6G3nJkZN4osCLNNshlC726QAv7btl32G+ZhuzCYIrtfPqEg==","signatures":[{"sig":"MEUCIQCwN5s9aDwd8dLP7cdhnkhSYp/CexAfz7jKW+NtRJ3GqQIgdgfmGPWjzOyQpJ+5wtXzj+btvQ4dFfkALgt5S5j/sqY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUS2TCRA9TVsSAnZWagAAkEcP/iyakRLcyY3PjJCtBiY7\n4ls2kUcOkqes7UhdJTHProJLMxPVXMYH4wYSJO4+XZp2GkH80wbVOEWSTDjK\nkS3zvMFYdqHAPIrSW1kLjlBI5Eb94I3F3yU9+InnaZ2qnJ9QYbyLhP/87unz\nEFQCxlvGJ+wjrfy3Rl6Yi0QdNKsoktAAeMTl8NBKVyq2OVep+/dfJxdvw6kh\nSQngTxKWdqBAHFwyWqIDjmlzFGKs27/3Vm6w0WUSfqwoAGSDoj7Wb08o9RZg\n9Yuy7V1m5OoZa7eDaxlSaf8kob6WMSWHsDxon5UmEsibXy9FSKg1wRoLysVg\nAeHe3W79RYdvEOJCYOl/ASKJtCJlssw06nXFNSUYkh+utDf7N/mJua0cjTnW\np41DeQMSoSndZpa+XhT/ibV5ZzUQSyotWynMaq6e4RuU32UG6jp1dZnQLaKt\nmoAmO6duPEXfJiCdr7qA3zFoWtX+HjgppIUddhBxeQI4TlAiP53wpF2rQEaa\nTLBWFkqfTfDbgidd8gzHjrbINcxzLNJNLksEsXnz1n125tU4fYX1j6ToUWob\nX1NbaEa8Rc6o35XgJVyTthjju2wJdXqffXCMDQlJdKWMguc5SKkpVBe0zX/l\nmgAGIJV7EnGY1YC0gozRW8nWaSYlMyXPms7YkT+VozITFdPwnTXMrNHxNXcJ\naS3J\r\n=qsVa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0f358ddae.0","@material/tab":"11.0.0-canary.0f358ddae.0","@material/base":"11.0.0-canary.0f358ddae.0","@material/animation":"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/tab-scroller_11.0.0-canary.0f358ddae.0_1615932818587_0.023999200278541855","host":"s3://npm-registry-packages"}},"11.0.0-canary.67eb0df80.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.67eb0df80.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"166143b20828b100f262465f7c74eefd5f39641b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.67eb0df80.0.tgz","fileCount":52,"integrity":"sha512-tPbNF8cajH5bcEiKRhGENcm7YZe9gzG6pnR0LX7/DOdZv7+A7E6tCk3ssEVaiPAqp5qm7AyU0892aueFaF41EA==","signatures":[{"sig":"MEQCIHf9Q3r6+OgDkIhBVemp3AGOK+lJZdYCmYfdi9/ixBF9AiBaa/4PeXuCLRmPrFJxymGTiXbHwsKK2a2ewxX6NLXZWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTPzCRA9TVsSAnZWagAATBgP/19+zDZ/vCwVDxU01gug\nfycO/z+8g6gRvn6y1LtAu9l3HAdg0JLlmZzQ+HCQKz8IrO9Ub1EDD+OfcqaG\ngBC2ID5riy2EH0LWI4Yfr34zn7hPdmysnAKWusoa0RdgJcG5OeLeZkJv1GLK\nJwm/QMFxBSd2FVZ8V645NLSumxpIlI0q4C3b2DNDsWmXWWmCoLFkJ8nxD8AW\npee8v0IirhDvxHc2DB2uijK2YFfkjmy4VAKR4rgTtbosntFle8e05KITqzRI\nizybRj1A2EOOgFj+VWOvZicgiCpdu3sxhxvqhhWO2bCKiCzQudPg/noxZdXb\nKjzZJCqYk1NDwBFR/6rV+BYLRZBPPQjVNf2Mb+kCKNh5J20iPad7da4ARdRJ\nxyM2/P4xtCjBZhgEAnrgmpPDMNMO/llH9Wob+Trpy5z1fIvcAB+2boM5S1kp\nKGl/nR2NqGH18oec3a05eCGNu3ta09NGlazPhDLkQT+Y/MzKxXAV8LeQK7No\nE6Ykg1kKL8KI+CRskk92eyhKi0ZxHYXjFvaNTF5vvfF8vnTMGBCdqMM74mmL\nOGzEOX0dpj8opNPMRtmrbo3A+WpYIx2TZizAbrlvYWpF1DTTsX5bMyaD4am5\ntp8gQCzFqKlscXwNCujV45T9kKSQJi0uNBj/UnuoIEId982gPvvURGfIbj5O\nxsPZ\r\n=x50t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.67eb0df80.0","@material/tab":"11.0.0-canary.67eb0df80.0","@material/base":"11.0.0-canary.67eb0df80.0","@material/animation":"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/tab-scroller_11.0.0-canary.67eb0df80.0_1615934450954_0.6646620050317538","host":"s3://npm-registry-packages"}},"11.0.0-canary.941ca3b3c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.941ca3b3c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e57aa6a3aa4b45b045d62a9879e0a6d2f090b745","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.941ca3b3c.0.tgz","fileCount":52,"integrity":"sha512-9fXSoYLF3i9Xck8jCjSAXFIhM9eVg+UNOmH/q5St2fH7jajfVo4uOTF7c2ZvY182BcZN962MSTtfAc3121frWg==","signatures":[{"sig":"MEYCIQCotmwtCFFiwWyT6Ibxp5GW/mHdHgHX+YL3nyb60cexnQIhAIUZgpZ1gLmxpz0ETcaBq6QSQ1CZDJw4chlkTPO8Luxr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUTRaCRA9TVsSAnZWagAAP5kQAJQb0Z4EETj3E9FGY/CM\nU+1GHMS8xulyD7Mdrb3HOOeitQ4v74PKwMNA4lD8jnSjbafRnBoo2P4jg2wd\nItrCWF9+Dd9X8qS22PqGTD+sXr6nOwcBPcSDplWUkXh/HGJ2NkYck1mY3U9r\nAk9it0g/ujO5C7qwnSOdiPR/wZW/Ad0KoGXAKRserm2+PNZ3eDPtsZnEio/3\nXVKMkezq5SYTorVfteAQxVYA0rJ2ah0mXNyLmslJv+eYdkSMoI4hBzfoKENo\nmG1rXC9BFLXt4q5MEVHFnNuRHA/UrYNQHywuD5VbJb/o+KKB0+w5gpe6m+Ef\nWKRmTYVUisHRNPNaAOpt/9QLjkBaSV4xlvlIibFJOcFjv68HR5SXBAEhoofU\nHd5Sudutj2jTruDvRWuFKMnKMydlZqsWbcHUxawpGSgfC16zaynBQjfssodI\nuBkIHTm9NSMh6LlJmXoUumg/GOSuRAYtuQ+qsASSL2g4Ri1r2AaAf8xM/+AE\nb3SuUgOYZv8Km1YRbeShiz9S1OEAOlH1YhZo6NxnW+s6ENE+WvB+ftELpHIq\n0hY+yv/uYQFnD7hwFph4vahPeYiZgWQ01l9tMG+9UweJjNOpj4V3llJzpZhN\nvLPZbm/VkLdzMw5TOnRCG7HOD5dJzQsii24Fq/m18lKTttGGJANkpOeWRuUz\nYiH1\r\n=gxi6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.941ca3b3c.0","@material/tab":"11.0.0-canary.941ca3b3c.0","@material/base":"11.0.0-canary.941ca3b3c.0","@material/animation":"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/tab-scroller_11.0.0-canary.941ca3b3c.0_1615934553554_0.6742083866294013","host":"s3://npm-registry-packages"}},"11.0.0-canary.3344d12ad.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.3344d12ad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a2b852848361a28d34f2fd60aa90d5a3676c8709","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.3344d12ad.0.tgz","fileCount":52,"integrity":"sha512-jJbT9GNxSU2SLoeE8+7OOc1vrsjcsqdEWfw/R0zj+dkEiAtGT63yWEa80R4RCyfEKDcQYj6hhDTfHC07zN6Hgw==","signatures":[{"sig":"MEQCIFJnA4/oWEq7m2VAtZIoqacrOxuFnmpJDL+Gate8YA29AiAtfmN9NIVg40kIvOhxzy4ZZTUOu4BwE4z9JGZiK5FQTw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUdPQCRA9TVsSAnZWagAASGEP/iqI+pkc0mO2aMU36juR\n8XJgsKGCmhgiinYIbpigpT0FrSoM3scisIpG2gBkGlKXS6Ohw9xeYCaCGzhN\nqCew17TrQCG/cUr7RHZYSwdo8XCc6vaWZcsANKrK/RDxxweHHzFjb2TLGatE\n6j4FSylH04Tr9UbMVsj1n/UkCT2fLZeNobRhiJYrRxcwtZ3p3EGAQ89lAPPv\nqn2blMqo+b1D3G71ve/1qX1s2oS8uFUAEHe3brqhWmvtXu/lr9SnCrTzDWB0\nGaFOMu//MnJZv2OEViXGD7A7MAGp6YFTd8PQxFETq/5ja5SmJNImsQVAxj7N\nwOj0AjbY+OhWottaeSEXGXUppflts26SLSjyAvyyz3EK3uoky054qeDq7W34\ndgg5x4uMJC5yPFAn3Zq2cnf8z+PRjNAzPPR752UNlrLPRFuPX5fC3g3SZ+Qb\nOq2jQtCwAdgefwGgNLFjyIv931X+1Nv6cl4ZPq+2X0oozL3N7rkI5HO4iOzd\nmTmeztaq8M8GZFQZpuobobKvoC9AP+Kx8op6uoeAKo8lW/61pNh2tJaHqLQB\nX0Idz92e8dYP3DGKGi+hRltO8Onggo0lTdQgRIEK6V0NS/pwy1u4NBGf5zz6\nDXM+VfpUBorjAlyN/ioegOL3nvkBj9LREUwrv8Osmz7fv0bHyA/PI3cVwf8Q\nxGVC\r\n=SEIA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3344d12ad.0","@material/tab":"11.0.0-canary.3344d12ad.0","@material/base":"11.0.0-canary.3344d12ad.0","@material/animation":"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/tab-scroller_11.0.0-canary.3344d12ad.0_1615975375642_0.9386043758281448","host":"s3://npm-registry-packages"}},"11.0.0-canary.6072ed604.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.6072ed604.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c9f41eb8178a7ce3f77ea7dc34abbb49eb8ccaf2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.6072ed604.0.tgz","fileCount":52,"integrity":"sha512-eX1nN3b4aUFGj0zm5nekntCjb41EbBRAy+AK+forxoiHKVVQiICR4d7QwjIXa9Au9b+DXk9gj1cA4PHDkksVkg==","signatures":[{"sig":"MEQCIFc0OiR84fpFECJ3O/dB4TRIMejZsE/F68K1Ua2bF++fAiAbY8Y2/Cp0pui0+ZKDJi2mKTxCkJ9S5BfxX5qluBfjVw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgUooVCRA9TVsSAnZWagAAek4P/RsLukNUB0Fl4KNNGHkp\n1w97fz7mpWEs5tl7Zhtud5F3wUW31T+FK6eFJ8p0ymjCWkNAGAD+Lz1zEh1u\nygzN6BYZRM+lqrABE/PmB6cCi6nM9CkKmObCSXjyNxP1898CBqmi8c88NYnx\nfW4a2uCpJPKPAoCMGa+hNdMXjjcaf7IyHpFS0tLy+5/Dr03EYSvpGsmUUun9\nGvayALWzUwK3PEqSG1n2qcub3SW/zlHFI2hFqjjXxcwLOqBgcmCCHrXbaeww\njAJcXTlB/VDYUMiTzv+1TaVcKhm1A4CREBNxmaLDbaNIoe4BrK8/nMSGOZ+j\nQQk1HvMi9d4/2PhpkLeSvW2o9I83DeI4skpw/XkUkX3pzWUUK9GH2RX9VUjh\nIKqkfpi3+kBDPjQOcDT574nPIL9/rlMbcAYjoVJTQe7Iuu6tqq6wLNeDNA2a\n5l8m3Yijyl9s16vg+AwuDNBiz3djT4KA3s9eMyxi8ADTzIcqt/6cmUhVE8Ec\njC2/FXl5cmeEzV5ftam64izRPya2GQirNOf+RMslc0HprDRITiW71i+bNhSV\nKVNnH5oKA0QXl46XygWWSl2d4QM4i4jfEHn125H8rG6gTJqUFBOU6qGC3zY2\nvNV5ddAkfco7lCaOsNh6Mfc+8qKClSUgM7Y+9576yU848j+HIuAD5H/23k2w\nf+RG\r\n=w2vR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6072ed604.0","@material/tab":"11.0.0-canary.6072ed604.0","@material/base":"11.0.0-canary.6072ed604.0","@material/animation":"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/tab-scroller_11.0.0-canary.6072ed604.0_1616022037284_0.5989757524300834","host":"s3://npm-registry-packages"}},"11.0.0-canary.d3a6862af.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d3a6862af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"84119f181ceb8ce0d11935266ff9d768cb994280","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d3a6862af.0.tgz","fileCount":52,"integrity":"sha512-ArmeJZfkzf/hKBEMEhuSKx+n2hLIumw3fgTKLJom8YGW13ZvxNHH64TFGnOBorgMK4dVuhETpsE/wDlH1qHXJg==","signatures":[{"sig":"MEUCIQC6k7mMelnL0IGQNk4E/2X2TPsNb62r6m3mDJgzvxQ4vwIgCoI7Zei7HuLtqyROqi9fTg1WS/cdOJmZut5T16g9454=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU33+CRA9TVsSAnZWagAAq8wP/2kxKrR2STwsjh8d8fpb\nvcEc6RU4xfZJ6ix1SoMpBBAKkO+627Uo4fJYOmipuD+ULNd92h63sGikA/dd\nkp235prQNQ3EpMOWhNJzD2XG4QwDFvnY46MrmVThGVbb27fZB+B98vWigcJN\nYlGuAr/nAXSypYmio0WQ/r1dNYcsay8NXZSVX02uOZnqWA3umjVH77cPscnt\nz2DEtYVHCOqIA8dAOP7C+holqCnr5+nJJuXxL6sWUGBHL5ClcUJVIHspP068\nUKC/yyEV+kLq4ZB+UIcAlus4vk+ssxsMMfRrmqN9BJVeONphNHvPvBA4ePUR\nSMzmPwJpRVxyMiRtE7FmdlWamBt0GIxRAV0797amTUJnfVnQS5dYmHhzUrGM\nduLgBFQgb1djV0ijuYybeMjwcxLyZ5JkEv4WcYQ859B+kZ5UsYheSJ8FSOFC\nBeAP6VrJksCTfJX5RuVPnDmULlZr61NXcNY2WTmDOgn7R6y+RBfqHJOFIVbZ\n4G3yKvXvxWrWLxHH7zC5P+lstferjnqbzEuaj9iS4neBVH8UVLC3b+3IyWww\nDAhTKmKgSLauYCfibRaSEk5OL1Fpcs9gOv+ZCR4WLGIP5XIYU857xHrXy+wl\nXmRgKVnvmDdJPyEPjRPQCO2geBLtc6Hmy5BRkNgWrpSQXrj1HYdmatWse69f\n/1/p\r\n=J/NP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d3a6862af.0","@material/tab":"11.0.0-canary.d3a6862af.0","@material/base":"11.0.0-canary.d3a6862af.0","@material/animation":"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/tab-scroller_11.0.0-canary.d3a6862af.0_1616084477561_0.2908221310296746","host":"s3://npm-registry-packages"}},"11.0.0-canary.40dd242d5.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.40dd242d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f72f132ee1b2970bb6321301adf7105b00be47e9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.40dd242d5.0.tgz","fileCount":52,"integrity":"sha512-Mj04UpUE0YS6NDegh4lcy8AiScRdNgRNY/+z9hss4zTx4DsCCNhLiV8Uy2472y50KEeOtfrTH1D6wA5vdibhIg==","signatures":[{"sig":"MEUCICqwRBiaZULcnKTtH0CKlthcoPh+8++W/4bt9s/fyNysAiEAs9ypZAQYJboFPCfVOPM5OW83Xmfi4b4e9/GbKdHFUwc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8OlCRA9TVsSAnZWagAAAyEP/ibd+0T0ZXkkRbPSFnie\nXktC/n/GnzXOhR9v50PzVhtdC3pcb6Vwsi8NbuqigMc3m5ExQdIHFym+XK3C\n9cJ4Fh6meQGRZIKF1H8L6auw6by6mWA0DVrjChE2EH+aY9ZEom5BY5/Nkf/z\nfBmyzkP2/2QS3QblrdQ2OsuzPOlgzUNcSkJopGrVNwI+g8JcRS94mRNc02JZ\nBNlUFeXOYrU5sncOop6bF6NLjD6omZo70w5fzv/Sp+cRi8wT9Q9wJavlMB3Y\nlR3f2MwAhbDAw4k6UnTdShe4aoC5pxbTLeso+BknKu4cFIZ5ugNFIbHrvYLY\nWJns05grbJ1FtKyy4OyEffVNNy5xlM11jFLhdmbOOS+q301I6op2CL6sVQ2v\nJCZcILEefSodqTW1pl/zOKHlQ+XVBhlhEj3HN0rD7fYHy97JtqelEi6zER5j\n8tebANcGlkCTKREZX1NB4xW1ZgcGKhy2RYV2x2G8CWK8I9T2jxh72sm9LQvV\nqcCc9oaPriMOCLSG1QaZHpdtQS42vFFktrpNwg3D58e1q1Dq7knfIdhh4dkF\n7sRiXkzN9NQ+K0yhfWKC+W6wHOB/mix+2alFyH5vcvYI4mmkLEIAQix811VC\n401GWnz7Y5vQItR3FX5B5ZyiKZH7PY9hf6f2jiXZr2pHf1lE63sCQZ+dhCnX\nutex\r\n=FCLT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.40dd242d5.0","@material/tab":"11.0.0-canary.40dd242d5.0","@material/base":"11.0.0-canary.40dd242d5.0","@material/animation":"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/tab-scroller_11.0.0-canary.40dd242d5.0_1616102309241_0.20412422680732245","host":"s3://npm-registry-packages"}},"11.0.0-canary.ec8f8465f.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.ec8f8465f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"600914cf2033e6c3e0345ef61aacb79b64246124","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.ec8f8465f.0.tgz","fileCount":52,"integrity":"sha512-un6q+0xd108WBDABBLCOYdRh1YYpnzm1+bMQpsC4yVdoVlB+1CdZiYoLDQqM1hFlV2dutvdM06FOsB8AGM4pPQ==","signatures":[{"sig":"MEUCIBqtBHpc4uZJPNDPsNsZHR9nPdV33PoSiKbzWDzm5cPCAiEA2/E9al7mCy0A7Rb6kWUOSdfDtCB8fZaHXFVZM4KdydA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU8nxCRA9TVsSAnZWagAAplkP/3v5sAwz12dJ/qiETBXS\nAM5tMqrOx9F9faOdAMqPrPgp5FVaog6Urtl+2W0HK38MpWy8l4kvptovGK5V\nwLdg+dh+Q0BeJeAvqBLExnG7P7c5LNaVk+EWQZKH1V3JeJgHssZLTKmnkDq5\nU4wCToOlD7P87WME3ha5QSgVBBiWuv9vaKYS37P9l7XLzxv+ELSTvuf0Cd2W\n92wbGiCCuj2ncLYXGyR7tg4kjFZobvm4X0zoLO7+ZeJG092Ni+5iG2M7Cabr\nrDYBh2czPyABlYZfne81fJYuGeDjxNOy5/RI5sx1iOaIMttqegxwuRWDYDkG\neMfLifsWoeioh0UgJlvsHqzcHzyE9Bqw3TOOmX88h1a0vu64fQYgkFBmbrIl\nBuwqMD+GtMY5wJxYAd3GzizU8qJE7obRsYCHt0Il4blFqO/A3usKBvAj0P2s\n33MGNdQqSgKFlu1IlLmLzG6HL+Bt/NPuVP8K0c4mn96mXtb8OkTeXqswmk9T\nHxGy4BqOyk42Xf9nqIdsr3zCdwvndSiUoydXJMqhR3BViozS3p4Jqtffi9Hg\nxFOpktwK7TJPbqviCtKmOloWAoNzC1TxIWVu8ZjRFCYpel4UYUZrvk3X6tW1\nG7CJWM52OXofCkc4nRtlpXhUB8YB0pYwIM7ar8naY2Vvw9vterGvHZy80CZt\n4WSC\r\n=YMoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ec8f8465f.0","@material/tab":"11.0.0-canary.ec8f8465f.0","@material/base":"11.0.0-canary.ec8f8465f.0","@material/animation":"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/tab-scroller_11.0.0-canary.ec8f8465f.0_1616103920665_0.11111753736668284","host":"s3://npm-registry-packages"}},"11.0.0-canary.da38969ec.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.da38969ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7dead3e775ddf0780f8d564f7dbcd21380414806","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.da38969ec.0.tgz","fileCount":52,"integrity":"sha512-cBTDSxlnaD5Ey70KYc3oAS7quFbmr7wgWYoiz763qb8Gk3y3MTN3YxFiHOpOWUz2m2N/ao2YupiK2pQdn6W9Eg==","signatures":[{"sig":"MEUCIQCPqEpOpyfAPzN7tPcobmNeHqNJ1d0kqQnuZ1otYvriawIgNjzIyO4iyJJ8UygC089my0XSytuKiNtaFiNr55Ys1DM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU9HWCRA9TVsSAnZWagAAjq4P/0GklLq0rsKT+FRE6jup\nI00yBT/pi6BDlIRG2y7uz0p4HlbSeszkg+L0Y8BU7/YgG7IdIp9AoRCOuHZ0\ncFP+2qBDn/OGXhtqHp3HTGcMMAfNzBKk3gdizbDRFJSAPhtoUxS6u4ii8N2H\nmba1UyUSQBPwJhZLiEFf7RVHkTB539PMXspTPrCbHBdI7Kf6BPyiP7hpvMfy\nKAPcTcnPeau4eWTi1aak0vk+i6CrMzLf7+WBXzmm4lAd0rSmFGbD9igXKisy\nWbVyKru1GXIyEtxxDEP4q9gGZZbu6kax0Gz3RFckYC/elNKq0GJcgDsfULEl\nmNM9wZX8fe5+MYwdF+z4mad0qG9ZgSRza4iURaJ8aRF4X8NyUL/7qPFOq4zG\nobS2XI5kc5k7ZdrbX2u1plhQqgK4qRQviFHjCo2eUqNQynjbEtHcP4XgUmsP\nvcLfc1sQakoTSOlIFpLAoxG1vx6AMu3uuBKh83NzR+pArJ3D2kSi7ugcJZXX\nvPyq5MWaz/2I0Kn3P/C6mr5fqNQBF/3iJneTlPSGHP1hw1HWepZ39pYJGNGC\nh5KFDgZIqbNLiBsz5ZAQE9zRTlD4e858t32mb25e3UqM00pHEkm/Mk9Gd4Dc\nJ/EP3FtlP6+ow/02vGT0wooMnCF05JkHENMqFqsXvKzUTBEZ27/516ODBZEh\nTWjr\r\n=okO3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.da38969ec.0","@material/tab":"11.0.0-canary.da38969ec.0","@material/base":"11.0.0-canary.da38969ec.0","@material/animation":"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/tab-scroller_11.0.0-canary.da38969ec.0_1616105942157_0.4299114418294181","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5246264d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f5246264d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6ac84a479b8e95ae89339648ac816c459dfbab23","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f5246264d.0.tgz","fileCount":52,"integrity":"sha512-Rg3YvIH3DLxE1DGApOcwkXDnRsPQaWjt+nvrNdEZVeWpSM//QtVoCV+n8jqOjDDRaknczWbZP9ADXZR60O8KZg==","signatures":[{"sig":"MEUCICQqfHeMzGIKHjj+g6jHguKwO5VgFfCnEs7l7zDdSCp3AiEA+Oyz2f2OGLWpcrVsppk2OrBNu1SsV86/2QsCigxxIpY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/LTCRA9TVsSAnZWagAAjBUP/RRCOgRPMMQB+YlHaBNl\n4l4V+06BmmNPqi/dWauTgX/8yACzz/+GFEkM99tYuaQlFBdh0PLwx77/PgV8\nB+kuoLF019fEqONYsGS+i5uFXa2UeLqoRZxxqvmnW3E1csaq91cSWlsYGPr0\nQEMVMofGfhfhZT/3U0kqewZCYXPx7Q0abS/FxLng0FuS81QM11whCom+l4Zu\nHsGkXT5iIR3CL63DgWOcjIlvHWNCC7ggp68++do+cOqsdnlfDie9U2UF0Usd\nwjbAmEtMhQuCOAbAcTrGlesGMZ28VBQS86wUDM1am7wv/8MKDufKBp/Ox5in\n6enlmC8uklTz6eM14VFffmuOxY+PRESMZ+nQWRARtOQUhVBXGZdycDIxegmh\nNXYBmN6COXePSXgyTq7f77qGhCn1GyvxODNvFsISMeOHJ/25biOom5A3EeqZ\nju3DWBaVhx7GxHswvq06ypP9ly4jimqCoC2Y9XWr4PH6+IBn9BNH2eQAfguE\nBCGFpd+hvyerPs/TpTomxtcusIiD0/SQ+TNp2t87eUbVceziLmWhCf4BHTLg\nB+S3C0Gr24h8upb+a2O/EbDKMj2VyV6lPsLLgH7QtowLO8Cq9cuFYexVcFsa\n9SDoMcY39W9UA5mXQNMMKn37u8y2y5mlXcLWpzikbcCzaaj1W7AJuk9pgndR\n6SkS\r\n=m0Qi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5246264d.0","@material/tab":"11.0.0-canary.f5246264d.0","@material/base":"11.0.0-canary.f5246264d.0","@material/animation":"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/tab-scroller_11.0.0-canary.f5246264d.0_1616114386641_0.11026637441134146","host":"s3://npm-registry-packages"}},"11.0.0-canary.03d34bbad.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.03d34bbad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6164d4f55e9df6eee7d9683097ad4474c9ce04dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.03d34bbad.0.tgz","fileCount":52,"integrity":"sha512-J91sJQ27wdsp8IrqG2sTLtK6/kGOClHdfDjF4HPei82Q5EiaKdLlqoSA1sVKPVpkB5goSr55LB3HHUyZXBpNpQ==","signatures":[{"sig":"MEUCIQC1LB207m8m+PyjEoS79r7BdtQ38/mmCbfdU2ebljy+/QIgZNaJf8YEevefCUiq+ZrQJ7C2WRD5fVO1gUR8gxfqCnM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/XSCRA9TVsSAnZWagAAOeMP/2qP7irRwREBtr4T1+HM\nQfsUPXBz92vlcn4v9eoReRHTHLxgG59zjTm9K8YOyznpm+n9s3X2/H19OSMa\nueQWZPnVUgz/dA1momgzPIWl14LAvTQSiDuJMA8/Xp11oZJZIb3jHY4tQD7y\nGyHYrcAQd03GpMVpIjwtDMkQC1ZmzpJz8pyN+V3sB+BUHcz7rcxD3oB3S20j\n6azbGc8qx6R7bp8of0lGOgoYWqzDLGkfgjl6AawtHmcC4drx2RohRcXHpCh7\n0XhDzwwY0Eb0uPqncDoRZhR57gO8XWRiZdJB2arFI7REb91mGjobe3zs9m5h\nwyKsnRehg17vcGDfJ+OxtXC4+K/lZGP47EcWx5CvyAybijQo/2VaPrVu46nc\nk9b0W2BkgBKH8teI4BanR53b0ev+qwiWi3dnOG7IBuadrs4+M2Eqy5omKZrg\nZVijl4nfXoF/91gA14KLZTigdD4I5KH4zaFpxN9XJmSSoMY8Ce2JP0BkfLIq\nEo9D7PW8S4o2d71HASXljqRApruAy61tEqenML2H2eO3tUXwZuPFZMD3I19z\nDuLP3OtWs+9AA3/yTCJyYOoBbpfy/t2ZCU7b3yE7DjEAG2Q/CQEXQ9kfxMpq\nWBElNbe2an7VPkbK4DOQtc8y4j3Kh0PZnSGlvTGTkDFelDJugzNbqRLWebdy\nmc2t\r\n=T+Ks\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.03d34bbad.0","@material/tab":"11.0.0-canary.03d34bbad.0","@material/base":"11.0.0-canary.03d34bbad.0","@material/animation":"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/tab-scroller_11.0.0-canary.03d34bbad.0_1616115154275_0.40662215345188546","host":"s3://npm-registry-packages"}},"11.0.0-canary.cbc57c600.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.cbc57c600.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6e7210c6d6541303fcaaf6da434ffb430d11e022","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.cbc57c600.0.tgz","fileCount":52,"integrity":"sha512-rxR2WQXcDYVj/1NFVV3+VECGGbl7oopPdflFu3arEjc3ynmZfEbrr94dvOJ19GIdxCE9pgFb/U6vH9JxXvUoNA==","signatures":[{"sig":"MEUCIEqz10OIqRsekC+BVm2MMjummBVjFJPAKyySLd4vTC2jAiEAnpk9qzuJYzAOTEk8SwMlbm2cPBbBEAQ9tdn5fTTQqJU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/fDCRA9TVsSAnZWagAApDwP/1T2cID6GzGYd2pQMXBV\n5IBESAjKzl0YJklg88IgNDfUZWGzFFW86vdnI8lfDgZ0r1uQ/mRDnVT7mV21\n8xQ8Eufyx0phw6Qm7037XcvvCkGweSdUtFrMpw1zcMIY1ONl+7siW/uli12R\nm7WKrp0DGCq+TetlLXbo5pEpo1DMuWe/2N/bK6XGtwaopMioIY51qBGQYHaJ\nkwiVd5mKPNNzcJkI6bqXRzeMxFTbJLsJ8OIFqcPERI1PKlyKeL2u/RADNq3D\nHNWczwBKwhQTtThWZ/J8mO4SNJLEXDEvi1WyT4O+mkO08hob/olYmflNKFrf\n+w9dAl9AKpDzrI7CktZqVKjovZq3/1V4kwRDgBoFaxlAnK2TXGsbDW4MlA3M\n02Oq5biVSDcyLqxgptoxOL4VwLFsYGZbZckv88wb3gt7Bp4frtZGUCSoOlMs\nGnFEJblGLKRrvgyfPDUgBFWgk439G7v2N2rMlrxfvq1M9PP/naMyEvcfnz+c\nKGE0yL8Bsisae//P8ufIh2NRTbYQCVoByXcNEpnfw5eUvqlkhz7pUoaRpRxI\nHd+CJXqFbLc1Gr1/SZLJas5tB32tCB2M5wkzPkgqXch98L2SKMX32NJj+3Vj\nVZXp1Hj+3j+Tm5iJ6++k2uNBwNVDdGODcM1ggXnvoLb+DmpzBIbTKQh28nAW\ngbNx\r\n=djUJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.cbc57c600.0","@material/tab":"11.0.0-canary.cbc57c600.0","@material/base":"11.0.0-canary.cbc57c600.0","@material/animation":"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/tab-scroller_11.0.0-canary.cbc57c600.0_1616115650899_0.7854889646060943","host":"s3://npm-registry-packages"}},"11.0.0-canary.d6c5bcf37.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.d6c5bcf37.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"24d68eb0e4de19940387b01dc2c369759f03c41a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.d6c5bcf37.0.tgz","fileCount":52,"integrity":"sha512-dIIU6U9+MiLsBM1CklAGg9grAoPoUORTx8UW2XBabBYpan92tw2k1tdQYnIfoohc1pOe9KszYeIMNP8yRamrXw==","signatures":[{"sig":"MEUCIQCKGLqKj5WH/shXtrifUIuNophQ1Dl14aHu6K6hFio0TgIgWL2JaFg8K/mHx7xvDb+n8SPQFDGvYde7CgsXpoyv8+s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU/rRCRA9TVsSAnZWagAAqeQP/21Bzotepe5jtElH3w27\n0uQLkHnJBekSbmzOM+9xnKsuxoWsBRyTy6CoEqdfPfcdOiFIComqPLXgUGaj\nHAWvINq5VjPluUeyWkpyzr9+1Qqt0y95Gm2X2NTb6BAf9Ayy457Lq5LetelZ\n/7u17ieGmpcTuJY/HfICqSM2K6sjpnIg2D7qBIYYvPF5fFV0sNi71ek1NkpW\n359Ni1QifPY2b7skHKQlfDBte5jWKXPKTbJImmU66EhSaCGGTI1doNsBoeJ7\nEuy5GMccqIBuf7MLvNmqr7SyIG0nqweJDXOzonGmZGMk2nzGpHs0/nZe6zLe\nc7loX0U4oFY5x23aumi/ttp0tkrMZ0TjV9FP311szUleTlGVFMZiyM/+iuO9\n11pLQyc2w5RohOO7w+pakl3MNN/idnKcWAp4gQVlMx095cjryFgnRSRA65n+\n/f1qj7ankyvkhrVMY9OdvKpuGVZ42kr+CyDxt34ekwuEbJVcKyNjtVcyIGdd\nw3/d8cg/p6Hf1p/JKULzW2TKveAolnwkDaQTUlWMlO1hOzcV5oYnBYkdnmaR\nHcKrKhEKkEAhyVezn27gVi9d/FqmjTGg5S0cYfANkC3zgZG3nJtHFHSLaZTS\nPWU+4Sw/Wi/HiTVHHe6lLpxyH4dp7hUjVikXfsB07VonYmSyUFv57Ak3k4lX\n/N1Q\r\n=EIJd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.d6c5bcf37.0","@material/tab":"11.0.0-canary.d6c5bcf37.0","@material/base":"11.0.0-canary.d6c5bcf37.0","@material/animation":"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/tab-scroller_11.0.0-canary.d6c5bcf37.0_1616116432483_0.2147464995262145","host":"s3://npm-registry-packages"}},"11.0.0-canary.fefc668d7.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.fefc668d7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d3844cbf803d6313e6e4a4ce57ac2343b4e632d1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.fefc668d7.0.tgz","fileCount":52,"integrity":"sha512-8WFcOH839hKRfyy4pzTplFcJPTQ2HXoi0ubw7FmZqWb+3uzrSqgLbQYVwjDvvOgi6tvb1ww7MmECkq3fDoCpBQ==","signatures":[{"sig":"MEYCIQClKMKefQ7reyBY8iSX3utYbJ9y9WgJizweI1ACuv//CwIhAJ/ukw4Oe58ZwwLxblPr4W01fbbPdBLnNG+KoHqRfUhB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgU//MCRA9TVsSAnZWagAADU0QAJSOKzxvkx4O2lGszi62\nH5jc+cd9SBnAHwihJNbNtlTD3Oa340knK1V8318lEXajq7CC/c7DCqT++X+l\nwQAUded8aGhL4mFqIpK2urWpojczNgB/DNnRf+rL7rkCxmOVO6js70WWtgxL\nWSMpKVnZOi6emwJBjnleMSCaxIJDUv4ICL8+/CuedQ3Zp76vzm+RiYhCTpks\nMeY+sK74fqUe104qRolnooaCbtgHzVemKXIo4swy8zRg5OTJ8nfBI9W0srCg\nYN+NcowJfEdkeK2XQ9BYQtQgqCJjYGqIfEGPJc6X3iHBN9il5OK46P7xYtDm\nZP2zD7Ov+2N8DKIxGjdGQqhDjtmY6gdS0AH1cBEntuDWLMzwOOlt7F0+lzNC\nqWxFcyeGhPnH0HD+iKn5jwgtWEdxDIlAuqdhqZ0TLoxlbmKrchN3k2eZN/EC\nSVadrVbKPdKXTVJ7Q3zkp0fPJcIg899yriOlJ9x2fSBCz/nAIuik4z9URkwo\n72QxxNQLZ/TPIn/0RPiC9cKF4WhQfeCKSpDShvYtZ3rkeyqrhgYmTV4nHkHM\nsEAo8KSVgSqikCAWcBGbSz3E8+E2Ggdb4QsZgvfRKh7HDD46HjdsqCZs+osp\nWrmta7dEPNoZ1afrxHzLFfm+9rYI5g5k21eMD3KDaNlDscFTe2sTw1m7uR9n\nuJkz\r\n=OUfm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.fefc668d7.0","@material/tab":"11.0.0-canary.fefc668d7.0","@material/base":"11.0.0-canary.fefc668d7.0","@material/animation":"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/tab-scroller_11.0.0-canary.fefc668d7.0_1616117708021_0.876878349229544","host":"s3://npm-registry-packages"}},"11.0.0-canary.faa7d3226.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.faa7d3226.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dd85cfdcfb49dc0e1e97c45862500f777103b9d5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.faa7d3226.0.tgz","fileCount":52,"integrity":"sha512-tW3gAq4gtcLK50+aztI2xtcQnUUw075TYdW6W1nPsgbClE6j5nCunkky/MytNRhpXEcWF64weoh9vV5qe5uQNA==","signatures":[{"sig":"MEQCICS+hjiJkmkZO3zA1spvqwu5XsDKpeJYQKvmY8wM+KgSAiAZEk07UJZwJHYA9e0vHZF4nOhTz8eKC+VrtBJ69wARgA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOM0CRA9TVsSAnZWagAA50gQAIeq4hLF7KIn3GvsUtJW\nVcFKEkwQD7gBMiu1h4Ti3za6fICMtECFRx/Y6S/H/ktF+L5w//wPYFztFLnC\nDwgSoAeMdhnrmfr5lD7e4tPRtwzBLQ67v6/aNML6a1HGkzUUhcc39O2SnZwN\nPUr2gKjdzMKApDxU56aVyNEniso7+OTOUi4AaM55hvBCIOPH0/7AE7Ulw0sh\no1PfCYFwIH+ErL+OTaM53n+zrv5lA8axLTVnFrJlBd8pT1qiqyd6KW+RA+75\nrph53kPXgWNMHfZBubqo8wxQpmE/PAwooqsQaiMMKAZEub31P63b41DL6Pel\nouNAJlBshVmJfC8yLLvo46Tae2Ltm8xvOrGBxBjJ1HRcLFjkSh7Ew9vp3oS2\ng9M7NNKkCukwamNPX0DTzAOx3peyOMYqbray2ZS4ErlP2PhaTLBlDYVKv+Ka\n1fM+bDsj/iwIyz/PoKqLv1xPgi8Gd2M7nwjwyfXbJqQDdsrUIpNDA8xdnBYL\nvKgB0kGl5H0d88T1qnHSSA8V5wyGRg4uD25mLBwS4NjqR5pQ6LlcgWW1DVZk\nl7UVCs7tXaKXe+xkNuSaFJPhxs1iHSPl8ag/xArRJ/Mkn938bEHzUxNAP0EL\ngM3kZsT/qeQaclePH5bAQmq5MH3bXjOOkmOQsvfYeFSfdItm/xAhKH6z8hHM\n510I\r\n=6G4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.faa7d3226.0","@material/tab":"11.0.0-canary.faa7d3226.0","@material/base":"11.0.0-canary.faa7d3226.0","@material/animation":"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/tab-scroller_11.0.0-canary.faa7d3226.0_1616175923477_0.5609439959703915","host":"s3://npm-registry-packages"}},"11.0.0-canary.c60449bc8.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.c60449bc8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9329198ecfea5a7efb7a004318e16853ed8d280e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.c60449bc8.0.tgz","fileCount":52,"integrity":"sha512-2G+AUwjzSMOf/K16JnuA3yka2wBEgVSQl+6fWRx7Ntb7ie3A9o22SVWhGl5G4cVoldDTxEvOii8U9BKFIlHL7w==","signatures":[{"sig":"MEQCIG2gAdPKHcV+6iX9PSPS+Ezmwz44SIYiclTSnBn1d2AgAiAytUlK9HvpKc5s1U1jtORFfL3G84OLNQQxCNFeZP4nAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVOgbCRA9TVsSAnZWagAAVGUP/jU1nps2z23MrwkSdyE/\n/Y0QswJceOu5COe9A4q1vvVZIc6d76SxEBnOIK11ohVfX4WfRrPy4f4qfksR\nTn9PCaO8PgfetuSwhSh1tNFIQqZd14wOJ4tchVRIY8rOntnoc5VYbc+mbpRi\nsIuHD/mVmmoObhl+aEu02DdbnPxkCozgsVYb0rmc2eN1ZkJ0RogUn8xyCcJn\nQT985DnDq/uh1tB6QWtUb4WqIMwwSm1pAiqZ251/Hz/FT26igZ4zUyZBPmBY\ntyLZjjArdUMzCTHHv7PcT3eQ004gPpYJIZEp2dvEAcGb5Tz8RLgD1rDVZ7OY\nLj5pF2W1ro9N4Di30FJn1grVcGlIC3RBdYhtrQR/w4FyEROW0kmSzSk5UBVK\nCR7DPeO2HmpDT9WOkeB5jJvVA70b7HnVyhkAJb4AnRjzMQifi3vgiJiGniO8\niT2rlEK0xsGhI/dTDPpuZc4Buy+g6DW2kP1UKO+RZ/iKILhTwitQL9V3L2lr\nbwkXFn8s4QOE1XBbZJ3hWHvIoRaMHoXIqbFCBMXYzt7Us8yGZwW6FQ2VzhnO\nJrcT0oGJVgWPWUjscXnjKH1i6E+mkMp8PPfrBvCvzdHpryC4+suU71dllWwr\no62wglpCmOpumpi7q9GGx9KFE/gpcppCeM/LFQYgJDrxx9FkFp0FLvLFwb1o\nUfoD\r\n=aycE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c60449bc8.0","@material/tab":"11.0.0-canary.c60449bc8.0","@material/base":"11.0.0-canary.c60449bc8.0","@material/animation":"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/tab-scroller_11.0.0-canary.c60449bc8.0_1616177178219_0.5550706722778502","host":"s3://npm-registry-packages"}},"11.0.0-canary.5f0fc444a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.5f0fc444a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3ed638a699200433e9cc6b00eb2bb8519bbdafa1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.5f0fc444a.0.tgz","fileCount":52,"integrity":"sha512-hhAZjtPA0/gmpZH0Ob0QoZjBNL+Z4/yufKoZMcvruW9OIbEwnIbz+L736RiO6MaXK0nsaLTnbIr/+rZ08Ub9Pw==","signatures":[{"sig":"MEUCIBKcbrOo0VyAUCpE+ko6SfKZXpLSraAiBJsJs/VwBGq5AiEAvI8NnQg+wgX46GxgXLRlOMaIJYkBwbIJ94I1m9/oGkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVO+5CRA9TVsSAnZWagAAXxAQAIj4mdGd/B6LKjI5SdpX\nFQUBZ6dDjtpR8gYQ5b99Q29z8m1mWSCpRoIcqNZopdWOlSJN0WrLf4e05I0f\n2hMeRMbQczW4CorqIMCF8c95dV0dI+gcfG5EaxUZ5vCIByXlJQFJ56w8dgAb\njtKu7KX/4WDb5ssUOUq4VFLOeU3mnSXafsgIXkC2WrIXRYqUJp1Lu0UuZRy3\nNSuUSN7NK12wYclanwR7ygtOR0jrEuq9d+ODKSmCXKtl6kXMtTMD6R+0YgHa\nVx2fftRdi5CvctNB4+gMdMsQpvqI+SKsRKrhZgTewj2jJse0TzdMCmDcycvP\nwLJCpFaz5hMBFAFbIVIJPr2/0N2qI6eq7Js2ykYzCpDw2IneFK30SfezNmko\nBoqxyUoO607ZXKCtUOP9E52yu7FTI41357zR/og3LtaUxwxdLlsheT/yHCkk\n6rCvkrZrer2U5ddC91xjVBdrFyVKHYhYptMSDL2MOF1/nDuhd5JHBZOLcWDA\n43BuhugXaZ4G+sD2xAmdlImGQ1FqiWDOw+iaYDNUcf/uMsZfYxp3l/H5W9HO\n+ptOg7cXiVxLLnm3lS8u7U8ru0+eCdjiPR9A4GZXSv0++nJo3brn/VyVRW5G\n8DnF/VGO0HC6yXNcGEjwitlQ0k/lzetYei7/VIHLjiixNFVgIGuZeGYPWpaY\nKHFI\r\n=7KL4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.5f0fc444a.0","@material/tab":"11.0.0-canary.5f0fc444a.0","@material/base":"11.0.0-canary.5f0fc444a.0","@material/animation":"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/tab-scroller_11.0.0-canary.5f0fc444a.0_1616179128970_0.5454085434956366","host":"s3://npm-registry-packages"}},"11.0.0-canary.4567a750d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.4567a750d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e5f8db41b849df0b4919970b7a9bce4c21975ea3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.4567a750d.0.tgz","fileCount":52,"integrity":"sha512-DFOlRVqwaMKdo1tC3Zs1ILHlk0hqiTT6YXfrzgfDmLN7i7lw7xnJMvNUMg6gd/TWN1PUFI+XrAnGXe9qEpOdNQ==","signatures":[{"sig":"MEUCIGDHEzUDgs8tYHRZwt92/KSttvIKh+frwYRKT0LA9cCiAiEAvKNIw5m6Sij+7i9618uupKgGcCEQz/v490aXh031kAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgVVlBCRA9TVsSAnZWagAA20wQAIGMQVRydOa0kbqhi6Y5\n6ZjOJQz1E68k3oCggZwwfmPRUK9Ue54mztucqS0rMAVmq98QP56rb9BgO2wF\n7PnESABMq4+RoFhmdYsLq/gmGVkfojwBQSsVuZVNkRb0M2dGup7veB9ir9v8\nufAPeq/21ftZ7EykrSKoWmXUDe7Zx+SKfQtFPSp9qtl9OHjshYZM9OPtzN+J\nIOkiXudxzqQQqPxmRmAX/39SG6+F7Vor5mh4IXv+ax0xQj6RutDoZOaCbFfd\niQffb3fIjA/LlOM6mdJD5SA6O+lT5wkQMiKFtfAA9Nj8ByjBYsPcYSKgrVj4\ngPlC4P7VsrpVXB1UQgm8UJJ31ntJvfSDnPRioVjI1JGY2klk2gx82JSmRVOP\n2n8x6R37uxqnm/UJDzDm2xBUBVX1fa/ugM+oAcaIQVkJHz6RJrfr42/gyOfw\nDCWzgWxb6vjgE9tjuz/FEpn+SbjjibSPyrwdfN0BK2Z/MniBOpSR+4NwP3NS\nVQVcI+S2REZEG2RUD6n9mZy7UC2rKV3JzgTIKxMH8LRQCauQAJWaV6xhy3vw\n0p79vDAwGMpO30H2Z6519afY3b2otHaGr5guMxjCfqoXDGXljlSRhXvk/6T6\nwDijt++e8Yh5OzHL0k7R7wAdWjAGKkvB3XRMqTv+nj6XCE7rzpddH3ydxRw/\nd6Gq\r\n=ud+Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4567a750d.0","@material/tab":"11.0.0-canary.4567a750d.0","@material/base":"11.0.0-canary.4567a750d.0","@material/animation":"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/tab-scroller_11.0.0-canary.4567a750d.0_1616206144739_0.6783479345054395","host":"s3://npm-registry-packages"}},"11.0.0-canary.0cde52f5a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0cde52f5a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d2a5fd7bbaa1e132ad9ac26a55f4915879b53333","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0cde52f5a.0.tgz","fileCount":52,"integrity":"sha512-Q8uvLOV0PB4YF3UeRnRA39bKOMMv2unYmYuBpwlcBb5EUq3tHQ4sjPonjbfuAjdVxYMOBee7klF6dwhZtmSYLw==","signatures":[{"sig":"MEYCIQDkJWw/7OOYoFghfpZuXncT9ioCwx9SgdLk8aV2Jv49dwIhAKr7R569JpsqrXVnn8bGzzOIeET6dM5H2lzjzbaOltld","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWTBzCRA9TVsSAnZWagAAOrQP/3sEfr+NOgx71mTr0d+X\nIwUy2xbh2/jwvjhRL4N9bqQKyhP4fHFuZVahhLPfY7MODxD+wXZWhQfaJtra\nFY1FurydHDVuenci0/pV955QLy8kpNB1qcB0QG+OpmR7fRRfyZvKc73KR9JN\ntg70Plwn0cy/Wiyafz+cXiT2lpxuMb6SQYgBJTvoaCNdtInol5q6GUHwV3BE\nyCKWIbMXSvVc+pBJpFLhcFqahLSz2JJvZX8uJpmMC2mR4kMCqnRlx809Ad8k\n1HD5Aie9r+dEc9PQdcApPBu4bFvp/F55loZw2Sfta9mUs6So5T8gnaA+exNC\neaxuyXrjl6pVedUe9bMwdxbC6cwX+srgFlcYErELMhh9fi8AL0L1eIpowrYo\neTnISXU0KmVSwuFI1OGClk1Qjnjr70MxuN3GGAdCD/t2XppigR1boNzkaTmO\n/lp1LUhcg+roy5lNwhQhZ7vtyP671IasDQCf2eaIXLoa4b14uqR7CW4oBS+d\nWIX8FS7J+SG5qx02u+2P/S7Y9J4C0WWjO1OZY9NDSUit635fGEJXl5O9W79x\n53bISQv5099+h6PaAYIx5sB4n9LRQCpSXlvRmTLb5bNFLshdcTCHZg+1+3oM\nqmD5famIHxjDTK1xY6TwaM+vRQ92hu1635E2djaagEEkfEVOLLm4W+P8LxiK\nRu1M\r\n=D3lX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0cde52f5a.0","@material/tab":"11.0.0-canary.0cde52f5a.0","@material/base":"11.0.0-canary.0cde52f5a.0","@material/animation":"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/tab-scroller_11.0.0-canary.0cde52f5a.0_1616457843209_0.1435324353805707","host":"s3://npm-registry-packages"}},"11.0.0-canary.48f4b67fb.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.48f4b67fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"925df4510449c09d3a0f53369ef952c9211a34b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.48f4b67fb.0.tgz","fileCount":52,"integrity":"sha512-+f+SUVtjF/QgT08UVqhAi6e6IeVJHwG3ESlO0EmTsxvfkAhgQCHXalwLqLRmXuAvf47UCg1oqPDALoLzbeU6WA==","signatures":[{"sig":"MEQCICP0ifBikP/OQL+a0GVjf9WML6QqB+uxjRrWB/9pDkMeAiBSveaUiHHIhFT8YRgmhUQtd4LwfUmlvye7yOFFKJEiZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWke3CRA9TVsSAnZWagAAFw8QAItL3IH3ysOovN9PJG5L\n4FTfBCSxUDduoaCSNzyD8QJLn/Vsq/if1ETB4hKxd8SayVcnPI1i0HTdR1aK\nWLXaNbHs0TXiIFRsJDJNL5u9pDdnmON+8Y/q1iZCmxgrUkIsAL03upfJWZ7i\nbqvtMZHyowLTbmryeiYHryyQ73M48kLcCozNoGPAfahUdF8Ncwaw4POkpD21\nIqQyt8ahi4EE/w/VyZFtE3AYdoZcBvRTwhGi6rGVUTlgTZaFGkVqOUzJkbHQ\nXXREIXsitZDlGbqfucLu3mbr5Z6L1bXfQKAHNNNgmZmQRO0huS8CrKn5j+1f\n9Hss87LHds9feeTOaiakk72tSm115mJrMO0kk84PiNg4Dq4bRiizrh5/8QsU\n9sKvb+pBqXJ1bcphV9XJHIt4k0P+Kuu1PEGs0n8dFg76bN73YkvINDRX+gE1\nZREQgQjdzuExX6ngsa/W+kNEDHozShpCAy7o6HWu4OcP02isvY7MBosZimIl\n9MUi7CvbEjEHn46E7JvptBn1iJpc2biU+jAx+VhVowqQueHsSokvB49dSmmc\n5D2Jgwp2WFql5CEaL3vrxZJz4h8e3MRbU7wV2CfGaDvVXMWjqbPq0Y6b5Lsi\npVhDedluzfdflkt8Hm1PBCsNDDag74ZQs5LsQH5OR9di5MLcshZZvtQULm5K\nmk/B\r\n=+tu1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.48f4b67fb.0","@material/tab":"11.0.0-canary.48f4b67fb.0","@material/base":"11.0.0-canary.48f4b67fb.0","@material/animation":"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/tab-scroller_11.0.0-canary.48f4b67fb.0_1616529334881_0.005190154274710146","host":"s3://npm-registry-packages"}},"11.0.0-canary.0b8cff734.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0b8cff734.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2755ba66a5c9f0e37ec936f7ea5d75c54303cea8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0b8cff734.0.tgz","fileCount":52,"integrity":"sha512-83gK/PujA2p6A7VLjTrZKoX9DX3zrMrVcR38AZoXQYm2oPsEsCiG3HCOulFuWnNW/46CfrQQw4JAtXuA/P/N8w==","signatures":[{"sig":"MEQCIFeMwNsJJBWhdPhp+9XqVkfjZYzjyb+pIOlW9hUzIB+aAiBv33BSxPxfrrTYiAYkLi+PPfhKuXZPo5iJyWNJfsvG7g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWkocCRA9TVsSAnZWagAAzHAQAJRVX22oI6TfsPi52qFS\nILoPwv5S+0wF1Hab3ok7s0fRp8tCSCKTKjhfT6plzfYHLeK2oMlnb2ebuc0c\na4eW5bXExYMCN2wUfjCKU8ENR/QT6KNPRwm94lkH1+BvCeyoi02XqEjUsYp2\ncDnBrH09YcskmjRl0sO4E23OJL4ULx85e7aZGLf9NxKWB72ahsvV7DSCHT03\nCz7JUq2UmnnZClwXreFKO8x1p8SaImpN2uw0Hj4XOXbNGQLfpGtWtEmfbSfe\ndYsnEkfdGbmkBLtNr5e7EepS63bbOdbCOkRimZrxKh2b/ijzdinez9FftHJa\nPBuMIvlPp9KKcc2dwXQaYlF5sNx5j/rfrMnKsl3Tf8O7sd0BI12Azd23WWuv\nQjvhj8/2m/sRx/5qtX7sqbo/lLaUrHETnZw9ZOn8SMFJV39Z/Wahg/qv4TPV\nb6qUvwoVf8gzBS8gQZnKQe94HJtZ+3K6kDr+h0L3UrM0TPrXtFCfwzjcEONK\nrwCydMur0Vk3glF/25Ky14qfAemubKDBBOYjFSG2Ly6sd8dxgLYCtPOAwZCN\nRQWSRaz0D823bq+HU/MhO/z8hBd1All+RYNtAl68+0EECvUFkCiRz3FmHOjc\nbpIDRpBBVVxnamDwEGv6FzKeZSe8RjdK3aifWauvTkOHmaapNAETzqyQkoGE\nE6iy\r\n=1jBb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0b8cff734.0","@material/tab":"11.0.0-canary.0b8cff734.0","@material/base":"11.0.0-canary.0b8cff734.0","@material/animation":"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/tab-scroller_11.0.0-canary.0b8cff734.0_1616529948312_0.14628965138999628","host":"s3://npm-registry-packages"}},"11.0.0-canary.8943b991f.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.8943b991f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b6fc91c27b6c0f6ae2401b8c9de41ef3be42899a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.8943b991f.0.tgz","fileCount":52,"integrity":"sha512-69VAhMLbMj9w6bl8drrk9kOGoj28KdbbKFKTbjjZqmOCQHz7FyknYSNb/T2SbEnZYQuXVyYH+XnbWhKWcgUHmQ==","signatures":[{"sig":"MEUCIQDUqtvRXmyjbB2aBoa/TEaLclOLm3pzcz42ZAbrL7ib3QIgBuIlR5kRIOCsmrNSPlnU2Bdxn7BvUd7yWaaPE8SbLuA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgWk/4CRA9TVsSAnZWagAAiR0QAI0U2sQWXyf/j+FJ3FE3\nRfKsuYteoG3OMDCrAMAcYMjPRbxSSa8cK5MSD/KTDC8ici96kvXGaZSYpOpU\najkPORrISYn0oCj5ijwvMPOBObnxG3OSosfs9QH6Dg5JGzgmzMMRDZ27yiNg\npJ9Q8+vMc0aj9yhU0rIfSNeo4fEknRbKcXNDQkSj1iPnDCCMJ672Bpt/FIWz\n60aRivR0p/jodvw9N8TSNWbAyhPCPd7TuQj1zsUvHBmWOyRWCRTzgoZiOl0M\nKbBh6CCpa0ceMub5LSuAlQEVY/8cIbEnHTiSMXwTfaEbZORTH7xy82l4AzDL\nPGdYoTYeQZZRIXcxLmlYNt4DV1p5akRDn65LeudS2z3mCx9oYk2YndkQtiWH\nbg21HMdk2MGfYRW3jbX/EWI06DKk5Eod+H1VEqz1r73hDhhyH4zFcU/LiBp/\nz9XOtRAV+YdvHVfKBW1zVHYqsWEir+12dIgMf1F3G5i7jCrkU2YdfTrkVMnN\nD5gjhtvF5+aPNElEHgyBkquFS2QrkJEsvIc4TnFSZ4vwG6dM9z85kVHXmRUU\ndk0243B9bboDNiF4Jj6ye9bfkvwW5ilwOhrtwVmaaB7cWjVbms8dFLtJ2vHb\nihRQvOzndQrLupHI0Vx3DMC4fliF3XaQaRf/IxkLRCL733/NHm8uKeMEOT2b\n1Txs\r\n=rR85\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8943b991f.0","@material/tab":"11.0.0-canary.8943b991f.0","@material/base":"11.0.0-canary.8943b991f.0","@material/animation":"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/tab-scroller_11.0.0-canary.8943b991f.0_1616531447846_0.26250827128739584","host":"s3://npm-registry-packages"}},"11.0.0-canary.3955d8d3d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.3955d8d3d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d898ebb2b9a15dfdcac3c15a901f007999e09d4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.3955d8d3d.0.tgz","fileCount":52,"integrity":"sha512-S0SkTBmwfkxc6ZCN2vmOO3ohNQwrLbmpI227ytY/N4G2VT4PmfeCOvoMZh3NusyWWY8qs4FAMO/uj0t+qgukSA==","signatures":[{"sig":"MEYCIQCO5ef2KI7VoPMEGLoFFlhJ1aBLlIifrtXUIkpLUfhhRwIhANUDiB6Z9cmRsj5+ytgVxbHeH5fwoFC51wGOiyTppKjC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgW5BcCRA9TVsSAnZWagAADIgP/0pZK5P14lf0o1QgQ4Tx\nh+4cfebibz9Ivs2VXdjkpw/B2b/gAer1pyRfzgeA7LexcyT8aYAaniC6e1Dt\nK48gCkhE7ivH3AJtAWIb/csd4YKrYO+B/98UxMU0O0dZM6onDC6ikjteiI/Y\ndHAtGhZrFEZdc0eu5ZJVvHUxDTlEm6+oVOnixeA6jF7qTJz8pNOzHcbQlgCi\nCDrApIa03M3uFcIMMAM2dFRNmm9dABS/qiyK5/u3nmKQ2ObvIfBpNXg3R202\noKxHCf+hVE3f0Aztqm/6aWtwb2zZ3uk67FKmrv1Ql+3JZumTkG88FmHg9PTH\n64INkym6ttIlcGde5oaF4GX95wVS4Ll6hPfkGsAP6+eOdECxNjSRBAQRj4Y6\n5iJ0hbmhNIDwFWMgBt8ZZhLo93UMd3TGhd1Omc9ulrpQKS/UaYqYADX20KNS\nef6XlvaBSjkHtd42+0CQHYKj4SJAyUDgCt0KdgtNWrbj24zNegNGlVXlNEwL\nHqIwWfGg0GoZJYToJjC0Jgzkkpl0U/sny01nHXIbv9E+27g6DCBaW+mrTq5I\nDCmsmIin8/im6gfeM4Xi7hfyxLhW+/qiwf2iDQrzH75kPqw28qdRULeF78Du\nS8fwdD18hpyb/eiFbFfDYBfl/0RonxfPocejAIgbdFp8MIuK+wVOWjOoS7tj\naF/n\r\n=YEXh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3955d8d3d.0","@material/tab":"11.0.0-canary.3955d8d3d.0","@material/base":"11.0.0-canary.3955d8d3d.0","@material/animation":"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/tab-scroller_11.0.0-canary.3955d8d3d.0_1616613467734_0.4756777559062151","host":"s3://npm-registry-packages"}},"11.0.0-canary.23ea2d85e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.23ea2d85e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"62a9530d37b3e9c32762eca7f68e55e4475254ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.23ea2d85e.0.tgz","fileCount":52,"integrity":"sha512-Wr5OnYakTbFobR/ZOUMPNV1Tgzf1mxKL57Q2Uesi4XewGvfHqP1yYZdfN61XRmSXFzzcnuoOGa+2EE+YxNgQ0Q==","signatures":[{"sig":"MEQCIHeLvCj5YHOwYkBVPdyYchJnKBJWD6/zmSuDavSjYFkiAiBz3GgeWCzSIvj/Z/B9yYKF/VxE+dtFhrkHe00fGJUFQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338800,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXMmJCRA9TVsSAnZWagAAAHYP/j5yxpULAKqISvmnsg0A\n/xhINnnu6wc/yHHh/zddfAviB/1IR1BMgvq92icAf4MklbzFb9sT6yWzrVbW\n7nn5YcYz/rLisO83Akv5jdGUealiYbvSRdxUfRKWRGyMznRnvmM6v1GbmMis\n9x1PDRtq9CkL2/dg/umZvhs6o7LKVkP3UT4nGF5WdMB+fblUTEno+acr7o08\n/1/fA6T0RojcVrdgLQtmc5yZasO/NAp+S9vAH8f2kq6+HdL9eluNfVNV48qx\nk3ozCRe3rW4Cr2kISaLdDf1Ra3MrKxex3jq4Q9fe2GwnuA91ASSloA89pejF\n4kt1KmsAc/AibrNgflnbKHnIb3QjsVQNch37+ujb7lNlrddbJ4iIwu6wSp0O\nGA9qiJXk7DlEzK+IVWPzE+85XT2hs5ip7f/U+6UsULf4dv5pjGRJVZ97rB1b\ns8CnwVVY04LdAXDV7U0hzvgllL+EN5CT3BKatpACqyEou4/m0T87fMsXDDaD\nGfchGPWz7Efckx3FgVM7Mo6iks4Q29moy0L4ixLb8oUFz33VfynD3ydwb0lt\niW2FTfzvG/+ux2fAzyRQW1nxLOehfN9X+X0kHL+2wdo3VxFFvebmdfmmFVny\nW0/WdrnIq3ymxKfMAuBplM+HzY0/FWFdwCZvknAnftHmhHQti2LCNJdvZDvk\nmVt6\r\n=g3V7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.23ea2d85e.0","@material/tab":"11.0.0-canary.23ea2d85e.0","@material/base":"11.0.0-canary.23ea2d85e.0","@material/animation":"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/tab-scroller_11.0.0-canary.23ea2d85e.0_1616693641284_0.09234849659941013","host":"s3://npm-registry-packages"}},"11.0.0-canary.4ceb42220.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.4ceb42220.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4659ef6c2124aed2ead5acaa289de5e474df5a92","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.4ceb42220.0.tgz","fileCount":52,"integrity":"sha512-9KomDYDaSZ4L3o5rS45dp0o+opE0Zq/VHE3+wDL/BbHxhLUlvHj+1F0SG/5qEokBxS1Muu3ds7gJjZwpEynVMQ==","signatures":[{"sig":"MEUCIQCcaElbuGaC5k1bbgdwONm4pZWMrTZVZlmLFWJx5Cyq6wIgDyYotD8p0uqCIqa3+BM9nlGcBRNmil645RU6o2vv4K4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgXZQxCRA9TVsSAnZWagAAo5MP/3miTCC0xQTP3PzQl7dB\nGa3Z5QBI+LldPlRTupPKugG2lKjhzgTzgaP5CDTuRApcokm7wEE+7nYpmkks\n2AYNRkpSdoHd47O325kWmwNqSTmjZPVdOoG1oKyan8Nr0VpTYDRYihbn57AB\nbXnDNElEI86RbCs2TvvRF7UX2ZpfAmKAdl3V36cBB4HYfdqNrad0r0+ZN41L\n76KTBkVmw8H1YFnqmrLUhcPJTRaFzWh7aYgUQl/hB5UZQmLXi58x8d1fIMRI\n5gWlJEj/qmbrtMMHrzUIiwMwfQeBEKK1BhN8rQ7n2bxEC02FMQCaVv50KMiJ\n2pSaPnHWwwDIK2CfdgobK7hx40DHhddNWUH1nxZ45aJOkPtQm4d9gY+PnocT\nauhQRoJxKvhytHRw3u9pOxOuhkQAl24MAgz7wWQrZj47IhOcq8erf2hTGXGq\nrBoVR+4UTLidQocm03umDjs9EbU2EhGwRwBLdyZ95YfW1nppctZjywIM5QB7\nURptPaKd2UU/JHB0+MsAMFEe6dLo/320ZUTqNl+35SKfA+MmhUONoTrWh7zz\nVRlWyztE0CwRtmJ+vjukEScc3MqG84LXEhN1rChBRUY8oE9ladDbmqlNhGWE\nB10VnuRKC6BvjCPsHG/OzErRgQKXnGJ88cufaqSiPHCrQyMB+P3Jgz9CHOWw\nAYqn\r\n=y75b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.4ceb42220.0","@material/tab":"11.0.0-canary.4ceb42220.0","@material/base":"11.0.0-canary.4ceb42220.0","@material/animation":"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/tab-scroller_11.0.0-canary.4ceb42220.0_1616745520853_0.8321079644029081","host":"s3://npm-registry-packages"}},"11.0.0-canary.dc9c84023.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.dc9c84023.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1a79f3ae1b0d08f59f375f8537a5212fa8291a5b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.dc9c84023.0.tgz","fileCount":52,"integrity":"sha512-AFrUSUnRBCct0pI1udJ+qCSv18EG7W3DVYkUxxT3ZXgf2IfqL9jp8h8EwVxsZxWrrpuQ0G8eCciGAHzORFel5w==","signatures":[{"sig":"MEQCIDr4cZxSZjFiZdW9mabWvZG7uo4Ov3qadjK/v7Q6jm8+AiArltooW/idzOjLIUlRA2i4ZkGluFXN+CGFAoqEkceaFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY2SyCRA9TVsSAnZWagAAbCoP/1nN7H/HXCA4vEU7vZ7t\njJZYgbJYkL64qagdC7UVohpoGJa+A8665v03gTag6op8/cHDyHSzOA6lm3QF\nUyl3CO4ZsqH8iBF32eG0WiyUoIDpOx2d2R284eL68YJEdNPFmHgmpPGSsORK\nF+XpnvxEPrNKc74xzgheQ/GvIpwvKUouyMo7uyKOYhyLQvMwpWb5I5S7hIQA\nvfRn6dO85wqqD8Tycwhxb6hnPXt16a5iwMZN7Ix/zsH2EJr4bDxfCeXqNLAT\nhZcMiibHNjwom4QZ7fYhep/N62bzmilzgYKrbRa2ea8Tg755gNClYdwQDJ/S\nvb2z22zUnzHW5YFhL17OjvtggzXMsjQYhEftAY9zomZrt3lr2R15fW3t2EBS\nZkuCeRKYa/WqdhaPk8iKdn99cuQyuoFGpuV5AqRSBqExf64LtozmLGu/WqnV\nKWBJQ/OPCwwRYMmdTfYgOJMWE7DFX5zIi9CmRCyJBaDdWGVO1ZAs03vBIo/v\nnHIcY2RnSOegIcOH0y/pT/B33XuBDGgLrUoWCmckgzN2MO09o7L+27UX9IRW\nhZagKAtF5AB4YS0xt7ZTUsP07J8PoCI2bDtiOKewYNM0IuZoigK+an/SdWhM\n8oQtk9gDO2S+Ksk3YcCe/FKmvbLwyGHmP3aRseQSj/+5COLT25Qen7XtsQIs\nSAuA\r\n=BwnJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.dc9c84023.0","@material/tab":"11.0.0-canary.dc9c84023.0","@material/base":"11.0.0-canary.dc9c84023.0","@material/animation":"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/tab-scroller_11.0.0-canary.dc9c84023.0_1617126578381_0.14749668041230324","host":"s3://npm-registry-packages"}},"11.0.0-canary.56fc26962.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.56fc26962.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"df45b4552fdfebf014d62fdc1d5726937bdf7c78","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.56fc26962.0.tgz","fileCount":52,"integrity":"sha512-voOc8JiuMaVjNCRGkB6LV7s3MMSIpvclhjYUSkzVWFDPTEk3+Ec9QCNyuwyAc/WRzN04C8iBemiG0kP4JgSbyQ==","signatures":[{"sig":"MEUCIQD5/QuEJVxuXYELFFiX/jc7ySaMDmvXJYYheSO3ykYyfAIgELlYiQKKfPj8HLW7msb3b9jGLOsqdzcFAUTrI/81AgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY8CdCRA9TVsSAnZWagAAFRsP/Ah6Tx8b2HkWGuitli0P\nt6cw7RyWvAKjr60qrzXclx5Jg7oolrml1ClWLWgK3Q1JqrHGntxX/GL5Xbbu\nVtmU+6PNKrw8tKHOXSTCUU65jmu4zbjjuHb5bkwMMz+NI3stj8tFzNnO5b1j\n+fLfS5ZFbdGjvjxjPAGa7dhXtjekqLYpMS6g4NqGcIo3RL1KINNY52wuW47p\nrJFUzva7mpiDdmRfS6qWSVkNKTtL2Q4H8QkiCTC+E4alPP5iMLVTUueKAsCn\nJOXjtDgTM61Txhemfgw6UEDlL9gYcuM9jRk2Ug/oD2ZRJsv6PQwyelsgCSsE\nGSY+zSpo1WxzwxV6X759LV52vg52uYlSkYlAJxCaMJANcSSNU8F8N2H+GGer\nrlRbkBpfJiMCTGWavoa9ehUdWiBHHTFtMLsdqOtLzO4DW+nGFCjusP7mQtyz\nJSKMnCAVTEvEoji3hbnclZIgIsnVGmapVmslAh6U6s+gGVVPRv00GR4PhxAv\n5tvnNDT2PGO1hQFu9BlKCEh0BpJ/MFsgoXYIaTGW7pUhOqEj61FG/DVQEzoG\n9uz7J+UTXWex3vK2FUtfN3F4ZY4NXaCpBHLX3wn2r0lFN+ZqfBeDincCuidT\nTGMRmgz1Tj6RHp9FXZN+gwTDVAzNbAGT+bWih6CkC+PA31mW17e6z9lRn5qJ\n3Hot\r\n=TexR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.56fc26962.0","@material/tab":"11.0.0-canary.56fc26962.0","@material/base":"11.0.0-canary.56fc26962.0","@material/animation":"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/tab-scroller_11.0.0-canary.56fc26962.0_1617150108778_0.3706709789410798","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc318250e.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.bc318250e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"45ae430f7e3296df83502100a5a0ef3375dbd660","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.bc318250e.0.tgz","fileCount":52,"integrity":"sha512-uf2DsYAxB4t85UZO083ZrLoAci7/SjI+nxhV+2HFxSJslkioJFiFF6b41sEt8ZGOSdCNie7eJHj4glEjqr7Lng==","signatures":[{"sig":"MEUCIQDMVE3/RyYmUUl69ozfM2rpQ9CIvgL4ZADxUh78fa+EnAIgM26PRsp2yNz+T1rO9TA9gHvEj18bNF9yl4KuJbOZ3xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9G4CRA9TVsSAnZWagAAx+MP/3OzM94CXBOlmwbYYyKc\npf7YT+L3fP5P7zdRj7uiTF8WHyqKe4PcoG3GPWjQEcLO+Qqgyqgp5C6tNX4r\nIUGSn0QPq8AUkBubRkzJH7dP63sc1pNDFdoglVCLPy1cgOasIJVlTCwjmeI8\ndnt33A3u8tHaN4rAP7FFuQWtD1oCsvBEcj2sgtSpfCVmiIWqr3DKhnbMf/tW\nao0kYfHAz0okL7qFun5b5cTg6riXnVlquI7JFpBpWESu3GWUF4tFaS1x9oBG\nREyGdwzd09Hr4fh2QfOfLx4WbS/mbCAW2FQSVbgCfUVS9jJO2fl9m/GMciQg\nxkmwxCpCn+7fTYP8uIV0u3EjCqubANaTwh45DLM9/9KQ/+z9f31/GcpO9CSE\n6A5sE0KuQcB/CtTJWO7uPcJb2CGThqY3eVd04gRbYg5jULLAcdMCuIoWtawH\nNB8LwuJ6cntG2zEZ4AAmPulrXNkcD1PbMQ04tOru1/A7nhHMjeKanhzz5eMo\nq8Bp7guz5TPFRcZpVHAltko6gAToZPhAd9eQZZP14LI4z9gKEC4xsVe5VvFt\nWV3Ft3gzKmcz3kzI+rP+4Dq0EGoZX8OhDUNzsacxghgzqtzB5FrHGB1XCu7V\nXwJZo9TKPtLhl3XB6UJl5SW3APjmeTRfs5cqpCWRWAuJaAPMvMv+/9/hXLan\nR61x\r\n=xU0U\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc318250e.0","@material/tab":"11.0.0-canary.bc318250e.0","@material/base":"11.0.0-canary.bc318250e.0","@material/animation":"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/tab-scroller_11.0.0-canary.bc318250e.0_1617154488035_0.7073625767534502","host":"s3://npm-registry-packages"}},"11.0.0-canary.edaee19aa.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.edaee19aa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"343e9a3afa2f0fc086fcee386eda45ffce6b1727","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.edaee19aa.0.tgz","fileCount":52,"integrity":"sha512-3FK2MqnSXJC88QWPw7cy8lNd0BcnM9Xp8mx+NPf3X+g3HGevB1dg1mNfcn0SZh5Ae6xjQSBudvLjechoLLgfpA==","signatures":[{"sig":"MEUCIETuLNzwh072X1NzePpzK9PUWBaf/dVRp4r762AvlPmjAiEAmaNisSzmOUTt8KJ3nvDI9xR4R0TpE64xX0vFfvggvSE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgY9qeCRA9TVsSAnZWagAAa20P/0Zw13mo2Q6Ukk3WNXvN\nhf2wUDDiNWRAareIsN7tUaKCLUfkSHwCajraWfwq42S8Zkh4ME4WVrRWSBiS\nhI2YstR/lJ1R0+7GVinMcV7IUQ9YcdOlXmZDuuLihrnlgzQMAvj7YDgS98rY\n2q/mg9/LSD/EbiHxF5N+K15MU9o/kq+zFca75L2t+FNvzpuGD8LA1TaSa9KR\nKr9dOFE86IOXzXDeXE16MoviOZW2BBTmZtgr5EdVqkZruEPffpBLSSt/Efpl\n0PJ6z6HCDD4hgMPTJRUX4xrp4Oo/m6FRc+lBCKMb2cgHGNziF7e4zm/Azobr\n7Y01D72LYNygwCqT7/AK5gsFylbXiJYoLAg0AHcHWO42W8UcCAznMhEhHnH9\nEqPXPNUdyiEPxpj+xh4yH9RN6H9aYxuQRIck/n81N4jw8UIYsp6y+hSEkO7Y\nQWYOidH3hOcDgz2I9OU8A2fZpZYNxf02OrbdyASblEhJJbAeks2XocKqp63p\nxWin3nXs0ZL1xwBu/O1anPIpfSnl4+LMbt47D5YPft6rvP1TxHBMgAi4FcCr\nUfs1FGjlURo1FLqCLdK9tQEffQsTKmkuqh5ATGM8xedYoSGrE93ItVTwBUVx\nNBESQDOoo45+ieGu65+jobdkMJiZkSUWUZX733YLdIpypPMQPJFWuU9mDByJ\nd9nR\r\n=hQU0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.edaee19aa.0","@material/tab":"11.0.0-canary.edaee19aa.0","@material/base":"11.0.0-canary.edaee19aa.0","@material/animation":"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/tab-scroller_11.0.0-canary.edaee19aa.0_1617156765691_0.921941559980703","host":"s3://npm-registry-packages"}},"11.0.0-canary.24609b822.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.24609b822.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e47a89a64d5131f6b60d9334e4652d28e2d29db7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.24609b822.0.tgz","fileCount":52,"integrity":"sha512-5kavfV2ZgAAIa6mI9DqiXOBDlYzmM7gIYCjaERn4GjPp5qC/RBarDZ/GWGt8hevf03QoQS+fpsqvBRTJLF/MUA==","signatures":[{"sig":"MEUCIBg5N0fWfoCkiFrR9ptW3IRdBEsmcvlsZDHwCpLYmNCZAiEAhuLhvIfsr2c7op6ZJsfwBltMP5Cs6EfMCS/F51Jnjj4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZOJeCRA9TVsSAnZWagAAhVYP/0zSsOMuoR06EcyEroX2\n+WKrtJXwYCP8nd/LRScajMfy/fOeE1+mDuOO1qlAYIWwTobZwhdDWEs1co/e\nQuFSY+bv0HlXuzK1WD7/6nUL6ynl7re4PKITdU2kDdCdMb7QDlevAxZC2HUA\nLnR+K6j4lh4sxeqXPR0gZEu9txf70aMvnaYPgjM6rGpDvSW3ChWCc5O1J9jP\nlQxR77VmSfeXl/PrJ1UtmqRb1oibkSREXobEaesd1dAcUIULovhF/YUnPD0t\nUKfx4nF1ni73LvOxXrnC/5JLfG+6B8jSq9j4O8onjAnFN+0B3kW2JxlLLKj6\nHxhlxKngyGg42XxDCugUmM1dVOL3624t26Lh5SELD0sQbhzRFKe377H1F2uA\niTKMZ1fUEgQclqAbLpASaqmlZajrkO579QF0VG+IrAWPtH8WTop1QDY3rtqf\nKIo5Rz5xi735QlbG5mg5sLh49kUwX6slfwfgSrAcjXPc7rs9KygL07yONbCE\nyp50bmLrKLPrc8z7WUZbM5lDQFZqswgXH2p86iMhseQTnFEp+zlEDsdUdPd+\nxZodcghXKIZTLjghKduEJG/cs+5tBGR5JhtaJcAWM9yunNwce7H1Rl7L5WSx\n953YyXl//6vybZnxr9PesQL2ENBaZCjlzA/GOS4rP07btvfYls/SvRcRtwD+\nBnvh\r\n=dGtT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24609b822.0","@material/tab":"11.0.0-canary.24609b822.0","@material/base":"11.0.0-canary.24609b822.0","@material/animation":"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/tab-scroller_11.0.0-canary.24609b822.0_1617224286399_0.33709588028041093","host":"s3://npm-registry-packages"}},"11.0.0-canary.b6cddc2b7.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.b6cddc2b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2fcad211ca622b29bb6a09647cb1e71c3cd69e3a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.b6cddc2b7.0.tgz","fileCount":52,"integrity":"sha512-caVp9nBzi7YYe/E0xYxUjHQr1dKvE+j7aBIUjWcJ4kklnTA1lkimHOzHgL+Vx7ZUbGDjqZHjZArDYegKA0upCQ==","signatures":[{"sig":"MEQCIBC7gHR1TCWq9KsDyO7pMS9iJfqFmJ6CF31Td4lqHxPKAiBn7D+Bkm/z4tl2VJ2pWDh2ZrhGFMy037VEd5DV7M4Osw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZeF0CRA9TVsSAnZWagAAvvIP/Aj2jcSonrc7nrzX/vMn\nT/h4m7ymUtcdTKomyrskVzEQ2PHrcliRS/9ALMxIbEO41tPKG0flunpitME4\njU1HbUp/5KeojMeUAkT9r3jVmealdg7bcQbicgm2Kk/mbPKhSZV2psnhIxBx\nU5RVc4PWsjdeiVMTJYs9PGqXBNWdXwOzzOLjTVNQHfmTRMbUNZVjHBXTENGY\nanBI4llKcKSX/GBizL813kAAi1LHyjW+MKKR749gyV1UoxRfJS3JASwWCGVL\n0orvvEFQ/18/LymF19FV8aIp1Gw9cgRIV5k6Ts4XrTrCIWPH5kw1h88QAPXS\nrQX4fzDZWGrwHum3TTKU1KjP7S7Z7E2bGaSf+B4RfCBTeMlL9JuDQW+JyQ+G\nKwzarqWbKyLdZhojIUBRSzMn+ljFbOQEg7XjgQUIbktkbEJ8Ft6MhP5wQPAN\nbVBRO6YygUyEFW9Rj809zDlwYQtztq59wyCgODC24h4bt64choA5cncA/s+o\nYeepPwEvRuFYPEfEAH/7AWJfWXigXgDA1EKPAnp7F3I26FYdAwDNFswcVAbj\nP5YUPGe3POReLC6iN8RkriqSUHDFpvErCFPCugi21c+rkVm8qt9LuUtkdWkH\nrWoMO+wj3dCcDF6j60K1+vepePVh5P4WBcmvSpNsLFvz5KwVIf7arQuyMa+a\ndZYD\r\n=OTvE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b6cddc2b7.0","@material/tab":"11.0.0-canary.b6cddc2b7.0","@material/base":"11.0.0-canary.b6cddc2b7.0","@material/animation":"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/tab-scroller_11.0.0-canary.b6cddc2b7.0_1617289588257_0.43594550623175365","host":"s3://npm-registry-packages"}},"11.0.0-canary.94937c78c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.94937c78c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"de5a50c6dbeab3a848c51752714fc4dc4924cb43","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.94937c78c.0.tgz","fileCount":52,"integrity":"sha512-q2HQMC191JQPqTgFb5p3HL0hHmj4js/ulyLhl7smXVLAM50Sr1iuvowqE0jDPm/FVSQLrnN4FhHmvjLusSOUmQ==","signatures":[{"sig":"MEQCIBZ/TlH0sfeNChamIZEJ8KFmIDEi5JPgeEmKX9Zrp40cAiBlTnCJ9Zq6IrgtkS0As+QDwagfxWq2juUwCw5ucGZaeQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZjTHCRA9TVsSAnZWagAA9l8QAJVPhu02tIE5+HRr83RM\n0mbtMW0dAGjbhQYHGFw/pf4Vve5X3JeafGFRZ77k4DCPEntwAtDKmvyNN1xz\nHRP0ZioLPxdqYHS3hUA2N3EyvXcf1Mokqx2MmYBcY9BgwvVFVWC70Y8TvdS+\nh+oER1PP6wRtTu1L/DwA4/eKfkDKjwXcdRRq7AsGcVErr48wtiqbwVVMwD07\nLPwxgy2Yt94YpCAmZYOEbj5rN27Z5hqnUlkb/MSZ7YRsMN2jNb4ohfvX4poX\nBXK/Gu9G1b8krRX7cpn6Myh76rS6vfxDdR4n2NWkqmpAi9CVxFCKLvzWTFfW\n+CEbZFWcGY4lNzSwwR09q2n27u5bGZvYbQtF0r3mvWza7WRqi2LWm0uKIdZG\nvyDFFVkPr9EZZc28R0T8jJ8vJbGvpKjvNeVX0q42W2/6Cuphrddfxsh6/JJd\nPH2FXJxnm8LaPRN9ht/BuKp0zJhmiXQfYK9H5k5mdxhvKAy3WSlfV4dTIwFI\nY0HxAz7vb+u7RH3y2unymBnGh47ooKkZoLgkAsdTmQ8jak+kim4La8VeiJgk\njtjo+knS/2xJFCSZuMoyRFVyi+FxyfuqJ70nplIYnyEoEYHH02kQ0Xp4cL3Y\n/1yJmdZaAnSg1W4eLi5r0RGW0qDWnU/ofehmxS8klmxashA7FhHYicLLKtA+\nz43v\r\n=jOl+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94937c78c.0","@material/tab":"11.0.0-canary.94937c78c.0","@material/base":"11.0.0-canary.94937c78c.0","@material/animation":"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/tab-scroller_11.0.0-canary.94937c78c.0_1617310918532_0.2943122938181033","host":"s3://npm-registry-packages"}},"11.0.0-canary.e7202cb57.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.e7202cb57.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"969968b48030f8ff9464b9dff53b80510dcb570b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.e7202cb57.0.tgz","fileCount":52,"integrity":"sha512-O5FuFb0/TXtzdL/G0tJlcDxV08Vabmgf0Sg3cKIbuPbOLa9ahuyaJM3ImNE6DZVABtUhIb9iAzMctRyCil9XmQ==","signatures":[{"sig":"MEUCIEKX7GVZK0jKEGSSDURE8omotmpuJRw4yS65efDv77xcAiEA+Wq9xs0fze5BkDOVlQdDglMDs2Zg0bEXWMff8LRYQEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZk2zCRA9TVsSAnZWagAA63cP/2Q+FN4mMnZQqLp80ANd\nlnoZB7mc68fTYjhU3Ddk8PaaeAVZrZd9uGBZXxQoJCJfs7Cn5DtJcePt5JdC\nkS27Lpc1iB9DnaAixO5nUnbmI0BTRysgvXB8woZ2OVn2vMesOCBw9+oJ39Md\nTU8TvLJoS7a+fcK+gYk7AKwwnD1hW1S8gAMr0CtxynKgBbqyN9xf8A9mvmcP\nyvCnmSxnSS6ql4rozy9DcKsjS1GsdLJC/unYqeSNhYxGIRMdOvrWcuNdGW7k\nZ4FxriUnUAFgFUDhyUwg1XHjGAaCxWvv/rkE21qV8FWs9O7xEGCSzB1NsQ3G\nkraXLeQaJoDR2Uh/A2eYhZ6AcrWQuEskFbtGiCpq0hGgAMx3HBYq96dRs/Io\nzfEYptxXu5PaC8+nNPqmigBLdSXmbSqnc6wQ8z49rCUX3rChxui8FgZSbAkC\niImuOuXStpcDnh+EPGxVLaBj2Mtdh7FBG+Uzz/eJdNbledEPlm+OdSNUwQLE\nTVrD6jwdGIW/4vnyQCWZB32nd4w8fnglLLDeExwMVL1VLxgpvAp+2Zm8aP7C\n7RjjaHINf1hOSs/QKZZ5oavPc18Lv0c6zKaP7AatajSO0iE2d9wourDO+mF6\n6s6yuX4VUb3xK/UGbFrPTGVfIN+N4YDbzhn22vwtjSOqgjO4A67tw4gMhnq8\nI3wP\r\n=3rFJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.e7202cb57.0","@material/tab":"11.0.0-canary.e7202cb57.0","@material/base":"11.0.0-canary.e7202cb57.0","@material/animation":"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/tab-scroller_11.0.0-canary.e7202cb57.0_1617317298848_0.8435332823512833","host":"s3://npm-registry-packages"}},"11.0.0-canary.1f636b205.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.1f636b205.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4e8cd2a2fe7443e7d77e469e0f102274123e809b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.1f636b205.0.tgz","fileCount":52,"integrity":"sha512-suqtLpTrrJjMqIyZp2ed1f7D0GYysPaRHT6389ARvFUPej9WkQPYaie+QE7QTF5mN996uC4/784ghlfmAeJgdw==","signatures":[{"sig":"MEUCIQDAaX1q9RHv0vuDzKMzzHI9o698E2HN2+XAxk1E7jw/+wIgPgiwwAIe7BhusqOC7WTpot04LXFh0tXp8APaHhNY5JI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgZ5nJCRA9TVsSAnZWagAAhdAP/0GZjLb0XjsyGyXbTf1J\nmR3Ul6TNHTWc4aARTo71Vnxojzz/4zPIJoqX8gq9Jghfaw0r3mjc85SO6nKx\nRplA33kLn/PrVaQ8SDMDdcbe5XvZxXyLPysqd9Cf18Tgreg+KmwM01pjzU0L\nRkpBqMMDDyBpZK8yBWxBpUlnPNHrXQXVbs8gkn1+emY5VJIU/rHASMgz5gbj\nUywD0kLz02YrlwC7bSuNjufsVra2ve5lYOVmNWgqt64HN8L7PHxSne9x6d33\nXcratM22p1OZW1Rgl/W1jnid7LLv2XHZhw4t8sDedfwAyY6o1xi5Ov5WSeQa\n9+mef3+fLae23cak4PQj19dvoBiA+rjqECPPsl4m4KAnvcu8SeN8cROFcbmN\niO8iW45npcwNh73zNmi28l1B7xQTOxtE44IuItkL23JgW0Ov2klmg3vIIDmX\njmacvE/g61Uj5PuKNs6dho/XtCBZCHOFzq396BQXHd01mfiw+UBM4NAT3BLF\not8l8/3QqI/9knP6gZ0dd5Yh5Hf5ACfC6+PqGFvuV+aCF6qqRyrbDSePbEu4\nrHTSSYrFldKZWNvUekoDI8G3LCQdSTcHvVO9WGQyPTl3tz8mCegEUk+35qan\noA++YAn6gblRHid8Tw2ivJVAKfqOtnnzpHsQqjOfnmtrbaYs89HBQDPP4S0N\nvgwQ\r\n=at+u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.1f636b205.0","@material/tab":"11.0.0-canary.1f636b205.0","@material/base":"11.0.0-canary.1f636b205.0","@material/animation":"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/tab-scroller_11.0.0-canary.1f636b205.0_1617402313302_0.6748356969737968","host":"s3://npm-registry-packages"}},"11.0.0-canary.94f50b260.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.94f50b260.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"45e769a765bbc5d96d73dcae551e2d35b213d496","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.94f50b260.0.tgz","fileCount":52,"integrity":"sha512-oqwWGfcTa+VkRipUWZ9b74sXPS/+gb7EfCx5wJT3KXNnzvWv51RRtnr8Iy0+YubcUbxqbR89XE7Jct4KIhhF0A==","signatures":[{"sig":"MEQCIAlPdXvi8GJl4+iN+a0Z5qibNv98l7ZVukKIKqYOQzKaAiByA8d68kacygpjS7PSJClXUpoBTZQZXVwmnxFR9EgtPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgaydpCRA9TVsSAnZWagAAZ8oQAIlXq1f+3gk7tGFHieic\nbO0cBivSCJjQmajZS0KK435TFUsMjArUfu6mPTV/UNWiUylgwDVLUWENlDaV\nmQAn3YO7r4NU9G3O9NMVJx/Py421gAnXu+E6uyyS5yyAdAUwl4hoOLzHepC/\n+LbHhm0hDmq/H+Vp1rRfMymGvk5/J1hgzD7nQc6Hal9dmJdYoNnQE+8oxwBH\nJI4PTnbYn0mc45urBe82njiRpyjPbPSY7XmvHk+8UadOJfH9BSBoEchmPf7u\nU0g9woQYgx7wzQYkcX8cGVJSfy6QAr/GvEKkW9okIK2UpgBwuOBsnTLTGHkz\nsZHQaG07HBFVdmuauoiybuUNIb5oYAjuThIO3jckflBrrSJQZVVF7nUde/5l\ndTudORWGCPjjj7yjJlqxeoxJqB8YVEK89Cn1f8kTinugJzrnCz22qmONDPxf\nBJSx3rQ3jn599jVy5rgLuZtG0UrvGIUeaM96PBcO6jgsvdGHPYPe7xHrDq2W\np6ou7uqA2y7tQ244Wz8epPDTj3CG7vaX/dHxUtMvWGodVcPBJ9PGEKzH75eH\n9gWJo50N/qYAyzR036J/V5UvQ+k8UBHrLVvdLZfE/dMAp/otZDoJMVfBqA1y\nyUgDSZbykb/su38WNpANEL9qdKu9me2ty2NJonmzYWRnIhPyKLL7aAyGgGlf\nuDNv\r\n=vlVo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.94f50b260.0","@material/tab":"11.0.0-canary.94f50b260.0","@material/base":"11.0.0-canary.94f50b260.0","@material/animation":"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/tab-scroller_11.0.0-canary.94f50b260.0_1617635177220_0.40488800209544507","host":"s3://npm-registry-packages"}},"11.0.0-canary.a4009b80a.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.a4009b80a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a1627b0c70adf61a4bc4b737381fd4d7af70c529","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.a4009b80a.0.tgz","fileCount":52,"integrity":"sha512-kyg2ngwE0aeeRgrgrJ3WpD0qa1RdRnRrMEKWM15blH3BYmZ2KBB+ZNOc886qDCikP0uG2svkiMM0bQCeTdjEPg==","signatures":[{"sig":"MEQCIDepQ0f312URgHBYhYWcdnQlTSokyWb53CG5QM3h4omqAiBwUkFKR/ZJao+h1s4Ee9cLNg2HJ8XD+3EZNv9St+cc/Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga4jCCRA9TVsSAnZWagAAuB8QAIlEQkaCR8xvQHgT+ifc\nWzPk2MfzmtcPEFYZUpI/JNkLdlAMV64KhuGV65LfnRpJwgYkPCO57bgp0HaQ\nVji+ubcfO3UL6retdBs/vSYZ98aDibKHsuyObynHMmxC/a7eMzvGmb0P6Vvn\n4ZJSTr9F376hEQt8jCWUwNer79SUs7xC757D4jvhJeWLMcVT2Dq+mSyAzoS1\ndyLqGq54zgPz6/x+KwVg+sxOxF1fVcxCm+mKawdhoULNJYhMThUtBx8zwVCu\nZei7hiS/1A/7kHEWP/YIgfXrky64vke5Hi3fyVZJapxm3wW9gCMoHoH4mE0v\nr8hIGeTVpWEvTdgOdZkPpoZmi4Oi9mjHYEeGNN5mQmB7yT0pt4DfcLGXqcgx\nlFHdaZiSsZvUn1zYoBNRaq6US+lb68lt4Y7PK58i+9tamGLSlGTcMY+MwXTy\nxhRHrNOgjasbwLYy7LURko+dK2zzgPAepDLahP+locw+YKzwfzXtd0gY638X\nVowLYEi1l2oHCzXfcsyivMISuVV8gPHNrkf3sARqU1QI8vtfZWZ7zYVKQ944\nh/LKLqHg3tLLd2dVvMUBkXfJCRIz/KX7ctmJlRYgtsCzSnvRQM6mIi5+b77R\nWyNDFkUCZhQl5SLnwxNypgUOnYVO6n7Ew5z/AB/QhqUUot8+L/uM38WLDx+u\n0NmM\r\n=lhpV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.a4009b80a.0","@material/tab":"11.0.0-canary.a4009b80a.0","@material/base":"11.0.0-canary.a4009b80a.0","@material/animation":"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/tab-scroller_11.0.0-canary.a4009b80a.0_1617660097885_0.8690363103992194","host":"s3://npm-registry-packages"}},"11.0.0-canary.15604bd0d.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.15604bd0d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63549823d5117c33f28e37187ac980f60a31eff2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.15604bd0d.0.tgz","fileCount":52,"integrity":"sha512-V1awrviWY9n+zSuD4mN7XOpM5vVKUY1jrW5I/4oVLgFVurN+HhHHdNu04NHZzdm7HNa6wOMfBObMpx/7BMsa9A==","signatures":[{"sig":"MEQCIC1ZK3TvtAwh8pT6seCytEbNNGsiw+Rkw22RkSbBOSJ8AiALx6Px6qKZX2evrjode7sMOIG4IvQy75wV46NA/Grujw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJga5KFCRA9TVsSAnZWagAAcasQAJ0Tm1XQKbL9dLvC7lwV\nthZgQwVxykray5qq274prphzBciLbbBDarqDcgceqPIoB+MIEUYFa4hBOwSi\nP6pUnK6xC2FpsegReXGqQ/Q586Jm5c7ki/SEfPa2ouMZks+kRllOJmgTSlW3\np4EM52DL5nibF+YUvKeSBYOeG6M1OzWM8qooGzz83x8a6yTiPeHcBW+4jgRi\nzkdEKh9Qi309cXgRiJsqBvY+mJkW1jpYqj1mqZ8Emmak/6+ogXttOm224Xtm\nO4ouvC3W6481AGkPChOEbp78zYyjVPH1TNPKcszIFnHD653ol5UjEvec5iXp\nwohIIxW2YiQGze+tFnxIyQGxAihajj6JqpBVyea5GPSqi/8foG+dMZp8A3Hj\n7RuaS5tZ3sMeZu9k/a1cu2y059euso4ifa+GPXBpEewNs8QH+wDjkYp/lj8J\nDHsIVHCM4T87WMJLV3vc4gXOJQAGEeMWW7Au6fv9iJgclDhwHRG8JYH0ZUzp\nFVi52DLahgwVXs8aj0R/gqoj0a3Z0R+qI5YWrj9lQinjQrbce9msVGDBj+6U\n05ODBFUFkWgG/t1vVaYeX2U+4GGtgLgPFrEmQop1NWs+2bs5KyG9VVZ3Y8Ts\n4wyFVpQTP/CVs9h+jTqfOSTK5bxS+fKpBokeXZCkNi/wnoKoSrLjUm9OqOTC\nBsw7\r\n=QTJS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.15604bd0d.0","@material/tab":"11.0.0-canary.15604bd0d.0","@material/base":"11.0.0-canary.15604bd0d.0","@material/animation":"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/tab-scroller_11.0.0-canary.15604bd0d.0_1617662596496_0.6617582546400627","host":"s3://npm-registry-packages"}},"11.0.0-canary.76da7876c.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.76da7876c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b240a6a598311c3452fb3b65c1921ea849ade8e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.76da7876c.0.tgz","fileCount":52,"integrity":"sha512-TGga+KDKoSgGagJ7eW36z5ORSn1CyF5SIe4F545YI7pKDjoMqxzCS/W8bGef1fAz5A/mgiDoqaG4zltNGNjM8w==","signatures":[{"sig":"MEUCIENE3WTcUDiZx9ISpEH0WyZrvxKCCCmwUkPVmYoHiGaVAiEAmDuGHRjeTSulldmzt7h4ZbIpYHO94iyLQNNM4mjmiXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbQ7TCRA9TVsSAnZWagAAn/YQAIzD589DwaqH3YJSG7Hx\ndWllxsC0+ffdptg+EX9stVCV2CaC1DJ1YEK3bhX8xiSwzKf4ovD1Gm6cLSPC\nQvW7BCj/+4l5nsRnvrogJJcd7VtoKP8jgUADAmHuLG4ogpSNO8oQtM+4nROJ\nDBWISWjgq4ZxWWjEwGn/VpA+M9zhZ8avK2GKZn51BQbFAqLEtD5epNxlX1Z7\n14im0M+kC8pzEuWQRqf8YoUxrtwTcExHsgVfnTV51lAjb1Z3IVPP7GhL9f1V\nt7hdLHyBdkFuCawN/4KTKHpKaEhXQMvSk3FfQluDBAMZIdWCeW1AejtjhRnp\n59g3qQWI2S/pZQGfAGzkrrMuTOj5yzla0nFoV9c4r1A5/kYaonpFsCUttgi6\nZYbfEgzgYDVhI6Jwo6G2kBHE+Yto/xcW3dQukh400Nv+nzmG4aEpaLi1VTSG\n+LaeM5lJKS4h680gG8Iwk5c1tlcBYtC86BbVDEaHkOHSXBSKqoapAQeRRkja\nIQP43kN72vtPKwQLcTo+Mvo8Tk7AyBqCgiDVUXsmw3U5iBOpiwA2oA9WCthZ\nEXN2DNRYZzHDtDl9iO+Iy9pDnFfuS0vLAYJOW2jcpHvM0TkjOnUfhsjwY8pJ\nqeMSr1qWMlw8P6+VAHkVxZWn4O9r7LnRtJH1M74+Sh+clabvQ36EPnotyocE\niB6v\r\n=nfN7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.76da7876c.0","@material/tab":"11.0.0-canary.76da7876c.0","@material/base":"11.0.0-canary.76da7876c.0","@material/animation":"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/tab-scroller_11.0.0-canary.76da7876c.0_1617759955012_0.9371666281352529","host":"s3://npm-registry-packages"}},"11.0.0-canary.6bcb6cbd2.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.6bcb6cbd2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6451b57bb565843be03d7f565ecc890bcf1890b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.6bcb6cbd2.0.tgz","fileCount":52,"integrity":"sha512-1RhVCZ+tnEcQAWFWEwbatPq+NW53iZvVgAmw0n8MUmyAGWrdTb0zgbxsQtLkVKaMBNLr3wNSQfBm76uiGjYvTA==","signatures":[{"sig":"MEYCIQDuH0d7rlpKKiQJKKloOfjPcNXi/c/4HJcvYyxnbnro/gIhAMpEwQXPP64IOWc5rWMi4e3zDdlFVjNl1JAn+I0i09b3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbf//CRA9TVsSAnZWagAAcF0P/j87p/pBzKjOnezjiRFK\nw+KcE1M1j83IFsMorWvvIeKD/wS6jyOJFIQ50PV/Z3hs8HZ8zqWM7xE+31pW\nCfssQyb9BuLsRxT1rMMrsFTmxoNI76I98rD72dy6a86YL7XQGqHeS39SvhGn\n+sFhxAVUIuIheCtpu9yQo7WuMS/QlAB56Kmskctzedaj36oUY5hsvO3ISwc6\njCGub5Gt1pEL+sfF50kYl7qBS5DAq9SFe6ya3nWcaKrWKLU51VebZ5skzOPs\nEdxYF9i+fk/zAKTp0oJEZqX52BIoBvKjcZ5UqB1jsJ3GJNWEzdaRFEO+j5sP\n20k7XHn3apPtNeMW4rZ2fRj4mRGRqx88BFlx3siaNcXhC4iOiVXTzbvbys7g\nnJH+9LrvV42t8oSYiGMR+fEF/Hc0D9mqbO5tq1VXs24N1SovSrOK0LW4ycOm\njluyHpT8QGkAlnoLFKu80mkuzB94eu2hHd5IocTnkqx6C3BcsL5f+IO6vHna\ninR37vLtZ6SKlDyd+tiIGAeSTs8TdrAF8mLkKrvtQuPqVe6Q/3aLh0lFzQc5\nsMF45dgfv7p+lq8gjurD6kcSaCbNn/HNgzvIHrinePgcGsbdUVaUixTY7Myd\nyli+sE5QuMBeu1CIhdNklZF5tOsuyQGUJu2jVMSi/N/k8SaNh+5Ch12BDmhm\n2Wrb\r\n=nCFG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.6bcb6cbd2.0","@material/tab":"11.0.0-canary.6bcb6cbd2.0","@material/base":"11.0.0-canary.6bcb6cbd2.0","@material/animation":"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/tab-scroller_11.0.0-canary.6bcb6cbd2.0_1617821695205_0.7525221365069814","host":"s3://npm-registry-packages"}},"11.0.0-canary.c91e8d141.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.c91e8d141.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a3814036489e3963014340cc43c1c1b209d8f4d4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.c91e8d141.0.tgz","fileCount":52,"integrity":"sha512-Q6wtRwIw0y0mXBud/jMrv6jKQWwEaBsEZcG1jVCov53vZl64OCFF9qbzW3aEEFKQ7mQGfJ/ALDd8ITDs69sXkQ==","signatures":[{"sig":"MEYCIQDoWiuPjArmWlC6+zou/fqYq98w/nkVc3LPBs29hICWVAIhAKJrTe77eh653kr7uN8gdVoaqRWdo4Nl1KWRFXS5MbdR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbgDvCRA9TVsSAnZWagAAlLsP/1DTbKnk0S6e7lmNkqgz\nyvtyVnzwDMzbmnMLkSYzIFJUfc0u2tEXDWalA4ugisL10vgrAs+YjdFJ5BCR\nror/vfJvrldAQn3KFFltEtVNp1ykvS8+CbAWR5StaqtiUA3b7aK3DRibY7f2\nm7edDq5By0hy6TdfP9y0dcsBnupiwmrnHYtSCZk3noQ+22U8fnvXOpRhvGGp\nJ5felUXyincNUvqRc7hmFdyCXQlWNLZggUopgUxT5I/Os0Ec6NKk+ucSldyh\nZMInt6zdmQfFkBBRm0UZM4Y6WwYOyK2EjVpoiN6iStnASZbFudvWB8rD5+uU\nalgDj+2FD/Hq8aNBEerGkYXczfXI0LQKqsIuosVuAm12nbKrFGpSgiDT0375\nE32/jI3PRGQVZn5MrXaeH6+5tdVl1TdATQw7m/mkl3SLS7h5sImwHsvt7jfK\n0buCftBMuWr800cpfs9L8VIHADY0PjL+sFqUYwbJTaxu39Ej7rGiX4viTO2B\nKIM+i1kT5RkSHq0gAIbrnAoZsPcp3rAnNsgVJhFgH36dxTZW2wijrFukMNiC\nJzjS4c4ftOgVAmooE60TOs46An2PsGb2ilejffg6FLtwBsltsJJONsVUpiTh\nzOiuzQ8CDKmr2ypNsOtGHR+lopmPWV//hj2GN7azAYElAWP8SM+ZC1nOeTu1\n8qNH\r\n=hZct\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.c91e8d141.0","@material/tab":"11.0.0-canary.c91e8d141.0","@material/base":"11.0.0-canary.c91e8d141.0","@material/animation":"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/tab-scroller_11.0.0-canary.c91e8d141.0_1617821934697_0.28812349389311764","host":"s3://npm-registry-packages"}},"11.0.0-canary.f77c50860.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f77c50860.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7e1f31817594566fb6dca86d958a03d112e2f909","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f77c50860.0.tgz","fileCount":52,"integrity":"sha512-9XRmSsAxqu9yY2i5euc5cHV1+bqFVCOvuQeIu0DWOFxodgkjV4v4sSW0EiUfxzajFlE5x8v42lsK2fhhalkWdA==","signatures":[{"sig":"MEYCIQD9qX/pg7dhbQ4WuwEsLD2dHuSErUGZeoxW/owsiF7BDgIhAMsOBVmM4i+J84tl8RgUwWl3YNta5J/rTS1nnc3td6qA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbyMVCRA9TVsSAnZWagAAaFQQAIKQNZzd8QVq/CpKyv6P\nbUox86otVaQUfsK6D1go4KcsU0dMXD6S9KRgqV/IXfO2+24T1ogyDaKTx5L1\nJr+IB+3nZJTHrDCBcvzrqSS7TiDIDWUn3DBhdhhb7hGxGby2ZGtrcgLK2ax5\nMjT3srxyqRlPUY1hxx3BwrY2DicyJfsiBmryus8+cQj8RaDq8jVu7y73y6C5\njJiNV+4vSF7IwvPHkecaagVNxeVaT3sGq7Bjq+7TXF/Dv7ES/x7E/AGfc1SL\nQpxcuXtGNKDCFRtZHoUotBEXtw05rmWeWZ64Zp2xTMszHMPpNNeWESZ4/epL\nHK8PDgpjK7Ylnh1FOrF3Mk3Xu9l9tGwCmJQbb1HpZCbro+q+r+3AtrI5Bixr\nsvUJG66PXSmOcOx8G80tLqtOui/s9hi1dREmK7oOlsww7zikWCK+sRRHtgSO\nwNSEBFUN60I8pKVnEWxRinLUWswG5ynS6bdd7oA84u3VTxUcc9YR8xAktUGr\nN3pYqC1RRcQqUJoS5UFfadFOULVMweDKpRSnqL+s6LOxUkzdlvyxA+oG+vCw\nNE3Z5leins+ZLroXVHRKFB6kc74oDjbSqUfBykhA4k0WdDt7zu6BIr2riS0R\nmcBoUkfZ44pMSVRwuqOZbRl2g4jqJOrmCuqW2gTzwGkUeHU8xftCeA+wxBKU\n4Y8X\r\n=hEDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f77c50860.0","@material/tab":"11.0.0-canary.f77c50860.0","@material/base":"11.0.0-canary.f77c50860.0","@material/animation":"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/tab-scroller_11.0.0-canary.f77c50860.0_1617896212893_0.7909945782669621","host":"s3://npm-registry-packages"}},"11.0.0-canary.367d88bdb.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.367d88bdb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5581d6aeb0210419b06288292cbda50dc5e82a15","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.367d88bdb.0.tgz","fileCount":52,"integrity":"sha512-A2PsnRC5aagi+tVwztTH5CeaojebeeOfQE1bYQwrFHmPu2nADMaCKF+IuaiM47dNePd8kTtS3QkSPau8vhfKBQ==","signatures":[{"sig":"MEUCIQDcrA4a87bYd6VULl9Pd7ye8mwhe77ucDb2WDjGFDCe9QIgNHvfGQ21bhl4OT5a9rYIj5Mv1duD5iONF7EEElsbt5s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgbzHPCRA9TVsSAnZWagAABTAP/1HJbdo8UGgFSbZPcWk/\nXFAydz5og7VbWBtUFESwIPi9nUCjRAQXlCoZtR1LlgsogmapjGSZvB3Q+Ocy\nUypAkmio0KNLdKQOEqxo5NCrXepZHhfUrg1iXKtQ7eZe4FilZBMhCQKpD6vr\nXW4aXLzZ70gJG+u79bBnCNo/YtNPdg66t/Nmt2gG1RYaXsTlMG5eZpUmVaOz\nMiri34Reik1FRKEc+q414eFk7BeAs8eV4F1YyA2XUPRhCaZJa9f9Talw61my\nLgNXPtp/OCisyuRQAKj8pUqp+j/gqRbr5rsDSzbBSdXg1b1GCqdp7mSDV0TT\nPclB4b3Y5J8kzUe5pxZOoDAti5Uw1yGmTfwmBPc44neqgjztgcgkGDuzs6Tz\n+D8CyyV6fpuJOnGGwIpdVClCTZUlL+nnQJUIfcg5l2SD5KKyng4fPC9Q9vOM\nd+khYunFkxrm+aZRtKAtgj0vu/RpfN4HuNoDfcRmtNDP6zFeHvgwfTucK2DR\n3S6Zcx1MylSZ7cgISbdyok37mwo31sOVAtuK9lDLW7Rz605J4+ZqX56E3Edt\nckqz78pQaAIuON9EeZzzWaKQuOWheyUaWo5/iJCYrGe891Ju9oQaRbvh6bgo\n+XOopr3oEq0+mHR7783rQnrqqlE/hWpFSwg4cpIggBKbXNjjAatyR3bmOErp\neRv4\r\n=GVwA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.367d88bdb.0","@material/tab":"11.0.0-canary.367d88bdb.0","@material/base":"11.0.0-canary.367d88bdb.0","@material/animation":"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/tab-scroller_11.0.0-canary.367d88bdb.0_1617899982713_0.6390399843464394","host":"s3://npm-registry-packages"}},"11.0.0-canary.0ec437d3b.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.0ec437d3b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bed7d4cdc71db3ce9671bde3aaacfca4bd95a3c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.0ec437d3b.0.tgz","fileCount":52,"integrity":"sha512-T4avvkZpofQWC8q2kx/t1qXTdsKi0kNZ/eiY6enucqRgxEuI5y2e0Al5vHQmholy65RY88+t10ksvmHSnqPTrg==","signatures":[{"sig":"MEYCIQCVCD+Z5m6YbyppuaN3bLgg03pJa9Dlq3JtANfTi0yhbAIhAJpJdBelAM2d+PDKUuKH8uevSm9eFwzSM0pGY1kqkbbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgb1s7CRA9TVsSAnZWagAAWHoP/jiTY1/gv/U9vjCv17fW\nuzASgW3F7OB9bypYW6xX54tL5Zs9Shrx1G8EOdqBFt+qNkE8oIgpd54sa2YO\nT7hEtWmsaInj1CQR2GFZ0tMqsuxtAEAgwJkMZIcqZdSphCeD4TSg1NVb6Lce\nBYlE2n+b4CmSWmdsclxsDrh+z5AAZqoJHFUe000n6ZKQE66XBtmh7ke+xfye\nO+ACF6Ydjh9pHkhkUVs52BPIXk8yLR1buE2Aysd27kbbNt/wvj0ncoXAwyQj\nQGOnG3MM7+qT3RaCTvbd4WiwlkLPAEmP+054lTgEkM4YwPlephCA+A/cbGjN\nE0rE+c6q8U84Tsejjt1X5Ds1q7Q5l/iy0R5a9swaMtwjufhU/6bAT8A27+Ge\nMzaKYXfKnGi5W2YJMDWOQVYzJRF71An6l/Y2trzTVkjZ1eh6+Zf2Ig4yp8LJ\ncN0JaMfoNbZR9XQ2JnOOcifJx3nUpDT05RxoHMwN9YQuzlfqKetL/Wv/w/Nj\nCgO0P7O11eKBj3jncOeSPknM3xA/9dHCm5X7GlqpAhtAfMP5tzk4sLG41eoC\nUyJTHG38ildfikbW7aqY9+hdvu29azEcpxPI5MYt8CkX3qiXnxp+YyJSIcu8\niOwrmbHM5m1kbSyczbgK9kO1w7cZep15wXW2nOdqx6unaMgj07lS/n0BjDjf\nSHlG\r\n=hXY7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.0ec437d3b.0","@material/tab":"11.0.0-canary.0ec437d3b.0","@material/base":"11.0.0-canary.0ec437d3b.0","@material/animation":"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/tab-scroller_11.0.0-canary.0ec437d3b.0_1617910587263_0.7157301123401223","host":"s3://npm-registry-packages"}},"11.0.0-canary.b2fa996a1.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.b2fa996a1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9672938652f788e86c15cc63efb3c8fa56cea5d3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.b2fa996a1.0.tgz","fileCount":52,"integrity":"sha512-0/1/zju9n0qAT+iXm3oAfcF17ZrsapDmNw++0ZzPCVajF6td+kGVMWwfnyNSyu9jJgXp3KtPJ5C8iHIBiiYmEg==","signatures":[{"sig":"MEUCIQD+qze65mZQR4wHb9dSbzaAZGRdqAMx446pRBAiSMIcAQIgftkgzlap+kVDVqH4GlwPrGEwBiR/F4dmm6uT9oSoyHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcG7OCRA9TVsSAnZWagAApk0P/jcuQVPfA1np5RPj0sQU\nCsaLHvzqY9B8v11ea2Erwvnls402fjJF42VJ2FU0s88uW7W0UbD2A0eEFNhc\nDzYrgJMVpahgCBSltjpaAditoXz6NXiQB7TFUK1w7lP07nf3Wz+7KlrboqIm\nJthGhXyexNj0fM44kiqS/ux2QOlH0/A2b6PoNc0nS5/Vd3dbJWVmzyz7i5/q\nYduI5wd8wOSE9R9Kh/JqW2pEyVPUIZXair0q6rKkORzq+MlQshoBwTxOtwKB\nyGwOrPfbqOxMLCFZUn3YwuhUOkALeO/iGkzjTiDhZ3A9yzsRdBf527vkChfw\nwWiPBRWwUbDjT2fouBfxM0RdtfeKcqQd48skmTe/tVqx1HpPOXeUKB78UXjX\n2k6Zy5Y/6ixJNeGSbSlNy7G6tBd2X41NEq3m7v2YfUutX+JbyL/UvdmF74Ex\n+6pJxkQL7ZBzLm8x2zbmbrpQN8d8dCKXXDsqRkjoxfV3BcXqBCzSppO50/3j\nuVyeYYqLodviTNMQuyD6hIPMT02G8snn69yQCEyBw8ynQ4iKw5KxnODpNSyH\nCg8VRb0sZftBeCKByd1LVDEYVOLEKZ95mi0YKrtpbPKn1m59B975jFgOTBA2\ntS2zAQkP97YPOv7vOrRSH83v2Utd9g8G5EB7PIXCVSp2hsD7pJyk9OBuXDm6\ndBD2\r\n=Pcat\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.b2fa996a1.0","@material/tab":"11.0.0-canary.b2fa996a1.0","@material/base":"11.0.0-canary.b2fa996a1.0","@material/animation":"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/tab-scroller_11.0.0-canary.b2fa996a1.0_1617981133535_0.5184928048865771","host":"s3://npm-registry-packages"}},"11.0.0-canary.24255c408.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.24255c408.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f906b2cd7d53408fa3df13a665bbe4c961a24a56","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.24255c408.0.tgz","fileCount":52,"integrity":"sha512-FtSk2yvNKuyqvjiq7bULArIP0igWFlZeqeezZHriv6pqMjQGyMD7uDym56L9d2pjKyHumAC6lr3iRJSjRyguJQ==","signatures":[{"sig":"MEUCIHEVtDVkGOMq5Ni63abbJ6DXlHnDlohQYTgj7dv1mOJWAiEAt1usRdBkw+T+/ZeUSy0tINkCPNaHtC7g9ycOcyAH8OY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcLVxCRA9TVsSAnZWagAAN3MQAJLNPUx2fAfgv7TblXWX\n2f/NvQtRJnnoFYvIYJZ/Hqgd3wS+MOj/IIUrmz/VtXfJxGXbHCibHuoN/6Me\n6npvLV49AzK+ErgFHg9moDrneBMpOHo3AHL1RA3LgBMVY9npJ4gWTpsSX2Xs\n/66OlaeNDT6tUflpefyYBOHhwUBw7tvLfwIE/ijPdqSXfEt2d4ZNac/GA2Ow\nZLOyznyChUuuSPYTFapH3g4h0Jjs/aFZb2QGWb71HWyfpuK7xQWUtjCBZOQh\nswY+YL+uEcpALc1ugofIvFGIIH8wsc4TbqnHsEGOkuwvusmsdNc1iLW8cDJe\npomWGfMqkhhNgoBZBk9+jKyHOFuj9S+G5haGEWVwRBwNfCVeZcXupbP5Y0Dz\nWwxP9ePzKMTag2GedL0DlH6DHKHxyAJh8Q5gRdqLjqPWROAyca0OogU+dr1R\n8LIZXQTBt0eJSvKub/KpPNyrdKxKJSyO9AWmsXKdI/Y0Ex0QzY8WH2tUaUSX\nMtR6Uwlusflh2VfcmF9gv18vM1N7BtAn0xd/tcKgsayUQmYgLYD8e81HiTWY\naUxVOngkJHS20LsVo8xDPyVXFKOrLOWHf5xFUENI52IyZp/GQ8dIvLaXcXXs\n5XNpuSD0JwWGND0YoQVsjP9Fbj1pSZQg4+I8U6XiGCn3psoQ2uBVn6pbRdPI\nwrEQ\r\n=ubTN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.24255c408.0","@material/tab":"11.0.0-canary.24255c408.0","@material/base":"11.0.0-canary.24255c408.0","@material/animation":"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/tab-scroller_11.0.0-canary.24255c408.0_1617999214735_0.421977659516384","host":"s3://npm-registry-packages"}},"11.0.0-canary.7d6a4bb72.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.7d6a4bb72.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"15493f19b248847aa476c3aa5ffaa18fac1f24a0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.7d6a4bb72.0.tgz","fileCount":52,"integrity":"sha512-uuESsWEIqO7n3H9gsB7VwrHEM5Pq0hNNXgTZVJ4ft2J1m8H+w8uUHYjafkFMNN46ZlbKVN9P0tol61OHFJ8oog==","signatures":[{"sig":"MEUCIQDzqoU6enhXjtCN963fPcC6I521TN1ZNEJJG+HLpCQ6zgIgfS8hGZ9Wm3JIisu3IQmUvwuw4TF0pN8irCiIShmMpWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgcNstCRA9TVsSAnZWagAA9rUP/R0R1TmGqxR4UeXTlm+R\nUSw9YXlImlyGuHmJB2j0keYroLkXFM9A+MFbeFgs0F/0+rkHzlsi0mcF0LAD\n9xh37oWZW1c73t3snYKBeWK3JwyyNoR4kEAyHUiAj0j5bnejuO8oD01WgAWC\n7rXC3mqpUJMJrDTTzAwU+gKWWeVCPsFxy9uFJaXEoRUIc3Gfh0MZ+eIJfwoZ\n6zvfq5fSS0J8V2boqYOfJwxaRyadUSa4KQEde/ukzicUUhf+YR6btpyeEmC3\nAmDiCmb44tm+se7tVYM2ecjvUYGqSUzbMkG2x6ZSu18Xv5UMoj/pAWFpIfbf\n0QpwX7YIg2O3W3HYFY40ujTSHpUVyoiU7WBJJtZ8CSKjVFtqpElTH4TioyDf\n4EbXQBETRvIpd8QkN8V+88SJPgiartoul396uRcBOQdgnqcJR8OJ88UyUO0d\ndIa4W+ePFYa2GrGJGewoNO0E6xOfmL/kTyCkksThYpAIK9I61u2c9zJXvIzy\npuIacM0gNL5zPnPY8wHp2sNBE7Vx3PScFnwaaFjapIlT2O0TQ4j2lzIya7Hk\nKcP+flDbRCaXHWvNTiLvra3McqAAPjeuOrG6OHh7RvPoNuHt8Jjo+fEhfTWu\nxMEX+EdZroIBH08/AkbvD+25wvBm3CLcd4cMTQQRSz14LzTDMT2p+srlNnfb\n4uRX\r\n=IhW4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.7d6a4bb72.0","@material/tab":"11.0.0-canary.7d6a4bb72.0","@material/base":"11.0.0-canary.7d6a4bb72.0","@material/animation":"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/tab-scroller_11.0.0-canary.7d6a4bb72.0_1618008877000_0.8246493116878983","host":"s3://npm-registry-packages"}},"11.0.0-canary.352b295c1.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.352b295c1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9ddebf82e94e7c3d5491f6e869c8ff732921d14f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.352b295c1.0.tgz","fileCount":52,"integrity":"sha512-knx0jzqB/x428t3KS0nDNyYUmo1UmoRU3vEmHApBCineje7eNFmf10NNItuiPTwyB7OK+Yb5/ohx1X8WtFQ+JQ==","signatures":[{"sig":"MEQCIF8a7oaTOWy4Uatwzq+dQSXtUm6qeVw+2YbphMHOmFDEAiB4AyJ2jJd4QPUqhiuj9lJ09IUZC7XKXPUYoSs29E8vEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgdI6JCRA9TVsSAnZWagAA2HAP/2VbAhFu3TxdW2fCnNxh\nWsjrX7NxN4h+A2fNb5IsPEUp9fXN78yWrtLIUVgT0ol/ouAi8XCS2fPu6qp8\nKZd8bAnVZXP9nc57+kic8f7uwAqr4knrdVkuNrFGwFwJ2nGuE/48ZrgDtoIR\n1lPNYJBxUWLdcpHWFsRCuy/0gPF+zbz0OmS7wfhAxZgVnU6NuVQ7XqBZqmQb\n9xdt4U4P8hLtsfETqu4gHufiHBv0OIGtHp8ztaSgxtprMabeNPvQ7tCUYyJM\nECZRg4THBSFQS0e4IiP0PFsE5+uWbj5NclzC1bGxhvKvSAo0XuhYUETGLgpa\nVDt9K2cXYC0y8ymtavtfqbf4JAOOI7x4Z69d4uwSZfKhHcMhuUwsZYlqMzth\nTpfLGnfcl7PY08JYxAXgAHICmFVkv/ZJKkgTVIiymXcATdojPzbcmy5w136j\n1SY0ntkUNt0VP5B3Ybvk8mn+PxaUSh6PYk+aszliWQY/L9t9kyigyO9hL9vp\n74zryyv4PCjyp2AiMKjWEP2Mko4M55cwX0xG7DNpLXz9oRDkGr7bAnrgcUxJ\nPkZY1GCFt7NS8jl90G8q5jlASeUdpHvRJIgx6UAJA9uC9gfFB5iiyN2J5kR7\nkqfD4J2KV9plPUoBzHxpUZwHVxEWvnGyj9RJmyD6q/0ZnYByn3vDtmhXfTQ1\nltJo\r\n=GKPP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.352b295c1.0","@material/tab":"11.0.0-canary.352b295c1.0","@material/base":"11.0.0-canary.352b295c1.0","@material/animation":"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/tab-scroller_11.0.0-canary.352b295c1.0_1618251400824_0.7390238432862026","host":"s3://npm-registry-packages"}},"11.0.0-canary.ab99b8064.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.ab99b8064.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fe50dc059282686d00b2f8652d46248976798f0b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.ab99b8064.0.tgz","fileCount":52,"integrity":"sha512-XxSiT5imh3D4KNAzdWto8iefaJGcuQ47jypxi/rn3zXxev7pi14FAnWWkq4KchIhJSDy7l2R0Z7ooWVM819c4Q==","signatures":[{"sig":"MEUCIQCkDuc3u3eEYivLOS9spMt5C2GppXJ40n690twIFw23hQIgeMvER/43CTvqdG1cqn1v0/7APYk6eupIwgzlDucK9bs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgda5PCRA9TVsSAnZWagAAjUIP/01Dl9LwtiNqkoaqx2RL\nLKEAYvZw/LHH6eb5KunWKUiBkIqYL844KTr6BELUcomfYZkDyKjFrKvwfzFL\nK++UBytvYQGG9OJag54DGP6AH3rsrnXNFjFyI/supQj1EFZBLaqkQHMbdBXj\nPN2wBWUXHOBRZFiytdKKwE7Q0mzvmTAPAyknM3C39vQI/WVyjStN1jyg0yK2\nWQKKhKH1DPvaWKwTae015CMKAvZ2caDaykYQ6daOaTzy2elulupctmfJKcIV\nR06ohcfiCAqCSiihWP+dHiUKtOQQ0L+djKjn1DCIvCjPr0v4PbTH8O+mDwj8\nHZLE0un8lbPf4PG7dbC4/uoIrU8Cg8y/TpMfAQ/f/3iiFU7qQvpZgaa8SmbS\nKjOvvIVanJthnk6DEUDUnNp8IYhP1xfdxnjh5mZx+vYRxluwvTU8biozWXdS\nj1dbo2oTTAhFtI3KP7RaDIEHGPKQ0DG+e+lHzIuLSoYJY0BkzDUsuOj4J8ns\nja+zRyDDWCOAuN6zYrlcQnAgUBN9AOrI4cMJHlxIsdMTzjSBuBAIjKypb8wI\nUOnr+ng1nwZG/7/8gbsi593XTxo4sax8WPQxjDoL+zUgujPwe06Mg8W5426Y\nu1O2jW5vAar+b1ll5waQry5QLcd9UklAgY6osLROXYJfmZVnIcpLueJhwD1B\n/Cyy\r\n=LpQW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.ab99b8064.0","@material/tab":"11.0.0-canary.ab99b8064.0","@material/base":"11.0.0-canary.ab99b8064.0","@material/animation":"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/tab-scroller_11.0.0-canary.ab99b8064.0_1618325070751_0.701586041515998","host":"s3://npm-registry-packages"}},"11.0.0-canary.8f0a11e32.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.8f0a11e32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9d44491a93b5199bcac61f1f875f00dc7ed412f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.8f0a11e32.0.tgz","fileCount":52,"integrity":"sha512-GGo/46A0Wgf1NZmAWVP4rTAURHDuFAy7XkaQ2KYgtjRc4qBXLVeFX3YlWUQQP6ZtIxWd8JYM6sWDmQM82T0uCw==","signatures":[{"sig":"MEUCIQDpnjlS5MP3pt/HRGMJI4F+ImrtXoNNts954rhYquQGBgIgHlaj0xcR9FaLPrcZLeImJoLcLLceN0ht9A+/FtTHfEU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgd0qzCRA9TVsSAnZWagAAFzEP/ievk/ksmJf1gnNjiuAc\ngpDhWJZd/bjdgGo73f4Ez0NCWu+etZzZ7SrJstxnHar+RrpuH1XssO17Tsh/\nFhgRuuFgvVlUx7cJl8RnV5VaU3O5y6jJGbZjV5P2AHGxTTShKEvFerAaGq6a\nVbPQpaPKHdo88kBjRcCGO39MqPRGofj4Zzsn7nPzZ1XPN0+6ba0oHOOxF/I3\nkfiTMcoow9yDgyQWuTAC6lHZkIfVKhHjL9JsoOy/uqUydcQMPQapNricSTu3\njDC6avIQOVKMYmsECrXcB8kPzp1TGMCW0fvWVVh+HyTuXXiqMY7i5Cf5Zh9G\nRnUKLul0pAuY/ChXhCiBylY/+NkwIS3SbIL7jAK+VSBbJTF9zJrkSoIH/CMJ\n1gz1dcTDMerd+0KE+BSlstF7HVyf8OF1X3N0QZFDqGGOZAaxeYAKOZixDMIK\nEsvcCJrDe0N3Qpd+vq1XDIxbcpT9rj7hJLaTqQ9C6rNlJxTqvBFEjD5w1B2o\n0uie2RShUR0BpANm3mXDSEzgWEtHGnn/U/jeac+UHh6YeOGUahZlUF9BsN6r\nkg2tsZW7ahTiNuzKDela/GzS4R3hkpRiwPOj0r5tHOjw9tCwHzZKXlCmPxI4\n69Fd4xiQNIv4cd0lGFfBW9fd7+5a2iKL7NaDhSCFyhIIG+NbkCgiRGG8BoIO\nz80l\r\n=Ob20\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.0","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.8f0a11e32.0","@material/tab":"11.0.0-canary.8f0a11e32.0","@material/base":"11.0.0-canary.8f0a11e32.0","@material/animation":"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/tab-scroller_11.0.0-canary.8f0a11e32.0_1618430642623_0.5724621222161621","host":"s3://npm-registry-packages"}},"11.0.0-canary.f5c6db8fc.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.f5c6db8fc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"44d949aa628ed563e6526abd0d6f769828157c87","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.f5c6db8fc.0.tgz","fileCount":52,"integrity":"sha512-A1IuyVd2VvHu72e1+MCt8ZIcfTBFGkiIBRFQCqLiquPBADTG7dcnnPytoqY673YIUg0l+ux7+QqjomT3iD6gww==","signatures":[{"sig":"MEUCIChXrbYPAgJMNo0qh0E7BZqG09rG4cleojhkoE4K0c+2AiEAzO3gFHHSoEHYIdXjHu/Pj5TbtdPePjl4XZUUNvV4lH0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIBXCRA9TVsSAnZWagAASAoQAIm9KUZZNn4/3OUqP0yz\n+9mfwxKurwPcU8Ln9AI6WxWgBu74bYvuUMSNolOBQAeo7g4IELpTYsiAIvys\nzYnd5i60FpGob/plgMNr0G8P0rPxPcuu73xpYMSUULYBumZGiApM2PYz1rVU\nvTBndkoAIS3NiAsre8AP8Vcmu/lAvkuhJdB5Ler2qIVawR6RGIDwuP200XM3\nZgoYWJmbpwwxWM7IygUn97sHvuH/Q7AP3RhkE336T2tdMTUpg8VvxhDiqm+m\n6vUNVnzk5i45fd+J9npyuRCBagEraP7rNnbsT5PsN8SmBWW6viWvWg2zXJTS\nnQPiirHyd+MLHcU+aK+ZJV9fAQQQnx3pLH4ZMKwN9pdcsBYLlwbW1a9g8rOk\nRJq8jd9ONhCZNkyFJKNcyKm+i7QiopjwrpHhhzws21vScArxQkujeui0E+dD\nqFLCE6DwJ47wFtaBcaN2hkFoOx12RvjQJ2/EmCbib/2Qnh0R+VTRCe+ckbkm\ndUF+H1zkQBCCNGVVOd+NE+L5SQEr3YuMScGA6iEukL5JzA5r5WVcZZ+teGJs\nCsA7lgWB56CHfa2TBHbNLKghcfcEEe70gbHYWTOTroTCixcAeT+O9iCu/n2a\naLHbuNX3WgcL2qkkfjnneeLXY8SH8OirHb6sAGP8VF+xIcTsXaThf/lDDYhx\nPMwX\r\n=em9g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.f5c6db8fc.0","@material/tab":"11.0.0-canary.f5c6db8fc.0","@material/base":"11.0.0-canary.f5c6db8fc.0","@material/animation":"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/tab-scroller_11.0.0-canary.f5c6db8fc.0_1618509910643_0.7237504280194089","host":"s3://npm-registry-packages"}},"11.0.0-canary.3793a3143.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.3793a3143.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d38c0ae654611cc3c1d6e1ff753497f419265a6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.3793a3143.0.tgz","fileCount":52,"integrity":"sha512-brs5QgJwGq5eWJoiL5cupkf7FJGhweYWawBPUB/Oxy1W5uoGf/g0Zwt6gT2z7ceC3AqA+E9iDiR2mpSVVQa5yA==","signatures":[{"sig":"MEYCIQCeR/GA/LE8rsRsgkkzAAISxciKpSGPmxdNA+2D5mu8WQIhAJOatW8yZRu+UcJ4TSVf+GxQP93C2MmxOst5QwxikHb6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeIa/CRA9TVsSAnZWagAAFVMP/Rfgz123TdlSioB4AhEk\nrEapj7R7ylsCv+Hhs3C0LzlnPcndFrYjibddpdsMRcOsiqZkQ5DJ7wAnbzAv\nq4R2eomYImVKik3WJ5Fp3j4fhNuaS2134tvaIICxi7uXVBvca+1RrcVgmJBH\n9ahcDShZ4p+t2jSgrbFrxvlr32z1MqnjRfqIr6oUTY/huDIil/oMAEtwhXrf\nDCxn6V5iJxHCZN56Pz8IJNmrE1wXOe0avJr54R+vGLMy1QkmKk1RBciIFd1P\nfGdJX2H1CIUTGY4LXThR2/ofd4KlnmUNdDnq5nZP2pW6UIYHoT9jZXdBeTpO\n9FpCyk1MpNHoh7lWUC4LwQhIqpDA5z9Ikr75rv0EyUE2BnLiIOlB4BTjyWq7\nCr99BzewFBJnEOFrrtVKbvApzd7k9sJS0ZlWneqA8PS2qxHHsnxI0VFyoABX\nVxZUlXSxfBQc4LGvDZzVggWRxpkU85CPTlzIhfKRiiL6VkIcJzteXxUykw1X\n2q3e5vloQGopTezn2OAms06f1skT+5pV1QanXFLJXwS+YPvGYEhh610VXHPE\nLMxlZMfcaP0jAf8AxaNMt3W0bNsmb0U+2V8ix4iG7sumsNUAXdtvWKZ4xDd8\njrxWGoZ7bF4O6nlhtUTa5VvqhflP6PgK6hzhBIkTck9woiiRtagZgnk/KsEp\nLKXJ\r\n=BBQw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.3793a3143.0","@material/tab":"11.0.0-canary.3793a3143.0","@material/base":"11.0.0-canary.3793a3143.0","@material/animation":"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/tab-scroller_11.0.0-canary.3793a3143.0_1618511551217_0.23328348210504823","host":"s3://npm-registry-packages"}},"11.0.0-canary.bc104bae7.0":{"name":"@material/tab-scroller","version":"11.0.0-canary.bc104bae7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2dcfac68fe822d2f47d7c9fc4ac4c1167fe54d29","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0-canary.bc104bae7.0.tgz","fileCount":52,"integrity":"sha512-O/tleFdGaBhAgWPvM2wR+PXHbcS1XjMI9O2VjfhspRcNVNQ29/3mTh1AeafEQ3Buja0n0hieUqWf9SFtwNSM1g==","signatures":[{"sig":"MEUCIQDz1BAOZbVJWZfTSOsae3myNbGJU6yv4tZ5DK/IXsscEQIgaNZtuYAqaT4JxKTo8AwpF/q/n3v32J+9ST3FIBdG17E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeJhUCRA9TVsSAnZWagAA6ToP/ihhQf6EeZ1f6Kl2Z4Ig\nNg7BsSGyBc+dJ75OgwbYbKsrd0YJQOF/a0IXsBo9fM4kKDo3rNTa7USGoWL8\n92k4NW0BrzF1BinC2ba+LMYY+gcZB/edhzAnXuEdqFXuEiTLcE24p5TGZbxd\niUVTEmVxseiz+KCPewbXbLXqqNGtp77PDNyinxzvbCztPQ04PVrrK3SQs9Z4\n/TrJng/0SIA/TJHXhWE1O1cr16r3l35sjlfCNmRwJU5CSDVHOEk4gltd/C2U\nVyriOT26xruCvB/YsPibfrJlRZ5LTi+GAEordPU3SsSD5L6salTF1BFoCFBL\nAsW5MyzEz9htBPG+ry5eG/jXKO30wt/2bDZ0HCcBWavYt5NGtigEMMzygPcv\n+ItQSCa1rjD8OYBsPSDHdTUbeT/cKvbO7TLs2T+yQ2k4N1+IAqTx2ipKwtSi\nnsEJd2l2uhbzflXWD00L7KTFPCtBmV522kNokEDwdpzJsz07kszZBwCkSt/G\nRqP0kJI6H0DrzH4G2UOJW5GEnmD8clm3KAPKVCacXfXAhRtvQL46dsw43PIq\nFMxicb3ZtemBY4kBNrHxwY8+5btO6Ar4tGvDV/7AObbEeAwxRHxk25snw0/j\np9YEQ6QDAZySY2pFbufujqKovWU/bare1bcVczwm9Nf0s08M+6huVtUZavoK\nD625\r\n=WYMP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"11.0.0-canary.bc104bae7.0","@material/tab":"11.0.0-canary.bc104bae7.0","@material/base":"11.0.0-canary.bc104bae7.0","@material/animation":"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/tab-scroller_11.0.0-canary.bc104bae7.0_1618516052064_0.5806715243664959","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f342c3f4.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.3f342c3f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7f7a67aa88277ae96f6e8650f10d808ba469f99e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.3f342c3f4.0.tgz","fileCount":52,"integrity":"sha512-o+ds67zWlsvhJ6DIWeb3WGX0692+tdxc4NJjbAdxdQGabsy4Z0nNNChbrrDYHGVKngp1yNP5UVOlAoImqeyhJg==","signatures":[{"sig":"MEYCIQDa8Qvt6bU6w2tfs8I14LXRUVrvgGVc36b+paToCHP8cgIhAOubM0/rz66UEUL5Fwnd6mSTw4FYkf8xCmG+P2hFFV3V","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMRZCRA9TVsSAnZWagAAdaoQAIo5Aag65IDUt8bdR+g5\n1dBY9D8gV/jTOpSxU6MX660fg1zoLNd+V/IRVJgcDwM0jMqp5DR3QMPq+KXo\nK9vKdOM7/2ej37zmoZJVwKY0KNEOTxWdOIgZwb2CJaSFBk0ci6gJh3alte6d\nkmUxrrS0I5GJdNeHYSTgWBJtxv3DIvw2OcUiLSTXz63k2mclXyMS7CARgUBG\nMsxBym1uH71+jKknspVGdbWLUpBYIn0Rju7MllE4yzi3MEMorFpdwlpVL8jA\nI3L0Ahs7sRmc84i5piP+A2++aaOlytp/y7EnHX2y3kMymRBiInf7pFmdfrn9\nvtXAEMRz2SSi0PZlzsvxGR7Wn6pBkvBToCKzOSgVQt70R2CxqO2GPCrKuum4\nXnMWu5jffPHbphYWbTmrM4aDviibNBab3PRofTMZIn348p5amx6dEtHu/zXu\nLmAtU8vO+wdX1ox9p9HRbCxWyiMKInX3PjjTdSExWyF9wAgqlqiBta0uAeZM\nIdrKGBGOZluu6XBie09mnfAvNMdFVk3I2LpM3/RgniUOCtDCP00tR4yDs7J3\n+hkHHfGrR/EqN0oBrT/yu++VyG19NT+lRjzehH+huPIB6jaHxnEOsxo7qAeC\nU92+9Lafo92R/Psj8YsXbTfYtZze+Jyd7uDxNYfw35kbFFDeA52h4yMiTcDO\n2kte\r\n=A5y0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f342c3f4.0","@material/tab":"12.0.0-canary.3f342c3f4.0","@material/base":"12.0.0-canary.3f342c3f4.0","@material/animation":"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/tab-scroller_12.0.0-canary.3f342c3f4.0_1618527321163_0.9669548791713731","host":"s3://npm-registry-packages"}},"11.0.0":{"name":"@material/tab-scroller","version":"11.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"23ac2c84502a104bd2fe2c45d9e23b55df68af9c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-11.0.0.tgz","fileCount":51,"integrity":"sha512-LzN/ADLjd2HoCQF3z0HEQOBlVKzkB9bpD5AdDDG8l358ujA+QiLdIb7XW5ohw80dOikApukNumKZWQJziHm+3Q==","signatures":[{"sig":"MEYCIQDBl8rbdfYjzNH/+rVjBJrgT/6AXtedr+L+CJH2AhpyLwIhAMtCqMnVtOIwiN1ON94Cq8FXvjf9UEGThqOUUR+JPNCo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":338572,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgeMVMCRA9TVsSAnZWagAAIn4P/RZCfmAw9XRH3FYZaq2h\nEnVdMfPIRiv8nzKBoRSjWlWNAh8268qVsZ4TVyatVOMQ1284CuGtxLjZTJBS\nPABLQ1IzU7EL9p7iKOfkdTHVUHaIU272fyM4W/hwW/joPrqI5Ap6tYzpMwHg\n78sN+sWadiLxb3ZAhrS8GyYXEIiwxZd5hJQJ+iuSYuLl6+rt+IRbzcgUVVYL\n0ncCanZeQklytzzFLuB2RTXXE+/WcC+stoCQQodzYyEDLsMz/vDLmF1isuzx\n0VfT8Ou8XD7pO+5mylKISBgnh1mtzLOvsh4TogEbdAUvBNew2tJtcNwdmzHF\nY5YHm0Z8YfXNJR039RGYLdyaFxXODYysx0qUHO+4cbID10y77QYrWyv0wbEe\n+ifyxU6aC3Axyc6Ttb59QSBx/GPBfwEWh3B627rlAxEwtmznysLnFVdNZFVV\nyqI+t5lOGUPiqZUdZXbkYHCx+Tt5LwR3T+bQSOLjUDHxW5ILmmiO16PDpu9u\nAsHaoiFySrhGtEkZnJPbIIXRuuLVhP1l6q1kcywBhjKdGIs3aROFKBauwbB4\nIp/V+kDlXO5SFfDL6hUIK4ZmAXuhOkD/rL+jgvdT5fc2aMK7k9ip+QPuT7Nf\nONgOUFScaKAqNfgZKl3nW9PtpgFr/nROQOWW9LstRYQshKHy8ih7uv9cPsQS\nD97a\r\n=3A69\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^11.0.0","@material/tab":"^11.0.0","@material/base":"^11.0.0","@material/animation":"^11.0.0","@material/feature-targeting":"^11.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_11.0.0_1618527564363_0.7531122414940934","host":"s3://npm-registry-packages"}},"12.0.0-canary.2ebfc5374.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.2ebfc5374.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"998b159ff81309e06e9fd2c5b29df7dd110d8b80","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.2ebfc5374.0.tgz","fileCount":52,"integrity":"sha512-jWJ9tgpjEz8akkFcljph1j8dSgPyuWSQNYQwGJtRFGhn2NZ+WNqb0ZCqLio5YPchVw9xN9U7jWH9WsDIdnFMqw==","signatures":[{"sig":"MEUCIQDOhYrxSazOzIy7ki4ULi5peRX6IY8Bkn7vQIUCST4NBQIgT+ouOWDFKXE71bbZ+AFFKhxBDjBw2UrflVoqfRs56F4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgefeRCRA9TVsSAnZWagAA7l8P/A2VY0qIITuQ4UN5b6Bi\nrK9buu3M44/UoYcoRARTNQYfh56ujRK5ftXdjkC1PSDTxyL7DVRXGzaZnL1y\n+fLN8ELIWjNvj8CSf3RBrEjeMfC5PrEJr62KQ99ge67Nrqe/bTmCKg7JXDo2\n1aP5SAq2lQzZHbyKrHnhg3fIz31lsch/eoFe4/pL+BxrTOwlNQYbnWNTq6sv\n5LDu0+49lpOVmeQ5bmoz/lICR9scyhrnUmhaS9riD+jQcs8Mrmq5lLxNxQln\nNGqcTvzaxEbWfuE5Dmr3Ab3U08biulIURFapLyTvtkvgVYtMmBSUr0+aYQzx\n9D4HJIkMVUQUnHTli2lvJjgaCxgeo4yeatiaN90Q5GGUFUnynGVmVJkFcoPk\n8oMCAhi70Li88RTQ95eoR3x2LmaMFbP8osftEVbmnmCZu49C1EV1H6UvgtWN\nEhhmf+9H/OAudTCxZKzFWrZayHOFdnafcdYvkTqbHzWQMObGTg6sfMigvAXp\nxqQwP5el0VrU6rdj7oKaj2bQPPccXI2M7G7KOzQ+BxGsvrDQgLtHVnxUFzQR\nn2VHClyuIGIIeV+ndYJvWfVeLH2UF4KO7RYDGcgKTk9hI2jmL39NSIHIORP8\nMjCTupcYVQN0+ICsvRLXw20HD5UQ89Lc+vvdiaV+0S1q28U3vGaT8i0zKW1F\nXY7s\r\n=FkT2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2ebfc5374.0","@material/tab":"12.0.0-canary.2ebfc5374.0","@material/base":"12.0.0-canary.2ebfc5374.0","@material/animation":"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/tab-scroller_12.0.0-canary.2ebfc5374.0_1618605969120_0.8669029616530759","host":"s3://npm-registry-packages"}},"12.0.0-canary.5631828e1.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5631828e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3deeaa231df6c00426b404d7e1d921c4dfd041ab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5631828e1.0.tgz","fileCount":52,"integrity":"sha512-70oZzvqFmDvCmJleMq2W5ZE/ZcuQ6CuosQ/lNxt6EcvmtOrhu63VUTguo+rwLJv8w0flHtJhOWgjGCwbB42CBQ==","signatures":[{"sig":"MEUCIHbjgYlOz+8U80FpL5ifOB5taiPZ4/vEpyqKTcDBjtLVAiEA/AJHJKi7SeXGtg78Tr22TU3KyZTvKrMhr7b2WQTxw70=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgepKvCRA9TVsSAnZWagAAMhIP/0le0n1zIel6vU3X6ivu\nRJdv2PIiEp73IEUv2ru6rpqsDqG4drJHm2ifK2/bywLEUOiHy0JadcTVfjIT\nmPYO0GsslnjbHme46x7PLCunCEks77WMYDRew0F5HApPtGtrlbK6H1XVXQKf\nWlNbfyYIB6IjExFJI7zgYRbfNwAfh4IivurbhsQPxysHz0KXnL42q11F2bIP\nkChpUnh+djCkdekRZawrFjqPPtgGC1ZIhfcUQptDGdxjMgDo/xT+o5HxuVUp\nbaFUOdW9YOd6vGDon/OjtQWj2aV/4CliQGQT2M4GornevsvLFmIKW1k/16kC\n6fWwwXelzC04vewfp4sTUVxJj/LBllWvPmOfQDAz/BIHx61q2zDgDcpTeTT+\n9FyGiz8LfnP32BdOg0e2H/zaC+u+Sh7188r2HD/fYkV9mSm3GVm7nkPPWtqL\nWw42WYOTm5P4vBDliHQ6sFrjR7QIlS1+A0KV2FGOxsAx0JFWN/k/VzCsVdzm\nnEqNt29DlIsF2MbA9Zeii5MQuyMzm02tN6/96liULExpU8zC0FnsKqUD047W\nqDP1eupTlVB8BG56qvu6o+9yEyur5Hdd7juX+HXmB2MJ/AVf6kEmwSTFqpMb\n9Qxv0f7Cd4T0pmjokHILkQDygYzjaemEkw9RYIK6LWAvwVqdA75s8nQ711NJ\nGy40\r\n=2XLU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5631828e1.0","@material/tab":"12.0.0-canary.5631828e1.0","@material/base":"12.0.0-canary.5631828e1.0","@material/animation":"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/tab-scroller_12.0.0-canary.5631828e1.0_1618645678877_0.36637544628531304","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd685395b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.bd685395b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5fa7721e93a7d4695de38436fea9d9de5083fe10","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.bd685395b.0.tgz","fileCount":52,"integrity":"sha512-soqx/zSpdT2Pw0ZRW9NzWR11TkJFLMPSpz5MyqtNunPkVnpoQjpxrjHJ2rXYXQ/QVIcJYcI0SVZFA4WXr9I0lA==","signatures":[{"sig":"MEUCIQCszpGNBMWo33hSUjEnDCMPN495PIFa/mu3SbyMrnovtgIgQXhLJJd6GNaXINc3MeAaPyViNFm+TFxpHHMEQn0rUW4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfc8LCRA9TVsSAnZWagAAxQsP/jNYgvpzX0kZX/2xAPv1\n62gpXGX3LY/CYGnTJhXS7p/3JZ9GDyE8xJ1mcf1r8O9QvdqQudjoevokUVy/\nhfgAAWgt/5rmTO7E7MxgukY4TSHPbBEzXqejHLfbz1dKpN2hBxHKr42HdDp1\nq4ltVx/OUojrqNOquYI6dQH9UV0VYyy0QxDWGwlWiAwxTJu+0A7WU0yHMkIn\ndwbsLsRcxEqJL9kzvYWsnmN3D9bIWgJiq1bhvlvNi/ggMHVQMmbd1C66VBpx\nlx959Gw+f41/Uv58eDgjYIAdRjGJ7IR+7saD6YCQ3USGhzcJ9klk4SGjnV+g\nP7NyGgAJ6I2vqEy7MXzZFyzp331vgOi0jc3rhYhY3iAFfrjb8By26nRe8h4C\nJsUoNiXaF414f1o8H2CbI/SPCpiI4zmBd82x6UZmaJF/WhEf5YB8o1C33rKG\nZAN+ihjTU3IjpuDAUh0CQoPXrLPNKcpcpLMZaaAeuIbAXdRlaa2DVE/UJad3\n3BYhI3tj7ZyvryFQW/ufJ4/J/B33CSxiVcoU62iSWRT/ZLNh/yzBIU/u+nmO\nAVVSOAxk/arHhT21fqKYX7RNsZyxY9o6Mx2i85m/tbnFPf8K/Le9mbq9ifkm\nK726icxRAo1bMls4UJNUD7bHNhuMhqV3Y7VZBcxsWIJlPJKMhAEka//maXbx\nVr5z\r\n=YcMi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd685395b.0","@material/tab":"12.0.0-canary.bd685395b.0","@material/base":"12.0.0-canary.bd685395b.0","@material/animation":"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/tab-scroller_12.0.0-canary.bd685395b.0_1618857739156_0.19438097474639315","host":"s3://npm-registry-packages"}},"12.0.0-canary.b52196498.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b52196498.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"66ed7570fd5fccfba0f93c4895517f8249c2588b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b52196498.0.tgz","fileCount":52,"integrity":"sha512-gYvouwDWLbggXQwKWFZDsB3QuEtTkfUYzP7QZ2jzmDpcd5aRjqeJSYxM1jylxYYBc/7CL8on+vS7+i3FGzfvGw==","signatures":[{"sig":"MEYCIQDIC8a1Z7/kX8KQNiMXj5bFSpIDBVIXwPFcDEoLAKA+KgIhAJxxxnZWeDTJ3EYkVn5I1KZr7do7FEFT51+iPRcxC/kT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgfeD7CRA9TVsSAnZWagAA2W8P/2/scm/6B5HetHoldRwQ\nZGOJsi8rHNsTWyhgXPHHuZfBVlccekSYs4K5akei41EcGQ48lwTLnKED37qR\nBhWaFoqb6U+SQxOsxKAfE+0bo418MxndY7sLFH4a/OVir3DKk1l3nrlKNgo7\nBciLPgPyjsYKUYyqjvUokAWCPP+YLM3cVCwvmPUirVEpDgQinRkL29GdsKCX\nZ2YhymFNtWb+5q8EIuuEA8YWpNxEGTtDNY6tVtAMJhPBkZUAMfqURox8IhSU\n6txBjUnhN/zyvIbnvL+UosSnIaHGiPzPe6MNzerHAmVZfgGOtOBn95HL0uCk\nyF+sJ+S5GDqydePAgshC9AwNqIKwhskXoBAeHf3E1FzRRQT5IE8fI5PzeTnV\nPHC3+gg8YyEQHuFc1pEBsqqMRFFSdkmShPxf7MvHE48E78S48omjscupwF0y\n5WlIvpnsMAfqWs2hwR8nriZq7BmaKsDgKefnUzjXXTXxjgrvabgBBpsuucDK\nhHOLL/aIANZe8Wyz35xBctMMvHaZP2ScmYaRAae2iZXkle/fgn8E3ydhBqy4\nEEf0FK7hc7PA0jUUEk5jycxR6DDiqEgjbB2eD+r5C6baZufLXssP7taosRgy\nJdaDiOsNoRcbpP4V9WbxRINT9wtW0vJEOv1Gh1AjPnNiW531uErmtbmKSSXY\nbyqK\r\n=ph/b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b52196498.0","@material/tab":"12.0.0-canary.b52196498.0","@material/base":"12.0.0-canary.b52196498.0","@material/animation":"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/tab-scroller_12.0.0-canary.b52196498.0_1618862331418_0.02693772970714514","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ba3e298c.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8ba3e298c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cc13fbbe9796301e43614cfb75a83989cafce3c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8ba3e298c.0.tgz","fileCount":52,"integrity":"sha512-jOlRv1fJSGiIVK8IIKEvxaKFZ0qjsWard0+glYRrtY9pceYeI507PDxJF9w5iAZdwKmgAM5FLi1HQebG/y0g+w==","signatures":[{"sig":"MEYCIQCMNh+GqvWJoljrvucYnaqd5nA1C1f0TJiCLujisKMzEQIhANa11YFFky92ib+co/omk4XwXFPwbyRQACIs4+WhtxRX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggDInCRA9TVsSAnZWagAAI18QAJpwjI6Hfyxc5L6gtqrs\njgedqJaBCD0DD9f+S4kMnAjgC5KFfaGnL9xYnPAzcQVcP0sJmp1FqZ3e2vr/\nWyw3PMxRkFP9hUsnZx7AZIMrMWeFE6tdfjCls7HuTx3nwVB90FJ27U0MZdlf\nGfNDnn7PItdufsOKtREoGBhiayKb5+yQT0n3GeQR2cEeiH0xwwVtEsDhfxwW\nojml9T/dzkQ1zkirGG1AaM4JAgdjT/s5ZOA8G5KSmAjPJKYGrXHg2s9JuW5F\nqRweJg+xjm6xiZBEg5+8/qmtJAYVa0ofxw7SsVrtgvkAwrlAybeKxrX++CWA\n96vw5HM9yLuH7UYVRpeglt4DRaHtuhFASZsiJt9pJQeHcvs8W+zUQYJeZR7J\nQnUClCQsaLL3au+y6osBsECsiTXf812rOcYypv6tNXDSoQ8ctOe0+rfo8W/t\n8YaJpAuGvFEFoK/hj/2B+vR77Sy0eKdL9K4x1YuMA+i92Mp/6l9zRNVUrVKq\nIhm9i5YzGkv+nPp7U/2AHZhaB8oa14EBsZS7O9fydk4/KlmnTSyrwiIz5JwJ\n+UXzeRBc7/FH07anSPsUkIAUJ743YG2ERM2+6D7y8C1Vpm2EPJRAtsKZCwYu\n5t0WZekaQLQ1XN8AR/e1Gb9UfEc4YAsp6b+4TF+HGV/tdK7nvm2sJ7rv0OUJ\necsI\r\n=1ym2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ba3e298c.0","@material/tab":"12.0.0-canary.8ba3e298c.0","@material/base":"12.0.0-canary.8ba3e298c.0","@material/animation":"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/tab-scroller_12.0.0-canary.8ba3e298c.0_1619014182820_0.24326757323941384","host":"s3://npm-registry-packages"}},"12.0.0-canary.c629eab71.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c629eab71.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"41131ca1e0080c7afccfbab82760136bf6e446da","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c629eab71.0.tgz","fileCount":52,"integrity":"sha512-1WF6+IWBcr7jDLzGtkLS65OC/PKjLeZpbe4XjwRaPrplexkK/Iw+UpYXQu3qTmW80372WqlV4wDcslGSexZm3w==","signatures":[{"sig":"MEUCIQC+D689GwOmR7XMG0/LczFkQV2naQ6ARyiiBY5qzf2+pwIgPBSCFiJsVAnt914kiaQYlU5FUbgooVx8eF1u4vuZzaw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggIPaCRA9TVsSAnZWagAABK0P/RFWvkklSMlHUsWff+N+\n94AsRyvYNTlfUSlNX9ypRUzMUPVTr1OOqxbKWaYNukm/CmgF+Uwx4iF9YKB/\nF4Sxnrg5Co7ObQ0P1s0jGvxuvUORU8wQHVMFkSDuT/sYnFDRP1b12ct2COrc\nu0ALcwEDMh+RpKwu87oqcpb8qDn20qCfPEYQk5Gt1eVtmNWv3GmJL/bgqAgE\nDAnyx08hmMBbAWzIBg1u8Mt4sR+Z5bgQ/Us7uRHYYSGqp62kzqK/dO6HrqNR\nFydvPlsxlC4epR+Ee7P5SVzkJg4yW0/LhRKiYifG6/CycMC7XnsN8dLrd4wp\ndtT17GuzcE144PxpFmatEQKXMcIg5+B7+LCXt6gHp9qY2joNs2oF9CeO5IPM\nNAYaTiIF/Fn2L40TPQf7BwseUHAQblTVdhe3GiV8Gnvyvf0jWdqLJUSs5klQ\nBtxchhDu6LE0mT0voRYPIQC1yBD2TdGLxxRRbLXXZ+uqOWNga67JNhQxJk1m\nGrI0Rk2r2LBwpBsFtSilG1zV+XUOygkUc+tJQrH9eBNF598gJp6jrqEVb6Rx\n548B29u7zERy59L3aWHVDhLmYpkmgUw2z8+YgZjWcIyAv6fZP2I0VExGbcRv\nwDwO1wG/T/vO0S4m5XIFue/jidQYCMQUOJZJQXCjG/n+BxKrUvCb0P0o1oNN\nyDJ+\r\n=+SAa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c629eab71.0","@material/tab":"12.0.0-canary.c629eab71.0","@material/base":"12.0.0-canary.c629eab71.0","@material/animation":"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/tab-scroller_12.0.0-canary.c629eab71.0_1619035098563_0.35609426782018083","host":"s3://npm-registry-packages"}},"12.0.0-canary.8ace3b810.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8ace3b810.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d073d23f937a33aeddaf1e3ef4560f1a9a7eb82d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8ace3b810.0.tgz","fileCount":52,"integrity":"sha512-cz3gLach4z+YmKbgPBNtIWG8DZ1pWseDFC0wi9s8MVfiQoyUJgMyztEjvwultE/s6MM9dBKjrHij6rPmy6Cesw==","signatures":[{"sig":"MEUCIQCYj9+60UW5LOUyqn7LJJDEWad+0kCV1a0t5QW8Bcl8qQIgaM9EmY6Jrdm3vWQueZrpT7fTsZozsOpwLtty61Zm+JA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggI1hCRA9TVsSAnZWagAA6GQP/232RXbQcdwU1KpAotRy\nE/fOI8Pi8lfN43i7Fm+wUZ860EXnuqvwWwJMEeF+P5I4go8QxP9oEjFDUQOp\n/ymrIqdfPa4XUb/uuP7WB+8uUIYcc3fHFXnXmBidWuIftCXPryo9TsuR+1vX\n9uaEFIF1iz+F5YUXqozVrA7m3OPt4bO8fGkZpnkGMpVzPhsum63VwI0v4oDg\nNrHPl5+MprPuf+pzRKsoRzNn46l0kyDGy20RWBqDKeq1t6Z4VLKAC2BscEah\nP/+CAGnfKMwzRndjcU/ZgVXirqSCZZQpnqtaRVKDDQCPATo6bLtcNERIUUBp\nEBptfcS/s+7EdUgU4y325/Ps3sQZNmhMqNsddhpRXGXM3Zk2TTZQTiFLrqOU\nszwD7Z6Y+NEj863Aq2KqdXUoSCatk5hJjzHQT9eXRuPBs1o7LC2tmEkpSXJY\ng4E1ZyaHb/8pIYmhtW+ZtvM0VeHhLjk96bZ2MFSduW8c+B7C54bdr49lHzN7\nNBTrbCxJQ5x2E2A8wkkhCLTiHllZoDQ9JgfFBXx/WMnJSnG3pKNtCBTZ+wb2\n8GL1Wl4XuUsW7Jj1fYYD+quS4JS2CCHJSfe1P8TpoSAuIuHhPyPLatFBd4Tc\neT86g7V10lU9GSw4Q+HrhbrtuYt7nvp7uXGG9IUpLfixiSUptRDM7AwFR/dC\n8f4j\r\n=s59u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8ace3b810.0","@material/tab":"12.0.0-canary.8ace3b810.0","@material/base":"12.0.0-canary.8ace3b810.0","@material/animation":"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/tab-scroller_12.0.0-canary.8ace3b810.0_1619037536905_0.054478172950096715","host":"s3://npm-registry-packages"}},"12.0.0-canary.70beaf42d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.70beaf42d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e26bd5035224c1420ae40da95e1bc786ab1d3fd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.70beaf42d.0.tgz","fileCount":52,"integrity":"sha512-g/Aj/QFoEiczg9UBNenMYKIFmzkImU3yGjzLo7WSacc1CayshY6kMnC0tU/gcrjMpbb6vfYvxfk78ipqkuwsBg==","signatures":[{"sig":"MEUCIBu2hge8b8ZK8Tp00prAOYUBYC2RIeH09SquhkbPXBYmAiEA0QeU+1VPKrKGByRl1+1+jh3e2R5ej5N48lWu7LClIJk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggJATCRA9TVsSAnZWagAAIlAP/1PiX0fZkSIfKRy0NTYz\nxQg0D5V31+PVa8cOwxXPy7P3uqVOlhseTud+bpgvFx74fF+AyeL+ZPVlyIYW\nc7kkyg7SsJHFBeaosJ1PdsLgxAG71lA77p/ILaOxyiEedyHXIyu+I1+83iI6\nqztWHoESnAK9NPkH8+cvYY1JjD7k9PcMGO98loZy3TR7D5uZ0XUCV5CakD8v\noo66sgTHlVEoEl2guoLvSuRQLVaVzQY0jZl3+kvKODln/KsFkFKRfu4GGcNC\nbReaLGsHCuF0iShWKV2PBBn/kCuyW9kv379VLGI8E5IMsaZo/CiAF1g4yR/s\nlFGEAzP/zdfy49Kfd8pvTjk1PUp3pzj4BO3bix6CTCdH1yG9b1/QynmfX67s\nvse/qI2PCBC5pGHjahBOKuRo48kD8vousJV4Xc7emiM7N4WeaVULfIKdi7VW\nNJWH2lNfa3TNNyDCSLlfPEVRdlLbZTFG0emr2oySAfEnIeHUFGPdlAgI9Cr/\n8+CNBN9vmDghb8q9PgkD92In+OT1NEWUU7UXVEA4yRxaQQiLnGu1fVn+OK+H\nWrZalwyPei/mL2RJsioB5eOwrV00OBfJmKQhRac2RdtzRi0C0MW9x6NYvKG5\nfJbqCgjXux/Oj2Y7eAd000AcuoXeRKO/iUM6XCvyZb8wmGaJ7YWDMmfSXaeK\nDqkO\r\n=U/kT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70beaf42d.0","@material/tab":"12.0.0-canary.70beaf42d.0","@material/base":"12.0.0-canary.70beaf42d.0","@material/animation":"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/tab-scroller_12.0.0-canary.70beaf42d.0_1619038227525_0.3656473715070263","host":"s3://npm-registry-packages"}},"12.0.0-canary.cad489689.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.cad489689.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"92904b511ded2af30575b889abc5762b1f1f8cfe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.cad489689.0.tgz","fileCount":52,"integrity":"sha512-p4zSisFfyghj9orR7T6UkjPKOqWafn4nDniv2L13Fu1q/0KDSSMex7p9U4jBR2RWCyTaRbcWITpxjqsSCdV/8w==","signatures":[{"sig":"MEUCIHxwP2KYEcHoqQuZ3HcnmPniixUT+E7qi2lpbd/6uXKoAiEApkcZHJ9rq94fgRPF0JfhrCebWSFaVSbOUP7+4Zd/VSs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggalkCRA9TVsSAnZWagAAKUMP/RasNRPs/IP8EjNYyrnl\ng/Em+cxocteSQwElTQxeohcWVJsOrNnrV5zWYJDiCLKmRm+aPhXkuV73lycJ\ndT9aenDYVcwSLfE29eg/7Ge3UVVATUFZcj2/7k2Rkl6tr8dt96TdbSiviluP\niDxIbvyUiGnttaCXQjUHdD6f3EXmorPV1R8zUcAGAgqNHC4U6KLPIsomiMHD\n2Zwa2AzJzyWWjTerZ1WhihOf02OB7L2vqKkaDhkVjqhNe9OMh00byweX/+8y\nsk6C0genvLGbqWG8d/lhZaL+nL+xrhqF3YO9S7TL8bp/BPzI09Oux6Yy8abj\nHxIzczAW5BH6yYC/0VxAr5TnO1gMVhQWIuBZ+XyheyLgM63v1ray05tiWGE/\nqidB0GgLZ1ApEXArFVRj+gYYUbSWQiaWF0npu4IIhrTMR2PYM0m6DcllYx5/\n/Ow/FRNmqkvU2spWRH0sPhOZByJD/Sp+AJulYWXxNXFB++FvVPx5CQc97Cby\nMPn9meOM5tCkT80I57Nm51dPZYF6y8OVC4OUMcyeU7QANPSdFOEgzPuY2THh\nmm+N+mIa4Mt74K6run+9iIbJoZNSD8NiNXY36qcRdFfA+jWO9WI5D3z2MPlZ\n7DA+Kxd+RDJhTz2CS46X+vUH5+oyDPe1cjD6GNx4axJK401/LyNQeUTu19X/\nuVR/\r\n=j0nJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cad489689.0","@material/tab":"12.0.0-canary.cad489689.0","@material/base":"12.0.0-canary.cad489689.0","@material/animation":"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/tab-scroller_12.0.0-canary.cad489689.0_1619110243644_0.13847465788355762","host":"s3://npm-registry-packages"}},"12.0.0-canary.d928692b5.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d928692b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"83b7a2cb95c107e0cf52ea2055033c65831d7cd5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d928692b5.0.tgz","fileCount":52,"integrity":"sha512-0jV8ZKeMRsSqOB8AtodJDxHS2JCzZwGvWoZxG8pKf6HCBcDF7mM99o9f1woNCkoNCx9swwgllA0ABE3LFiZC9g==","signatures":[{"sig":"MEYCIQChMnr3ePINLqlURlvLnZfgvLnDn7n5n/32BO/v21+LIwIhAOuSy/7AWk5erMz/BAKoB0+Kw1gQbDX6RrOMwI5jVfJe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggwVpCRA9TVsSAnZWagAACdAP/03zNkGkaHsiNyLobDHV\nCVAejzd/4yQlrfFFLA1DeS0ylM/4JcRayLDmTuO5EYRhIG3FAWbq57senPvq\nkidePlgN0ESF41J84kloaqR3rVrEesfmMtN7icvHsY7mXsoscVLhJvIvBcig\nWbhGscfmjtxAoRtwJUDSgKXfiGQBl5brzeeZifZhN9eObDnUI6DVg/ZsasO6\nt6f5fChT+PxbMWUlNHOmG2q2/UITFly5KtT6bD7XnlQSUh695gXs/La4AR/7\njVcLCw5E47kDkc69HqiVoE204TvV2MgYvzyCg1Ul4jMLN4Gf4e4PNTbQdjdc\nvy1xXQQUGuf1s0nSxjpsi8B23xfNeGkJhnLvnCY2YaVKZQElA0ZY0uAhxcL/\nFwlSSXIBXSYAVRi1bkBGbZodrniFBeLLZc5Jb+7T7zRpucCvwWilwGRKGYuZ\nVTobKXLnAmNhgUrmP+gbjKfPdkjqb/qm+MNWwpRqU+QrFOzztaqt4j+Vcg7m\n04cLlyYT6oefN90PMrupUgraVi+SSXbuzhOaobSOXfETczEYNueUyrWE8/KX\nJHhWpmWHeUMlLJ6qbpjvX52EqW9uSCkPg8KeL8zgLggW/sYUyd3ppr/4O9BI\nlLeLBvD12laiJ6R7A93NdmOhtIjFshOyBkei2EPZF4V78/xTaB22YUmiioth\nCaKF\r\n=+WTp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d928692b5.0","@material/tab":"12.0.0-canary.d928692b5.0","@material/base":"12.0.0-canary.d928692b5.0","@material/animation":"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/tab-scroller_12.0.0-canary.d928692b5.0_1619199337101_0.3484373128452678","host":"s3://npm-registry-packages"}},"12.0.0-canary.8f68de8f3.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8f68de8f3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e20110f0994a7b2da7c24b4a9f7292e2da8bba83","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8f68de8f3.0.tgz","fileCount":52,"integrity":"sha512-mzKhViU2e9DfewB4ZdIY2L9vxakosr4QqvgUo5576Wdl52Z0dBRZxq3fM16vQCl87MfKkILpI3bayIa/GK/jsg==","signatures":[{"sig":"MEUCIQCMJ21COJcTRMmVUWMnWP2wz8i/JzSqRhAOr0Yq2IIvGQIgFdYn1TUSh1BOvW81491Wj+kSBdlidJbT5S2d99ZoB6w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJggw57CRA9TVsSAnZWagAAdvQP/jSysAbcajWr97N6xQVZ\nm3ROB10vpJ+tZMR3lOGI0sFUhtod6BEIHY+Lub5DP1CVwAJhoeRMQa2svPfg\n24GS3z4Clr3t98F2xf9OUSF4OzB43ByYUzxuzB8K4wXEJkOppXZX30JEqX/S\n/ITbniTKidNubt26mcCPD5VUeoVU8rRC612MtmeGPSgqGP/RNB0nNRSYpS8v\nSPf0HMCajuUJC6mpcZTN0F5DJSnWQG2mWuFRuqvP8sUcHhx7Laa7kYP19+rG\nPN2OKdgWQovxOdYKnjLVOouCClkD58yvAaU42TXt1beJnbCqcJahyjs2Q5zg\n1jL8bnjopgjHYFBHYwqIsazNkzrf0w2cWAKxNPuOuZ/g46Wc7FNaYWQ45yVs\nsrxrDw7Xbhby2mCRL5KMb1DSwt+rOtYZ+Xo+xwCk8Ku7fuoBPK+z5+Fqe/Ff\nR2Ftqzf4UgRULHiBUTgVZFx6U1Rr3Ma0LtWYNx3Zg8ecr8dAr512DAhpvOwZ\n0E5YP12ZtMNzycEnjtC5MzvxNc5GE1d37XefD1uckRK/pYDfhaxlAZXzF7wz\nf/n+YXKkx+DOFht1JrspKJGqI7LR45QnT/EugW5MV/aYG4c7fFMqsNBuq6++\nLQOaxXG9qg80W49n3N5/RdYHbIjpfTk+Mj71TA72ToGqlUEd/4XNtF4AWVtU\n4vXN\r\n=9CAd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8f68de8f3.0","@material/tab":"12.0.0-canary.8f68de8f3.0","@material/base":"12.0.0-canary.8f68de8f3.0","@material/animation":"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/tab-scroller_12.0.0-canary.8f68de8f3.0_1619201659390_0.8704752887771681","host":"s3://npm-registry-packages"}},"12.0.0-canary.05753cf77.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.05753cf77.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a665d0bfe3231b02be79766e11ec46d2febf14be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.05753cf77.0.tgz","fileCount":52,"integrity":"sha512-AkR9WrQn+Hrf0h9IVHSOrzPQcs4zntR4hb+y40XqW2/P+Pyrgtg99LsKGyiiCcsClvuEEehLRnHhGVjvsVQO9A==","signatures":[{"sig":"MEUCIQCYhI5cGPVXoRq+jfQiZQA5a5Dg8Y+RxbA9ctagXbT5AwIgND0BvVs1eXXP7CrmDT9lsWLc3UvKGaSVZglxIkAol5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg1vOCRA9TVsSAnZWagAA7qQP/Ah2YaZevtBhREBlHjH5\n2nZ9IB2zPfMt55lB+rVkQ/PeEfIyrFGsVqNouODsxe/ki9Ic0/Zud75uAc7e\nrGh3pBLfhfxwAeBwvrSzudGDFwYFqMLDBlCSQd3on9DMeLOmAd9F/A88Lesd\ne2XqFiy9iWeRugjs5YkVyPLhWFMxzDzYKU1mAuQAWOMrqCLkcMC4i+TValnK\nCrgXIrOFB+0cJjawTEkAbMr2q2k3zUyC09/OAqzBA2qXNC3OMHB0t7v6cjTt\nNUCYkbgbH8+uz89tO807diOmFwax3AH2zU8mMaYGl6TTUjkj7kUa5rnaL8q7\ncq+zBPLE0PA8nw3qWez2i47qKHARQDyTmfpXzLKEta/NCz+U5qQr2dkvKuNJ\nFBEj5WtXj4zXfQ3ceRyGD4/BxDG8S59h8pip0UnfohwiN4w5ynb3arWiqnHy\n00JgtnKTV85YO8Qj0BT+GUdyO65NBByA4eunIsTFpts6GDoFPC9kwIjRUC3r\nnXL53qlH6TRW4aclQmVuzveyGzheWh2DG2j5f7GrQmFJkWcYtuQDiil8CHT7\nCKTZxmFKw4Vd9iCZ0zuxz0+9cOusKkikufhbrWBX+ajl34zEc+tr7GO5kIZs\n7WCv3NPtSzSgmkXqJI+RSfEi/MkE56Dm145Q3gLXF4+jHGyWIZOaQdYdFMOx\nAAuK\r\n=a7zb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.05753cf77.0","@material/tab":"12.0.0-canary.05753cf77.0","@material/base":"12.0.0-canary.05753cf77.0","@material/animation":"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/tab-scroller_12.0.0-canary.05753cf77.0_1619221453770_0.2810135493272279","host":"s3://npm-registry-packages"}},"12.0.0-canary.ef43e6d96.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ef43e6d96.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5c75670b17eb994a84bed7e00ef81a0f696fe592","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ef43e6d96.0.tgz","fileCount":52,"integrity":"sha512-VU5VRG4c3zYX0aO3UHd7jLAC3H/dhoOghUFnK/LNdMaOYkmiivIfPX5eHX310HtB1spBMsUQFJ8xU/oimKj1cA==","signatures":[{"sig":"MEUCIFWJXG/jsVxdJu9EkZrKK+DOYRll9iHAeayg5IrtVg2VAiEAgecuXlZPHkBPh7ogrCPz6evKA9sWu4H9J8lVck6K8aA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgg11NCRA9TVsSAnZWagAAQRwQAIXWR0lLg5tYODBp+c4Y\nVyZxj9tI7VAVbhQwXg4VbM8j5vcFwUmWXAF1k+YDPX2IUFybv9lwIpJFYQXE\nucKPRfNxwK/DoxsieGrn/0ez9sGKbQBwonLFkUmLYfzETgxkcYrRXVF7hEhW\nexIL73tltPSiE+50Ude6lHfZ3ruxIh1KqGc20fwgMlDu/XFJEJVQjSV29f+S\nYzecCGnrmT0hxUanSq5x/yjw8PMOvj1gGTQYIiIv5js/y10D8U4HKFFiOvAC\n4ai2C6eZ09Ly7mxq2W+l1RrPDkt8YCvzzzl/rTF96f8wrs8OP4WSAdjik5uk\n5ghlMwdm9OC6y0rQF5BhY/+PdkCM2qjAlCRjNYelIpQRRUcC6eH3pcNU92dk\n8NKALS4d5rVDLf/uUt3EAlT1jirxMOlxTBKqqbBgDmyr535HwGSacgoAcxm0\nMxPB45SkXYqvLIQS3w9cCW4Sxn+b6CFxLtCJkhMVT/2Y183mA5ayPsZP/I8U\n/oOCduMlm6vmgBWO5SOiGA2ktkNhwaFvNaeRpyi2BNhZVcjJiXxO1MMmyCfD\nqZD+WlekXZIGDrd7tQut+oj8jpwAzgG2at6HppTU2mX1CyHCReKJFH9Sp/wM\nKWvYzKf0pynXA0myZctrDv7RDuc9dqhR+HaVRNSjSf6wkXnVd1KuY8+mD55Q\nju2S\r\n=yf3w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ef43e6d96.0","@material/tab":"12.0.0-canary.ef43e6d96.0","@material/base":"12.0.0-canary.ef43e6d96.0","@material/animation":"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/tab-scroller_12.0.0-canary.ef43e6d96.0_1619221836812_0.7506456222174958","host":"s3://npm-registry-packages"}},"12.0.0-canary.197f64fa2.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.197f64fa2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0c04dbe974e7f21cde81259e5aa2e96457710254","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.197f64fa2.0.tgz","fileCount":52,"integrity":"sha512-g93N2XOpxhCHCgkceVRsl2g/Mh0/qilxpG/dxZNzTDHvlVc2G/uJN1rrctXsUJGGKAhbsjhZYMsR0+3r7pUlkQ==","signatures":[{"sig":"MEYCIQDpg7hqxRgXZseNkgBAuxqw8S5KRcEPnxXXyQAZjLwC7gIhAMBhZHW8h7q4Y9dCB+/ytwzIZq9KJRi64Q58o559Fc6t","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJghvQjCRA9TVsSAnZWagAAv20P/3WVlOK8/ICCCoi/tHe2\nU8O7UN5/rTEFNlwGNvvGA2Ivf3OmbF2P+aYSLr2DGEHk3qICiwDwatoy/G+p\n6fsbB+oz3u7IpgHLAD3tziOR6SDVCieK0oHKiXRrAYS/j6bCqFje3p69/sqB\nHbuJ19VyfCIXohk5VjyxuxM3Tz/TufyImk84ORgQvT2RWAFwvCccqKzNNyIe\nZ6/F+V0jf/QQQH5NCh57qTbhnUsfxuPNj6O15Mw3k0oQiyhHIGX051ws0Zi/\nZNF4y4WQD9zK6ZznRdr/qFFqicLCXrrMbItg3XGeObGK6TYAwUp+VKXU+C1d\n4DndgioISKXUJ7OkKMd4HFjyuuKB276EJvUzASD04lHHjxRLBbnXpuR3zdiG\nbW9+6AKu0PVxzDfkBMBObkvN2sIP7fa+RVKoDd/oIrPH8LgzqHV67EsikXyF\n/7Lm4fGy2EDt+W49hppTXaduhnF6CHfRdQuOiHGG2WopybP5+H8tMLRe8/Qf\n0lZh3//TcvrTheZJYXIsrb7z7qQD9/l89tEy/ghQJjhYWd5eB0t3v5qTuT85\nAFFhwgwvFZEbTXSTi6QSuSHs3UhIFymwy4jAlL7ChydcxKNFObIpw7uImDzr\n10X6SUnnYb4Xovlf5fOU05z2B1RFU0QmLv8a1vOPqoYZ9x83kNIXcicGZnRk\nx74L\r\n=QT24\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.197f64fa2.0","@material/tab":"12.0.0-canary.197f64fa2.0","@material/base":"12.0.0-canary.197f64fa2.0","@material/animation":"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/tab-scroller_12.0.0-canary.197f64fa2.0_1619457058830_0.22007164109108346","host":"s3://npm-registry-packages"}},"12.0.0-canary.55ad2d7d8.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.55ad2d7d8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"175245710b883567261f8b56d06f144c8cc46ccd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.55ad2d7d8.0.tgz","fileCount":52,"integrity":"sha512-MX32yOCg4r6nYpxs/jrej7qkEaVdp2R1QTrGNLtkcO3ISf4/pYDN4IvmU3VqVSaPuJwAipLhY9OrATtPSbjBYg==","signatures":[{"sig":"MEUCIQCy3hXo6qIaxNsWI8h8XyQQorpUj1Y1EhF8ArvrYaAdlQIgKXhYVk3YugFLR007NCMS0huSHsQz+oX2/bzvXxTT0wA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh2b8CRA9TVsSAnZWagAAflEQAJ84If2n5nvg5x3/vRuO\nEZLAnqfiZPtXIE09t3TD75Hl0abYmnVQixLp80RBzivB6e+X0OhgFPoGnCf7\nbKsXghN8v77r2gdJzaFF7Rr2F4JwwscMlx6eEsJ4wN3/Drbd0IzrM9qpNer0\nXJubPzBbaIHMAMbaV2BbkAi1Zm5sR44ltu8hfVuAUBsg3o0bLIhWq604MbVQ\nztkQqFwxns2sfpMta3YOxPImnAh8OhdrCQDIBcFveJRiOjTXNqLqSpbwXw1i\nsJuy1jfBpJ2RAcNYjAwZXKuXPuBMDEzLhVkyJ1KJZT0ibYPQ1jRgpX9cZFwx\nS5+OcXftQetBpillqBMgwSoZqRozVgEUK400o9WgZLggM+AfST/06/P5Kl3Q\n81v8ZlFiUkuwsclHRY7QTEqBBDpPMsKSLOTVB84X+b8ktMv2vn5uVpAbBtQ7\nrmBUneDCuy+DUKDvoyT86bs/VK4xAHbGZDaWRdoDTENfiFWESeeV+OMGe64I\nA1LPKbjdCKRZnjCf9yBtGRYDPOIiW+45RT7/q/vheOteLvqNPDobfNAbS4cC\nWgwBGwqSKUbwLXamfWZyzRUUb2wzlqNKIPAP3CmOFwYMLD2abB+dz+b5IGdb\nVWB/U1RMPgBGVQGPVM7isYXvqPzi9qxdCh3djg7tOr85pQwF6Foy0F9jnDp5\n8dea\r\n=RRW0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.55ad2d7d8.0","@material/tab":"12.0.0-canary.55ad2d7d8.0","@material/base":"12.0.0-canary.55ad2d7d8.0","@material/animation":"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/tab-scroller_12.0.0-canary.55ad2d7d8.0_1619486459597_0.3483891283752787","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec4ac5234.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ec4ac5234.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ebc6c2345cf28e2f564f043823c3717b311429b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ec4ac5234.0.tgz","fileCount":52,"integrity":"sha512-7ZVEOw/UOWeeg0i2j3+JcL5rKvKEpEAJvi3SSrTAP9nU89clQeZyUJZToekRxwoKjbESldUXQVMI3054MDhLyQ==","signatures":[{"sig":"MEUCIEVbkz7jj5G3RsEn5h/7G4ex9uj9vVreevvYTGckJ2/dAiEAvO4S6hIbRwmFZ02XWmPbYoXA923jZkhdnMVmlOUgr7o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh8RuCRA9TVsSAnZWagAAQjkP/Aj2L47Zk08fDQCVz5vg\ntYQ8FmJm7PtZnsZ6Q4EmtUzle0YzBVCEv4MLvZL60UEjBt1IjK+Q19VGw+yC\n9ifXEv/AIlWcSC6hJpCbtdZxxJUdDZqG04/5eqrKWMqbNVRQJthwxjaTna+z\niffLVdPmyrgvERFlxG2NMwbJJ7t0tTXjsoUPgESP3DKGVMRZr4i2RXk9ZpXQ\n20EIgC0apbRjDAHVBGgmYT+aaMdk+5Wx4CZXGSZsauXa92C0PdM/B0e44Byt\na6Gg4IRQYfjj8a6zWA6wnjDbijvp876mYwFWNJEgxHBW8HPveJlDx389YHX+\nhr/t3/E95zbAgPSzbadp+3vkb3r/bfOqcUXhp/YZbKewGJc2WMZ/DCJTh19Z\nnKGHnpioTHh7PiVi2bh1T6ffh746oulxMG4feu+iTjKBjNmfsrNhUW9swoYx\nAET0JUkGROSjtMDZxG09SUbBTKqhBk82jpWdzFiD36fRLVQ2qCFjhOhSZ6Yg\nRWdbYm1G53patbkS8hslIt6a1mIFOuwZ1qjFztgO/R9NSlAlEmMQewwVNZBb\n1yw9dlcg0+kdjd0MARKZcUZ+/iScHS31v62iwjV55f6etjeuzORgmae70i5Q\nFOcQgpqGjHXTyL7GhuSUZkgZzTeESbLUnROmQkSNoCrvjVbhYXdBRvaT6I1z\nZ4c/\r\n=6MUM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec4ac5234.0","@material/tab":"12.0.0-canary.ec4ac5234.0","@material/base":"12.0.0-canary.ec4ac5234.0","@material/animation":"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/tab-scroller_12.0.0-canary.ec4ac5234.0_1619510382141_0.20194221066100448","host":"s3://npm-registry-packages"}},"12.0.0-canary.b0579acdb.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b0579acdb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2beaf72e34b530d00cc5071a135d3524eb10a285","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b0579acdb.0.tgz","fileCount":52,"integrity":"sha512-Airr7faNXnf9sVLIzl7jPXA+gHTZOWCLu0yYYRsiIGDECQ3hl8UavBXWhGjXIZCiMFe27sjgSi/6XZbxQyBAkw==","signatures":[{"sig":"MEUCIQDmQhIOuM71O1SB5cADbc8SdswuCwAqxZ//o3ijveJ0kgIgFxN2BfqSpIBWo+X7jfh0N/DqALNS1EzbNQbovM21q5E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgh81QCRA9TVsSAnZWagAA5rAQAIJUpS5SVoxSAa8Z16B3\nQp3oENoHOr2BUkQzj58sc1wgTNUcXMyVSWGcyQmhbFqNmvWbj02Bzm3F7yJ3\npkiuk1nTPR+OsuiJ7gmDDJgEoB3jwUY5zzQsZV51kA1p8XH1q/z/D2NKqVFr\nLkgC8ik7z+LCMOZsimLZcGV7TZMP+xOf+LR5yh1yX6dtfc3rWpECHKUSu+Lk\nfhZcew33A7GrU5caXpI+S+ZY+MwONobjJQfDt44bkWUSkCtzwLpeTVq3neYQ\nwD2Qqpmg7HUO0hB8SG2BSQqIsqqmZnkslKKJdoAunO6FmlHVNbSJV+K7+8kg\n8BViG7DB40QAVyu5891iZzlifCL8Qo3dG0j97GCV2zQJtQm4e6Y3FVerk8vN\nLf65Wc1taKa8hWr+J0M14/lPKAaDYvb4p4XBBWB6SGHcTulJLnCFb8T0YIcG\ngKIyaP7TgrVIxpgfkH3dn+NNP6gE4Fd3KFICuGDdxjw8HJm7Tk21GLTgW1cQ\n9EiAS8PHkAzBeL+Q2+gRtF4pBIkXj4jrilraJbwrat/mtajYZIoNfJyKOS4b\nsB5zLPPIMKAtXWM+KF5oxP5+LT/ECkVn5/RbG8XF4g7LyRFY2Y48jmf1NL1k\nDak3EEEKVLZStbm5sRZzeAiZfK8qagqV1ytRIiioUO8qvtuMkB28QiClIUcW\nkVQl\r\n=HmFy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b0579acdb.0","@material/tab":"12.0.0-canary.b0579acdb.0","@material/base":"12.0.0-canary.b0579acdb.0","@material/animation":"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/tab-scroller_12.0.0-canary.b0579acdb.0_1619512656535_0.5319241817678766","host":"s3://npm-registry-packages"}},"12.0.0-canary.81e2d4ff3.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.81e2d4ff3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6cdf15ba151d76e421b1f6cf906b27d6b489b55e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.81e2d4ff3.0.tgz","fileCount":52,"integrity":"sha512-Uq8+7bpI3tcvYfMUBaTuxhAKKDiWqSpOXMRZ1CA9gTbiyQGEUT24jiyW0Y0Cix3oTA1TH4D7ynEsZXia7Hq6/A==","signatures":[{"sig":"MEQCIB3qO4O4JOywNBQrYa0E7AAa9PhyBidX9+n9VG7hjQvIAiAungtEkoycZT9vaLLyB+W3E/GVcJoNNQJVaymG1NFVYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiHsTCRA9TVsSAnZWagAAnu8P/A59om7ssa/vuYTZZ3nF\nvc4WkbLx2Y3bYnRF6rHNHs5S/g2amiltxkQSbb3Y8/+B4SMT+jO+6bt5TYwB\nGWNPf9AzENQbAUBMTTkOsqO6OXKUVA8FYCPGAGUf75TD1ojArBQuuDQx3MlP\n1S3mmA5PSzyehoJw5udt2ndyID/6E3qbLX/+7mjaPnEyGvOlWpb1Ak096Qow\n2dkQBgxDBfxD18Z1KgXG2MYFWuiwULO1EE/tyxrKgthXeUdqzvrhOBuzp7k2\nVUc7sBiSYqP/t+tUvcSGA2sjlvg5PGBvzjjcBejnqJ5NPx5QcstIhbq9k1nE\nVKwA7KfloO6Tq8dGjuEP0KGnm76WtCv21wKOaSLvPfTm83RFRa+22Sw5eC8S\ntvfUM/IscXd7H7/3FuVSMVtObhrGeSpSpG1telc6Sk+bjboBgCql40ZSlRB5\nX9GCxUweUwEcBqakXn80OLh3SR3TvPNLNXJCBfLDuTOcuzXgY02pMMoCnp32\njkzuRuYqmohTpaMrHpqnQDJktjBhfAaZfWk0YiuEcinHDeaVFD2sMFlzw0Zl\nVk+YTChqYhqfyh+x0dzhxF7JyJgAhTjayuVRJb7l1WdoC+x1SLdnISOF0xeg\nP/jyLJfblkYm//vNSTWfNG7SHt4pWaUs5rap+q0cjUkR/Uo3jgNCt8+s+W+p\nU7vw\r\n=4aHX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.81e2d4ff3.0","@material/tab":"12.0.0-canary.81e2d4ff3.0","@material/base":"12.0.0-canary.81e2d4ff3.0","@material/animation":"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/tab-scroller_12.0.0-canary.81e2d4ff3.0_1619557139413_0.9849169703516707","host":"s3://npm-registry-packages"}},"12.0.0-canary.c8edee52c.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c8edee52c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0e55d9996d812a92a7ba8929fec45fc4d38f56a6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c8edee52c.0.tgz","fileCount":52,"integrity":"sha512-wsv7Z70TskwpGwESKYotm1OQroHWOpQxR6sNBiqBCucJWemsTwh2zKEbpY2KyBYX67/sA8DM1Q6X6vEtQYBaxQ==","signatures":[{"sig":"MEUCIQCwmLG2gpft5gDcnr9SBTM/Zptzk8uYmbyGPNBNl/qhZQIgE8C3U9n/E6ldV6pufT6i4vQHXxi0RQRdzcOjGlb5R9s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiIZkCRA9TVsSAnZWagAAnYkP+wRUjsgNg/TkfDf3DNAY\nOiz0h/T3XkFiBRL59NdIX+MnJxt0VHzYR0Qg6VGfJ3QMHvR3Rk/pvc2wcbno\nVuE+lFiC6rdmp7h/Y7oGpAdLzia4dipWrlbsmRgB8+kD37Lt0wVCW3bWvCCJ\nBQhFg+Z1VtjEk71p4AafTiWNHNA35VgarR7moLIvGGxxh1Tnw+95JCeu8SpQ\nd5wK78MRcSXysmlSqUdmtGQUu6qjsY8BBrzWvLNNLHUXKvPQZN41/ellX6GU\nC65WWm9LLlESvZrlgLmbqdVka8swNwooSDv0ZbDDoiSnkFvFpo5gS00pxonq\n2fu/RRhXAQkkCLX/R0b8BfiSYRFa4EkJk52kJzcL6c2KjsIL/q802MBRKWcS\n5ZCAywSxPEPxsooQtWRoXx9mUP5WTO5+JGyQZ7+U+LSr/mKz2tTHgTN/L3Tj\nRXBmhoJuWJdCBgbruGYv9Gfj+gv+G7im+72W3CGikP0qcllgLdkspvy9aE+H\nuM1rbBYBbB3H5azXrW7t88x7RTXvICHDjbRoDhk7IQVHOv9nDjTV63IDeHak\nTFUQ6fe4cGv0bzMiQHzjEyddz25ya4o0clPbx2RnuQGAgqoXo6UR6zpA3nPd\nqC9owK6Rs/T0r3Nfipf/bOBLqrfUqHnSaMV+aeA54gSIpiU5xZwRS0H9CYp2\nQoti\r\n=QzAQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c8edee52c.0","@material/tab":"12.0.0-canary.c8edee52c.0","@material/base":"12.0.0-canary.c8edee52c.0","@material/animation":"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/tab-scroller_12.0.0-canary.c8edee52c.0_1619560035888_0.09307090817535912","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5b6110d6.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f5b6110d6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"91438e5684aebf6d51ca9e8c18567d3d9fde44c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f5b6110d6.0.tgz","fileCount":52,"integrity":"sha512-yWu25hY08opnRGVPkTx6jIM6qdUcUIk4Hzs8UO7/r+8PHpqez8/odFA2I5S2PvaPpq+4MMd9mP5Y3duYPOa/zw==","signatures":[{"sig":"MEYCIQC9EJQWLylWkye3nuhaH8Xwba2be5s1Gk+8Yfin0nawxwIhAOoiwEG16rbiJqvr2+AxyailpomnEd8gcswlL986Ldp/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiItjCRA9TVsSAnZWagAA8FYP/1MrrM+eBblsb2ZuAMHr\nv7Nk87KNfba78RQpquNlPaXO34Q5RB7SlQmpuu8Qwuqr5LDQ1q1iOqHedJOU\nIw0aZJ3bqaJShEy3/Moi1rZab+d32MYnZDZuw5fFPL56kRiFqgI4EEc5j673\nBwUHq0J5DAlp0yWIZo8oxTR9T7wolCWkGhrIoLSNCd0xma7QCO3INw+SfFaS\n35PMCNnqUvNxaeTfgqvkLVpoMYQJaaC8UDztNfqhE8Og9GuPNa/JXNVv5P0J\ndKueTy/locMiaj/Jv7Lp9AjU39rcn7oLimFeVuWb1zAMxc7pJ6OZ0RAhfZNM\nM9AiBus9Ux58gULlEGQLJbxYbdQaSbC//jokiJ/FxCONNwnjfyUYPIEi3hya\nbHQz2YMXYoMLTfAIJQ4X7ImWoq5pPOOQzPX5HW1Pj4DPDGmVesoK0mpWIaWH\nDbGpjYIxn+Ur5lHymSJnQ/byDrHHyW9rN9m76YgYyFnKy9zIfN5AQiQIoMTx\nEQcBF0M49ryYSaTUiujWVNr6zwk5+SY1/6+Fa1qzwaJ6bmzU4cKhFyDbBE/G\nxqlFsbyHleiKp8D+R+bqYSk+6gH/Ycc0jDfXSj5O132TrKvBgfjRXyeOR6/y\nIw1EY3OowSApahUOh0pKuuX0vlN/kIsSQiL9MtGmOSKd2vpkMJuBN4oRlABH\nqmOR\r\n=+Ple\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5b6110d6.0","@material/tab":"12.0.0-canary.f5b6110d6.0","@material/base":"12.0.0-canary.f5b6110d6.0","@material/animation":"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/tab-scroller_12.0.0-canary.f5b6110d6.0_1619561315353_0.6895079298055862","host":"s3://npm-registry-packages"}},"12.0.0-canary.cee9b9e22.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.cee9b9e22.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8919f3edd6371c8d3bc785461eadba6c81e09857","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.cee9b9e22.0.tgz","fileCount":52,"integrity":"sha512-TtNs8ApkQ+iHQjmweSUk1e81lLlNWT5UCLt0dYQSvnFWN8Z8aUkYNQKAYQ/S16XNoBlOOjAn23HYtGpoobGfQg==","signatures":[{"sig":"MEYCIQDLxhQce2O9eS3uN7CDb0gOmsGvQnV001645W+sWeYMMAIhAMtTHDK8uPFBaJghQzTRrEVSgn1YvK0I/dDhxPQbivd8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiKjPCRA9TVsSAnZWagAA6U0QAJ7Z++Mq08NnBb1gOpSp\nIVZ7UvLt3+LTELu1EFzYgv+0mWLh8g0evju9t8o6XMgXWdhV9k3KT6XNAciB\nIf7mwArYZ48qfH8QtEhZWqWlIaLdzKt/XkYycmZGjMeUM4F4iNPIXboow80i\n7p9TrVs1VLEqnkeVLXTimYmFQjHYi4OnjIEQbLkG/grVaX1gUl0snXK4g7VH\ngbOp7kyV7yfT1yqKI5GHuoVIHGD7XKFMCUaFoJK9+se7Lw4qUb5Lgkzx0CXI\nTGVYB3lRTcUuzdNqqlVpXDZR/Dc19EHSoWd465rnpuFf9piImIDZgCYCRz3w\n9BC3Qt/2ynGfEdiJx7mKD3SGsgb0S+J+rIoArSfovRC/cWRnREHKzkWqlh59\nYW2aa5QE4asFzL/sZdtUmdKDw3SOb9zdQ93vnalbnFNYfpNI2y+wVNrUs53+\nnZgDy9HftS620wSlBCNi2RUJrlIm3oni3Gv1Ueua+Yv59ZsFZMqN/ithBdYT\nHk+V2fLCPXn/MsxnU7Nz65rar9XC5RL8P5ln99ZnFZUlxv0Wp6ov54nw1s+T\nQD9PCQJvSzAkUEFkEviD59Fz0DBfd8nrnTgCjXGQemIPYeq4W+9fNQKw8cXL\ntir1FuBU6U09sCIjGxI6Vsc83myqzAX6Xsu3GNa4u5IigL9Kl9avBTS4Qznt\nBU06\r\n=eMOA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cee9b9e22.0","@material/tab":"12.0.0-canary.cee9b9e22.0","@material/base":"12.0.0-canary.cee9b9e22.0","@material/animation":"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/tab-scroller_12.0.0-canary.cee9b9e22.0_1619568846831_0.3437060298472001","host":"s3://npm-registry-packages"}},"12.0.0-canary.96e83fca7.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.96e83fca7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5180f6b5f9244b04b7493e3adc7377fd1a175205","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.96e83fca7.0.tgz","fileCount":52,"integrity":"sha512-6VnOblmtX+VsFQLVxpWermMvmlsZ4uVnDLyctWZcpH2a5Z+ObSK6OffD6B65KCBJc8hC+BXz4k5hhnLx04JNBA==","signatures":[{"sig":"MEYCIQCka2eCQX3MD1iOCReL0EfN/frCmsfNIENiJNWk+m3A8QIhAN4Fk/Xo3jbRno8M4fM3XnOEyUQ4kiHJrUjrEwmKk1re","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339064,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiM0dCRA9TVsSAnZWagAAGuwP+wVkeiU/Z9ekKYLiupF9\nFYdQKtHM/day7psyT96yulBoy6VXWzLy7TBNHQ0hPPgGVvCs+WutWrNTbS62\nfuqmWm36Jr/oQAzffA8wUTVYyqyew+JYEwLyhIiKTbuYGYUHNXInAD25AQ+G\nL+JmrrvcwGHx6ZKV7MHJL2JmvLst1BDKlYd7Gd8cC0RuutLUcz8q0T+8/p+x\n+hm81XeQcyr1NXiUbdJ0L5vBoWhFgHmT2tIK7oFOtJ2JuT13lMXAz0dQFjC+\nWtjNOtqQtERJECOEm+6SHI0gs+XNKW/TU7OJJxV59CspCO+QasxA7cya10ZL\nfDViQ6dCyDx9rSmk3HoI3oyxjcHzlpCxrrExz978POpdsUHCEXCC9WEKre1M\nD8anq78aJEXL4apdSZirHUg6w5iXONhz19gBiQwjjYedGbepfM0AE6q24QXU\nBgo491zkCjS1IWLpc5quHD2glNSLZRp3nV2TPOVy9hnG2h/OF2g5td/+OpxW\nlDHR6Z+EeXcNDdVmwPTCcIQfUJ8KP49SdTaom53Gcd/XbyxbpH7ud2XWGwbW\nQ4r4Z+cW0iL1LHKGnCk0FqWYSQZprlnWfkTJt7uzQBy6YGHQg7STJHB+PFEC\nhXXz8RGcO6V9skKxOtQq3daVxB/ErnFvWn38QJ8kWiMiHXjOzZi0qlLIsgUf\nREoS\r\n=5bBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.96e83fca7.0","@material/tab":"12.0.0-canary.96e83fca7.0","@material/base":"12.0.0-canary.96e83fca7.0","@material/animation":"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/tab-scroller_12.0.0-canary.96e83fca7.0_1619578140898_0.8175132418121471","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c497bd19.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4c497bd19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a9d59bbca52f2cc7b1a97ce46e913d652b0bd3fe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4c497bd19.0.tgz","fileCount":52,"integrity":"sha512-1rhgWXFB23h/JmqkDug/uPMHWI4+tKaUufDBdx7zwketaYFIVZm0pWL49mNsowJHbSPlj07ZkzEkSveTlTuKNw==","signatures":[{"sig":"MEYCIQDG/Tg/ospfM+V9A+9txH6STjaui//O0PiRlZo7+rYFQwIhAJYKbhF+9sMwIwmGjERpl/RbBQuZ/bJ7cdTCaSQRQ1VD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339150,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiaFmCRA9TVsSAnZWagAA/t0P/RKS/MT77WREcHYWy/O2\n4YcEBfVz6cEEcZuUtN9yBQAE1768QjBGyWe2U2E9zUAaRNkPAAWzrunJKeDD\n5fYT45ByrXGCLeVtgjGsGUvaCWsokCkzD1pVo0deulmOkGIothhe894OgHQd\n36xYQURgjjrOny6vwA4iIm3DzwAUmc92+mgKaS+gughZx5uMIZqiCzdM7HBR\nLCAMPfuQDV3tk4qbVb5FUJ7lR/HlOrzdgNjvwScYnjf/1/pryYOo9eN2K1IL\nVWzFDodOBpLYvjZbAg4475otikIBXGRNvLOE4hnNBYl0SkXDlafgC/EaVzQh\nKEwZvX9XslQK131bIUY1G9/BvqhSOxDYBnGHs5aO9BOpo42PYF5gnUdUopQr\nrd+h0WoUF5+NiFbdrv6FunDSFAMuJghbQ+JCEOGybkOV+kuooQIu4vLm+4Mf\n7apMzfo49slK4Ig5+0EwyZZdzbgBjjxQaNb9Wa5dE2OxWAlCezmj8J0tJLfO\nlAdYgt9svfDA7tBvqq8VRoJzU/d+eJaBZU5gibPZVvR0pde9DfiQTW6ZqcBh\nBs3sfVdAe9kp3gNw6aplNQLL9WpDO+1RLTVs78mjn7mhYFpc5a2hUYrgl/nP\nrbAWskp6OCQsItvmMa23uToq5H8XNMCwcoVfTt0nof9jV5BScO7PEbw5/9Kd\nmMBd\r\n=/CfB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c497bd19.0","@material/tab":"12.0.0-canary.4c497bd19.0","@material/base":"12.0.0-canary.4c497bd19.0","@material/animation":"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/tab-scroller_12.0.0-canary.4c497bd19.0_1619632486405_0.9441936567551095","host":"s3://npm-registry-packages"}},"12.0.0-canary.105b15b96.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.105b15b96.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ad292cd139e53fddfa3a711c6e0c922ec0be89b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.105b15b96.0.tgz","fileCount":52,"integrity":"sha512-ufqicCE/Uv3bPYyLaDwmwZlR3fCF5gAgevEng4d8CpEQ7EbMYsEvxOnXe0VmKEr6NHqlUE+SepITazSOQWK3dw==","signatures":[{"sig":"MEUCIQDfFHganMbhwlLHPx8RC0sJLdIwxBvbu1dIViQo9odnRgIgPnN8J9sRP7gchU9wBUkGY5ZXuh8kNsjnYIK3KRsBMvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgideWCRA9TVsSAnZWagAAiCYQAJEYP9gb0ZLmOz1qTgtb\n4Y44JVtgkVi/0AVqFAI7EqZtJuvM/Vkem8HQm5qAtlklq9unYeXf+C/mlRBO\niDGLnWd28zxaQcqTtfVz5B1wsnJMsTJIUUddyHN6vLVNEMuRwK+w9aMSxGmk\n2NSAUJZMl3mqleAAFeKNcWfesrMIbO4TNBfReW2q44yqs18VfN/sl6dRvD3r\ne2Shk1o7HSB0QzWrV7HW2EJj1Gp/f57yGhLXcRwzLWUwNX8LOWMRWu6LRGv2\nd3eDLadzvYNxD95ydtEVKUTQPWNJQgUVpfrAag35hEUJstCXvC/91DtjqT9i\n68//rWWSTk+pt/CvBZ6T3ZwJYnHDeGHwiU+4nxZnfa4O98xVZNj2ELeVqBxo\n1fPYXnDJn3BYHbI2a8mduz0CRqOSpT2gyFFbna1zrTQJOG61FEfGEMGg74i3\nCYOgeLizDgXEE75kP8dba3Vm5sd4NFiACUyP9hiXQyjkmPrCbGeRIFOuFlnj\ndwm5RRenRlcMqficZSfoUuPemY7EmGAD6Vcps0t40xZODUqsMlti8EIZIpWn\ncuSCg0ZkkBoUOTiowG796E4Tn6ZNA9ESkVO/P5MkywZL1OtNdt5wDL1k4aaj\nIrVy05AyHAzl/dBR+c9/MzVWp/3DRs9aYMStkuR9evr+9cXSjZJUUiQ29xi2\nEsg0\r\n=8sCM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.105b15b96.0","@material/tab":"12.0.0-canary.105b15b96.0","@material/base":"12.0.0-canary.105b15b96.0","@material/animation":"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/tab-scroller_12.0.0-canary.105b15b96.0_1619646358000_0.8394235407422364","host":"s3://npm-registry-packages"}},"12.0.0-canary.6e20259e3.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.6e20259e3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3c279362d9d85cdc63747e5b40e445c6da0fc3fe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.6e20259e3.0.tgz","fileCount":52,"integrity":"sha512-5r7SAV8LVBRt0VpEWbQ1APn/NjGS+guxGLeX3CbdjJVU+cAtW7lDBzdNFTOi5bXGkGdV6xdNeP2oy6oa9EbKqA==","signatures":[{"sig":"MEQCIG4UJDnAfxfT9ojeA4zjpqVSKaH7Lmv+xQwsB4Efp9IyAiBmIi6o5FJzykyGd5CJgi/0fng+Nq/1p5V3XFcDcuBtnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgidifCRA9TVsSAnZWagAAEYsP/1IwGDmJIINyuTDel02d\n/3LfltDvIcES64AACDwXQAUfk/T3iu2UpNE2UkVXG+6j9QiuzbkmvPYhvgSd\nZWJXBTf1AVp8428zluW5rx7deDa3kaq/rGZjtnhgv8DjN9/mnstIX2QjzTfJ\nJ8HX0nAzHHnThsp/bflcYTBWPZkioeDGYjAWbF4Iz5NQ23nm1MCB+SshiHDS\nW0an6iMQKKnvrV87lr9PvCVDrzmr6yuqXeBGi3OuH1Z+KWa1Ryor82y7Qp3V\n4EPRQMW9heaUrmg5Pz3pbpBVJbkahb8bkvp83NK1A3Y4nnTByYsMpBUGuYtr\ngAGy5R3VQLaBLP5fHe1AEr0MHqza+b5wViPUPl5ayStNutzO7i5MN4WWl6ph\nlmurNTpdMJLJjtUpcYXU/pCnl5dJx+Ta7rqZJEM7NfhD8tbdjsrYRzFZO+QN\nO5PTdNoZsWiBGG/cmcDrZfGOR8r2Lel4Jp78m4/F66btgzDBY+inO8ngpyzg\nMNdthAb53tyiIeeyTs6JHV6epf+u1GobezJiinUH/SkY4mw3vIE590QCNYcw\nj38tPIUsf4gvrHDKXLVQyNQOSfM9tzjg2NrRYUwDFZzxaSmci9yBvQ+DUeTf\n4GFcdM1QIWz71HNbI7p/RplrOHuMbAiLaRtKqY0TfcZhFNNra/pb20OIOewc\n7dLU\r\n=pMS/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6e20259e3.0","@material/tab":"12.0.0-canary.6e20259e3.0","@material/base":"12.0.0-canary.6e20259e3.0","@material/animation":"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/tab-scroller_12.0.0-canary.6e20259e3.0_1619646623013_0.12048143710848969","host":"s3://npm-registry-packages"}},"12.0.0-canary.0f79a5d74.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.0f79a5d74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"eba6d5ff7803408e8799f4e51b8d2d11acfc8f55","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.0f79a5d74.0.tgz","fileCount":52,"integrity":"sha512-P983fqJ39zevrRIQ4EP3/JryuMTwR8M2hkShrmLqP3caoTGHM0wEgQXaqrfWa6BIimnXPxVlCrZnt6FH1581bw==","signatures":[{"sig":"MEUCIQC6wGjleGS7PIIi/Fav+lH6oOiauZQhZlvhbNjvP56TEAIgTjmqrehkwnYI5kwfNmyA16VbnjG1eKOKDvIbOoC+EI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgieU9CRA9TVsSAnZWagAAKq8P/34lDMaA6MxJSmsAx9Yx\n8kSamfRLa9nIbtu3+EYJIDMs04YM2L/K96UAdyDmTbaY3sju9avtlyEE3Xya\n0HQkqVjirh9vR+sZQew1VLt4d2EiJtHkOjsicvG5G7J/o8pGU8mwEpvoml0x\nmAxoeIN9A3y5lA9DJxMfLnPw3aC+PVLbqH9oyH6izI3L+ZtqCQVmajVd9xoe\nfDtP6V7w17uO5sPOX92caZRFTNJTSfiS0tiNxEUKpgmCuZtYQIPWkRA29bCl\n8YK5wu6D2XipC8EDywy1IvMcnWRWXGj4v06Zyp8jj55r9XKmC3lBOjL2jYYH\n1xUifJVP6Ptvm0VvuPJG0PZSsIadmlK1fulrHfoVGnDYOfOsa4je9Vmo9PxS\nhtAYoZYubSPLBGhw1y4OvWtSDLHatxZ9PNPQpL23d42ACexuicI3cVEJ3VL/\nrDJqPPRxx3qZCLSvC3vgGwerKm9a8dIa45m24ML9uO2iQr38wtfweZkP53l9\nm3p5lIFA4/wsNE4UgmgnC+kjLU4CLD0OtXQmaUCz1DcYmqKxL67XjV/UVYO3\nPn7QpytEwMJu+p5KAjUfVjN7L97uQuEAscNiUs4/R/6tBJmB11Q3U1K8lGgr\nv/mwmMegFYtJm2ASm0+Za4yMXZYzuVhx7EGov831K4tGQMXAyVwPruWvXCvf\n7YPg\r\n=YIWs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0f79a5d74.0","@material/tab":"12.0.0-canary.0f79a5d74.0","@material/base":"12.0.0-canary.0f79a5d74.0","@material/animation":"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/tab-scroller_12.0.0-canary.0f79a5d74.0_1619649853465_0.8401272222066742","host":"s3://npm-registry-packages"}},"12.0.0-canary.84f3db9ed.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.84f3db9ed.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d9d252e0285db20d03d1b794e6d08a1168ba4f9f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.84f3db9ed.0.tgz","fileCount":52,"integrity":"sha512-gC/B62lvYOv6c2pV+jWVCDiq4sg5bYvGKh+RKYKJUK38tRmmzKbeYdPA3f6GMIkvrUHuVSSXQot4gEeywMXyxQ==","signatures":[{"sig":"MEUCIBMy0PWYD209sPlO65a98t/ajkeEWeuDo0AZb9XLDB0qAiEAlbCDGhOC/ynqk+pSYNsAIYGAYgOzeRBiSUDUiQOQM8Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgisBgCRA9TVsSAnZWagAAW4wQAJVGA3JJxMsNKf1WooqB\nH3a7ZT9eW0fr6eZpAgCwfzraISArCIIVlA/sK1AydfJ6HLmrH78TzbnCfd8x\nYMBLyhn+X0jV3GUPap5u8f0kWMluhN8sFqJgHii+/IkbNetxSM6pk2cym4qe\n1VmvhvGb+fy5VvZ1TzDrEd9TP47Xg4hrg1kvXpRO9zXQCwDhIRs2EGuFQ0wv\nVL36bcpY5E22KZ9xa//PXnRk/WeNHUKCbpZ7Pgm5aBE+0ioOJQYpRx/xnscD\nykZhzIh3WtiHvpPs8lGETUGq2VHHdQNPSdv+RxRpRR5QaK2QGipOL+DVgC5O\nTfBI/EIszWrVNvbqywkGsPyBXq7MRp2Dl2Bl4r/oGvvVEYEm553lIEbzdv3I\nhFGRB3TbSwJHb7w8DwR14fD6iNyBWDTvwvIs34Hb0giULSehop8E+NdTJM2A\nIZGQyNCGfm3wSrxbZ/YyowrdTHh+SvvVNyi+Mp1NfQnb0P4U8l0AAYPjXSr2\n661369UPh1MC9vZRWK3QzBE1VTV78PD4yzEyI5zvfeoA5GQareou8tv+vA6s\nTLoAWfFtxbV7yjv6uj89pc7ZjKPNVZnPIvVVhNTa55SULRXH1OIC/2JYGWDY\nobEYqAm1uC5XVfrpjbEoM6IyiIdI5PUWrIff+2pYUL05wa8usURAbxXoUWS5\nCw1s\r\n=FLMD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.84f3db9ed.0","@material/tab":"12.0.0-canary.84f3db9ed.0","@material/base":"12.0.0-canary.84f3db9ed.0","@material/animation":"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/tab-scroller_12.0.0-canary.84f3db9ed.0_1619705952350_0.4936262796436577","host":"s3://npm-registry-packages"}},"12.0.0-canary.8fc29273c.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8fc29273c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b694d0566b1860450f77d6837a8b0b535c1f20e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8fc29273c.0.tgz","fileCount":52,"integrity":"sha512-3Vj9aSBiwMKpjcAUfwu6YVmqtHTQagwNeuZRO4S89bYfNpc10enJPmRyLkCYSBwjEiY+Sal5xXywnqBL1Va6Cg==","signatures":[{"sig":"MEQCIE9fEnLXQ3V3od3PWGQ8Kf//Hece7lmGCzGmTOGCcmKhAiACW2qa2X4VkSMKllFREqFscPu5DVOa18y9w7PCkuN2dQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgiyQpCRA9TVsSAnZWagAArzoQAIIa88ZpW9W2oaPphcqt\nODbP4Iktt+5aE+HLr6wrsGcWNpoPy2emQqNq7P5ycLqsa+eyGx6NqZDZ5T5g\n0eCiGR6rknIiFZ7WTG/ZAtDpKo9980vjazgTxg0VIT9DKXHWeDWZrC1D7Ccs\na86FcI+NhsuMsOXdBgLycbfCmtZ2ehkf8yAi3RYuSakqSvI95HfT6V1Zaewz\nmrlz7HIzdqcmrU2frVdMSS7V1XeE3p6E6rB2kvTGXkQQ376zrZKnL+BQ/Aj9\ncMLGc7bb2CsZekEsARkS2TApTDJ57q5qIT9qwmW6pxjPtR3yS2Kayq6Oahiz\nHVZk28PmqcbAP4+mO2eLHz8ZNx6di0HjZkcUX0MshpL/Z+dg1sZCw1bq8tQA\nBiILy5x/TqzNEeqFq7azfITl3zigLlmOPwqQ9v/Zfthkft/eD/hVy69Hc7xt\ne9Sq+8i0SDBMQm//JOJLiIao0LbUXxphCJCYVPca+2LmzayQ0Z0f7qs4qDsa\nOfeJeIb6x4G0zlf4JaHu1E1FSuJmuBDDVXM3huoPZCBT6CboJe3iEbkakjkH\nHdUxLCiTFpAqSX+TjGhsWPo9OplEQfmIMNFSuYWobqJhfokLCCXUfDI+Dp5k\nYtqXPqXD6Wb0EEY57cHi+qATYnDXHtbqECBWNA0J66bumvcchLTwirnLa5nm\nUSKh\r\n=HwKG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8fc29273c.0","@material/tab":"12.0.0-canary.8fc29273c.0","@material/base":"12.0.0-canary.8fc29273c.0","@material/animation":"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/tab-scroller_12.0.0-canary.8fc29273c.0_1619731496713_0.371165858561155","host":"s3://npm-registry-packages"}},"12.0.0-canary.c50d20bab.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c50d20bab.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0664aa8f8d9142549d7d0d15ff2aa6c0ae92ccb3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c50d20bab.0.tgz","fileCount":52,"integrity":"sha512-v+oPYTbsEWLKo5R9ZnOHDoK+G/r18AEH1AtOsW+jPPinX3qfVGpvW7njnnz2fHfCgWVKEmOotuP8RAMFmJAEXA==","signatures":[{"sig":"MEMCIBq+f0f3JrWMMGwZL+2tAQI43RSc5fjvR1Jlts8IMQUHAh8pMWhBgXSAwDoKljeGDqfZaTPPM2viemBcsswTOZTb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgizsxCRA9TVsSAnZWagAA47EP/0qPpxMEAU6/K1kO3djS\nRG61CMk1ZoH5lcRrnaBqF7dZgTR8kD/6f8yVBo4xudgXHdYip31TI3g0bDpy\nwsE3B2i/tDfsSg18bQkF1d1NOFmip0YhT2txKC12mWXh8cS0hEWP5sNBdNL7\nEyFxY/BwzuRUK14r+UWepqOKNV1KIJj2ED1q0qM2kLre0hIsl7mTJcm6UN4g\nXU+k2C4omuoDptU5FXL0xOzfK1pFfmYwq1ZHOMEnCK0mZyduPBzerJytJpnN\npI+QMTQoa7aeFakQad/UFdYrq9PohfyeHyagLN2NYS38efIkHDYSPS76uWfb\nacznIPNfQfrbxLTsuSGNfi1ECtGq3PBWla1BLF/SAIT0cs1j4rZWJP7VmoDP\nUtlpF9BZFQ1KvkcyNBSZlqztwnJp3coE7fRtx/J39i2Bzid6h4UtZIUg4EQo\nyy1019J3cXks0o+8JVyaEQvn1f2LhvvBs5T9EaltPDdBo9aEFA5ZJOzSbefJ\nflTaGeEToxa9rq1LO8Hx/xxnN3TpmNQ0TRsyqC/snUCzD3ZnHpNmEO4DQnba\n+oTAHeYwoM1H4tLKOLfJlEy6+D4vB24lADYuBfEXwCe+KwHnMA3fSxjAo24j\nHTtSYmiNwBvC1Oveer217PJvpjaSe4k7gLQdFHodPrt2G5LXwlFkXpO/Jgrr\nhu/l\r\n=HLLv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c50d20bab.0","@material/tab":"12.0.0-canary.c50d20bab.0","@material/base":"12.0.0-canary.c50d20bab.0","@material/animation":"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/tab-scroller_12.0.0-canary.c50d20bab.0_1619737393333_0.5508092392460318","host":"s3://npm-registry-packages"}},"12.0.0-canary.474836ad0.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.474836ad0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b9f5a2f224af0716c237466be4b4439cb6d516ac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.474836ad0.0.tgz","fileCount":52,"integrity":"sha512-HZ7c0wJvZt9Wd/PFvYs6BgUYGXQuJVf/80kJpxozi4fRXeU//v634wlsZMekPRFJNa+MZLepxfVQwq/YOzdR4w==","signatures":[{"sig":"MEUCIAXw0pmuj7a5Ue2LK/+pt6NP7p+G1eNdpcRe6xvyloQ8AiEArRNPb5vWmpMUep+GYG2NZXcnwc/DEWrAJJrgtqVMLp8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgjM1KCRA9TVsSAnZWagAA8y0P/RqRlRuWL+KdTlRGLcnF\nU0OwNEHWmhae5+kKdxzRIQYF87c5+YJ9RhrUk+oZ6PEcfeiYXPpugtVQL49c\ngrd1G0TFRIfaipEh2bNgFkxGo1t5C0o9IZoBVw0ohdQ3uZiC+FsZqDFiejLL\nlLGSzJ49xfk8YAIVO02HgxnUHt6umndjTYmpwXX7DW6anZxCQ6gW1ZjacOQq\nQnPQKch74gaUBE/Nrp0hkFlHEXJw8mwLLII1AU5gknEyierch5ygwVNRP5Wd\nb72BOXuFDTBi1UdPFWXq7AIQl16O7/3XdrKbw/ABMbYnDyAQpCtIwGC8UBVj\nmNADkbh3LoT5boraxabm9IjJYrbUoQZVMTHZ6yOFb9G303OgB3Ce5a4yRzLR\nVIEjfyJoi2jesDeLylKQ+gS0JUtYEunpw+WY3xvB22Tqp+IyZXqi9Am3fl2u\nBsWJmiOUZO82KlqTNliJg/YdXCVhx3F9fJAcGet458oLQNJ1k/UzYeBuO6l1\nc24L6dyg/xlljF2p33ycaGPuMsDilo00I3edikog0mY+DP+zhbPd1QQnuJoI\nFUmg01itzqTt4trrVetswH37rv3cH5xb4VAznDbxsCduo6JqcLdgoNYV761u\nn2P7hqAm9kVIsNyuaRHjazboM4wRWCSt2mZyTwEpVNScXvXEo/Lub20KOrqV\ndx0w\r\n=jhBs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474836ad0.0","@material/tab":"12.0.0-canary.474836ad0.0","@material/base":"12.0.0-canary.474836ad0.0","@material/animation":"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/tab-scroller_12.0.0-canary.474836ad0.0_1619840330421_0.565986199658814","host":"s3://npm-registry-packages"}},"12.0.0-canary.f5ad92287.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f5ad92287.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"11113a68f48173cc26817efbcc79e67b7f692972","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f5ad92287.0.tgz","fileCount":52,"integrity":"sha512-LNmqPBTEKNDvpnPxXIcI6fH3P8IpWl3bSO4nANohQW3YhYTx/Pa7igh/Kele3TdMYdGhYWX27VAoy9hTGSHKrQ==","signatures":[{"sig":"MEQCIDKwhg4F2NnoisHZw2jigEeJJx6c3LUMexc8EG/zXksrAiBBt+VDVDLN/zWOAyyWqDWVIVT1rye5QtNxZRtokvjXIQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkD+eCRA9TVsSAnZWagAAGIIP/i/q4B88Ed6SnHv5U4jP\nhIKa9oMSsTaUqZv4or2a8w8RTvf2KU7SehZgqCCvq2/0/WJEoUs8x4rbTrQA\nGN0dHshSyNl0EqNX1ei0LgwDPMlWfp3MQDT7m4ULVPIhhjMRFEzr5PORcg33\n6vihMDqwrYd35S6aIh2gRpn/qKPPcO4tTOQjHadzyUMeK4CmKDb8613V0DFH\nAgQHVjKUabGWLVHcXHVmh611DLm5oO80n+gsipWhM1swznyg5JrHgIX9M+in\nh+p2TYvpojCEjV5Z3Luud8Ta5IxLpTKhXu8uX4vMEqcE/QMamlriHfh7wh/V\nELayh9rh2t4ZDTMX/iqBo6FKoCaAQ0Ky1XEM0G/Ahi35WsgBZCUUmgGkisYE\n0R0sJ38jXjp/ttURgl36fTydiS8Ci9nNLrZHXwHZrz+N0ODqon7Tg3FWyfnI\nYXYu40buv3pIpuqx8g8wJrVMo1it2dG7PcnZ9rgMaGCthPUM/9J6Gy5N/7Yx\nRMlJkCxgC+5JSlLwiNy9/ObDiDndJRJYc6K6Dze3iGLCu9Klx7I8ZdNnaXiA\nXMhFl0tSyRHHPBXzMT7HZ/9Adm3r5W1rbUo3O0X/FGqd4LTyt9DE4Wol9uz7\nuKcD5JzxgKbqO+S7RkneAzplTbqT6Q07AoEOXwTUxljJ9Q0JmrN+3/maf6C1\ndzEV\r\n=AbGG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f5ad92287.0","@material/tab":"12.0.0-canary.f5ad92287.0","@material/base":"12.0.0-canary.f5ad92287.0","@material/animation":"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/tab-scroller_12.0.0-canary.f5ad92287.0_1620066206337_0.9667808231731854","host":"s3://npm-registry-packages"}},"12.0.0-canary.af453daf8.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.af453daf8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3fdaf58c66e11c04421404e33f963eab985ec5b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.af453daf8.0.tgz","fileCount":52,"integrity":"sha512-RMj15vXWkKt/j3rMuhdlzDDcy33h2Z0f9slrdYaR94Ch+XgU6zaIe6eb/MKN34fP/q51aFWpcCet+AFPYLNjBg==","signatures":[{"sig":"MEYCIQC9rgY0/Ba9ffAdreGpti+1KXXNJG122O0zEcJhZMqNPwIhALve/XE3WwpJI9lX7JkGZiN1najIprFE68HIKd5pQ9es","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkEbzCRA9TVsSAnZWagAAeIoP/igJAMTTmApsnDcApcT9\nkK6K8aYOcdihrtAeNoVS2qqiIg7+4l3w11gou9Ry++1Q69QNJ/EHlWKjfPTR\n6tEQPKEDrbOhr9u3hbl9WP1T7jwxTGfCigSWCAPB30ghQo5/Jd5MRGsLdS4m\nJwsQxMypng7U4/6nxMZTpoWYoKOv3/giy1KK+GpE0zgF7zuGv6c9bM9kTrCf\nF4dXAITFTsP0NsRH8YCkZXWdzei2z1xndAPaKGc5G8R/JjoP3l/VISxNcPLV\nlakKLxqIwxUaAxuLHNfAMlolG7ahevYD9alH1kMh1tcESNMhe+Tc6NXGkSsR\nWBZ57SmcjU+RAnwAviLTgZz+gpA5tprizGEfAbBNsGSWkiWWqEDhtec2X3Dv\nXasYVoTBNNl6KAHJD1AISF/p6opijoZ+meGGhglfxgqNCNkFvUTT4NMSX5o3\nbPwqofbfuQZ5WAzwRg4uJeufqAxleQS73Me/WYsVCMBTJURdqKBWwBkx5aWn\nA3S6ed1kqQupyxVBhACZly5J/hU7pQ69DVLlSUo1VsmD6mxVF2MTzf+B92hZ\ndX4QJcjlR4mRMD+hTdBMNWudx08bEAUj7QjeqbekBzjCnspFBP4h+uT1Cvfq\nGaSEP90KNVQ5v4kNVkQNSuBIW6w4R+x+xAQuKNTaPi1UnBVRLffQqLvHQWyl\nw+MS\r\n=klb/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.af453daf8.0","@material/tab":"12.0.0-canary.af453daf8.0","@material/base":"12.0.0-canary.af453daf8.0","@material/animation":"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/tab-scroller_12.0.0-canary.af453daf8.0_1620068082816_0.7412033204583672","host":"s3://npm-registry-packages"}},"12.0.0-canary.1f1918c24.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.1f1918c24.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d753cd79d9e7dee92a853263c8dc5cf02d6b1bd4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.1f1918c24.0.tgz","fileCount":52,"integrity":"sha512-6glhFjj/l72IDE9D7cGk9k5jpb6lXMKlBSGYxlCUtzk84ACiEEXromch5tVLu98rKHTk+f/nXpbjptRYoKJsXg==","signatures":[{"sig":"MEQCIC9v3yCIl8F0iC079IbMXnctAwguJ4InmpbxwHfAGV37AiBDpnAA/m0/gjOvb0oEmGKSpz7r4jQi6l7xCuvxiTsrzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkE3JCRA9TVsSAnZWagAAqVYQAKJ5+f6aYotq6iJlCrI6\nAE9HzqWIny37pVZPTFtDUpOxcIwSijpLt7Kqfn8daXv6H1+/A+YqBYEos77i\nVhffBvtHC9DpoHcP6Wi3BdmDhToicFySAz8ocuHfyXWls2rnIgVehJtftEen\n3V+PI4nQzPlaUWv4sATVpKafWVIA7ZcwWW3md21XTJtq9xg10A/IE0HrmhrD\nzhm5bpX4avCf+cnHn30i2bSanT/TllZIvLYeBMmW8RIiznq00D9QrBdZWq0E\nwGyb6Gtau0FjCGSBVjD9tl8hw1tWqbO2Qsx1IAGDLa7H/vxj+RjwMU7MY5RD\nxjliwOpI/bG6mfsRtIgS0uLPgLWrkek6qmBOAR9BH1+qv2wrQJp6im9BUHbz\najOZhqCnugrQHvLF80AMDqeh093VbBzxNn/nY4FBVbT091yJE/j94E5mSqmt\nX45GY49EvBho0hD5/pL1zCJihM4WSelZLrWL5dD0HnGQ+b0fJLy5k+zOLsrc\nAa+CJScUzKeZ1am6NixyKUSK8gdtr4jXUvaHi3L8x2ZU6e80PV5W1h4j6C4l\nSsbPij1ZcIEN5S3m4d2JoOvIhjcudi1/ibUKPZ7K4NDnadohdVbGYys6KpMr\nY/62K4FAGC7aEhNjZZkmoCBtiy92qogmzeLwI4Yfi0sTIWja3IlYN8aBEXFA\n0Hp1\r\n=256G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1f1918c24.0","@material/tab":"12.0.0-canary.1f1918c24.0","@material/base":"12.0.0-canary.1f1918c24.0","@material/animation":"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/tab-scroller_12.0.0-canary.1f1918c24.0_1620069833377_0.8119278786798545","host":"s3://npm-registry-packages"}},"12.0.0-canary.33148231f.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.33148231f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1118e0de2c9a0216f7b2f736bdc365e3447314d2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.33148231f.0.tgz","fileCount":52,"integrity":"sha512-sJ9LGjH0q8RbYhRTTvTpLYy9SLd6yi7JFnhKj9uEQftTgD8+ll5k7G+q92YFJacKZJQrqXDgclJEDYqhqphHmQ==","signatures":[{"sig":"MEUCICX3SGVCtF9OpsS8eO8TjjM0DU236SujuL/o4AlNkM0XAiEAynTPJTiO0QXpJY7Lb322LuXXi2n7EuHusAY7s1geXs0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFGMCRA9TVsSAnZWagAAqt0P/iLlqQHXXw5Cbe/lebwa\nD19E9vh7JXM46KnrtJjKOc8Rv00gCCVgeXnhCIFLT6zpKS/qOI++ItdHZAbW\nO1zHx4YmPd41FXl5zOa95VLY4+VboraDF8D6EaiVQLYgfvx0WEWxTUTB/ME3\n5ZJ3K4PCy/9FLkKyaCiOEMp0GT0sLTLo4sElbqcucexCxBQ3JW5Wi/dzU8sc\nsxiGdmdKXDtDQV0YZxh2vlkQqH9Wkfp9lgvfORSq1rJ9cxWRQ80VgaLGoi1a\nEuQdXsbyV5Kv8TaJSL4xUY7JGDeqRmG0TMCYKkaqt/CqUZ7dcn99PFdua4Tx\nLzwzq/qg4TUdaQpVNLGc5zC/TbGW0a+k7xn9yMkAm4N4DYwrVGsG8OmeyV8i\nFBtp+/oz7MQ8H+U1c2jG1fvst2BLp/2AsIOOCvquSRmw+QCrTpBorT71xxZ3\n90SQXIV5WFtvTC20x7ws43ugFDOhjEohiKN0Gm6cTGbXXuJRGVDkzfSRPHNY\n00OeL1LYe4PlHZopfcj8gIB68v8utN0IUSnvfqiTDrEkn5uDCCfK2dZCC5Uo\nADRr84ewxWjJxL0gbc1lvLk6YxasfRHmf+fmxLW9QcomiNDLbXhyx/nWK2LX\nXTQuR2rFQpqrx+OXhCi3HB2UtBL/JvmNLhylQ7gz6+WuZmWSAluixfhv0eCZ\nd4oo\r\n=3WZS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33148231f.0","@material/tab":"12.0.0-canary.33148231f.0","@material/base":"12.0.0-canary.33148231f.0","@material/animation":"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/tab-scroller_12.0.0-canary.33148231f.0_1620070795395_0.9376253084451436","host":"s3://npm-registry-packages"}},"12.0.0-canary.06b76fa74.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.06b76fa74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b2a1387d8704c1712aef7ac3f0ae4a8a887cf127","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.06b76fa74.0.tgz","fileCount":52,"integrity":"sha512-Em34euxrqpywaKVc80iG7J9QGTQESdR8STnqFdNld/BBFYX5AUdbmMXQxxaVmWhnki+OmtHqOEpnE03qkWbakw==","signatures":[{"sig":"MEQCIBzYAiOwu5hvkOqpW9U5MtjETAQHJqR5h9sB2CeEH8X9AiBJf/9FrWtOEYrPOz+LffNCZWii6RW6PaDkpJO6iF806A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkFMyCRA9TVsSAnZWagAAToQP/1kGf/0/+bcofjnxb1DU\nPs8TH9NclBCqjeIZEcDps+MKJ4mJam38gOkp3OkP256ChUcE6tq064bfO/ci\nFu5Bnl01DOOGyAvIGyX+Sr3vgjpd6Oak5fjV3J6zjkrCo97y08JqrNBkd9ri\n4eD45OJYcUnANuW5S0kcxUofUkqbyqDACBTUk36mhZoTxCIxxuhkS51i3lUI\n2PB2BoTb+q7cL33QQWL1WUHu1NOvNoPxgiEaemgCqkh74mb+poKjmPChkkxL\neyHnofbECCDKxD5wRApUXNNoH8s3y0RlwZW1uz0ROBzvVjLSYpHF4UNF6pd6\nPBivC518eldEEyHvrqb40v+E9/WBnZtberG5nTvzqu2cXnbhzw4t65sBq4IA\nmcGK84s3N45QMre+IaDEKjz0dIUz+n1TsVh/YeFwjXzmxFMUbg7ZHkBkrGQ1\n8iQp+9PLzpSg4Wz0Cze9WfR+1aeixvw3F4546wA5hWCqvP+fh8QYaaTyhl9o\nWhbNuX+m3buB65pJMm74DGNMNesEsa6RXweNz1XYZOBvL3YDyqscX/mkYobU\n7Ip8XZsxShWnAeej9OUpXTClTZO1HrxmrD62PC3og2RgGF7gOoTR3UKQ5J2z\nq3zcxMKiBHTpDju2ivPWD3ZvNdxW7gT3RHCTxuZmoTojO3oQObESvRgNHXOj\np7JL\r\n=ZWGW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06b76fa74.0","@material/tab":"12.0.0-canary.06b76fa74.0","@material/base":"12.0.0-canary.06b76fa74.0","@material/animation":"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/tab-scroller_12.0.0-canary.06b76fa74.0_1620071218242_0.41061968086687606","host":"s3://npm-registry-packages"}},"12.0.0-canary.7c5000473.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.7c5000473.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ce9eddb11583796cf4125faafbe3893f8ec2a430","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.7c5000473.0.tgz","fileCount":52,"integrity":"sha512-y2jrsFSDabVWjDG08TSgzSiB1grrcpfIiHCN2xoOm+0B0reE4MRwWYxRRffRg5lgB5rIa4LiGoXct5XU+y+BoQ==","signatures":[{"sig":"MEYCIQC14YbYg08J+2/G0bh8mJcyh8GrZkrWmwU6tgCd9cORDwIhANW6GQeB6Z9XQ+pvr5KH0/cTDy9i9H3JLEkLkmGzgXI1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkHxvCRA9TVsSAnZWagAAXF4P/RKnosP7y1H45ewZKfEj\ntoFFMv1OrfvXdUGD/pZt5Ce66wvU4uImT045e80/CuEBMac0VaqtM/qTBikE\nkxiED+IgPaGUkxH4W4mvE/pAtgKjN2CSIl5VzTBR99QUJhts0pqFoA2u0bO2\nzKhJ6VliHFxwBMh0Q5d7QWrFHaY+YJb1nVmVNwH0ivjo2bge4mV2lHCL1S9y\n6nHGfQAAA44zomQUl+lIyeK0VjVrB14nVWRc+vUP9so9WyK/UHrhNHwsTzWm\nNipOkSERNinv0zlHafeh3yL475mlmXEv1ojFmvRDGHioKPL3Imlckafl5fGF\nDkCOaPUFNshq9lyH+N91jNaA5tzkC17hOWQMh+I1jbaJvqwbEYQoP5Zqm1iD\nNWh/6JFERDA4B9eeV9mNtLTLdbVXIygV0nRKmukj+4acdW0+xs7r0nf7zb0o\nAohv0p4NwJ+aYEcliIB+kf53DcR9sOVA5fDeAkopLa4p4jrkbzrsjqdY/fSd\n+pRnCRmDxXiQyaMV3ko+jSm3pRQIZcfAWLomlqoy08mmQWfYFjng6NHc8pQE\njFsSgjHy2x8NnNBQwxHD5dJ0b/85MRuGHuMbPMnZoaqp5oNqRQSY2iaFPzjT\nLDr1urginvPCgwrAxpZWR2VWiopGA/SJH/cfIcGUhKvH3P+6A57GIB9uRs45\nBanL\r\n=KOV8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7c5000473.0","@material/tab":"12.0.0-canary.7c5000473.0","@material/base":"12.0.0-canary.7c5000473.0","@material/animation":"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/tab-scroller_12.0.0-canary.7c5000473.0_1620081774473_0.9596812370495627","host":"s3://npm-registry-packages"}},"12.0.0-canary.de997644b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.de997644b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"086a3a31b5829cc027003522a977c2bbb4a1c874","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.de997644b.0.tgz","fileCount":52,"integrity":"sha512-Z6r3YwwEGJdI1JUeqxn4OeHqmawC1/W7tg9XiEKEvuJmSZa7nPXSQlROuOARM2y3bK7tqMxsXoui0lvMO4XS5w==","signatures":[{"sig":"MEUCIFQVJ7NRXRZ/Uztl7SADV/DLt3fmwR6QxjRlBjDBFPw+AiEAt9njmbPLg09XX/kHPYSVfx81+s76M+nVRKVrQuAnd3Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYR1CRA9TVsSAnZWagAAzrwP+wXmBQ3fjdU+3iUccmt/\nK1qKyzrtOwkoFLE6i0Udb3zP+dQiydPXpyvCy52XvBmHnbZk09BN9aZURjVQ\natKKOMZiYCjfnzgTtMAlIpZ7VFVNmjI/balpywSxZHaTC3V0U89l0joOgj2Y\nNB0kEuweRxMWuru/ugKAtDsHZFZhJK5DZrJIUsIz4kDv0S+4odFA9dodsawK\n5DhPS43MeSWvfOGoSo1elTN2XcS5+rXCC7EQ8DtypX+kS6M3Gn3Yu5/qe8j0\nSKVPAS5zs5ii6tCPetWTu64QxNFwx/6UMCwPMII4oG0oT6CLvdnxvjj2dtpC\nbx/LDG4pDWZ5EGIOX8yphMnMbTaahXRhXJBbAyqKUrkIxviDyO7/8dqo3Lra\n+8xwom08ghS8gERwdbcnLk+E8eobs/6wZs7z99yR8IaOZlsu5RU7oLBUokWy\n69kOUMMwzNezismQDLSQZUYYalYKZMyNxJvuIHiBFw2WzW4RMvtsfAIqVkWI\nVz/6LKgAk6oU8WXxRwh+5l58cFhEwLzlfJkumdb/idFVqrqDULPF5/Y8Ajw3\nNA/VpxWu1UqDW71+GTny/VJi9RW6ZkNQkYGfLmb2iaqBBMFlbTzjH03w9dmI\nIT+Hh2okFHe+g6U3qQjDybY1CfJbXpw8cj5UtnGVEDwwSd6YhJrwl3nH7k7N\njHLX\r\n=I6kO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de997644b.0","@material/tab":"12.0.0-canary.de997644b.0","@material/base":"12.0.0-canary.de997644b.0","@material/animation":"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/tab-scroller_12.0.0-canary.de997644b.0_1620149365239_0.4635457117881674","host":"s3://npm-registry-packages"}},"12.0.0-canary.d4d7f1cc2.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d4d7f1cc2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"beba08dbc13e294ac957aef44ee6745fdf68d8f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d4d7f1cc2.0.tgz","fileCount":52,"integrity":"sha512-ksjBgcvllvl+Yah+6aH4dbBZ2wKTASO9Kc0GboPNJy4Lvy/fZKKYHM2Mhkb9NBXB/lZR3/oI35KadOHsfkgefg==","signatures":[{"sig":"MEQCICox4OrEk0Fue9BU7iGClOxWlEqwHEG/A4gd0kYjdWwxAiBo29nrdXWqdyL/sv9IwNjhLIeprYuY91emq6XeqkXdQg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYrGCRA9TVsSAnZWagAA7xEP/A0RTI4QZXsZA2baOkXm\nuNHS7tEd0pkB5MyIPI++DQ5j3qJ2JHdkoyZ46GdXI09O6BdKbqT5z1dTF988\nV6zf4yIZ6CcIf450QX2CrF18ZH9QIuGc0L8rLUWuJ19DJT/y87xNwv1V1nR2\ndGOf5S+bnAm/+F+oM+9w0sgP1FTTwrCZh+Ck1S7yxRHZs2ZgIl6+vGe+UAsu\nDwnlG+eKjoy/WSQSy3M7hN1xMOBYqnaPbmZ8xdZecUGpeJ/i6S1GkQFqxlgi\ntKuvPRZAhgeYxtYDnBPgHvFN0FcXYK0603JQTqHlFp8Xn9NJibkcSiShFIyr\nIEMLZF5u+1po3xp4HpokBhBSyxiP89v5/E3PRDb0EBLD+UegCAHMQgPjwwrc\n4Zh6ODDhyueUL4+jo1b4R6Rr74VvLVvbiXUr7BXAgmIuWkmPu7PjxCPXkNEl\nnxLdLcS519maJcJlO3cGfJNujJzkrqV1WkCYmmCGj2bdAPWf3AKP+jr8Db6I\nrNLVRq5wNnj36mddTNNUU317aZViezF2BoPxfiUEBL9Afe3gUUbKVp3EBmg6\nr6/JALXeeBGZQZylbvgO0p3FpaFOq4wvT+vGHg1xcPlUk6ak7+s6s1ECFSK9\nCK9JqT8ZywHsjHyul5YnQDYVHlvOzJjl2DZyhk3c5jWZ09Hw5MXggnRi/Bi7\nqwBX\r\n=B7W1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d4d7f1cc2.0","@material/tab":"12.0.0-canary.d4d7f1cc2.0","@material/base":"12.0.0-canary.d4d7f1cc2.0","@material/animation":"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/tab-scroller_12.0.0-canary.d4d7f1cc2.0_1620150981983_0.7221743857075451","host":"s3://npm-registry-packages"}},"12.0.0-canary.be999eb08.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.be999eb08.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c65cecabb856089ede1f38c23c4d8ad950662e4b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.be999eb08.0.tgz","fileCount":52,"integrity":"sha512-5f/tVmX6xE1wmnvmxiFf9+t7auoN818h3G2t5nfDglecAfZjYHqGBbwWhpntOaFY/l8DcYkAyxUWGdSEIyi+rA==","signatures":[{"sig":"MEYCIQCBErnb0wDE6AExC3BqWR9je4amSu4gYnNHXLq2rXt2YQIhAOqIwNnd5333lVDmrLVtw7vjqNbu918eEmu11GEXzWWt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkYv6CRA9TVsSAnZWagAAgcMP+wWcYpNzr/R4GtZ5uNmq\nku4O+OsyR77t73n935mHejHubligbp9l/XBu7X4cfQC1R0GpjLhEAynQwgqf\nJSh5HXeWLB36fkfgU0VRJ6HtYFcNsnrDhxCRHMqg4faDi6Adgwvu53gVWjYM\nFvLzVD1Mb7mg8Q7/k373MV+Ohlx9H49xMF8hNgqOrEMdpo/JWnyl3mUS+dZk\n2XmG8YLgbIxPuneN9aG2YXzc2BNCDH0Vf+fw7wMGkxTH8DShaFs0EpmFAvVq\nQJu4o39/Lnqmq1MCZvXulrzYQNdsoQRyzfa8jqvuGhTacrzs2RkJgURylyzl\nFuW/48wyTdFpmmawsUSF+EfTyX1NEfMLgYNq9TTCk3CPjBYJAo/xiOMBJIqD\nRZ9OCvG9EBcyq0Ilw623Y1nSIKT6L3vKg1LyjkP3n2zkuGFlM5nPi3w1Uok7\n2o8TfHSvrsxG9eHXSOG2adHyfG/Q6u+REX7EWvszCp+GYM8TTg6T6l99UPj4\neEY9D/t5bfH6yB6pxcCLeyxOJNdNXtT8SaHXSa+7KMl9Ety9h9eSaOY4jdMU\nQ2N5OdSRw5M0oS2QMXahf0ywKZly+zXXuSshLwVXOeSAuzJ3KV8MSxMWiENB\n+YCA3F1xexhKuOqHr6mkUZ02Qlnuml7vkvnMe8IKRXG1LsZ22XbJ03HUGuAy\nZbKR\r\n=rDWw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.be999eb08.0","@material/tab":"12.0.0-canary.be999eb08.0","@material/base":"12.0.0-canary.be999eb08.0","@material/animation":"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/tab-scroller_12.0.0-canary.be999eb08.0_1620151290482_0.880908271168076","host":"s3://npm-registry-packages"}},"12.0.0-canary.eda1705fc.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.eda1705fc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"abbb1e583c3720188748dd26701e92ac44446a86","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.eda1705fc.0.tgz","fileCount":52,"integrity":"sha512-JgwKHYhb6ioCqkIGVqTPVo/72CSjMUAUevcRo1by/doDdaXO7XgGGXRoAbcXRuQS8nrLzUR8T8T0k1ZDoUqM4w==","signatures":[{"sig":"MEQCID87yZwFvOs37bCNKfOYoC9OAbwSdo2Xa+uDDmQknI0MAiAok+ISi31cVloDlQi4j5z458hlYvLSxa9KyN3ObuynVQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkZxpCRA9TVsSAnZWagAAdUwQAJShlKHXkfEMGkMElMSg\nH+UWh3EXwBL7UFyk+EvLN4fCbJ/XD36rTvLpT9QeYPTaaFeT+u9aTG+0MIgS\nsh9hFBn6T8GlMVlVqN77+5WVP1YGGKbTMsAPGLNWwdA+R8lbymPIwO0yGiFF\nE1ej4r2xFwOjnuJ9vlIAxZYI4GReI3IuTqvVoIZRH1u1OIRPPUmt5vSAPdje\nUmm+JSTXl9sBCvvDqUXIEG5oqAozP2cWwxs9RDeG3FCXFqU30Qou005k0z8K\n/wJvhHIy7OlHdfaisVekumauQbP2XvPCd3tQE23PCqW16rM8qoBURoYwQVZC\nd//pRkOH2pYzH2TQA5oC2RQI8/y6WTg8w406z5JioNNAbCWlmpkmrDVcQh+k\njO0h+360jU3b69r1UClyj1q2JxHWnqCP236oVetL1O36BqS+6ow4zLsqy7jm\nd5Nl3kKdG7DNZycj1s0NUzCeGCe95TPwSgfnyzlXhK/WAzteyWAqwPhAF6BD\nz+ujwM1ehx7Vt4mBjG4WSgIfNRTvsevz0KwhF5z8hzwaK7/Anzja7CMUmLDr\nZdncZDDBimuIwZS0gzPdX/ATmAM3Oz7aFrcGmDJ1smnXb28FH0tgVZ3ay3nO\nB7lA83qGPYeGTx5xtFz4IhIlI8vtSZv3C8vy1ztwMLU7QBSlHz8MhP7DMQf8\nB0o0\r\n=WU2H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.eda1705fc.0","@material/tab":"12.0.0-canary.eda1705fc.0","@material/base":"12.0.0-canary.eda1705fc.0","@material/animation":"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/tab-scroller_12.0.0-canary.eda1705fc.0_1620155497072_0.6544710006955954","host":"s3://npm-registry-packages"}},"12.0.0-canary.718c90178.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.718c90178.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"33d6bb17d5210b656c45a4a030839a87962450b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.718c90178.0.tgz","fileCount":52,"integrity":"sha512-kAnAHZLLV5fQwv37hNQpngFS1vIz12YkGDHJpnJHDQCF4RLUKHYZMqB6hAwbEbKmwk70RIfHBiZ8Aj/2Oxfflw==","signatures":[{"sig":"MEQCIEf4lESnKwea1nCn2wvqfRnsiI14jpiVkHNnRgd4ctxRAiAgCMM10OXFmM5kj/szaC6VPLFrSL22zTKGqFZ+eXFgbw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaB4CRA9TVsSAnZWagAAgSgP/0hcGAxdv1WqHCYxf0W6\nOPnfPl60tEJqOrl4nyDE7WO74naAfdLKesrsAV/clBHAWWGDxhaTTPBtHkmi\nstEPlcoLoc5P1jJ3PG5WhRs0uQzn7NOYotbwlP879B1iorAKByUvJAaRTalo\nnjsPYA3BIymnPRtm3124LRNPLwW8Vj7rg4/pZQKhFe5KvoNLYVglfDdE5t2K\nGU6H+FlH1UOx1o/tS9pJiAsvrOe/vRpJHR+7LgSYtdFThoNj3evv6zRQFc8S\nsID8psvsNKcTEUbjrIgMaaSI1w8Fc4IPP3YW0TgvHdiQrFpJV/K5o9oJE2o4\nty5XOn0Tkv1h8ZSkOZH+Tpu7vbbWXa0C168FgB1gMxGhQRHIDVK1PzvH2p7f\nnipU+v+ZdelozCKvHQZEB5pKaY59blDROBE5mBXR6ih92QRg5+1eiTXFxuNS\ngrWm4Y5XdMRN5U8dtWUZ114LBNlV3xIMzWJELNPs6h/aerH7Q1Ur+LuC8GWn\nYJ1FSrmNTrei+Tb2+nsAG/8GFUH0mJBQWhBRNYeFm46veSEYBEtuhY95B2uE\nq1/HCkPdKlJkSxBBn6pGqCPgk6lT9U3n1JkJT5yVLAcw8dj5MyHQ5P44p2Sg\nFJticV4ca9+CpWwMSmh3mUUi05BnbLK7hK49WLDQEH+zMWMzYxXeubRMMng5\n91G9\r\n=sX6m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.718c90178.0","@material/tab":"12.0.0-canary.718c90178.0","@material/base":"12.0.0-canary.718c90178.0","@material/animation":"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/tab-scroller_12.0.0-canary.718c90178.0_1620156536288_0.523614394477508","host":"s3://npm-registry-packages"}},"12.0.0-canary.0e3917299.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.0e3917299.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"40755391d160804770414458577d2ccf6ab2441b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.0e3917299.0.tgz","fileCount":52,"integrity":"sha512-wTlujE/W3oA9Zw/Xt0uEx9p21wW2PGZ3p70gTvKkiym6lATT2yus14zGUrY9EgBws11BK3E65Af08V+rHKEE/A==","signatures":[{"sig":"MEUCIQCuy1Wm0+z72p2sBTNa5sY8tcACPhAe4WPjThwjTgTkQwIgEqSQWiabGC/HxIkO5FagYCSmZ8WPYtUMiKrflkbROLE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkaEfCRA9TVsSAnZWagAAYMsP/RkL/pevgZK+kz0at6j4\nNh5I/XQ1umxIB/Xrn0A7I2z0R7+3867y1lgSiyWIJLPS9MG8qa+QQPJ5w5xb\nQw+Sdnuo3LuE18WvWPFJ9BgDIKp/LMtvLxCKBfN/N7QpZa9NPLbDEmLqxhZC\n9pFrzKDvxrAOp8i42WuPORIspZYQsign7fa2++I40P5JuVBQjtVUXXF8llt0\nu2hGa9ic41dUIraZHBCoONUhKQe1vk1Z7Nc7ZGGGPzPyWm15+VcA9eK8G0iE\nm6Vp3SSihA5F/aGLFjmXnFScl6SQuTdezKLQtTI5RxTOjD3jhTfcWbTAYeYU\ns0L2/V2QhYZHvHKT1lUYINb59IY5mZ1egY+7dGROb8ck3KiZJb9CKXC0nqsc\nH80dsj4wfuLV8fIbeaqZ08/zO1BHVmouPHmsUxCFiYKI1cwtC5BHiuAi9hK6\n6NEP2fgXiZTC90NQFY/nLsjucbQHKqiSj7b5G/ym21DuQ6i5lqId9fq3GnRD\nT3BF3p4k8uWZTjb1h6eMYvrMinppP4FoFxxqgMCCccK9y9wHWENmiqS9Gn4M\ns9Q9X7uXRpclzG6KPBV73NgUouXPnP6+fyJgtsBJJtRtGqWrW18mwZM9C6NY\nVI1Ky+oAbAR+6DNcz1jWJ/IoEBuHtEkQnoj344th0NPUybuVUlO2Dqg96Gw+\n43lL\r\n=Zgn/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0e3917299.0","@material/tab":"12.0.0-canary.0e3917299.0","@material/base":"12.0.0-canary.0e3917299.0","@material/animation":"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/tab-scroller_12.0.0-canary.0e3917299.0_1620156703357_0.343507093813578","host":"s3://npm-registry-packages"}},"12.0.0-canary.836b3c7db.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.836b3c7db.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a000c7179f3a4b9c24a7441f6332dde16ebd6fc8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.836b3c7db.0.tgz","fileCount":52,"integrity":"sha512-5jbjks+m5mkiBuZJAk/U42iPh0G91WgU4MefUabIdaOzGSVdPP1A7zTxkEJBgIzaa9afaASZuj4ko8KHHhIY1A==","signatures":[{"sig":"MEUCIQCrJr617vc7SBS1KvnvxD4g3Dzao/nOabVhcyqjPX72XAIgEUd51WuXFlKbbs0n/EtRAlkyb8rqsNIaYUY938uHMBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgka/6CRA9TVsSAnZWagAALmEP/3QtCJwBQJxitim68NJX\nCsDq+hGbskmw6CNuWBvbMChBuqQQwbtQbhGDvGcLz082wxhoem0zr7BHDKOM\nfHg2G/2dyrLyDGF0ivk6Es4joldyjDwaXDelLFLH9qEjlRgdUL8Esx2SJ3vs\nIXYXlemj1FfHg9QEXT3jcSabjp2NpC9YtPq0Ga8PNP8LNWUWUGuR9grH8wfn\nAkeBcr8Lr7Xz90MzU5Rq7N5goNTT/6DeYH3G0lPAHFd70tpitY+wyKSmS2WP\nF1Ck8KU7uicK02B6EiYuxKtkwJuQ8riEEXS+zDmj403LhFKxfVo7KDgbLvb1\nf6UHm5ZhX8pl2t1+jeNF8GKpaM/15ynh33pbREbdoA4XMUxooMBK/d8iSoe2\nIDmOXtAqPq+RMj4WhQ7KPr/3XZCjnRXSdnpE7GcmOxBzaqveHWgV+vLOf298\nVdLeAEctrdfRxCC1708l66+5qGhYoRhT0UnaOUOApYVn9uUgi2gMQKi/DYgG\n8No4HmHMaA3G3BwsKnxoNLn87k9Z2h+DtUFYytDFNgjFtzUw5G//4j0bWH6V\n/jg7uCR4NaoQBc3Y1szFgkwKkA0tJKBbNIuGJYAWBYCHybwIL/m/VQqx5ln/\nus3v9rGADtrGq9L5aJzz0UEhvPIJLbOEFBhB4kaUIbTCWTxW8RXJP/H3+MQ4\nSm0F\r\n=dyZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.836b3c7db.0","@material/tab":"12.0.0-canary.836b3c7db.0","@material/base":"12.0.0-canary.836b3c7db.0","@material/animation":"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/tab-scroller_12.0.0-canary.836b3c7db.0_1620160506188_0.031900606578771695","host":"s3://npm-registry-packages"}},"12.0.0-canary.53d4e6d59.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.53d4e6d59.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b58c94ee7698b24dfd9e0ddad5869b7d515900d8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.53d4e6d59.0.tgz","fileCount":52,"integrity":"sha512-74qp218IKgwp9Kodyy22wn4gljybT71vFBxXsSbElDhysMydai1M98dLLgMxRkFD98YuS3EbtNEsyp45rGZiEA==","signatures":[{"sig":"MEQCIFM8IV5UespMgfE4yRwIRxaTyVFGIfnx8i68EEad+tulAiAi/j2xkH5XrOAnBH9p2prWG4bZ1E3UII73nV01n7ACjg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbOlCRA9TVsSAnZWagAAVB0P/j6LaosZShbUi6JII0dO\nrDTqoMZXorxfrBWxLecxfRWgvDSN5uIr0lIF/o/kKP8KQerEf5YEojA93Mvz\n1uRYCDayQgHrWY4adF0kv2CmFTErHbAQ0UnrZ25WJrzP5ORKpi/1blU2cYyj\nJq4Fq6OoB97ibBkn9HoQCZjiOg7dTQC+viYnxSlCph066jsjg7kHpgAmCUVC\nUjU7pwrL0YCDlugaRjDO/5axPKbNquIuUINH4VARsHUxx9zOpvZlSkuj4sll\nsQX8Tngm7vR/8h/x+uk17HDts9ClpyDedC34TRRsUyuoktwzY18jUzwTeqhh\nZSnLMLhmZopgSmJR7urcujuQK8g49lDFU/4Qvh8Zzq/TOd59IyW/PEuE4xX/\nhELsoa6JmmaHu8Ntv0/WpkBNj0CP3gmazEo2+ugvKygDNy+INLDf5RKnARgW\nOrScWsO/cY8luQqw3RB//KRO7oLTwbtvpAfA/vYt8aQ5DOt+UljHn+HRfKlS\n4IIDiU8X2TUtU4xqcjazBevQqDyVmc3zhEyoVjOAFrK6EA2OD+/q2ywSuMb2\njs7/EBgSzZngtR1IZPMWTm2i3dsNSn5aPb8fEgJSIfD8QtcgabD+nzErsdpu\ndbTnLclzuj+sJITb7SIqJufMRuTECR/6WcIXG+K6R+OPCMTGsQ+C8lGGO/db\nAgeP\r\n=TpT+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.53d4e6d59.0","@material/tab":"12.0.0-canary.53d4e6d59.0","@material/base":"12.0.0-canary.53d4e6d59.0","@material/animation":"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/tab-scroller_12.0.0-canary.53d4e6d59.0_1620161444916_0.8433409339355431","host":"s3://npm-registry-packages"}},"12.0.0-canary.18d147e27.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.18d147e27.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9faab374e6a4f6af41b19307b8524812638dd141","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.18d147e27.0.tgz","fileCount":52,"integrity":"sha512-LRmXpwmi5u255frcdn7gLwDNZn+zNlyjY/0dEaQMgxB/4x6It0o7bvU5S83Tv7hqlGRuYiL/oeO0mW0vNHNT5g==","signatures":[{"sig":"MEUCIQCiHV59jWIh/6fjYjdNJGPj53oGYVtVil/HQ7VQWwmuawIgNRHWYK+MtMaUD3wxymBCZ9qdem3UWoswa/8uRJRXfeg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkbWjCRA9TVsSAnZWagAAcm4P/1jweVmJO0PXZ+WrBpQ5\nxzipvf43aPpfSqbmvnYfCAwp0yFP/f2nyRbB60pTfWcCOggp2+ukggYtOLOk\nI+UVuxnzuOWi4lQGZ6Ujjt2ZaAtGh+HQsUeedhyoy5q3oFmL67j/JHvMR44s\nYTbaS47byGORqLoY8Yq1OVUNOQUQmdVSAogwCBpTicwuMXrBjOa3KSEYi3uf\n1XIIq1G1MoatP7NM98PUAcEhI2Xat/Us8JDQ1pSYMES1ClV1u1bMO4jNONCv\nMoARZ5sHuEAsP+q0WhZeo3CIUwtnm3S1MKwMTkc5jA9xET42P+QTUtVjxQ12\nVu+G8peSBmnNIw7vWi/LGHzrpCHOmpadAKXtfy0IURQd9eDdkwT0X9ooGwzb\nAHfhGubINQ17tXBSAf59l+amH7cfZlKM2CyVl74QLkpfWli6cScWC3+p8NvF\n/wC2lyHynvtJ77I52m6OFweJe4EIRba8SCCtds9MBflxHbeCymSQpy+/S5Y6\naxUGma+fMxlnVMwvy97VJB6xS1LrFeFDOKbeS5LrW/2C1QCubTMxuFO36qYu\nOPCVrt3U1CAVNrVflWEDxCVKuArlkJhPtxPlGJSLBUddHAvZRzvlnznrjr7p\nR+nymlzqATlrTZjfKHWDrqCSQavZG6+5ii3EGbCOG/0airQGOLS8pPCSZzwq\ng30+\r\n=pGZX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.18d147e27.0","@material/tab":"12.0.0-canary.18d147e27.0","@material/base":"12.0.0-canary.18d147e27.0","@material/animation":"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/tab-scroller_12.0.0-canary.18d147e27.0_1620161954994_0.831927088840595","host":"s3://npm-registry-packages"}},"12.0.0-canary.b9984794e.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b9984794e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c082e6fb7189f8c6aac117e9de15505aeb37b248","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b9984794e.0.tgz","fileCount":52,"integrity":"sha512-nMK0Ohj7TCzfzYywdUQPf1mjBZuwpYqnBcxkiX7PE8HmQx7Cio5M/PO0UHL/6GJVyWPrTllz/R03IZUzGuNfQw==","signatures":[{"sig":"MEQCIGth3njw73Aq6TpKnAautAKGbUKD54iZYMxYzoqOhFfdAiBYQo9V5LzDlc5UwoPpbA//IDVCr1n+eaLPy8s9tIIVxw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdL0CRA9TVsSAnZWagAAdcwP/28zw1fqM1eJeFDnTReC\nGlKzqlLilGQLk+T9Q/YRD8dHHY3aycwujz3QiOT2sz+Bz2bzptlSni1unMqE\n/WPBMfGAooT3CxFy67kPtn6OTsTFDAhP+MThl4xKNXdOlz7oO5VOnJu+KxSX\n1cNRhaKaePHzmuA49X3rVlsAsbIJh4+5+OHi3AVE0Jh9Zs6VLnNi3vW6Hrvq\n6xOS6eiblf0hTTIYIc77UFfUnzvKQAJ59fJEW1i3+A8l+uXRKW5hyjzInvqq\n/cYSsAq640X3RkaowG5Y02ErF7ZBTvXafbDpODFu7ouKNhOEa9QKNsYCnCun\nxfbCi0wzFva3VTGLre4iUhTM+C2fNh2qF4bykiM0E2tKRsVIigONIqyqBg4A\nktP8cuw8TlVtS0BjNNzCnjD+feQcvkWyAZ4BGCnVZJog1JNzBOh5bf5iqucd\nO3yEf4qksYebABjaOR19CDqAiavOKO0pmDbivqjBU/dIRaNXoh+yU67dFQlg\n7UMrmT4/HjSovtJL0UoL/CVwh+sI6+Ca3Uxr+aiwMziUxcQzPrdTQSsdNlFy\nC1GwkBDK7DObu8rZr3R5LaY5GqLHY05gJLWJpv1Aki0NOO6A0FgCjQMjIzAF\naO8iO46MjuTQnc7V+R86/I5zMcLbH8HVXLfGCmH2hKfeyvOJzHbsQWhs5QcT\nF1um\r\n=XSi/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b9984794e.0","@material/tab":"12.0.0-canary.b9984794e.0","@material/base":"12.0.0-canary.b9984794e.0","@material/animation":"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/tab-scroller_12.0.0-canary.b9984794e.0_1620169459673_0.49755850273377455","host":"s3://npm-registry-packages"}},"12.0.0-canary.b76f5fc9d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b76f5fc9d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ee87552aadfd8e57fb04181a5d1efdd70df9bc67","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b76f5fc9d.0.tgz","fileCount":52,"integrity":"sha512-0bkybEIDgZSgTYNgp3OJGLUHuvO/DrR31oC6bzvTVyaC4Z9COWg8Cpatr3a5oifDovAvigZqRu759RHc84i0gA==","signatures":[{"sig":"MEUCIQDd9rFPk3NV9YePTDgdBgjQOU9aCiGNKoMKzsZmXx6yQwIgWxc0JWreB5RSaOTqz/g1jRoQ6pWxNYr0raq6TUB8MGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339264,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkdPECRA9TVsSAnZWagAA52wP/2wowjYi6qI1NZM0eJ7p\n8hYKVOjZLrDEYrK2dCP5A8k3Hkrnx2P6q4i90SpGWqi4CSBwDbHE2nKYWjMN\nb9f6OkO6s4rCFRtK9TofgPv+pLatuhBu2ljxNvFW0+D8QghfiQVu8DSK4FYh\nuPGcTrcaM0+FA4NyovSYVM67kR+tFqB2PGCVmpIZ3F7BJutiuQuqSZTv8QQj\ntTTOo7Z35JDljfuEGrPLdjtS1s4kePfxCPRxc2x0L1d6CL5PSqW09UWtc1PA\nw+mL5p8HLJEXCWIiYmu4A/RMhbzi+cwm6vT8eYPTXiZzWaSVBRJ2PuoERMj7\nMajZ5N3tZShGa+bw5WIeHXYT4m6dHDmDIaelaYzbmmVeE2FAEKgAZe7xCrEE\nU4+4Lsw2CivBEE3+JYC3yDxzQ3w2dXtPgmApf+LkalaPjTGRjEh+KCsrvrXP\nvKmbeV5JHKtcdHVDD+etdcy4SQqpa7/ebEc+eBXbbKXga0PQ7/BoXFgAoyLJ\nDW3517eJ2iQHCIqNzFWvL8NCJyRnJP/kCpdYTwOGS24jAJPMmx8cSuzBorC7\nlOjtKefKttrajJIjJJEajukfJabIQx9c3735JySSxGiho950Pqm7lBNse6W9\nkhLbxMaxiOeXtSKk4j0hIVLaEJEyc/oqSPHbmTdNKlRUkol5HD55+SUCeDWM\nwGVW\r\n=TcJF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b76f5fc9d.0","@material/tab":"12.0.0-canary.b76f5fc9d.0","@material/base":"12.0.0-canary.b76f5fc9d.0","@material/animation":"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/tab-scroller_12.0.0-canary.b76f5fc9d.0_1620169668356_0.8545322765654968","host":"s3://npm-registry-packages"}},"12.0.0-canary.055d4f10a.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.055d4f10a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"303d1bd0123f3d157bea02a3d4e02f502d44175d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.055d4f10a.0.tgz","fileCount":52,"integrity":"sha512-IIM22Fu2TJqwr94Fz2ZXwtSc3/sSm8agh65X3HMJwCpx06NG7pv4GQ3a1OjBfjQGoBo+eL46wYVx6Vykvzzb/g==","signatures":[{"sig":"MEYCIQDzeLuU4DA/6hfR32v3cI0k5EhjzxohxOgZ6Vs0FTgM+wIhAPKQhq92lo8HIIk9MRRjewoEQgImAYmssA20LhZVhHwP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkddmCRA9TVsSAnZWagAApcoP/0A+zs8Rm9zX/BKUpbTJ\nDFE5PrHZbdqg9osyllToIlm2JhYYIA+MraTI769apuhH3SIocEQfAOBPbAAs\nRgEV6c59XdHETl3TNYrN/DvFaAIDFjD00zsjExK59j0ssmCZ8jmWL4FFL8uX\nvmPFvQ9qJS9hwBgaTgAH4v3XFOctHuPhAk4AIBZm9aZIx4oGA/e0J2uXEOcr\nfUFeZfI6P80QzuWzEBPx/N82oMLCw++fAyn8in4Qrq3uehsuZQ0SX6zllVZ0\nNxYc5Wm2JACf4+bsTJUDrny1ysTGXuqYB0LELAUdUyilAJdNMSvmE6edFWZG\nIo31ZWkF9ftRLDOZDjS/lTi3O/4Xi5ExaRVU3ebhV82UT1xAf1etJufmfhug\nZDAKNq4FnCtEeixVZsUPuSAKrQJK8KcjB4Lm+DhwZWi8Gm2Ysy3OKadbIQ3n\ne9AHmzjNQu96QCauI8gEw+O/8KEWuQe40HNWpBT/PATGdqF8/8ocUXzVP+y3\nmIq8xHvN33K+zE6SEtsvsw7l26nozobNYeMllAihWg4yeAD/hWLNlGu4/22H\noAraHgiZ/rfKNZO1HNGHcfeTQrBM+8mDKWqdWpNnIz4kZ0r1LeDOIM0DFGAt\nGh4fCutKjy+jzPUGsl7kZ4rvKoAApuVxJkA3x1yxJuMOFfnuSwWpgazdvn5p\nVWyB\r\n=0mZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.055d4f10a.0","@material/tab":"12.0.0-canary.055d4f10a.0","@material/base":"12.0.0-canary.055d4f10a.0","@material/animation":"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/tab-scroller_12.0.0-canary.055d4f10a.0_1620170598161_0.4823927722698662","host":"s3://npm-registry-packages"}},"12.0.0-canary.5b6a46016.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5b6a46016.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"216dfeec7f1424bb8d2b7fb049a62d709314952f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5b6a46016.0.tgz","fileCount":52,"integrity":"sha512-A78+T5mFDetSR+PwCkkL1AlsTt/CN6txR7Yz+K5E4RK2IE9701/U7UPzCn4s8izD6u5wC5QYcrJMfEsTBCJKfA==","signatures":[{"sig":"MEUCIQDgvblqJkSW2v2r1cZxTjwgo3Kd/kUZ9XowihiqMYcPFwIgLmuV5Qj9HTnCdUQSC2rX+SAN3uRffexJ6COwCSRznug=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgksUcCRA9TVsSAnZWagAAgFkP/3SKigGYNywaTYyHv+Qi\nS3rKDANL5Uul3BMoEClHP4EYK1pl3BwUIkYwFFm5nJAWFlTROFL+L4oqqpnH\n2wyi/Aq6fGQA80bwkMJPvu1JADyIPT+R6AbRXETzzvkSdfYNFt0ftDi2S6Ux\nRTYKhdf1cSdE9m+oT80zrAviuAbnATTka24LaQk8o2mWfNwJ5Blfu1KAOKSV\nwf1+0d97veGgKLX5Fx1u8hUUVo3iu4F6UVs0EV4mNQTvAxBJGlUOeys95QEy\nNqBCkPRB780DYVxGwFnqX+GyYbnT0QolrA2YdM6HYgIkN4Lp6/SbER1smLoC\nrEMUjPiocebIw120mA76Em9KpUlaN3RR/zIER5537T29MLV3Xb/YLGfa+jj7\nYDPMKfEYzHDHPtqnEgqqJszfOfl0gcrxm1VI4a9ElyM6oI2Sr/IBnkRy9DTp\nRvOITigE0wd+BdG9YPqDDORzVQoq1A2YrziHulNfEf2Y4ToghxKxXQb8V8yu\nsZk8twycX+7xHkWZO8Fl7JZFvQ3vhBAnsGPbBN0pBiWKGDq4qEzES/1tZlSa\nW6visMOFelAlk59bGNPPGtt5pyNLBd69QBq55bkbYyWeJjcQo1kARVa8Nt+x\nM45EPFzGoT9BH+Y1FUUsv87y6d8rzX/0R+f7Am/BEFXJjgMPtGmpAnQsYVOL\nW10d\r\n=+sgC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5b6a46016.0","@material/tab":"12.0.0-canary.5b6a46016.0","@material/base":"12.0.0-canary.5b6a46016.0","@material/animation":"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/tab-scroller_12.0.0-canary.5b6a46016.0_1620231451880_0.9507636311760581","host":"s3://npm-registry-packages"}},"12.0.0-canary.33c9a737a.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.33c9a737a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"47a965cd40a76b6c29a19e8161beb0ee6ba2d5de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.33c9a737a.0.tgz","fileCount":52,"integrity":"sha512-jUiLgkjtogr+tCqgO+A1yo2A1TppABuZvZDt4mPmf6IeZE8nKOr2jBnfdcOkIBJ8OAJN2IPqpD2p0CMYnPMoWw==","signatures":[{"sig":"MEYCIQCDdQGPJia6/jAGPKmYyTYVf/ZcXlwQL5vmGB/8aJKLPQIhAIXxORcba1G+KGJXDVuV1O+BU7cG6uxEkrO6ZhZTWVx9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgktW+CRA9TVsSAnZWagAA+b4P/3C0BHrhzof6pmc+zmR1\nw0OZcO827y48LleorwbqhUpVPwH9KIl5pWf1+Q3z1sOX3yPf5NqueK8SDujD\nQRA6rMytPzXDMN83CwFTGvwMxE0S4BxXWfUlY5l+G00UXj1Yan14CE/trAQR\nWNgXry//zBYZ9A9kRMMQ73rV3Zw67R1k/yVoAwkfC24uoObxjJDbpdIbA2ij\nlWO8V6xbwhjL89ntiQIsOr0NYFebPFgfP+KlRtLPJOghAXLOaghYCUbw9KwT\n+mAQW6+1uo7i2gnXEYukcv/WYasbvYuGm4K46/mb/PIMMwXtjHKJ7WMTQqde\n13Iq6Nmo6D1nuosPm+9rAlzL0d/zERya+b/Goa4EVpBKYccsHkJxacUzy2C2\n43/94b5lCav/lDaru6e/gDIGoSMCMSfaA1tAwFqShBBaDIV25ec35NXPEFxV\nUD5+xKpUAWXt5jQIcmOCc1Z0caJm03DUIznhNfazQysbjrvz41T52Naj9Htx\nDhc9wOp5VM9W3kTBqBiJQqVp8emi9V/L/JRMRl/weKID8p+iJ4tPJYuDaUx8\neRSt/GSA3GxJ2caeeIsWqVN5DskqbbMxaKombQ+Pmncnifvem3eB1ODXAfIJ\nOJTD+mSMJ3pGTZxIHsEow/JoCeSYkqI377l3tjNbBfBlahh6RaPdCTt94Z2w\nKm0m\r\n=g2sU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33c9a737a.0","@material/tab":"12.0.0-canary.33c9a737a.0","@material/base":"12.0.0-canary.33c9a737a.0","@material/animation":"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/tab-scroller_12.0.0-canary.33c9a737a.0_1620235710011_0.24755302978685534","host":"s3://npm-registry-packages"}},"12.0.0-canary.9bc0effaf.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.9bc0effaf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7bf0a2995aa86256f29309e304fd1b8f706b0757","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.9bc0effaf.0.tgz","fileCount":52,"integrity":"sha512-gnqmOexhurqyJuzqo8WKfER+KDxdYL0gyBQusX7uZRSqi5wGn2b9b2hCe5JPVAZF+sqRq4U0bUSLZ8GYnjXqkw==","signatures":[{"sig":"MEYCIQCYf+AinpM6lO5zkcOBbbTosoSWAvNoB0LQe2XMw8mPVgIhAOFqBHbOWk/bv/F3VARg50wVrjGXtCmYjKgRJjC4D6nb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkwehCRA9TVsSAnZWagAAtlMP+gLMtZNA7MdzKBgFLCcF\nadF22iEX9xtporKn7jQ9TlV2yHs+ut9a7tR2mC1u2pGTxbXFz6rZ7mngY71M\npdphVJU33monqfBzWCdcuZuyyGZKNK1hRndLkifp2aUI4sg0mJnqJ2y+I3yj\nEDtTvVNrcacq990RU/M3jF4x56bAgx5RJ2mcp23dAiaYBEF+dcB5gg3e7j3E\nEcmiHWOOBwkVuALI6gjcpSUvgfIfACCj35hApH4qijX5TxOME6SDwZ0t8v72\n41VYIAfB+2eyErzhDmwn7plcc/iL/py3AQo9sm30/8oLPPS3mfpGCZyuDSMZ\nQ996bA0hF5bh848JVwHE/x4M7BwYjcJLnGtscqgjXtm9sZG1YLUo1H+36E34\nJJTAYUBXV7l0s0ilKHAdKUu+aSwrp0WKsOH3vzoletGfOTds/izP3mgnzw+g\nxhPt9p1Nru0++vgEJEt/69PhXEzLNt0tloRG1VIei3O6mGMcXUhS9zLjJwMj\nKc8ZTJ+O+AKWq9qoVkSUPTsib8atlZ/huwSwjD99W/tCK2RTHZmseg2wyaB1\nD8IpRhAFBfGoENOADmfqduELjPlqHa7aVqtzd4xPuyPSun/wNvxZmHUzvgC1\npsKBlBYltDbfVTPBP63GTBDknesqAAwac10jCjnx6AJbAa+Q+2vtCffm61kR\nHVAB\r\n=FAxy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9bc0effaf.0","@material/tab":"12.0.0-canary.9bc0effaf.0","@material/base":"12.0.0-canary.9bc0effaf.0","@material/animation":"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/tab-scroller_12.0.0-canary.9bc0effaf.0_1620248480552_0.12047911272591327","host":"s3://npm-registry-packages"}},"12.0.0-canary.a1e0f2af5.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a1e0f2af5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e159f87e6ce7d61eb9b45bdc3aafc26e13046c81","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a1e0f2af5.0.tgz","fileCount":52,"integrity":"sha512-562Vp5slaXObfQxhoTqxDwS9DHj8bnpYQRbuAwANAjk1zYJDazYT1oM1oNPGPBMW8R4utq1a6QOHKhrr62qwWA==","signatures":[{"sig":"MEUCIGTEVwB7zPRpHyy/FTpWYqsXrkcm26/J1kaTqegXJ/YTAiEA24IH+Z2sksOs5IYuvxpbDD+KENqizsNvJ6fX4E5QS5Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkxE3CRA9TVsSAnZWagAAzBUQAJRnuvcRAf1O/zgHhZ9D\npnrjulduCTWWauAmFp/naqaOSGvMGDNwpRnhGy2SPvSb42lMge28mZg24EYc\nJlIcQRojJdP4w03fz/NOhqEaChG9js0IPHU8ZMqlVtxblhxw9W4PwC0BALJa\nVJTLe2hGVAWv1qgTPn+zVTxaRt/XLlHE8I86PGRYxwv3cyrwSvZP4gQR4xSq\neRo3Bgcqogp0n/OpsM/8U3TBcJoQpBNE7GaQTw3gmtFeuCvXnL9InQJYw2+J\n7qS1FuiuSWFmps08y5u5dcQuD+YItB/O5cGwC64zGPUCnUN0mRbKlYzjRNq7\nfbFILL6fLfcQWtToST9rbjwqjxJFhkxrPRHCV3M5byEX+GNRLS7JrRYzjYOH\nfqBA6D+6g4Tzm5DnAEIElEM+8LDjAN9cOpyRKBsHaDFDd1hYji2i6xxkOl/l\n2IHI7aneu/hWiiydeqnLFHqIuyeWGJJKJDeYDYi4FVO3SETGbX1Oh8vNGEx9\n0xWpwppzCQDzR0Esc/CezpIoBnn1w1LQFtmn/d32vWKVHMPG2c3S0Z1hRrBu\nUmLD8UBDum+72jxcfkuSAOo+YEKDbKWsWP+TEdJRch2W0ms6fkzizAnATyY4\nqoulW0RJghEYS9JjZ1PguqKbZaLjBDJ/IIcPzNjvw90TOiBv+VcIlW+EGD28\nEaVE\r\n=HLxE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a1e0f2af5.0","@material/tab":"12.0.0-canary.a1e0f2af5.0","@material/base":"12.0.0-canary.a1e0f2af5.0","@material/animation":"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/tab-scroller_12.0.0-canary.a1e0f2af5.0_1620250934952_0.6072969894628184","host":"s3://npm-registry-packages"}},"12.0.0-canary.06930c96b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.06930c96b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a89e648958f0ff8cf14204249c2e983229ab69b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.06930c96b.0.tgz","fileCount":52,"integrity":"sha512-anc0iP1DCkCV9B8SRRJP5UlrFd7n2fLkK247V9qJHNy/d7EDJDvxMtVVVrRQFyDYPbVnXgYBt6C6dCBHdhn7PA==","signatures":[{"sig":"MEUCID7vp5/Tdj+K6gdltmT2oD7VtVJdSepx8prfryvRU/7FAiEArQ0PIoqQ58HlZ/s4UIpNWy9NphIeIQcaPb6E0nCcH5c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkyzrCRA9TVsSAnZWagAA9wQP/Ah38pJglgvZQCZESyUI\nh75a2eGu8TZthz8IHqTpuwiTfRsOW0rftvHG4tZbTh32bu4DKL3sPzhAGspn\nblLRPz80wpnNIK6OsEuAQVj1z0dnluRblR/ztExPBc02EVGG89bF7k3In/qL\nnMCO/jxZxY+raFCuEXRntSc4yYD+SqLjlhD47GlXPCIv4HWKJqS4nDPtU1NP\njQSSaBS+VXTAp2YEVde9d8sgfACoC6Niq468hpvZmvq49TqGPUv4o0bMwDfG\nlEyBwV3lGPwxwovxxf+4WDDoIcgqYXRYDVh25VVSsSMUS1gEQQvNndY23ooc\nJ6dX0uC9wSbJIQLotiK7jgceKEMuUeIofljcBNxnKcajsx+ytB3ZqA5CF7cX\nQH6tOvLQBS7MuHTRkY3eTVpzlfeMbnOicfqegxlJWUp8rvBEfH47ohxHbkoA\nLD40upp4UBIT+2R2wy3zUgAI1RqHWegrVmnnoSQNqufI+V7V6zMV2lYCyvzO\nTtzCsnIOPqj13r4awx0gCR/+Kpb5G/LbrsFHQx9AGWxH+zU6QYknKzToQxkR\nv5RcXCfG7L0mCq7MI2tcseOcpuivd4vKrdWW0ftw/mk4/TgOECIRqajo/FOP\njdaouaVRj5oupSMg8/eS3JLt7HpDMTmCiDKy6+r6gXW67ZGcU0HkZ+xjXKbM\nhxxV\r\n=KxCX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.06930c96b.0","@material/tab":"12.0.0-canary.06930c96b.0","@material/base":"12.0.0-canary.06930c96b.0","@material/animation":"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/tab-scroller_12.0.0-canary.06930c96b.0_1620258026648_0.32598220172175196","host":"s3://npm-registry-packages"}},"12.0.0-canary.03f525f9f.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.03f525f9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3b315927d37e467503ea73c1406b517b56372d00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.03f525f9f.0.tgz","fileCount":52,"integrity":"sha512-6eg+0y20XsNiOLw/z5iYNQxfcbB/175X+Nj2LXyKnnFFChtE61iv8b+felKbe2GD/LJtL041Z5KdJY44aU7ydw==","signatures":[{"sig":"MEYCIQCNXueKIBl4QUHfcPDMwPNb7TcIvuzIItmCwCqwR1XPjQIhAKTHsA/9VrW43wGnlVmJ82NGt6Dz+N3i7GSIrtoU3Ixx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339287,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgkzjaCRA9TVsSAnZWagAAXysP/2xW5+cKmLmxI5SHFBOE\nnxLed1LFT1o4VpfQuJoLxOFtgyFWRy/Nd3tcGUS+aazRMVSn4seGo0RiGSVb\nJghIrijX0qLplhO7RDijJr/k8nZwWvObZEUkAnEzZ7dKenWaYMUCaZY+bCZV\nx2nc3Hzhv28jZGMVEEHtq+Td3JZTrcfuw0h6LGIZ1WSw125xAlLAtYpuh4KU\nPT0ri5UVgzjWJzBOK4uCTWWdi0pKkuBEHrxjbsLeaEuy1qfCmVhVXySGMnVY\njoOstMZ7vK3deOgsYLMyVqAfP+IE9zc3px8kN6o7OAKkBQgBCoEiNCWQJSQ+\nr6d6gIdSUWpiHf7DNyFVMrmQT8Wd9mp2wI6PVo5bDr8XgK7A0qP80kmcitu6\n0GW4j3TuyPnT6IRDrCSM57r6os7Kqj8d0c/Uc7E5NvmubRSurUJ1eIz6gxgp\nV+IhsAqnyhR5RYiR7tBHRj7xMXh5KCl346Oc15KbuqjMB5TXWSCkz6YbL1mE\nV5WMqByylF76fL5sv2Yg5iAkq970i6OoVL9kN1XNfjzIaDc7fkxfpXPeyU8+\nZ+bD6149zdWGF60Ktlq0ctB3AXAZqPA4xII2puKHa41nZ9wY8Nw00M0UavIw\nO7K+5qimbWf1lBpF3ZIJpKhEWOtrvI12ZPIqfIlbirRX0tQoykhMiMl75cFQ\nXNMd\r\n=Qalq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.03f525f9f.0","@material/tab":"12.0.0-canary.03f525f9f.0","@material/base":"12.0.0-canary.03f525f9f.0","@material/animation":"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/tab-scroller_12.0.0-canary.03f525f9f.0_1620261081828_0.2818649433707796","host":"s3://npm-registry-packages"}},"12.0.0-canary.e82ba2a26.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e82ba2a26.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ff817f0f5f5a2e7d5d366b16ad5ff8512aee7fd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e82ba2a26.0.tgz","fileCount":52,"integrity":"sha512-PR9r3x0tH2QZQ1T7Rfc9+xeijlVT3457CTCVJKEbmkcz2pezslY7iVl7UsPnfek29iorqPs0m+8d0Zhgfh8oBQ==","signatures":[{"sig":"MEUCIQDYD5c/1Z/G23DhIvpdIrePl8TBB38KGK8se0moLCubYQIgGN5b5V3HDXmjl3OhO3HW3rPy5moTZP+xotog9uDuCFc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglBIACRA9TVsSAnZWagAA74oQAJTpM9+FtOMOrimPMvwQ\ni7PX4qXo9F65whPlaFKXMNXNuE+TtGx6tXpuZ4XXMiC5voVyqVU6vOFbADDj\nLoU3WjMVtWqhlYtr04TAOYhElVOazKP1Bfo/UP/WKJEx8ROMyVlBu3fEGio0\nwQVlnNUIukb2WWUvSgdo2AyA4kmxJjGUdtyrPzLJwaLgDAZTwygHVgBehORc\nqU0owC8PSUm04uij1X3WBGVkvwO2nZsU4PEvHLcF6//4gEHkgDvedsOkL3i0\nBEbZkkL3uVFRyyH3pZEP4gdl471N4ON6GiIAFBPuNTR+/9kf6Jt7LnBWnSgJ\nGInfS0ZeWUtAoPnWKMHe24nNFdaubneaPPIblCCozaNO8brKxjtGjswkzLsa\nltnP45x1d6ERKHMJiX4CwU4F1ytk7hQBrw8vWr63q86DBkebDkMD0xjrw7KR\nXSgrEJgYQbPFY/IOzFxWLlP0a1FfVboBsnMv92cIYjYTaSrgy3KKF2nCuR22\nNHujC5P44LQBfyasSp1TvTC0SfvlQU/VpPx5b1A/hESpCz8hnwsWHD5yGjot\nJZNflvC731kgX5qEwixSVQkHtBdW2QdtsdRip/02MhkCHMAIblPO9GtVuEtx\nSiIOkLcq6fbeTcR2q6YfH5J00I4RaSypapkFlkfLarRC13/KgCBkDf/24SQt\nigzo\r\n=3yro\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e82ba2a26.0","@material/tab":"12.0.0-canary.e82ba2a26.0","@material/base":"12.0.0-canary.e82ba2a26.0","@material/animation":"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/tab-scroller_12.0.0-canary.e82ba2a26.0_1620316672362_0.7336294691723684","host":"s3://npm-registry-packages"}},"12.0.0-canary.fc7c4e5ce.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.fc7c4e5ce.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"de0e9ea84c2a83f20d41de5474887771de3da62c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.fc7c4e5ce.0.tgz","fileCount":52,"integrity":"sha512-/wxfMH937fjceC209F0myOgvVh3vMNaS2YgmyatA0tSF6m00lQuT755lD8agBsEgTXeRDvcfQpaU2buS1PU6Jw==","signatures":[{"sig":"MEQCIFLJ6JZzPxhLwUl6eJrGcFjdtYhh4TNpN1K3JLeyIj1zAiB0+jJNHsJDr8OsGXXkfljwO/QUsUfr9DmhNjSiGEOoDg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglCfACRA9TVsSAnZWagAAlOIQAIQDOlEwPfSPue5KnMHL\nepfEmaKms1YU1fzXBcgRu1JXyRnNWi4rJpy4oLApBv2h6llHEh836rYP1nXU\nLqv2ktV7gXmt15YDVsjUY4UhSwZb+9cBVPQ0cn80Zy3c8yj0HPGLja6p5y45\nE8kRrbgHhLR/zTDwIFw98a8snFIMW/qgE8jIw/r/bny38srU5b/eASqxM+S7\nJ7GVM6K1TmQyFkqE8AMHl+bShVYTr66YoEkAseKNZlqG0VJSFaGdoOanHcIk\nmOnLD+NvIXjBQXx/nMNXEzBhf9wod4z8fI1nVmb5qc4zAKId5/KkwJzVCsyJ\nC2cPaUrkcX29pAKPJT1IlEWNaFMTmh/dTuC1MkMij4XTdgTrr9PUZ1XeIfhG\nvlmCxcLsH8xAra17ggQx3cixr4Qy2utVWlYxC6lHW1N8PN1XxBnnTCSfRF3Q\nX7t5ugKCCLOtufnev+QpsL/4Zhn6DEAWii4UGM8vgqB7I/4RjG4sY+8Kd5km\nntejHyqMgu4mZmfAj1eIIF6W6MDSBHrt2wQNTIuAPa9mfGLSKXLg1nd/YsTW\nDZAJlFD0dD2Tm3aqWMiLfbSFzHNqwuemFoiqkBhLdgv5WJqRdURlz22hC9+B\n/CStBNeEGo0DHpijc1oqf+8VKnpawu87ebYbGStRgftFHiuyRUu/T73/WLRz\nBInt\r\n=nFy+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fc7c4e5ce.0","@material/tab":"12.0.0-canary.fc7c4e5ce.0","@material/base":"12.0.0-canary.fc7c4e5ce.0","@material/animation":"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/tab-scroller_12.0.0-canary.fc7c4e5ce.0_1620322240048_0.6126660636512526","host":"s3://npm-registry-packages"}},"12.0.0-canary.65c04514d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.65c04514d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ac0e6497e9589e85159090543f13c35d9a72cc98","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.65c04514d.0.tgz","fileCount":52,"integrity":"sha512-TeX3qbkiGkwdeE+lncVV5riO69aOK+GLsPpG/7OqPCr+hdd/weZJVi43VYsInZadPDBMA7jQgUWfSsCRJhUE3w==","signatures":[{"sig":"MEUCIQD1k/HXDJrOIcY44IQfoA39ywI4YNJGC3Dk1daQ+rc+SQIgZIO04q5mRDs8/bJ8PtHaijuY7P2olqT6rNbQ4k8XnHA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglDk1CRA9TVsSAnZWagAAQZ4P/2gTuRviF7BSN1/aDOfT\noNXx6wvvkYDEpi1E6i4hv9DirOawxd2EnXfmdfy3OBjU+JiqWtOZaIIdkXxt\nwLSlchI6Lm9wv3wf1MNBePvMvya2wjyxZBsUetbTelzUSCBGpojUULkfH9Js\nKhc+VAFNlLBfdRF3Nqi2MkFCSqO4pDZ6OZ9E8ZGGhexrfBvUs1Zh/WERrZBp\nXFPh7tm0ALCXXRO8no7KvEq5u46Q+JPssof/1KXNLKYEmwcatzuKQZS9h/R/\nmTBeAAJcXRtuL7E33y9kxZtqSZ7uTBm+LI8mjMnehaQU/m/SalpYjR9ftPFU\ntmF3Xsqc6O7DO5gMLs1oSRQQQtJIzG98+BDFY74edw767QipocdXx/IlJjHv\naLP9W0ocmt/DfRd69jxLd2/nbckxuXNblWi5qgwDv4kWkjFUAHM0Nwg5qDKI\nTFKpaSFXEFOJxk1taIEg7PfaPBQtse0oUyKV4RjKSFp81b2bWrPqXDAWBENr\nayHDAbA12YN2wN3xCqGF140UI9x09Pl3ESAKY5Io+SLi3wWAXpFdABQpb9Oj\n6eVRyHNHhZI6UAJT2TOy8ywL6lWD8r1dmbcZF+3N4Qz7uhvTA2jCBjD7voZF\nj37wf478ekNsoSJnQLwM/4cuHekSbtm+v5gy7uK7gEhFbW3R9nZVMAulQI7z\n3525\r\n=SgqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.65c04514d.0","@material/tab":"12.0.0-canary.65c04514d.0","@material/base":"12.0.0-canary.65c04514d.0","@material/animation":"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/tab-scroller_12.0.0-canary.65c04514d.0_1620326708832_0.5579869825441084","host":"s3://npm-registry-packages"}},"12.0.0-canary.c97779ca6.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c97779ca6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"35ee2e47b98dd4ffbf1018116f0971a4a219ee42","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c97779ca6.0.tgz","fileCount":52,"integrity":"sha512-JrY5shMQ2GHVtcvxIXoVj3AnZrj+3ZgxA/XnseXnb8Yb/W/q2rYWXR3HY9dgONHxegD+1mWzc1/KfSXS2VHBqA==","signatures":[{"sig":"MEUCIQCsGjU+fh9Cs07RHoXN4lj4JFgJ9YrHbczLt/lUUFSxVgIgP6s3BthlHtkOrJmwnRkei8/X3ZHG1HXrJWYL+SlfJEA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglGM/CRA9TVsSAnZWagAAIoIP/00sdeMrY21MZILSCMEQ\nx+HfbsPPRbgtD1bKuQ89PgfQEo3VQC7+sikzD1vjrYQFqBEoHGfJJY0iQRIE\n/OwnIMcan27kG7RZ0cB2RjyBeyBsyIKnTjFxGSbct+6Gz2GkCgY6AyKqgLh8\n/rUOd8hpHVKIEhfaU1ZwAsBW7lr8mkLkkvh+tJqIqW2CV/DKINc0P88Egmfs\nbz3Ws94vHRaltJ/6gonWQqvwTx01gZpT4lcwahDSWNkf5wcku7ILO9Si1s/G\nPgCqbeokoDpNbNifcUJCobfy2stVmZZyukPwH0y6tVBGsjsW5AZEk8KDmEBS\nDB6h87eiFDoGZpsKK9WlEsPActKTF8aBII9ue/l6jl0C3t0Drwb0JW/wu4oI\nO0BTVUYvYQ+GuHvheN//37SY7fhM2MwSiY+xfsaboo5z2XVJtUw0Z//rj0JG\nv7VJvcHmcs5d1VfaSDF7Fu04bps5aOfbTXnYNL5mkvRIxTKtKiL5wBWnTGP8\nd1edLkV4nYl62+0gu/zg0xHOFUbxqwZ1+UxZCUXzStahG0UGSOMriMruSmXG\n2wJFFs5hU9+x6iJxc2zmLM/UNilwk3gzaU4rszShzzzj0EqXLDz8ZkJ3G7WX\nVv8TlK11zHuuBgsANB/0qmkk3ekoWe34Rlmi+Dvd0A077he3R3FVv8SBH6kD\nZOJZ\r\n=D4N6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c97779ca6.0","@material/tab":"12.0.0-canary.c97779ca6.0","@material/base":"12.0.0-canary.c97779ca6.0","@material/animation":"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/tab-scroller_12.0.0-canary.c97779ca6.0_1620337470989_0.43673125713479743","host":"s3://npm-registry-packages"}},"12.0.0-canary.869d890d4.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.869d890d4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ca0f7805fa13c0ceb81b2edde37827194c0f7cd6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.869d890d4.0.tgz","fileCount":52,"integrity":"sha512-bHcq1MFW+bh/Rg9FgpexX/IawVN5nbkvyg/+o8NI7k2KTztV0etlfbuljTkv6l45ZD6L8ybfYMAAp0RHtfV8MA==","signatures":[{"sig":"MEUCIQCyw/hGcCGnNI9yb1FkoCfr6U7/k5AWoPO2Qu6MjvoJ9QIgdCFRt+g+VuSmFZ4DAR3BcLN11WgRLeHJomfgNt/5gSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJglVqlCRA9TVsSAnZWagAAqzEP/1ByfSH4NAi+nZnk6WLK\nDn3SJ+OeuUAe9CDx+M6moLhzyxjwH1iVJ2JTlcYW2FGs2rLQXOGaJIQYave7\n638C1hUpx5da506bhqacYQaRrlyz8fy9nkcmEU9TV/R5eFGqo+1inR8zR70u\nRA/pWi+yIVvhTiUUgjDPprrH3MHdWu1C0O7h8RVrv5q3wV21DjSB2Mcy8lwf\nrZYxMrDFaxFZrX70jdYZUGT3FDASb7HMZpxQ8HepwYv3oAIoKK75eP7haGlm\nLan93vmK1pJRsTqsHvuNq8o3EglDnqC796GaljiO176t1wa5zWrFQs+Npd2V\nsHNlLbTLs+pt03Bls5AHJcOe2W0TP++HMX6CK4l1chMbbwhKNKnVfCsKCxGy\nAE8Ydha8wVvwYWSqtzHY4R4d0Ai+fArRcP7MZqOyVefhLp43i2w3sbD4yVqB\nchBuQ6TBb7Ybs8JNKCZ5sIxPCxfcIpX3znH760PaF0BmqL+mIEdM/fHN8D38\nycicc9CXqdMycS26dVVsp3o1U5qSxR7uOAyUhh75i4n3WndOGdqrm41odhMT\nh51mL2EF25qc5cyQzET8hV125u2yX0R8g3F9sZnk8956wQswkGiTcKY3Jpw0\n9i04yy/n0QxRIDGAy0ip3nlAsenVbs5ammlLbdK2SIUcwt61sIp1pG6wuTnH\nXX9I\r\n=afl4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.869d890d4.0","@material/tab":"12.0.0-canary.869d890d4.0","@material/base":"12.0.0-canary.869d890d4.0","@material/animation":"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/tab-scroller_12.0.0-canary.869d890d4.0_1620400804994_0.40297559064958954","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec22e1da9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ec22e1da9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c2e846831f47dda8c15be196b1d5819ea9ad2d29","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ec22e1da9.0.tgz","fileCount":52,"integrity":"sha512-BLp4oA2oMhGDZ/aQ0mz0vzTf7J8N3eog3LAsJFU3IhIYnwAq9paPFK77OR27uSNUJA8TCntfSTYN3nPrrwH0oQ==","signatures":[{"sig":"MEQCIGXN4DExDJnTwJTI3Cru8py/sK2sr6+Xv4BM0Ymki1aBAiAai7S0OwMwQtqgsRjkPMtZQnDYMbH5X7jQ8d7EMQL5gA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmXpsCRA9TVsSAnZWagAAQ58P/03XOD9zgVH2CORhxQLn\n8kAQ9dyRtsYvJOTvQDn9LaGdiSoJGSL1wjR/roLQWBPleAIZkCeNbWkm5q/O\nhVlM3HQx5ulEeN3m5HPmZ7shIt1T+hhQe1hEhRUb53rhGUNyp7aPUSZ818i2\n3F39Ejr3xFY4KS8sduLonpGN9Py2n9omF6/D29nxSKN1kpixp8STkXj0/8eL\nF8cKpHoO0Zs9Yvu0RgDj9/Xr2fave37Ww7bKg//hxKukhWabMTBhtat7dajZ\ngVHdfIFjAjN7saC33euLrAgZWeva1IczUTrt+14nXopNDkgmN0k0A+18zoph\nkwX3jHk4LfDdujRe0EaIhCI2W1zs4eHIkFjzViob+BnCeOamDp3FS/2dLgcK\nfluQb5RHa53p+gb0rXXEr+VJx/NY8fxGiRA1nCOrMqSp1eyZs0evFJWtHLAx\nYY40qTbK1egOZ3H65DrFiJWBv6hDgYfOOLM+jUbsgY4uVqb6wDfLSp8rZYdK\nv4tyd3hzIKjJqg4Ul1oRQ5iCx/rW0KfSbvNA75MppOu4tU9Ks+WfLAOZLkfX\n6x8ACgcc1myxbAYchH7BdwZeFp8+FGfqt4LnBUhhtbwAZNUoMh52Qfu53dmo\nw10CEG+R8Q3+ZcVyHv5TaxTyIWQWg1D7pVS5dhaLuB8xbx7kMNiQCeeC09Ef\nSUq6\r\n=ppaT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec22e1da9.0","@material/tab":"12.0.0-canary.ec22e1da9.0","@material/base":"12.0.0-canary.ec22e1da9.0","@material/animation":"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/tab-scroller_12.0.0-canary.ec22e1da9.0_1620671083787_0.1998256503619551","host":"s3://npm-registry-packages"}},"12.0.0-nightly.7427449f0.0":{"name":"@material/tab-scroller","version":"12.0.0-nightly.7427449f0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a3c43092d2af9fffd17f51843710f238418dac69","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-nightly.7427449f0.0.tgz","fileCount":52,"integrity":"sha512-B9c/TjZ8xJ8G5MHgjGDjo477QEUn5dtj4hnbNQtanWLA4iLADy9ktWIbO0ghB0OPgb4YzAizHm8bhDtTo7B6sQ==","signatures":[{"sig":"MEUCIQCHvb1yyfbyixvMjKeo+uqLOMBRvUCSRCgOxayMSU3BbQIgT0JL6lQSXdtEPEK8iu0xec1aXIFtC7DAu7GPelQFIyU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339242,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmX89CRA9TVsSAnZWagAA/HQP/3/cS5CjUvKDXeDZlma4\nCRJ2X3k8GvfmZBX7QMnLXKvsLn+p0zQjuV8fN9a6zKDulyl9Muc+VBKKDqyu\nfGOvOW9E/qLWwPiLXBQ2eJUIcJGBkKE3K+tHBbthWaZ6gdF6c1FHG2O3S9kX\nYr4YxcVYanIR4GIbtCye/Hm7vnlMYSN+0L9wap1i7Xn27d50r3JXfi3knwFL\ntSgdjxGDt9qL3qXVudfp5kBnNcq2IBiLJhd7zI/CUeKqNXHk+sn3bWKYfO8u\nngBC5m9hm9euhAK6P8h9+XmOjh5dapLG/PTuSO9tBdLR9/L/TMQvkRyyAMVF\nYdUAItcF56OmRTYhXLkXLD5/9SFrS8rlZFFPYmR+I02tyn7aeGnA4WB+/t/n\nHCPapkv2yPjTd7SLuLMqjQkeCtKUO52Apoqh2PdARgBWzDTdq+s1R6ry0QSF\nZeXrT1XnWD4TK7DY8HazPCpAfaZ7XV3BfkaIwnpzU/+EWTBCTVkv2dnDEayd\nVFnVIb83T2xvCLY7ecoSXf4xzEhxc5corrYICoh3dNgK2t+EVtm6YwPl806K\nFUJ0isUPvQBNbfx6wVMU5N0rCCtLQ8GGHQcwnHNY6oys58M0rsT8SmPn5B71\n78yPeBeeTRC6dD6TDqrkhH5aVAWx//uvbwJ3ASvj8ueYBLzRIPLDrG2mp7BK\nmIcU\r\n=KnRW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.17.0+x64 (darwin)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.17.0","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.7427449f0.0","@material/tab":"12.0.0-nightly.7427449f0.0","@material/base":"12.0.0-nightly.7427449f0.0","@material/animation":"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/tab-scroller_12.0.0-nightly.7427449f0.0_1620672317392_0.471745763999448","host":"s3://npm-registry-packages"}},"12.0.0-canary.957cc3bf5.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.957cc3bf5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"205d4c271a43b8ac09facf22d62921cbe4b5212b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.957cc3bf5.0.tgz","fileCount":52,"integrity":"sha512-j8i9jJ0rj+GaGzinivHom+lruoHxyWyH7wD4XtIOzQk3Tq8bc6igSo2Ep1SibfBWHlDgHyRsz2ksX42y+3PbyA==","signatures":[{"sig":"MEYCIQCmZ9PKr/9ncZkWBGYICMqqVNReIwbxVWofdnddlJS6uAIhAIPD6zuigPiczmEQ5fnYA/ar32DzmrweixlMb9hhdJfD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmaxqCRA9TVsSAnZWagAA8XQQAIaT6SxQWNgOXbKNXYIs\nt9Iw+Xu71WmpH79pwivxs+r0Dvc1aLy3/txcuIb4ifXSbVZeQc9pbA26fon0\no0Mf3oLBHpfJr+UENz1bs6VM2Xk4F/jnKzS/Bcskf5hnFjdX+2ZUeDPZ2Ej3\nwqbcDr9w9EjrGctqk4syCsJK2cLFMgX0Psao7yfOv/N1wtdt0dIjic7f92MA\nOSw1aaCz6+abNgVpeJQbhbn9ZxxDZ18JcefBcNheohim0Vt7blo+OqZS8dbM\nOkru2hpmCYyJ6SkfWNRWO2elu+1EeMSWU3JjUZFHiPZZejmvGJsv1OwEZ6cG\nbiKcypnnBbsb1Gi7kWTXTvr9264+7VIi6kkbjLakiUYuKlmASRtF+2CGlzZe\n7ZnpmRZfCOuhV+1BncIbzHYruveeEfp6Y94Lm9TQrU1qvJd2w1D3E/y1PMQa\nhZGRb4SL66FlsNG3an+xGizzr0HVnzIhk/p5J/BzOmspUZ1qR3wfJAeUM/7G\nyPmYjwNGE6Rc8/dsljHPSCxp3d2CkExnboglygBAQ0c9lTF06cFmANEvjCqd\nxcK+DN6/tLQZLVa8jVsc+sfN/LJb7jTMI6wsc3ph1bkXgIhBvnqdhQmIwhKt\n8fJrqOZZIfPemCQSW5ai+fMBrek772eDMNw7syzfBtiAJ4IckLtFZpAvLmcZ\naTEj\r\n=FP7h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.957cc3bf5.0","@material/tab":"12.0.0-canary.957cc3bf5.0","@material/base":"12.0.0-canary.957cc3bf5.0","@material/animation":"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/tab-scroller_12.0.0-canary.957cc3bf5.0_1620683881623_0.9745675527272397","host":"s3://npm-registry-packages"}},"12.0.0-canary.88a33cd70.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.88a33cd70.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"19adcaba5a54a3c3d8a2f98724d27f241c8685f4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.88a33cd70.0.tgz","fileCount":52,"integrity":"sha512-OyaI6/1fVovnrUFzWbw6Z8gL0RhDL0NLPe7eWlUb24Rzo6Mq/eJvy2T+RVVVHkYs+EzS3yxMQG+THhka/qOeqw==","signatures":[{"sig":"MEQCIAGIlrwUTXxwusoF5t+xDSYGunHZWKvCxSrUny94HKMHAiBP7gd9ogmOTbniM/fTxrcMABhykN/5GAqd/YgzcHD2sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmcteCRA9TVsSAnZWagAAB2QP/j9gstFMlpYnKx/KE218\n1NSpVV0kB09xz6JvMzwE5vTyz+uxemGDeaWaDUkdNssPQpTEH1llgJM9dHE/\nEd4qgJMDbH5adZwOihvcmV2r0O1Rq0w/RzJ5wd6Y1uQHTG6udY5enI8c+TRB\na1FB/lqNSxp73/rnosb9pQcscx2dJP1IWJjWHkilwNqaLT/Djp89Mdj+RHjp\nkx8qB8VEv/6zTq5CmiuWW8yC572GC1xaBMTYMAe4MBPRpctxqySafKZO6zMu\nPkJbNJldInwV3dtKZzFbcKI7dDKRrVy0ki9CzTm+r/8d6CuiwD6r1xF6bHNc\nXShF1tNnczynBpPlyYvyoJgeO2g4GTTwfSVOX8dZ0PPhIiOcs6Kq3BAYIhhq\ny/OFeAERWGT6BLbhR+IgDPlPdfSGpmqQm/h34QbkIx9kLwhwsg3VOnDxPBlE\nkTQhcUd37pWw0xCJLmzXi838BBCa47lAM7kgvUAaX+IzXFA2Mnxrk/YNAn6B\n44W8HTxTMBDPUUljZI0WXVP7HK7I/Iv9LP6tJpdidKg4KgnKOOsHcORKcTRH\n7kdTAekwIshvMyB/AIoC2orETYCJxM6wGZ+57lDUl1AE5tzylyrE8PXItAO0\noDOL2FgInpndo7YUF8rHL6Mv15ImEot0QC49Ll66mwFMr1iuyxOxCZkcJCE2\nbHBI\r\n=g9Vt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.88a33cd70.0","@material/tab":"12.0.0-canary.88a33cd70.0","@material/base":"12.0.0-canary.88a33cd70.0","@material/animation":"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/tab-scroller_12.0.0-canary.88a33cd70.0_1620691805863_0.10428475047074892","host":"s3://npm-registry-packages"}},"12.0.0-canary.d20dc6dba.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d20dc6dba.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"45571013a5ade8e4f58e00c59916bd01acaab721","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d20dc6dba.0.tgz","fileCount":52,"integrity":"sha512-CHwzNgmStMqG4LXPxAFbjtndRfoid+Pr0AN6r1bXfHDjy75b7M6lgCXXYk0wWWAnIz6G+Ko86m7tEJwH1s3WqQ==","signatures":[{"sig":"MEUCIHQFKTlKnOT5jTkTlgxKaBDOtbPf0Gp3tbLu7xYS3TkoAiEAmBvAISGWPjXD9y6hDzm/29hkFzQqlAfSHVlFgkuAJR4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmc8cCRA9TVsSAnZWagAA64sP/2231avHMEKmLAQnH+GF\nfHJ9DEwTERnIB0/fL5mdCMGs4L+91AMGp4xGSGBQTnfiFsqRyVKci6ETgAqZ\nQ8wzDGc7CQsC/eilGhotL1pqguzpL+AECjfS8yXHRqLn6f76RmoUAiWLoFfj\nxj0eJPR6WL1nsRLl6qbotmk20UdQ+zTwJkeHRx2tu3iIbQjVbgaTW+Y0NsPm\nPiA2I4NV/DtT9ID4MnyWTm3Y1xdCFi3Jy695qHxbXep4nE/8ZY2HmN6vHGlW\nWXz1vr5xFiQaMqkvzBTD07jGnqIwsiCBg3SBibKlQmbJd3zD7Vt5gkwQAEiQ\nQhdXkvJjJTBREiuAdxbW5TcePflspyjL7xkU03w004yIY0k7Uk3qn9XYAVck\nH30hDnBUNRtVyJoJEDK7SjI016/JDsQ7jOb7nNJlOStuf/m4bmd1KWkfb62U\nNXHcJpT5wHAh0I1tedXaRF6sJ656SmIx2XtWIEaHg5sryU9Bmid9vwm7Wxil\n1WTcbn5fzEDlBB4ntHYShkGg2o7qmcdKxUm6axsUFHdzZvAAuwumvGaMLosG\nv6YPtIcg+UfjtM08ANDphar/MBm3zNKFKe9rotFzOFljaxar3MwAOhS7+gZS\nwu6YBdbPd9zpat+09a6O2vvYsYEAhq/Dqv+H1GeXm9AAMJuqmCXQJQCE11AC\nmh1o\r\n=g4sb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d20dc6dba.0","@material/tab":"12.0.0-canary.d20dc6dba.0","@material/base":"12.0.0-canary.d20dc6dba.0","@material/animation":"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/tab-scroller_12.0.0-canary.d20dc6dba.0_1620692764280_0.8761034620137884","host":"s3://npm-registry-packages"}},"12.0.0-canary.0ce2fdb02.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.0ce2fdb02.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"28a1126f7f27de42b0552c6eafd0d3417cd39c8a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.0ce2fdb02.0.tgz","fileCount":52,"integrity":"sha512-iTa+NFoJcbgE+X/tYflov+N3dIswlv1yE/uaXPSOHXKuUTFhuV11Ls+knkMcpf56rhIlcK1lFT6yLMoziQqQEw==","signatures":[{"sig":"MEQCIEj7Qwy8i38XzhO6wrdmQDvaCEpRoCPxeGawpIdBVWxnAiBFDrWP+SjQS79rwOLb5vJRiBlpxUAExal4ZzhZ6KUsVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmdcJCRA9TVsSAnZWagAA/DIP/2B+EVITHqIPPDcD2dU8\njlhJ/kf1pU9mRhcnjwS7+n1EWbEObJEf3Il4QT4e8xencYE9ma0jmA4BYBTD\n85rVyNm81bI/jOEX2O7aAUjZhSsZfuI0tY4bH3vWgSyszyij0rIXFeRlM6oI\nxqKqQNsGgbyVE5N/jwBzXLmlR9yBRhEBZGKJ0l+qCGBHVMLj3BKyZQpwLHvs\nUNOkIv9PZKWusXjYqFBnRVSNGayBFz7DnR0dD9hmBmpgE4hWheimYVVzjCMb\nJUDRcY9Q6jOAOX7w7KGptMvcBcEaSTTni3v9615mCVMUsocM/nuRCYJheqvA\niIAdQWgkLaQUpPp1uRV+flGQ+DimTPAF4YYcY5A8TdRXQwc9pE+YTCwpgJ5B\nuC6RPmsoAcZVIB9oc0VkyYEIZBgTwXVLrWauUMHZZrxtkU8csoc/hRrRKq7t\nGrARXflrcdZ/ztF1MmQQVY8W4JbkyCtiZS6GwS/Ugu44NYOpqrQ8bbHyVfmV\npLhXn2R8MePtaRLcBaT3E2LSdYznSn4a8LrlSXaOHNlIR3UCQ7DIIeWe3n39\n3TKiaY9LEfE5gVfxDVizWAQ/OpJlcEx29n/rXdr/777s+vBPq7QEe0lGNUYg\nDzaPWBIFSRLUatoit7m0MT9lBIDcW7MV2zFxXjZKCNcXkcLIT+FM5OfzQfob\nLevl\r\n=sSN1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.0ce2fdb02.0","@material/tab":"12.0.0-canary.0ce2fdb02.0","@material/base":"12.0.0-canary.0ce2fdb02.0","@material/animation":"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/tab-scroller_12.0.0-canary.0ce2fdb02.0_1620694793451_0.24191754529607468","host":"s3://npm-registry-packages"}},"12.0.0-canary.cb162da37.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.cb162da37.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fb79df38e5854255405abf1ea32c2dd558f15136","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.cb162da37.0.tgz","fileCount":52,"integrity":"sha512-H0u/hPGuTOoYcZmNKHCan971nBkywj0FyySIm2T1nHQQW5GsaumQq1VjV/OJrldG194mvN/cbAGcNz9/TlsZWQ==","signatures":[{"sig":"MEQCIC6gf1xZMQ9xvW7MOSYErVykHYIuN8V43z23tl/Zo2mbAiACFUWkoohy1xxUrSEp7huGWJsFYtqMI9blVbb2PWy5Hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmeUTCRA9TVsSAnZWagAA/okP/0BZD9Y97tiZRk120nAK\nPqzlTWU6V9X9miIuxcv/gzXDzKgCBTtdaNn4DYU9Tx1DL2zCDj330xFdwuwH\nA0k/tCF5gBLoaw79yMtA/f/TjF92Yl+ua4U0azyBDXVlo+jL7kn/FqDEhn2B\nbjt+tplY51F+tRPaDcF71l/hvy0wcj9TywALhkEc2j+9RwyrnvXzHZXO18Cm\nf4i+W0qxEDwpaQR0VkWi9f8OHr10EuN8KlxyRnf9aSTEVDo6cpO2DNiPOqWj\nif4HgP7ZqHU+SMaaxAe6k9HNsQXCx+bMxVqkQftRu90Pw44nF7MwVGhiifSG\nYQp2A+lXJcHA08CeydYj4pzeHBKz+woMQOFKI5Z6AzyX9y7ZGgJ0zrfxm7Xo\nzQ/8e0o2ruH7xy/HYumxsjoaBashq+snaU67fdBeBn/Ic/ok7VjRuypW9tfV\n+gwN2F16nwTnwrvoaOoaQHb1gcsNDMuNbkUeqygSwYrJFNd7xQdqTBm2l+qt\npYAQBN4gAes6HhD0LL32ZRSrSuhxVGn7L4J2DxFVsQi3kEhjicmCMT+wFLjB\nIXrlAxhZtsg78vlxBrMqSXksmtG7/KlNKH54g77rLxxkKOhA2jMhmQKo8QZ7\ngTj6M/wko4+Zd+Tuz5BScfZluBtbz05FA1AdtO4SfdmbBzTKCjDB4NHUkM9c\nmffY\r\n=OB0Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cb162da37.0","@material/tab":"12.0.0-canary.cb162da37.0","@material/base":"12.0.0-canary.cb162da37.0","@material/animation":"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/tab-scroller_12.0.0-canary.cb162da37.0_1620698387189_0.004397584402352939","host":"s3://npm-registry-packages"}},"12.0.0-canary.573dc7ffd.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.573dc7ffd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9975cc9c760d8a3974d995ffb7de72401cfe123e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.573dc7ffd.0.tgz","fileCount":52,"integrity":"sha512-AzQ6TiPpojHev5UP3B7NHrkMBz+mHx42XXWVp4rl2ZV4ndv6Re1REz0XDMC6rjD53uYl72SEwU+iKlP1GCOzzw==","signatures":[{"sig":"MEQCIFCSmn1HyFP1lg7iAePeKCF1Zb7e/ghw2WRydRm7hmcUAiBm9TNlqyaGU2ZxEUMG4ONEA9ZKKp+udEWsVq9w6mht8w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmemBCRA9TVsSAnZWagAA538P/iWAupbFV6oHgGBYNST1\n0LHJ11XDtjlN+Le3Mhhb+FY2oMiVkCPkvK6uCjsQFfPc8Rqz94UUbubsjYxj\nLfpLh9GcjRunfGxUSZEZpDBy0Jx1P9faz+T5/L9HOaiEjMaq59MsSKRq6v/E\nqVNDKEjQ3vjsUlkKkl0nEowlET5o2Z7wZgG3hZ+W1d62XoYo62Kw8xozQ8xf\nMVz4+q/0pFZO5AGEXClUWsTJv+fl198ykgQtRBUtHFuMECKrPuMYYV6o8B90\nbFmOug+uEmL1vnEh6oFFgyCeDgIzSHh7tnBbroWsXTnDIoUscVAJCyGUoLbA\ntvzMAglUyMT+R77vPVhS0OeZZ0y5DglaTLD4FbuS9sc8wgAJGBRjD5T9w6SM\n6KYzi2Yut4p/a67TSt8SeLoewXXr/Nxp2j+DdUjzL0i+aoq3UTh0tG0o/TEk\nWzmSlisBVX+lltkZgMjf1/H2ReLm16vbrZka5KzfUU0DjqYONMUibOEBjbtL\nIRwvOQrs3RrBBd6wN3HKpe15YF9zzLeaTJEYa+NjFOdKfSjnPzpFgqGcZXBn\n9h/FxQB5R6gPFgGZJQWI5iyb3XGQm5K6bkXwZoKWuJIpiw6pmvaRAPowK4b6\nL8OzhDmTCcDsZhQpQHVtuaQscnZNyyFUNR6sTW61zDtCoweeJVOZHIAmf5qA\n+gtx\r\n=APUb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.573dc7ffd.0","@material/tab":"12.0.0-canary.573dc7ffd.0","@material/base":"12.0.0-canary.573dc7ffd.0","@material/animation":"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/tab-scroller_12.0.0-canary.573dc7ffd.0_1620699521372_0.49980278667207667","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f6ad3fe.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d5f6ad3fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"02ebbbcdd1feddc6ccb0566337d91d9b02bbb780","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d5f6ad3fe.0.tgz","fileCount":52,"integrity":"sha512-44rpr8FC3BRMpGXLigk8iIRdig1VxfPbTdGw74AKrUT6eoDSd0Wk+4SCRmJ8B5ypgGwaBQKTUP2MXpu9RfmGxQ==","signatures":[{"sig":"MEQCIGjl6HPyu75aWt7jeQhpauj6fBTuscsfLuE9pJac6cdpAiBeZPXVP5CB0ZewaD90MRYGVcRHz9OxnGs5OGHrY8NhHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgmxIBCRA9TVsSAnZWagAASqkP/0n/9A+TvwSvYE2GvXMR\nOeKbOZgTVVLCvrjwOc2mM6rD/1vrg8XEnelSTazSwqKPSEX3yMHAeZ6UbdTu\nK5KFeq1vLjPP//FNOGfEr4DVeO0a+r6eC/zvsV/7OI27E/jQasltGBISdS1R\nBTkcMuRsLm7YkUxQBoHZh5AzfK+5pm9QRKnsEwiVT1Dp5Z73NGUFthqvw0or\nCR9qlwIGQDgDYcJ5M8xYoLqDnrap2XRQyetlB7SeAzMySZhOe1AMU7R/Bh6N\nU9sMliyDUYDwN1f04/D9CVA5fdk/4JnftqvWYUgxoIip4ajyVCUvIJeO3nC1\nASwH4VgPQPzr9tXJqYjZ3Rld45t/5MkHD2ApENc7rwKvjUCtGV2x2J5Qv5Zl\n4LrRnc1NaotbtFyzPHQwi3wkGPUHN2pPE/TMnFGEn6+lbkamnbnBx2TSfZ32\nNU2E23MaSz+qDvybYUOM4oKLddFbU3ssp0uDYcr0h+nDYqEJ9bPzLIGNBdKr\nCgoMguWKO9be3N+zqpntiF1r34A4NSb/FQN88n0B2/7yntOzWnFdTlmrk7Ef\n/tPPyp+EluBEQo34oucJyZxQhHh3/GFgZPAFYH9gVimSahWsj1+sfmJsaNR4\nCRDfgfp0PJ7ikK/kpztfo3ZzTBb0dpUHZGYaUOF5WUsN0pvespCYQ9iZLTCQ\nPOHh\r\n=BhFM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f6ad3fe.0","@material/tab":"12.0.0-canary.d5f6ad3fe.0","@material/base":"12.0.0-canary.d5f6ad3fe.0","@material/animation":"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/tab-scroller_12.0.0-canary.d5f6ad3fe.0_1620775424512_0.15284001918401446","host":"s3://npm-registry-packages"}},"12.0.0-canary.25751d2ed.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.25751d2ed.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"19315892c4fdb1c5d6fbb22ce6faa8ad01a31d36","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.25751d2ed.0.tgz","fileCount":52,"integrity":"sha512-CMPtGz2wcMF9cDV29XlZynglCBWDpnju3WBEx0J0B9iExgOeap78pOo7Ee99l50SQl07WT70tDiI6Uc1eBUs2w==","signatures":[{"sig":"MEYCIQDJTaCRGp22KlkSPPUrjPujru3MmCcpQERoJw38EjwrqgIhAKNPVjNooiCNRFESZCUAKZAYxj7uW4YMa9OuGmpCAKYj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnAB3CRA9TVsSAnZWagAAuYoP/icLTfBQxJDtlEEyvLgP\nHuvmjmLxL1GFFjdtiVakHIPMW/1H6mu4lL6kZKL9kBCRSZ5ypHx7x4E/UMkn\n2ivB6NAyxP1QTcJc6Y/MdIngM87I5N9pvb224EJLKCgAwA8IuIh9slPK78Gf\n4kKSKBupPPzH84v8f9JD3AwhlE7BsaG1LAJwRbLF9/LFQv7yZXZCBARSG7oC\n7s492lDA5jcO/TX55f262SGimEYbrIqB9PvMjLIVbb9GRYzoQmRaX+eJqme/\nnrR9w7JfvSlUoLCO2pvA6RO2aqafCHJ5zfxO48peWLyoJg9HZSzZ0g2Nuu9M\n63dxScPrciLX05yiydqKZfa43SWhU+LLrYW/DEYd0tiRqi/sgJNAYUYlfg8J\nHV+AuTLvRdg0NWDULIc3hQCXAHj7Sg4QZx3FFsRDJqeLA1F6gXu1FdMiFLPl\nJj0zDSasU19PA3MR3GC8rEha6ak7KlVKbCoTrcgAyRucZLQale4rlnNaKrbq\n6T7wfW2LEM7lDXD+2kKtuLMZqRcb+61fQtM83rjuPbXygi5ndIf6zjn3F7p4\nHt0wjbIlAgrNIX7WU4rI5W6nSZm0OnWjzj781OJX9QE0Oe6Ldiylhdj2e67J\nYuoVHic9VjRWUajwgIB0EFdSJlb1opAd8FORYkN9LgCrtfztUSlhq3Kl9E81\nLqZG\r\n=NenH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.25751d2ed.0","@material/tab":"12.0.0-canary.25751d2ed.0","@material/base":"12.0.0-canary.25751d2ed.0","@material/animation":"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/tab-scroller_12.0.0-canary.25751d2ed.0_1620836470670_0.8273490194672142","host":"s3://npm-registry-packages"}},"12.0.0-canary.a23ecb682.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a23ecb682.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"751e14dd370ab035b9647657eb9d03cd65de61bb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a23ecb682.0.tgz","fileCount":52,"integrity":"sha512-zE8jAV1BPLq9fgnNfAkkrvJER3d207qYE/faIKOnYZ/5KWohu3OL4Ijiz2Fx2al1kLc+zXipX3Qqsb+TGxE8bQ==","signatures":[{"sig":"MEUCIA7KJ0OgfK/Zb1ab8juY9PZ6qZFPHbjtcjhl1325KzhkAiEApd//bAtNV3wDTFueNU2VaoTXL1k5JKrtvkMdsoHzSf4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnB1hCRA9TVsSAnZWagAA8jYQAJl3N9Zw21Zidc74jfPQ\nnDbRfhCVg8nZJYoa+2WkUe04QYZ8xt/gi3ym/gMa+5iq21VRhqTHyfQras5K\nTG3gAIzkDKV7kCk8vKQZgxkefi6qozkLZQV2RQk+zh3pVz9av0DpmuwRU9sd\nifV3xPnXHnROW2vDAWPC1G+xcH7W0uxx0N3qs/Hda5EJmbBgJwJxwD0yayFe\nic1EpLrXIkc/OeI75MLxjKz7D3Wo2hYCzZU8SSMR1DJim5OE8ASVy8Xv1xYP\n5oE8CtYKBbc1G3Qd63u8PIZ2m5Ey4OgGMpN8Trdb3YexVYLy/D/PiiwbwLJY\nVLxxGBPBMVoBKK4NrhsTnCJSiGOXAYI1e20S5jmV2B7qsc+S/Vuyf0aVXqiV\nl1R6LZ1YIODPzgA1CqNFy+sn8ho6tzJ5hhL3zmKbjy2dxX97y6AT7GuNak/M\nTgavR6kQPDtcJJGexs61XPuDY8s504KfgSoQaYTVzjmvJfbVkcDS7huJZqDv\nAAaONmggql7i92pkthGhkIgdYNC6WscAVgBe8oCKXbiKL+WB5qAS61vXfvD3\nFN+58Fb49fI29FXypYye6aiqG6YNha+gxxYplxxvJi8W2bO55GZCU8theuPU\nAwcwHBpZEclRMcmKWFV8SNxbH5ic1HQAjSsQsVVuJzcQz0AYNEE73XiMZcro\nUr06\r\n=j6XW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a23ecb682.0","@material/tab":"12.0.0-canary.a23ecb682.0","@material/base":"12.0.0-canary.a23ecb682.0","@material/animation":"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/tab-scroller_12.0.0-canary.a23ecb682.0_1620843872343_0.8967345020309494","host":"s3://npm-registry-packages"}},"12.0.0-canary.33a954852.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.33a954852.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c577a264112e80a5a75d0c701f27a0d772431949","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.33a954852.0.tgz","fileCount":52,"integrity":"sha512-7RMjrZBS3beuCdTvNFC/XQRwupy1NHJiN8RK2BJNgz5idkdM6l0LZn1VMGj2ZlUQYrl5yCC0lEcN2I9nRc2IBw==","signatures":[{"sig":"MEUCIGhCnE1EkV3TiHS3zYFfpVY4QD1yQyEoEzVtkTUNtPPkAiEA80HErXCDtNTiP7pBVqOIgVH1O5Nu/uHryEA09o0YmAA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUEPCRA9TVsSAnZWagAARKoP/A1WtlMk8noWZLARiudd\nt2k9mjv5cVj7y4Xiwf9GybLX0Bptz0HxLmlxEndkAWhn1Jr98D9yVqcd8Vms\n0+VC5TveOIiXJML8YoZCQmR7523cnn+vitlzwW4Obi3v1LIoLz5Sy5zav4Ru\n+xst3NDOyOGZUQYg+9tMhsjVd7pD0jZPDQFk6W6SbJmpbRLdjhU8yv/YE/db\nOQWl7OX1TF9kFdKhRhnbKw6JFgubLpUEYgOThCPGvKC8t8s8jiPQrnnzcPAw\nRELY50AVLcUqNf7CGhUuDIoxqwv9k116segpPjUySGCTf1VPG3jc6fb5TK1g\n0FbwQgWujCSNWXlMyV1OY58ZINkKrMt7b/fB/NU8/TjlUR0MvCSJirJVIzNw\nFNj/1aXZAW7BxxnYHbCXmE1g+EfQRqKHZRiEinMlseZd0YDMgx9swBxa0JkG\nj0ac/pbZyzeKRonCektiZ4S3iEKGa0ifDMocON5LDSy8c6MLJqSygBj/KW9P\nK9eZmenTYkSxaxodU3VAto5uU4aqLpBGMcINBtLiXd2pwyJ4UP+CCs4DHAew\ny8Q1TEC97fy21Ud9tDQkhs3FQm0T5xPHyIZBxKgQCI6vYDUxbbLp0Xb1P5oQ\n+iZ6k7py6mHk/u5i+VmyJdHvjS0pdwE10/8E1pkUlb0Rdij+4gBwD9JE0Q18\nLf0J\r\n=P+Vw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33a954852.0","@material/tab":"12.0.0-canary.33a954852.0","@material/base":"12.0.0-canary.33a954852.0","@material/animation":"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/tab-scroller_12.0.0-canary.33a954852.0_1620918543006_0.7268742055848838","host":"s3://npm-registry-packages"}},"12.0.0-canary.a4484849b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a4484849b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3a88e6b9b73d886fc7b7d3a704720d02440818a7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a4484849b.0.tgz","fileCount":52,"integrity":"sha512-ytFy9TEbHY1j24sN+c2BrW8uKCj8TU5ZPhqF8wkottVIa6XvIRsOpMkye+tn7y/r8W15TPidEqA56okUJPS6OQ==","signatures":[{"sig":"MEYCIQDf2VSabnMK9wJXDTcmrnilnm2dpAUYNEPpfRghgaKF8AIhALym/PN6pu4ue8V0Vo8/tf30syledOS7LRZXUDZqI7BG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnUaCCRA9TVsSAnZWagAAMXYP/04EYvBD7XCv53hZ9Edp\n0NkLdxeqVME7fqKZbgM/ObKEzyBRXyyerYIpP60yGfFlyHeh20e6ZMqEHYZ2\nw6hBvCxDIC7lcf1WoVdrWXCf7qFVRsFOJp41fPnCVfE4NxrXmRkzLuD9mnao\nfqU0UALaUBI+UIggedO7R7wJ164CWlspZ6uOQs0Lp2slbPrc5IFFAmVzFU+t\njswwheany7PSPE3Zi4hJr+DyS/r9FGm5vTcVB8DE+2zmfsO87t7z5CKDWhNV\naxa4HYxOBe0KHxfxe5ihGXPCrIYsJxCH8HPVf6yU6cVwImOFzSg8MU64Yb+F\nFdtpxr7OLwwFtcItU5ta0YrzHTTL8ypu1q81vQZjRa34gd9Kqsq/hmQQ5tyH\nhEz8wtu2UBTjtTkKfsRJ/Rw4No5xFhUXFBuTL0pYDES4OOGTMmUiHmKLCD3i\ngBE+ftsqv5v2T3jlIL8YWovfGx73tB0nkKEoT2XXgQZ8m9e2Tkx4L1AR1S0V\nnjPeEPr93n62J+yZPjoi4jHyrq6KI8pKOrJfTWEIRXMB9UMtVG84o4PTqV4V\nyPj0zCN/zaIP8LkG1IBFz61uwgA4ibOvzcN/edas0ky1rVbZx3nUHdrKT9KN\n0sqJ7pemQaEjiThlihhyExGuZ95yie8M+n7MLNdOlqPtWxv5kFrXDJrE5X7Z\nGLjJ\r\n=2Zhz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a4484849b.0","@material/tab":"12.0.0-canary.a4484849b.0","@material/base":"12.0.0-canary.a4484849b.0","@material/animation":"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/tab-scroller_12.0.0-canary.a4484849b.0_1620919938011_0.2056327235805966","host":"s3://npm-registry-packages"}},"12.0.0-canary.b4c3f513e.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b4c3f513e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9a51378b501fea204a7a4341380321714a6b35de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b4c3f513e.0.tgz","fileCount":52,"integrity":"sha512-3lbxT/DVKoOyMfuR4eHrLPEkh1GWwVQVzoIn1LoyCnmVksux3yK7wij0qYiAS4ctOLjfVNRjVpBSOl08WoqZsw==","signatures":[{"sig":"MEUCIQCQyR4lkUd32WGXv+tTeQ6DUXJE0Mz3/tpXSMO4qh8bvAIgENTPJCymKB9FelDQ/h0T6PpXdcq49LFwy04mdkoRSpU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnU8uCRA9TVsSAnZWagAAToAP/AhUMWdjSvR14kIbCRzp\nbff3yt1FkmsDEDc/Yb3teGRLiExZXP4lXLTt7lak9b3sdNH6gzxnzdmRdymu\n9R9R1ScZgChifJojmVeCi5M4jhQeaHAqVPq92DnwrXirYdSE7xfCg9bUT3PM\n4NCglFtBPW53hTU69peuoGTx4WPOtahPZY4JxwKk2ZqAc6Hz5317bzZkEISm\noWTQFlSidqWtbQYakpF6emrSJN6IeGiLEDWSAU4bXC3pXfbxHiT5kJB4WB8B\nxLB50rwbarHZmq0YjQlgpDRmoxWESWE8QEENqe+9l6aycotLs9YEXEv9kV+4\nygK/icR8YoTs+qZT8PyEZMvWuFGLLrATUWzG2k5kTF08KeHkCUI4stZyup6Y\ntEQ79770JGkjR2DdMmc8PCW9su01XssxTmKZkzsQnX5CAc4awefQroSd9zLq\nl5M5pWkvvxtjqAHYSHBVmWI9Lj8Kz/7D675ckVTs5f7JQ2ufWCM7SWY+D47N\n8ZGCFbbuDXI+Tt/TP19/sJzWLwvtWqveEzT08ArUirBrB4QRXi48p9wT1d/w\nqNngNv+4qIgZ1Fi3GXv4mMdqfeKKcFtznUx/5RRXoEgeX1So+H7f4e8hIMfp\nM0WMn97vKd/edomYHq/v5D8Yrh8YXzsjzzZuZKTT2/UVGU7psG32G9rvMfNc\nGQgF\r\n=nRG9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b4c3f513e.0","@material/tab":"12.0.0-canary.b4c3f513e.0","@material/base":"12.0.0-canary.b4c3f513e.0","@material/animation":"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/tab-scroller_12.0.0-canary.b4c3f513e.0_1620922158427_0.29259973368461","host":"s3://npm-registry-packages"}},"12.0.0-canary.1a8d06483.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.1a8d06483.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8fc58334342624b23a6094f9376312141742a750","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.1a8d06483.0.tgz","fileCount":52,"integrity":"sha512-tfvtGqFKe8vnd/6a41mxwR7Nl7b8QbcrJPDUmSVBDnZEg2VZ0+svs+w3OdECwen2ivnEvVIfFdESAzG4D8eI6g==","signatures":[{"sig":"MEYCIQCoGhcFvd1S0G6onIisMYYwTnOg++c38d0vOp/a6NNHCAIhAOPUNXDfSVOQe0gRvJzEqtRQtnOJHQKMGNSm06cRUKFK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnVCDCRA9TVsSAnZWagAAE64QAJrFR1MY9Nn9ShmiauGn\nU1RluLd3kH8HcfqTgWfasufYOVVGJm0PiDYHnMdV2p5FpYSMPen4fi1zaCwE\nhHRTv9MLLp0rK5Dm1BO5XNP3YMyPdmQF2SRtm0m5xkHWCOPn9hu0RcKqnaB2\nll5oawtb6qK+FrjWd80lwVeb5TkDUP5ZcOByDGYw7Yky+wAQ2uKwuULXsRlN\ne8GOiF63m2+0KWQjfyeYOZ4m8sIfbOpvu/D1E+wFTFIRt1JuqHwKv/CRf85k\nMBo5Dt/NxGz9hiMbHSuBWtZfA6Bip/axWXA2WrmSOLRZtjN7auawaLipgJui\neGc0+zI+LuGcGAzY4IdkVWINmCPNDyZ9/YU9OQYI+OxCJjits5LJWOpx5VQp\nlyJeVHrBA0Fh9c66K2SKkeUNNW5W3cqPVP+GJDdkQ9dZaKjiyOeJLWTyqbbQ\nCnDKgf6olO3s2OWjzM+oTZI6T2huwgh6sG1lZF2+gKLf0LY7/Bl79YBrXLSa\nnCMF/C8iy4aX+cDYftwsZmKkMNoGBk8tLHOFIVeZJh3x3+LBLS97o+f52D9m\nJ0DsMIHtxUujvR+QPAx01/ENLTD9K9EaTeQLCR+Z99qFcWv4cqUoy8C75/Q7\nnYBQwj8NauV3mXcyBeez0/ntos74GuXJKk0z/rEw3SOGZdiAtpVmKEQz1nW2\nMwDU\r\n=cyEL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.1a8d06483.0","@material/tab":"12.0.0-canary.1a8d06483.0","@material/base":"12.0.0-canary.1a8d06483.0","@material/animation":"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/tab-scroller_12.0.0-canary.1a8d06483.0_1620922499187_0.0941964569792253","host":"s3://npm-registry-packages"}},"12.0.0-canary.8e6081836.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8e6081836.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3bd618685bf1b062fa4af20687424237d7538f73","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8e6081836.0.tgz","fileCount":52,"integrity":"sha512-aXYHgRolGs2X8dy/T7BWpknqpjh4OCJPucwohhW0ElaZnwALRx3A1k9ijO6gikCeAk3gASvUwoDYSaiPYCFD+A==","signatures":[{"sig":"MEQCIGsqjxMCFtD1rvQHDchxfQMfkwmCYe23C1+Ai6YOVQDkAiAR68GzOhV53OP41yGd7acF7TgetvDEzH2niiHmJkOTXg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnu6gCRA9TVsSAnZWagAA3WsP/0VNAIKQxz/MfyCRo5rK\nOCcdBOhdsJbSO7Vqrt2eCDrjwGnlpSO1mLlDvXeO+YPY1Kgqtfky8KL+BvNV\ng/wb70q8EM7kAb1ocnnmhOb06aljasxnumIIGnri1iD715fhr2SQ1vg7EPVm\nK6iNapLqTmP5rW1YDF7pXUYIjNwuE0fyoSlvgA5ISOfWIgdLviQpYayltRC7\nvRgY3BMGu/vRkMuXe0qMnxyXGITSwEgpS/5SZ7qwRNCr/Dd0LMYbFzD0qVeO\nQERu0fXTOMRiea/lC/HOHT3V5P5waRNJvTrKVtmc84YuvLrRaOIJqAC3ZOvf\nLt6H38CP6j2Zq7iaiWnBGElmmTWpWcqsHipZaQPdw4FI6oPCkDa5vCEPsMYZ\ngFnncpUjbQdlz8vElby7evVn5cC2yeVUIIwALFcZPh0nsrn0iXcjvlPPq7YP\nZeDnRA6r4phah6jCnZSy6HzwzpvXaEzWDfh5Wx6lH1Qj9Xw9fBJwYYQ4HX+1\nQS38pC7H7Ueyw/T/H99ciL0nW/5UPM7ovF0EQa7DT4tNNRq2aFtuCDUyq+xX\nq8DfqW1Yp83imxZyKChSBsmSDC5xVdSAbW5Y1Wp5Bl6xR/WrKDLmpuivFZfV\nipE2NJHt5AsbhXUPtOoA0Q4iVLu/qoTx/9/C6cl+yUI3kZPpmjb7VbcosE6r\nJHv7\r\n=zkfU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8e6081836.0","@material/tab":"12.0.0-canary.8e6081836.0","@material/base":"12.0.0-canary.8e6081836.0","@material/animation":"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/tab-scroller_12.0.0-canary.8e6081836.0_1621028511675_0.616388346867428","host":"s3://npm-registry-packages"}},"12.0.0-canary.a2b0f4cee.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a2b0f4cee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5d561a42748849c21ed3a1c3d3c304bbc01710b0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a2b0f4cee.0.tgz","fileCount":52,"integrity":"sha512-yb1bpoSZRBxnkszXpYfybsOkg1tkoTVbnhveIbkTKQXHD7YtqaXzs/Z6szVwvqI6XCqGsV8gmIlzv2CQNXS98w==","signatures":[{"sig":"MEQCIFEU9O1jkAi8CW+VwvkmDYJQfZB34aNmMSUTFvHmXKB7AiA1/aotJ6mR7RPuRwT9NpdGqV3SZHIonqx/f0OtKf2Xig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgnvG6CRA9TVsSAnZWagAAbzUP/3ojj6HbrXYk3jhKCuzA\ndKJE5AoJXvnHZT26FUL2A9IO3zBP5pHW9/j6yJFVMIBp1L0+3wVzW+07V8lw\nsMezIb+WLl0VAC1Ga4C8jnicCbxQjL2Gwt2QD93yw7zBxK2khzgmJ2BElbFT\n478slocEao8TTrYMB5iRVxSyIzfsE1utTcw4aI0fM9cGYUKtX0TRNOb7nKUo\nMkvIwY5kiirt8kYNSs9ndS0+CxToaLQhi/WtN/7Esh2o7t71hw0hue/mLHiG\nSNpaKjcDkU3MUOjgvEMLDrueLOik8c5RrA3CPUvB5gRwjOXC433/oioD3Vcz\nRviG9dluEYTw1+uwySl9G0nkLNDn4FQAMfaref8X8A+KqT6Uq38Ru3oCgO+S\nIHByzYQmtdaARzzntjA4lncESnZMobnpO7MHhE3zw4VsZrxKHUry7aB5ojrI\n86yvOHnrHvE2S8FOHW4RK72dgf8rlm1Ho4wiZLrjzipWx4aVul5PmvctMGMc\njpFOVTRXOqN7tR5ymSBC8UAgdYWbNvuC4kU69T69MrgjhP1YAsoXqMQgwZYM\n5EQ1F1Zu4AAzTH1SGehYb9yc2Yy7NgmYoUlkc0ngBNoEP9S3Edg+NoC3gM4U\nQ41sdkqQNnRSpt/RvnTKFfaTDQaPprpXBY5kMGWvzPFUOH4DMHVBpPa0Orwx\n1C29\r\n=2dpU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a2b0f4cee.0","@material/tab":"12.0.0-canary.a2b0f4cee.0","@material/base":"12.0.0-canary.a2b0f4cee.0","@material/animation":"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/tab-scroller_12.0.0-canary.a2b0f4cee.0_1621029306170_0.12049554402744422","host":"s3://npm-registry-packages"}},"12.0.0-canary.e8e39ad19.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e8e39ad19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f955305577d73f5279e9ccedad1c1cf6a03fe948","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e8e39ad19.0.tgz","fileCount":52,"integrity":"sha512-bD6CPLIz9Qf/CEL+G6qIZ6zBL/SPaACZXAfErJSp9qoxN7qmEyYU3CA+XvsP5plg0svBsCi+ePWJX7YdA9beQA==","signatures":[{"sig":"MEQCIHEJ7wNCoh7p0J9aQjseIF5vqt80qOwhVFkvOaCCg4PmAiAriaHkgapEqdoIPItWD2cNA/nnerLZmpab6iMfEGYZ/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpCAeCRA9TVsSAnZWagAAFcMP/2W279+13C4rRIGLg6sG\nW5GmLgVizKnhK6uQSlj64byPT7PWvKvqgj6DZ9GECyxZXc4xadnhpC7yRSYo\nfhsW7PBBTutq+QrBEZkR7gt1h9SZfWlVt0vXy3zGPsSbWY7rlT5Mgz+bTtDM\nnZg5Suk6Tbm9vgveSnbMK9w8f2VvBDcF9Vve+54pJ5WHWW29areMYXlK9EA2\ns3fmiuP/EhHageCagMTjF+uG2jfovGZLQczQo7r8UMtBsmOEkBt3iah/z1zq\nsDxgZ2SbjcwBTRi2+wMXwqL7VG1eZw90hCNo9wcFZIB0oIDGqpZSkV39DSVh\nffEr7PgWWPunZ0v9H4ghskfp/+kHEnI4ojQUG4suxt3Yn06EGPwQRX4miB4L\n1Usi2zjvdaHdb+avYwPOLpvbMbf58Iu910a+Wr5TB83X722TsHsszrQtDlLI\nQVRrlVQJephKLBwNl7b3TL9tNPv5b2PmWyj3MH5INSozfYHiR4SI09sb7F99\n0ZcutjiFEBQsg3EHSNVZkUrf9IKVwpngQpSkmgjzTaP9ne+DkdGDziAgEQwn\n2Fgl+H5bGGx7nKRC5+adFVrtdx7qo1ZI4ynZrrPGyfAa06MpRurSqHBmwR67\n67eftTE4aGBqMMAeo+1p6mZVvlmLdPFzkmoqd23ZcdtLS+gK53kkCu1bAoWy\nEzTU\r\n=0Cr7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e8e39ad19.0","@material/tab":"12.0.0-canary.e8e39ad19.0","@material/base":"12.0.0-canary.e8e39ad19.0","@material/animation":"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/tab-scroller_12.0.0-canary.e8e39ad19.0_1621368861691_0.27728707207476044","host":"s3://npm-registry-packages"}},"12.0.0-canary.4bb5eea2b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4bb5eea2b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1afe07b26e73d6ab328ff6e44db47c532a33fd00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4bb5eea2b.0.tgz","fileCount":52,"integrity":"sha512-juncQTNSLFcBGFcJOkK+T6KH87ejOUiswL444HHRwH3GU2RwHx0luTn6AneWatcOs1dYqmfr4irHQ183CVvhyw==","signatures":[{"sig":"MEUCIQCjyxnGr4TjwSk4EVUSp273zQp3WuvOenqp3Cer9yjmNgIgVnEt+xS0qaoTjN+mmR7j6JI0e3N3idUaaesZ1LzAMzQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpS7fCRA9TVsSAnZWagAAOD8P/1zgx6y9fdeKT5holved\n1d+482pcSJl+3ZhPzSqNezNe4ymxgWHyer8/hyw0XZG9CZhecLHvIZCiKg3s\nmFeiVOuqrRwulCQYw4hc052XdvBalQGhzqmh/pz7Vhzbf4bXWiJ+xsPRFb/D\nRfycuw0IUP0FWjttZwNw/K+x5UPEiQMU5GR+NVahAV/4PXi+fPLrAxytjl3L\nZBoGFpmYn0HbLzuKTh4rS1Rz7yv9BsLxLjwpcudpzOeOcZOHsXrUd2wNi7hG\n84QrRNXzU1p8eB0wzyHGGXaJTihNa0aIe265RYM+7bRU0VrM5qdIdppyXe4Z\n6wHEF5tnsxlFBe/bq6MH5Npubf+l0xJVm/LoJD20Jp3QR3YprbxF4fX7VHT/\n8jm/ePGcDtTrKaaG8u4NHp05+uWNHYoqrGkUQiTt9GHiJvD61O0g1HnC+LgU\nuGLmIHxlHtK4yoXKAT74uqEbOgtAMZp1cTXzChXEu7LS9R3InMd/HqgexDY6\nRZDEQAiCOly3CbRYTC18zRa/kIzCuDi8d6+NyhZXwAp3dxnDHlPGpOpr/s1y\nOJkB1DjLXu8UxD9SVevYnzMZ1jd/duCzDS3lYR0RUHPkH6bIKra7JaG8/iPS\nSAdoecdn48nEIGYQMWPQk1SNwk/O/UaG8/irhf63hCUovlB46KHXDjVlmwb3\nlu1u\r\n=S9fC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4bb5eea2b.0","@material/tab":"12.0.0-canary.4bb5eea2b.0","@material/base":"12.0.0-canary.4bb5eea2b.0","@material/animation":"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/tab-scroller_12.0.0-canary.4bb5eea2b.0_1621438174692_0.16095111153973352","host":"s3://npm-registry-packages"}},"12.0.0-canary.ccce99cd6.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ccce99cd6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7d9626639e8feeaec254c0b0bc65f6ec475d325","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ccce99cd6.0.tgz","fileCount":52,"integrity":"sha512-GYtbHRwWBYbk7q/hClUjWnJDk30THoQ6bjv5aKKbwb13qxx3Ayyuyjmj/zjQ9epBmhcaLMWNbIBYZZ+nTrSahw==","signatures":[{"sig":"MEYCIQCsnYpQUGKeZD0W5TC0hr13vlwp9wWWrLrKdfpKn/WevgIhALYEPTXoOhSwl2J6r8BW2xXLtz9L+uxaE2we61CQUQcD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpbQZCRA9TVsSAnZWagAAxikP/RtKDo0XrzpRw3wQF52C\nzn8MgMzGfnJn4n6EeMjyYxNkTOg3ZooheFNam2wEm1xvjVUg9rwq88LnMyTP\nG7ATGHfpzV53HmrtTlah4QB0Nh6dBBjZ+oVm84SzWaVfRvhlItGRf8lzGBWO\n/gzgiaMAfgnMQaUvS89mshO+yzN6sA6urxQpN3QETTKTe9vbU/erypTsAjVs\n6yTQnhxQwGQd7JTaj0J5ZCLuSJPy2aFbEWiUER52eXVwUuBx1fLpWxfM5rvz\nQtc1GUqMPwyYR3AFW+mRvIjvIQ8+Uv9F8uLRRxJfuhYhJWR4w5UFxwOyNQd9\nV4sUXvnvwI/llo6kiqqGtEqlPXUYDwI31ole3zVchqPeWAFaz4ikVHTjpRCh\nFeykK/8R4QIBDtkdLArXS07CbvK3TdOjHfL9yaH4XXccOEEel7whuzW5VJTO\nKItpdpQx7+RA3Rsc4mhzl8XarJDrLL7dShXDCkW8z7LAXqajhjlf9JxZqBRR\nywZhn2BXOTKilzZ6t31OawtHfBVzjVmH2IA3yLnduuva8UzEoUDMEr/QoJcT\nhJbJu72XiQanDRhe15fnJrQ4u7aHIQlcFqQOMTSIk9PXvvo2OTXh+LuPeaVY\nRvPTTC+N8Q8eVWT4E8bdxYZHaem2Va7ZF0eO87KKbhuxef0kgnTNq2Iv/P0Z\n71Vy\r\n=PprG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ccce99cd6.0","@material/tab":"12.0.0-canary.ccce99cd6.0","@material/base":"12.0.0-canary.ccce99cd6.0","@material/animation":"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/tab-scroller_12.0.0-canary.ccce99cd6.0_1621472280849_0.2987117273757669","host":"s3://npm-registry-packages"}},"12.0.0-canary.14767a8db.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.14767a8db.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bd3b1faba213d664985b1f04d99769cfd950e58a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.14767a8db.0.tgz","fileCount":52,"integrity":"sha512-T6TJ3OjJtjnfDLTJ5St7tj7veqQtFbjEJIPG8Qj+x6AxEYAisURuAxa9TpwGkkvnvQqG5KqhFZ3YyltSETF/Sg==","signatures":[{"sig":"MEUCIQCkFLh18lN41vy42UROqAdVtZ1c8L+y0DPLND+vYzXABgIgf990bK/sUpPwBIAJtNaLnH4tppMzX4tFX/vcPfIbcz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgpswDCRA9TVsSAnZWagAAkH4P/i7J0ebTkfeVDKEkbcUW\n71AQ77krgXQUo/iu3Fuyb1LudHjI/PU5iHazbSmJD8RwosbY5hTujW12AC2R\nmHEh2DZZrN0RJm3o+T4vCOq32BnvsuV80+IubUwRrToQeAtQqPE52/8yO8LE\no5YADP05DqZUl5NQMz+NFQbD418D+e9I1knJS3YS147DPWPxiIlTuqg2T5nC\nQ7XK0UT8vzel0dOXFHDUzLNWKadBiIEzzWrsr/vqZ2KDHozXx2kJ3gKWYUtl\nqcaqnrfmeNJfjG3Ie84q1A6s7M2zOFBytAKq0H5J2qNWU+YaqP+UCq3i3IzP\nFP+SOIaHT38Vkc604Y1tcvwfDsEISCGoPNyj2sCZCoQpWDfn/VU/xqCQOFFK\nyGFGsFDxulD9PCUdyFPZJsd77zRs9tXbpUTbNDYWv5z7PXRFkn47dtmYvYf7\nJOgqpa77lIuo4WJ25K9OXk9FKXu3StBZLhmKDZrk93qnfM26gIJCMv1ggMnf\n9U59eZaULbtRV6fRfpQbnJeosgqg2IL1SfcVuvTqE2rBTWwm84n2FgVzhL0F\nsdkwQbQRLptGcEOfWbm+NhoCzxQcixC4KDmsfcNapGwXGxseHstdD01Di7py\ni5x2j2dOkZdEBHrFuOSjXmI6vS2aFjTV5SjxKTPVR9U0dMTuR0LRwqnF8Gx7\nYmTM\r\n=OdCy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.14767a8db.0","@material/tab":"12.0.0-canary.14767a8db.0","@material/base":"12.0.0-canary.14767a8db.0","@material/animation":"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/tab-scroller_12.0.0-canary.14767a8db.0_1621543938692_0.5939360906459794","host":"s3://npm-registry-packages"}},"12.0.0-canary.22c6dcff9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.22c6dcff9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2573e81acb41f307ca2431ac97a51b4c9702d904","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.22c6dcff9.0.tgz","fileCount":52,"integrity":"sha512-8eToMvcEcMO584bGAM/LSLh7bOfYe+DDDpHGA5dmuIjZ9ASC4vG0uvQZ5H3EXaKuT6IViUNSlq7nZofaE7oRAA==","signatures":[{"sig":"MEYCIQC79gclGJvcAa+8ph6zFbjfnxiF41a/h046TyiS3FmtJAIhAPmeZIlHjuGtiM9rCi3blavNmhBmJhWQIIzLlWNauWAW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq8QaCRA9TVsSAnZWagAAMRsP/0mfrupRjYIYERoH3zMe\n6jCl8Ev1Qc4muYrmDWGwWkwJg41Qfk8lF6lFxYFNmymo7imf7GeizGKFZ17K\nznCvyVoNPNbYaglyZ/oWrqWGhkHUkDrp1ZYuyv+anYPzUVnD6curPz8oWiCS\nNlI7tqHFtqx5HV1h/tV/aPW0XtpzmgtbQMc1IpB3f0M0p9NPBuD9Nhqa3t7z\ni1yRE+4zrDtkczhGz72DOL+c9wtGYuR521d2/ikbq2GASUK/x+kQDedM955S\nvLPFpfSXHyrNAUtDUU7zaQEMkF0AXtgFFkzoFi6hG7AyAYAXrWY/O2J1eLLb\nmJNcMZueKVsJNpFUnJBwFu2W+g0ZJsI9tJk9HZA3cT7sS78/KGYOAD6Fj3GU\n8zl7JiqG8dOeCz5U2rvVVRECX7efiR7JhJRuFMdFI0jL6cKpD+FAfolot0dr\n2l1WR0SDRwELZ4Uev2flkefV5H7HDcqc20108uQXkqDX70R/1ecbLWL6MkKm\nb5qp09ThXKbEpedgZ1oIUZHFA6o5RyxWSr/yBjReXkuIMaXJQ52fljmp7ik5\nHrfZtQoGyDCQ4LoTcXuoW3lk0vrVijeN0YBO/aqvoI4uM3og6NV2gtBV0QhE\nLz14vEZkLdXD2+g23fLmh9YOAmQdtv0F0/WfZF/LP7vuEV9W3em8wmpYiMxr\nxmaQ\r\n=/VMj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22c6dcff9.0","@material/tab":"12.0.0-canary.22c6dcff9.0","@material/base":"12.0.0-canary.22c6dcff9.0","@material/animation":"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/tab-scroller_12.0.0-canary.22c6dcff9.0_1621869594380_0.8530950875320436","host":"s3://npm-registry-packages"}},"12.0.0-canary.fadab3372.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.fadab3372.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5e1b9b9090711478706e1db8e658f98f3ff9f694","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.fadab3372.0.tgz","fileCount":52,"integrity":"sha512-9zS+tNSsY3vMBvlBaYhR+l17Wzf7s7bMRxqZ66+mlVpRiJ0C/7tWh8vQJw3ynjm5DTNxYIrnTL8fxWQq0hoI2Q==","signatures":[{"sig":"MEQCIBusBzja47s2/pCStyCdQnL686d9gs9U49XQ8dDQi/hTAiAlsEzTVG55ZBxEFo3iVtppzJfjRy3eXluM39iv75vqew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgq88qCRA9TVsSAnZWagAA6JYP/AwB5uuXAdxAnI65UZqF\ni2FULAz/5lqR+xDXbKbigndUtEXPlmab9/JwbbRVLMdn6aG9tT0hXcJs1Zl8\nbaPU1uKfnUdnfm7z2J0lrYvbUMoziFI08ZIMo+T+dDg0O72/RfqJ74sPjXz0\ndhhjHoTmrzIDW9b4uEd0cpGBsOGTZLLXEIRYWO0tN7LE4faexoQGXb9Clb+A\ncYKRV4GLmQb5fcqcBt83mpQqwnHnZutxNPP19T+A6DiWI7aQLVaw/qA5fuhe\nkIhaLkeBndc386AjNOTmNniHZv2jJCVOJ/yFOMixEkK9Qws8CQ2WLKq20fo9\n9zu0Xh7Fc07s4vA2QMa8RQyxYXyfWas909TdpFJf+FEbGJil97dmrwCo7lnf\n0yxDljZfBZFo38qeNODtgQMTbsWJDYJN7V1sphxDGCByvSdEIU+XK45WzyEe\njVPVNHK0cmLSN+zLbVg/rZYZesUztHB2PNUzW5V73816lAdV3gS+ENrk27Sr\n7Sl5+KJKDW+hntjVsS0qNy6zZljWptkC7GkDZj9PA67/rS41kaSvFvBMn/AL\nCR3bKitmBUKcA8pV3aOz1oPpUB1SEflBWfgkmY474i+7KTMZlol2iDsBoQXv\nFuwuq4gg6f0/KP1XQrChO5NAr1TRpb1E3oP5tcTYfO/ARr0AbzZX78GladZD\nZX+8\r\n=opYX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.fadab3372.0","@material/tab":"12.0.0-canary.fadab3372.0","@material/base":"12.0.0-canary.fadab3372.0","@material/animation":"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/tab-scroller_12.0.0-canary.fadab3372.0_1621872425844_0.3780121680295905","host":"s3://npm-registry-packages"}},"12.0.0-canary.caa73aeee.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.caa73aeee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5e48d7a65096f99f576c85bc299236535b8098ea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.caa73aeee.0.tgz","fileCount":52,"integrity":"sha512-ZEIhHu7+Sj5yPJ7VgheKTc+XbxYM/KK9T2PKuj61OcvedKVLCJDKjKuMoxO8uGwc5+DE7dZOuA9jrI0ocWEIIg==","signatures":[{"sig":"MEYCIQCCHhig8Sfmk7KH/BYg3NKqMv8+Mum6vXNJlC+zzRS0FgIhAJ1yZaSORWacDsmbcLxtjh9tiFqLtUiPJSNLtzTLk0sV","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrQaLCRA9TVsSAnZWagAAq7sP/A9cWPsmEpqj5mxRaLcg\nW52W4BEmT8Cigm8goPsP4wdg3e8hus9zKjbqwixqgMlLN62DX2CWZrddZO7X\n6533l/IAl2tdpi9FeHkOaEVee7iFgDuWLv4YkXgKl3xoHBbF9C8VhMKPUbeG\nUJlXIhkKNa6Ev6JSB3RiTlEobWuQ5dbHeUlmRn2se9d+JJOZJkmC98X0PESX\nrxsvBBJ5WhZhxIYgMvsyRcDWw9KsNLlC8mhiqHHWagBm/pjpw8v7S3AFg3bd\n4ICD+WqkvWV7QulXSBtA6gOHdYG65dZCz+0wx+XQCOVNBtUQ7XAMnM4vJz13\neXN55UzRKgVS5vurE+apRK+PVApJeC8yqTCn1z+iuI1tG/HjX3mpQA4A9Bud\nAb7ICF2fldq4GeDiM9ZwSwi2QGDpssWDVtMLCvKJrCjletPk9Ol+bqlScIpC\nC0E8E7dCC/S8ZRHwq2LRyfXjoG4/mFO7wv3hbTUxMOYfpMsbDk6sUBz5teXP\nj5bWLiuxzkWfZaZbOxE7adsHDWlgYLwnAkVhydKNC+2VWWVgVoPVrtppnJSU\nrEOiHkzvKcouk0bC9sQxSH1sENK0Fulv9u7ZAxTaI7VsLJKhYzmyfM1fPxzo\nEcG3aHvOnu6lXXRO4WipHWQoYd6hLlkmYs/k/tlnszbJ9jGRKWhBPjJm6l58\nBn3+\r\n=MoN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.caa73aeee.0","@material/tab":"12.0.0-canary.caa73aeee.0","@material/base":"12.0.0-canary.caa73aeee.0","@material/animation":"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/tab-scroller_12.0.0-canary.caa73aeee.0_1621952139303_0.24533747523590876","host":"s3://npm-registry-packages"}},"12.0.0-canary.ec31ae1ed.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ec31ae1ed.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2a2f997c3e204d569af03d40231d7b53e395eb0d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ec31ae1ed.0.tgz","fileCount":52,"integrity":"sha512-PWpHCeVx6lmmqLCewV7h/8URfSwBIqSP/RHHnJX3lnw0lVtPZC2YR/5Sz4lLQtvUybjh8de1y6uvbgFvvhEUzg==","signatures":[{"sig":"MEUCIQDv5/nk5iWlINVCY0LyDkvcpyyJJZhsx+lR2NBsv+/wpQIgP4fwa1v9c6m+coeAotlRSyRshDfCdv7xu6cJ8rjAPeE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgrV/aCRA9TVsSAnZWagAAl6sP/02xFvwhktt87MYmwCsC\ndCd448ECYSEqJQggpbffI3s4t+g+soQOR+56C4nKXkDmSF13trEK6zkRtTbK\nrVGssuuHmeGuIzvKNnYI9vLzYFex78NiQCZPzIiVy7VhG43vWxfQVZZpJC/c\n6PwI5GNf2Rmu/9y0OURoVp+3vV1KXzJjlTNWWPvGBjSTvHCdDPkHXIx/m3h2\nMAHoKgkyZFjvjaDbiPjaEJ3R4kcmUweUeBd4jdr7euKPP/5TeCMSp1gXIqYL\ncOTN/xTPIMYQSJHzU95yKRSK6w8Hsgb27H3JO0um6m/3Q/vbBs54thHgD6t9\nTwLxpWEztERvsr3l/B5x7+3dyD14lJpJDPopQ7Wx5+Q61Q31xvok1dFOL4bq\nQcoxusbczQgLTxj16iVv0yBOIgs2wCL7IgFPLptwEE5o8np+G6JwC01ufBsb\nq0Gv79SKKQ9u7+Bg2iIW3ipC0wsljTpclU1BbEB8ONEiB67Ch7nEQG441hzX\nIR9HqULOeRz195uFKBod94prRW+fpWgred2L93M42HxvkdZ2oY8uQkAYUEd4\n/faVxOCyjD0OzIWJVdpGL1zgZAuB+AV2tuDS8yQWSYCDpfXSFUeZ51Nq2j9A\nLXgyk2n4rDiz9qVvYcvJJPuMewIkCJzWG9QHbbqCLhg+lGnTE7EZ02eXEuGq\nk69D\r\n=YMok\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ec31ae1ed.0","@material/tab":"12.0.0-canary.ec31ae1ed.0","@material/base":"12.0.0-canary.ec31ae1ed.0","@material/animation":"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/tab-scroller_12.0.0-canary.ec31ae1ed.0_1621975001838_0.7304853469991719","host":"s3://npm-registry-packages"}},"12.0.0-canary.8530d3514.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8530d3514.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"30894e1b275165c541cfdcc2ba96de9db61a6a08","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8530d3514.0.tgz","fileCount":52,"integrity":"sha512-CFts55zG8auAYyur9YvyDCsg8K/gwDHJkG6RVf1QmYLKhrsY1T1wjsPAUWsP3pQrzMkZdHFTHiUMHpcfhN5K2w==","signatures":[{"sig":"MEUCIDfs2UhrlGpNhcgG6263iC+g1s3b/VC9qSnV8IiDqP1XAiEAxXtnGQYATIe3fHAhXXHDJTQfasXU8BUc00WUmAws7fo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgr8NuCRA9TVsSAnZWagAAYNYP/00aDqdjvNj6mAiS4E9I\nV5A+I0wI+TXL8PYDCzqMxfMxiALWojBFV87sHydGGy64033d9zMmIRDSpvyf\n+qOvOQCUhYqg8vDgC77Fbc5qVgDZ1PHot2VDIf3XvAU4zDaVU1pxoCPY4Mdq\n1PkfAMHSoDWWKYUvRmu2Ted4pjiixpile5+FZ5oEfYwtS1Rr/Cb7XlOKlscg\nwRcSG+gLBUayJA9PCT4UrPaiEttFH8lTlnomhqh32umMmjgpG8WWem1hWScD\nSF/faD8TZZjIKSp2DnolNlMBup73Z+gpq9jPLuWOxk+wEo+TsGRNpgkYdvF6\n2ZVbeXDeW8qG4gMIl4bPQp/kv/u3AHrdqm3uLnBGPmwcLBkyR9Fm++NgnoIO\nplSujfJz/1MT22adNYfcM7pEluKe9r1C5+920FufjAbsO+SPHEd5GlRvW4fV\n7hyvkoi4GQetYUgJZoSRJ83SXJUamxAlEhyQG8kn7jrtwhV4wykEbbn3gnJv\n2cI5LCOXg0oTlX2CRbH9FgvLdg34SaadyT/wL8w0GD2kY/vzJY3u2wPjq7Zi\nFhIQ/1NF+AUhdCr3znkz4kvtZdTPELc89YBJlQMNsTD/L0XFAOFNyesH7Y+B\nAPl0qiun0ypngwhYy6YFdeaL2J6Pj0sS47+c3zsbf4nRabQr0UyydM1Qm0n7\nbMmu\r\n=aPTL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8530d3514.0","@material/tab":"12.0.0-canary.8530d3514.0","@material/base":"12.0.0-canary.8530d3514.0","@material/animation":"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/tab-scroller_12.0.0-canary.8530d3514.0_1622131565701_0.17952858498757074","host":"s3://npm-registry-packages"}},"12.0.0-canary.00b5899dc.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.00b5899dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0632b757468633a13a72a2c79df3020aec9b0ee8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.00b5899dc.0.tgz","fileCount":52,"integrity":"sha512-SwQxf6jODRwTMkjYQDmNHKTESPbd59HPAmqNb0cOYV9tUp28ABwhIbvOJchcplTHhkxDyOUIGUqO9r9pqubo/g==","signatures":[{"sig":"MEUCICGo3J8rw22KsBQ35/eKleDEKHSWv3sJ1cHKQjSShSM2AiEAorvgwiFfrJXIibsJ6bN3HU6aIZ4Cl45hijURG6x2TrI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgtrjaCRA9TVsSAnZWagAAdTsP/1Qbu5lMtNUDPAyMFBwz\nG+GA67gp1ijkRRBnRmc7cPknF4SC97lpfxuUcFwrkIf7Ty1ZlcvgPPNBC9/7\nlxo8I+V+e3Cb4HNUr7R+PS2MtkrxNYt2bVGW9acOXC9ke2Wfg9D+UxZcvFex\n7L8WDZIwrzsWbmNUQ9A+p0S62OEHp0SnMn8TAPwT5PJEkUqFuq41VPTMYpVR\nAHbK2EqvjmJfMp5/7anGhvbhmb662Znpt7AAASvXNKbQ4E8RwXbX/X8Pfxs7\np9u9shzZec4SDSllmZ3JZbQY56UudQ+AEyEsr+Hk1bK7QSsbZ6ReaxKS2Wl3\n8u9Ungmq9jbPidE+QeqSAzxsenLxupN/eItg0YmzhxyCx6/JiOSJmbVhk/Im\nUQhC70Bv6DubfAKjeyt0bPR9jDnq5hQfW/zqQXrqgMevhvtllINNajOULajq\nYUI1AoTi5IGfE2iL00jPt5XUDbbZJrz/iiJ8N1fXB+2xFHH9g2QsaunO9mAR\nPq/c3UpajLn4iiBePoI9gpzp61p4R0LQHp2Gbcqr9p5+6HGPCnezguSwoMn0\nNvPbPO+J9U8xOLRal5364dcIh1KpHHiqO5P/KEoJ+L4lQP4UY8+iDRwNolEd\nWXS6K1hmv24U/eduwLpWycpxbWsKo8lNEmNmDfIcYvhDkQyN4r14WfM6L42Q\n7JqP\r\n=zcQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.00b5899dc.0","@material/tab":"12.0.0-canary.00b5899dc.0","@material/base":"12.0.0-canary.00b5899dc.0","@material/animation":"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/tab-scroller_12.0.0-canary.00b5899dc.0_1622587609783_0.8907158109543662","host":"s3://npm-registry-packages"}},"12.0.0-canary.f1525ea3e.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f1525ea3e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"db9822c927d750fca8811cf1785ecca8c89206a4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f1525ea3e.0.tgz","fileCount":52,"integrity":"sha512-svrIwRwtCE3FYx6p6f4sTs+2iCyCPfOC/38AdEqccz3YBMHa95Aq8MQQccaTy+63pCL8Y5vFoKyHDz71mnRu0Q==","signatures":[{"sig":"MEUCIQCIs6d8ac5tLvMO6mTMZopxRgjsmV8yc/ro0ffrxSI43wIgVDUM8QsQZYzMe+Ad3HvYGnqlXAgMw2YqMSQRkj22pO4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguN9bCRA9TVsSAnZWagAAAEwP+gOhCIDyL5u9QS7mEV8m\nV9THQLPCxtTpClInbp0w6cwL4azYtRaVd+mwWP2h47Su9SFOiQ2VzxfW1bvN\nisCMw289HUsSJ4VvxgzTiE1uOXGlENDGOK80gq9GyYTVCo7zcc5K9Qz9Er//\nBBOJxDLIMyiHlXq2xwM/K1vNbJdRZ9ALb37ZWgL16bCPRO6R7lTNplT5h3oE\n95apCcEmcoDC/iGhXcpsjfOGMmvzDVVJ2MW4hERIdM1jvp4nyNnuYOcqKZGW\n19bX/GRBe3fZEZb1XSdNATUoSLRE9Vt4PX6O24KO/kEv5chYO3DRQgNgn1Uo\nOKA2l2rRNt5bozIDEWsUb7jmFSdOPZ4QM/gnkG+Vqsr4IBt1L1PeyliIUzBC\nmtrggPLcOxXwnpeRehOCDUmw3M4L8+MqSQMVimTPfGHfDBR3dvTYElhIuPre\n8UcEmBrnZJyUUY1oZrCVNm1PSNwzh1YhqoWnGAlzTh1r872bU+dT8z5X9SM6\nFcUANEjoZUtX5wnelVX3rlRvZsUr/xoKSuhrOqGlGTQQJefRcgNWy/baVwSl\nDYJNUM3800SO+VF8tSXGQJrhNCHDGX4x0XiwO+B6tBwmY+uimllO0JkmkNUF\niuBGHdeshIpzBl+YtSArB+VGV2r2z+n585eubkG7rWeOTnw+CGq27hVVwINo\n6WI/\r\n=Xr9Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f1525ea3e.0","@material/tab":"12.0.0-canary.f1525ea3e.0","@material/base":"12.0.0-canary.f1525ea3e.0","@material/animation":"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/tab-scroller_12.0.0-canary.f1525ea3e.0_1622728538864_0.3544759310597412","host":"s3://npm-registry-packages"}},"12.0.0-canary.464a00286.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.464a00286.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"77fa5de8adb191b37c6a263720ba91f2a4f6d6d9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.464a00286.0.tgz","fileCount":52,"integrity":"sha512-8KgijcCDkF5GswnoMc/4y836dr5MPH36vXvpkkfy61sl2MQvwO54mGMk2a/Jq3d4EIMURJ9VNTohvFAzSueyiQ==","signatures":[{"sig":"MEQCIDJwaP+cb0fufZC7YbGzZkp2hhIJ25rto/pq35q8QOR2AiAngzAHwWxzofGQISr3bbZb54nveQEBOCHC5nBXC0QrrQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguOuDCRA9TVsSAnZWagAA/rUP/0y78eO6zG9EsNRylnz9\nzD0u+7+1CJpne3lDOqhao3kG7Q0tq99rHBhR1a8e3oeCevQL/2dsFKmzy8XU\nX3ujcdhR9K0XIbuw4ia0k4j9j8gK2SkbgKnlSbgvmEMkeWsbmxVj7s/NyJQ4\ntbAfPXpgqTCF2IdRpa22lIfXEHD7UdazRDhRHFkjSdaJqhzP3E/RPGTA9DHo\nFRwjD/yU357CiqUJJhjXfyiHbFU5ls6H4NoEbt5OKMhsEmxwTqxY8lLdwNKz\ndPyh78dcLe6BfIBbNAljgZrKQ8G4MAJ3jkTjPV79gbSQYp46A3EbRq3JYmzv\n79WI8uUCYAoEOf//zKBEAq81fH8UlYGrdaKWhjjeWhYltwdMSsAOMQSUm8FS\n+juBe5XhS0G1fkLMmSJaKFEDxRjHMdrAjr9ZLCmm4PTc8GjsaYuS977rkX/m\nQp3CTnyCBgtS8teyxkc87cH0LAz9e+m5qdhoErxcqRfRjAs+Z/DyMTM/1VBD\n/YPKN6Nw3U1AWDRdvDbSkY3aR7eGQ+SI5XmpyT8ozUtAWZlIISGgYvQdF0aN\n9w4fvk1NARmK5j1Hm2rW9chqPkXfkSnQg56bGGlZUGjp1gXkOyM4jLwCxHBR\ngSH0EWbPqNvAIsk+G6mQHlmTD+5+jSGgJk+0uvZl+ljN6fllMg8s4sz23MHh\nTbgz\r\n=85w2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.464a00286.0","@material/tab":"12.0.0-canary.464a00286.0","@material/base":"12.0.0-canary.464a00286.0","@material/animation":"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/tab-scroller_12.0.0-canary.464a00286.0_1622731651672_0.6266371657183587","host":"s3://npm-registry-packages"}},"12.0.0-canary.474de7878.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.474de7878.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"04cbc0626ca436dcf6c3d48c89277a7208769091","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.474de7878.0.tgz","fileCount":52,"integrity":"sha512-o40xs4CkM3n8ufBlK6yHJFNFXmth8OKREPxorDQnO2ahseV8D8FlBnoUKc+K6bDdVogce73voGqCW0tvpXWQFg==","signatures":[{"sig":"MEUCIQDgDQAzZpPhbfeQnTx2bfFfdCsNJbbrSUz48NqcYh6y+gIgRi63fkRMS9r+BL3SYWOiiIWZHTvyHesUnPG/dL1FmXk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguPINCRA9TVsSAnZWagAArNwP/0vf99iKBg7SYcKNiXjk\nvorh0rkxH5GgoSE/6h08mEUnCCSvAQxFSmDn/RCIuHSgC3ttIXP7757QqHSy\nobV2repKIPGCGy8EShas4hzBYM9WZ6kZIM2BoiGyqTpbDD4rQrb0PEsWMHg2\nm2qj9nfW14arurvZhXpj2WLBfLONIf2dutMPf+MywCawBBaJG5M+IOO9IArW\nmuAeJPnk3ryK5tGawmHUjRhBfTXBO5l5pDXODTFcRUyoCCRoZ4vXG2ZcLJCV\npaZCSXipB4lim09c51OT0UFksUaWUYNLz3hO8TUfjKRga7hQE8UIi6Wk9VBS\nKziel9aLS3R+/Cgwhnrdk5RAAHWmKS2LuTRIzjmD+y46ybUBV+Ffg9zMPIun\nON1fplsvte71X8X2myFS9hHJd/mGBEnrCq/vCBARjR5EivlqLIGuqfZxUXHm\nj1QnbIdEaiHrUwHcnPMm67UqlWg/Ivw6VuCNBqhP7sMZyohItc65ilFLPr1Z\nFxbExWJ2ae0q1rzw8YzR2eGj3W6vYYxnZ+jWMZkOr5UMos8uEXZybrTDH6ge\nT+oLrlVUxGDSxQQ4mOio108kcvp1l7dZLhSVnB7qFf4LZJNhJmpmo8d6J/sa\nFQrgrounPaaEnX+9fx63+MUoYsdMSARXjiuU4v44yQGN1Mluw6zg8v4UU/mr\ndoxw\r\n=/U09\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.474de7878.0","@material/tab":"12.0.0-canary.474de7878.0","@material/base":"12.0.0-canary.474de7878.0","@material/animation":"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/tab-scroller_12.0.0-canary.474de7878.0_1622733325530_0.42449308737955116","host":"s3://npm-registry-packages"}},"12.0.0-canary.b87ebf74d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.b87ebf74d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6b3361640cd76997d01fb72e5a77b26174d40cfe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.b87ebf74d.0.tgz","fileCount":52,"integrity":"sha512-5vw6SFzxqiYqkMoRLugoyZr8vY5G6v+cyWspVwnuUBI0pOcvf5vmu5dwkQbvfR/7oTRdSwrDMu5g/5dbfXzIzA==","signatures":[{"sig":"MEQCIExZKUTxWZNS0ZjOv4VgbnNTk28FXZgE8SXV7rTxLV7BAiBxOzNyWLNv10lFcZpHJtq6McrAWHMLawocQh0orOmGgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguRWyCRA9TVsSAnZWagAAhNcQAIcuDA26vzP9hvozpCC5\nwZKMmCpJjc0/+f7b166yaY1JA15mn9i+xJ4mws4xpPaSyTlm6R+9akbCeZV2\njg2U7d9KXeEfoAai7U93CKd6wbVpPm533fL7hqQ/zc/QMKm7kc1Z8gKEifSZ\n6Yqy5B+crrt1cm8ePXSMEqx/MNRLlQAeqRHEwHw5o+btPoQPE34kyWjGPFuB\neooZWX/2miSvoa0b2j0xsv1SR74MINmHYkJvGkXatgzl0zZQDVp/+99GY9bt\nxeCWIT71gLGty+u/2qF9jS1mwcF+OI7/FfvrSt1gzzzTwrNyA3oPa67gyMJa\n++7O6B9woi6helHxPQS0hhSJqPhAff2XG9rb+MvlIhL4Gc+RWnCVTJTNQQ1s\nJbScIGN3dWEfwGerkTTFFyiFDv3xvFcbOveJhAn4qy3z4arnTCz0poXTZu9c\nZDTqPj5Wvqg+quE2yj7iAx31VhiOfhqkHxpRRdh2ZxHSEdzciKNZIcNuKHIQ\n4WMN6CzHBDhEf5YULMo0oIkEl4WPZSKKVvztbe4HLuRRlAeC61LDB9y0vlG7\nXm48z6q7fDcAB4j1UXg1XHKO8/Q6QgpvVqSC+DT1sexTl3JgBcMKENySto6Q\nR6guB5qKrQM9MPhdVqdxNAvMkATWXky1cLvLZ9rzrFTtscSjf1d1GNGhoXr0\nNVOH\r\n=SM93\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.b87ebf74d.0","@material/tab":"12.0.0-canary.b87ebf74d.0","@material/base":"12.0.0-canary.b87ebf74d.0","@material/animation":"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/tab-scroller_12.0.0-canary.b87ebf74d.0_1622742450441_0.2642997144544206","host":"s3://npm-registry-packages"}},"12.0.0-canary.2daa49b35.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.2daa49b35.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cbd23c604f6d1c4b421b6c99b35141779113e7e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.2daa49b35.0.tgz","fileCount":52,"integrity":"sha512-VQUDvk432VwgWWXYxOLYEhJ7S6X7uVWqnGyu5G3A0rozRILDd2TxoX2HNiBtEY2nxDubqTChD3kGAJ8GTwXmrA==","signatures":[{"sig":"MEYCIQDPKCWT4qe5SyMWMhvvTQR1LmfgWD6jV+taXIZ3BlTutgIhAKOx1bqletRTPPitTWNQCoPAi0qUSnaRNe5H1i2Pm6LX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgulGbCRA9TVsSAnZWagAA1ekP/1MvBr4cN0GYeSZaCSYt\nZRN+TVj8PFBAtALaxWspb0RVWkLzJ8B7tgdxW+haTxpO9Wcp6H4kvPvRSrUc\nWmZeyCTU5c4MIHk9brftbGL14QxWpvP/sjveJ3xfQh0DPf7iIWlVp3jQwI6u\ny8BuKMrXoRF+2jM7uzBy4IE9jnb1QlwgK9e33Mz3sGwtmGsZKHqtgxL2qLr3\nqzOOqHanVV2Hy/6opEuKVh9GDeWYkRWDBbnbXCRTezMjvYTjh1bGL14PEDwt\noFNhMHe6cVuFSgdwzbzMhFlC3ir54LNhRfffjgMFF+GbF4PBPmNTjYI1j4LH\n3O+WHARlu2dGQ8ZUPj+oXOLhmwuA5M8fTC7Iq7D3kg25s3A+T/u4TO5Dgewj\nlHunXgfP/LicBNEcjiQC/C9IY0ifmMKNcP9yzVEUL7II5f2d79U4s9wCr4RZ\n6TMVoxbAlzFNeC8L7sulYCo072u2knf7jd6VGicP94fS32osd//OOI6Rl17e\nxT4ZyX4Ik+8u2cef+I1xQI4sK92NEdoLk8GLX/yvALXz3iLVWWRG6Q/pvOTJ\nMzTYy4Qtuqv/uoxWnZJK0NbO0M+43KMFXsmW7k9YpSa5eXWHnxSRhSjuwTNp\nqgmoGx1KCqTgMubGPWepNHrRqsEE0U7jxU1+Ok5g6MP1KSd66QQQSuwwFu3z\nUpfB\r\n=5knv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2daa49b35.0","@material/tab":"12.0.0-canary.2daa49b35.0","@material/base":"12.0.0-canary.2daa49b35.0","@material/animation":"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/tab-scroller_12.0.0-canary.2daa49b35.0_1622823323334_0.6958298153948304","host":"s3://npm-registry-packages"}},"12.0.0-canary.08db3d737.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.08db3d737.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bfe5940bb14572fc0fe68ba8515f6157e54926f1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.08db3d737.0.tgz","fileCount":52,"integrity":"sha512-OaRH9suXh9sy/BtgOtwMoSylv4k5DRVzKqy9TafY53um2nTiom6dMcLg1xZfp0MdZd9EkkJDC4ETwrhrcwzylQ==","signatures":[{"sig":"MEUCIQCJP0VKikYQZeSbk2kaqdQ2C4L3b1ers59wM1oW4MLefgIgeFrPhi4LeOcEHTZFdHp3ZXUmS96MGcjs4VSyRJb3ZFM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJguoI7CRA9TVsSAnZWagAA1hUQAIh8Qwf6qnWEzbfaRa82\nmnuJY0lTqj1XfnL0IV4eQ53Hwzfk4ri+lXywAM4pzGtNiTNmKEyL2Q8zLC/E\n7UlpuUWzN7cs7/TcfYP13uiv2l6vpo7rUdxcY/ly1Hzn8DMobecXhHXAKA0+\nGl3DdbFooxaieSU8hUCa3BulrRMNad5jRKeLAzXNdHJyBYK4lPDj/i1LYH9r\nDhh0RzkpLn64AyOPP1ZTSEVJXZCZ+oVy3+9NH3Jk65rXocGccZWKwBJNQNDv\nUFdIajOoBziJL1cfYVEaVijmsccLElWMhpenpa1bLgJFUirMjskE3XIt7qk2\nS9dS1VqtsDCQQTBFhgclhtg8p9hRlligXseN6RE/dUOW4aQPIzAiT+MaB6w0\nVpZRGzcjE+5HkYhHd9sJTICpT3Y4gUnUflmcUcZSXB3CreHpCc39hyJeB8KO\nhPKs6FdsH8rCZ8uPOotSSMKd4Nxa4Bk5n1yUlSMt4lCb3rBaikpmw0wJnYtJ\nq9l2aX2zHITgLMupksMHzKk0fdDfdL/wE+TNk/aWSZavapNIeOQMuXfoJq6h\nVRgw1cO4GR09sZ1A9KtvVuI60LHbzO+piseFG9ScF/1Zbgk1nCrIEJTpdnGL\nLkbaYBDwikrqH43foNObO+gcaekw+UuzIFHwEBCsm8iwBx2Jflw8PhhiMX6Q\nj7Bt\r\n=56Ob\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08db3d737.0","@material/tab":"12.0.0-canary.08db3d737.0","@material/base":"12.0.0-canary.08db3d737.0","@material/animation":"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/tab-scroller_12.0.0-canary.08db3d737.0_1622835771246_0.7743308139934528","host":"s3://npm-registry-packages"}},"12.0.0-canary.5823407a7.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5823407a7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6d939d3e3df108a3627a8cea61dff9bdbe217cf1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5823407a7.0.tgz","fileCount":52,"integrity":"sha512-Yfs/vvME41WbdvS0oV+Coki5RNoyY5zfx3+3DxfYq3BOExMKbvHs1lh0DEiFXWruQEReoLrVVia0rnYaVkZsOg==","signatures":[{"sig":"MEUCIQCKJv+1jz6ZbBf91mEjvPYP7x7aV8HAd+Fz2OSXdXTXwgIgQ60+GH2c2iA9clzYiEmlJGM5IaB8HeY4yrrUrBAi3rE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgvr6jCRA9TVsSAnZWagAAAHsP/iyEoW3zJm4cgyBy+4tQ\nocFV8IoXYzYgyl7YNB2Q7FfY/gxvyhh4djVqBeK5Z9pE655oLEiQHd335QdP\nJaspHpVhAijt6s4X93PwzpXTwIaIxpt3wSHh6Z1qGDVEk61b9a3M4mmPnaeH\nCRj0N8XTM0QjF0xztweZ055555t/dAP5tngpQZOEzDGpX/icjEB8Zwb72/Jq\nWYuFRU7ukwjgu695lVgNpvlSzcI8T7j8wfPYboGOmvPqS1z7D4NPzbLZQyD7\nkRDS/ozRqsAc+VAGt9p+sjcvUHeLNJ/RyoCZKulZyBYkLxkrycFa1JZvAed/\niyq8QstDuMv7O25+/WQ4RKSZFHSwGOuU0wWkZ1qkh0h4PBUeNYyI5AJA2Ltk\n3hM0tocuLn5wslnuUC2JKwUgR9dAXH2YG7dUgAmJc6FWKlC5rS8KyAg/FudO\nKksns0qDtqkonHxxr+EN+/SjA7p04HkqyuXhDvF1mNhTzhX6QYFwp9p78CzJ\nZ5rLUSeCAP6MXvWuJstkAfQC8x2eGPsrJnDOpTVrejKMgryrONjBEiGL36Wt\nGqG2AWPJv+Dyj15hQhIjW1INcDeeCkdpUs1LzdJ3IrGOm9o/c6+/8QWuYHX4\nlrL73cm0gl4YZMC5C7xUR5nexQdDcuPAre9j8v7i1+lIO26MVJvbzsJCSkXm\nAd5T\r\n=eHMz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5823407a7.0","@material/tab":"12.0.0-canary.5823407a7.0","@material/base":"12.0.0-canary.5823407a7.0","@material/animation":"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/tab-scroller_12.0.0-canary.5823407a7.0_1623113378938_0.13789623708380416","host":"s3://npm-registry-packages"}},"12.0.0-canary.23b0c5e22.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.23b0c5e22.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c017ec2f06a76f795a5b19ca84c0d2229d169d27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.23b0c5e22.0.tgz","fileCount":52,"integrity":"sha512-Min/arCX/PrHs7jxpuBysq+RaY0FslfSgUBpVOMX5D+lvWDo2FqcTDmTiftxCzMBAv36jHfN8erp7bjhQXBZGA==","signatures":[{"sig":"MEUCIQDfiw3kLkuIGy6f4F7OERjByPapi0IBt+28cPfZSXTzDQIgD+KKX7Yfzolos95R8nfoO7WHZJ+I4L+5uh2y+ZFBgxA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv5l/CRA9TVsSAnZWagAAInkP/1yIA9wYPzS+wHhs2amt\nkEhR8tCXeZ1rLvSiddZi/fWShYYP6fp+watNGJff8dNCFyh6rCO+mMC+ofh7\nb77bblfa08GaqihAYQxgL0Zi/G8feB5Ii1/U0xDmQ1ATMdOoJ4OJAD8FBb6f\nXXpZyY/EzipE4ygC2Gzyp88V0Hu0nVQyDSHwUI3KH5Yw46bSiAWPBBk3AZ0J\n0bUt1+GVKYAWe6YX3PetoZOzC9Hr1Y6nebBMNMaK0cz/hjwczr9vv8XGqEwp\niranpwAU8i0Hbg5hXfh1IaqjUNS1jYp2YVPMhhnNyMCqU8g8bmFs12+HYyHD\nUszk6eLIdHD5SZG/IbZ6YpcBAeD2s/FuCyfD9B+ip8WDyqCr6yBGRnuyhyii\nP2I6TBd2Jgvs9z1o9PkZQzBZAF7ntoYAlvhwqYGj0nkKT9hBc65YW/ZQeoXt\ni4U4b+JUfhMoGBBQUAyRaVgbNZryE0/hyWUQbpz9JO6fjiJwtNZzFUW5OObb\n6aXZS1ZrkuG3XgpFMjxwBd6tqR0kciBxFzznRBPM+YL34D+o87nqzVPYIdl3\n21LVukBqSfBlHGtfr3fr48Uq4ZV28d6rXy9d0Ex75WjmKX6V0A9MKe9irELH\neGio56ZIrKhbIcKbvLLbwk2hh2Wzd1SoevrmLfuyQUV4wB7uRS+u36D5O7v7\nRdTJ\r\n=b/NN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.23b0c5e22.0","@material/tab":"12.0.0-canary.23b0c5e22.0","@material/base":"12.0.0-canary.23b0c5e22.0","@material/animation":"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/tab-scroller_12.0.0-canary.23b0c5e22.0_1623169407353_0.005813627882710559","host":"s3://npm-registry-packages"}},"12.0.0-canary.2952c6a76.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.2952c6a76.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d0d9ea92e21eee694d9fc47932c70af086775a88","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.2952c6a76.0.tgz","fileCount":52,"integrity":"sha512-0h/qmzSM/H5Pc9xLqGfuRzHImANzqMU7aGekpA5mMmevt5LXLn3BYSLyeWVv5wyR+yEJSGaviQY7s/b+CtdS/Q==","signatures":[{"sig":"MEUCIDS051gtNIE9h4LN40YgeuMdkpdninK//5yHs8WdXtP7AiEAhwR8OFHQa8DxIZB63a/41kIlMXnYli387/LRAzY3i18=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgv6vrCRA9TVsSAnZWagAARYkP/2F5S/6hMx9RxZa4wqBX\n/HcvELXZoOy98nOHH8rUrCi/9rFbGCCBmmRLCjwj2R2lJ/pFONWN4uS17xoP\nurGVjiPk14mjNH2d9jot4nbV3k8uSpKeB956ctlGxdlnp6ZUOCtrdFGIa+aE\nyugQHmXngihS6oMV4X53K6ye9oKdRzt9ZmdT/MylhVKBmRbGkxsXEspwsZ9B\no15AUFduhr1aPC1uhr602fgRY5oCxFopyBHHLzXKi1lhw+Ouqa9MiWDvFpfd\nzVcX2gWhEo4kD+/bGeu7XwfwOf4inMy6wO5KT/ucHyBMD4UJlbu0kFUoc+wh\n6TK+6uQ/QRsH6k4Etf5lSGmHG1GnFE3/G6mBvWHnPiF7rRVkoL5ZqArIFRHE\ncdO8pW7VKTMKbFUvkfZ2cHdhKsLIllhxuGurs4zIiow6Cq9cszRyYlY3fhBt\nwsmTZYWYLs4Ro8kIht3ZXqFtbTd0c59A6UiYcSCAhBUPwXXB1pgSU6L2FKFS\nIYiws4aMvWepkQ3VtgJ4Rn2KF7ky7f4MV+cTPRmn7YoFzLaTUYu5I69cSXJ/\n2nAiYWbfJM8tCdT2GPIUUgJPxFwM8TyAL/IJBOKqS3wQazLZrafZX6nxPQ7V\nppvfoFwdq36hctmYcHYqEr/YCIosbKcduL+K25gaiuvnsm6DgkGafjAFF7iv\nA9vO\r\n=SyNg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2952c6a76.0","@material/tab":"12.0.0-canary.2952c6a76.0","@material/base":"12.0.0-canary.2952c6a76.0","@material/animation":"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/tab-scroller_12.0.0-canary.2952c6a76.0_1623174123563_0.8460010786652683","host":"s3://npm-registry-packages"}},"12.0.0-canary.f12425f88.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f12425f88.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"474a3d32112c8be272fa8eec19e717511bdf781a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f12425f88.0.tgz","fileCount":52,"integrity":"sha512-yDOOKP5bbwphfl4LRG6EvCl81Rpn2ocBw4lxXBj5oI+rjr4wA8GxkIzs6sP7rey/1c5vtQUvyz0b62PjHR3pXA==","signatures":[{"sig":"MEUCIQCnHovCh0U3utL7xTzotePglTpUdSac08sb116+JhPyFQIgJ278rjKCZh0m0kvaZuUKHq9DobvhgMjmiNBxUIiaPrk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWXYCRA9TVsSAnZWagAAOZYP/1qlggrvvaWu4e1jDzpX\nbaY+B2SgvKAIzdXZWth2u92HO5H/20qwimvt3LZVGyCVER7kKHKbo0lIhqBy\nUShwEhXrgIY4HMCMp+2nfFULdKbEriXVKH1WO97mt4xEgfe+j9wkyqYqhOyW\nSa1jeDD3qzI7Ox3MLPz5wPJGb91mCDoBElhcYNBYHi2VYcBMCruZ8MaL+UiL\nnjdFMWdeS8z+kjteR/0/JpTWlY4tXpMb0FyW1TJpxvYlgL0dnXQb67kbK18s\n/qyPvODUcC9qEaZtZ6QA1qRPcizaZMXPbm40LfTU09BGvc+EY7OjS+alRAAx\neFzkOYKsFkwNERM4ow1IjBUxgrPS/HcC5n1JuY625DOeDSjUMNpdtaLel3Oz\nswffKq5tGsTQxYPDDe8l0yAVlzWzXMS4JVYMXKfb23Yaxu8T73dU/rUeRVxs\nr1FNdtR3Gubn1Ns0LX1V3DIYwNY3oAOxUoGs02pifyLtdhXFUJaq3avhNnCO\nV4VQmjflb4A4PzQaVu3+3Nm2Rijdkvhm9Sq/JQo5zCVcNJHrmdMZZXYeCnNq\n7D6FLMVj66YKMmXiOSg4w82Ze3faJkylB0NMPiWeHYjkCvJnhT1mc2RL44RT\nf2DwrOJGxq4sVwiXRlCYbxObT1M5zzO/2+G/KE2CgBsP5+gSvsgEwDyQ0Xr/\nN+t2\r\n=SonQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f12425f88.0","@material/tab":"12.0.0-canary.f12425f88.0","@material/base":"12.0.0-canary.f12425f88.0","@material/animation":"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/tab-scroller_12.0.0-canary.f12425f88.0_1623287256601_0.23287029383714808","host":"s3://npm-registry-packages"}},"12.0.0-canary.e543628c3.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e543628c3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f2d8a7103e04816f301f5ac5a75cacf7dfe7cff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e543628c3.0.tgz","fileCount":52,"integrity":"sha512-pJBkOU3ke6kMCgBrH1QJe6rUkFwHmyPzcsG2tsbGCqvZgXXXxjQofwSh5UfJRkTOgWkQapVYQvTcczyT8peIWA==","signatures":[{"sig":"MEYCIQCrlZDteJU5YWXxcyYnW+Lb0KsANs60hhHmZc/2V2n7PgIhANPNrwt09zjyNqyIFDop/xrbJR3N8XIC1vpWeNxqyjGZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwWYTCRA9TVsSAnZWagAA0QcP/jPF8EOdFpG0TWykE7Fv\nb+Rs6RBKBfDA5g9ZjGE9mk35v+S6zssKluItKmyOEe4QNodPEAdsWgLR0jMN\nu4AGL9wYCKQ3cl8vMIwITMloeREewuyXM78JVqxTEJsXDOL55jSTMhQ6+DmX\n0/nvH1P3IOTuzGB3149D9onRzyHv8Vrcrbbvl1VazQ5csveslaZ/eyYFoeDv\npmr2t5iIy9EDgJQ+uEBantwPv7EzsoH7QUoo7CgHyA3p1gmLpAs5n5PUEz24\n1Sun8//4GtOd7GJJ22FTchbaD/tkM+7ReKAuYYVYeVHJLbnnEpe1YuJTcQGK\n2WcHgNJYsKzbkYyD1MhtnR3BMemwLU6w2n4OPdMRuFgURyvt4xIrs/VSQBoi\n9iBtJigRd5hN2+3BE7rnG0JyJB82YyTb2dPBGx4vhyr/K4nymi+R0SKequSq\nN1PU+bCxH+nsJARsqGoSAJmkWcIWnfECRZyOehTzYgThl4A9HgETDM1lbcA6\nijTXfsYo6W4VVAw0S+nOuD0w+y3odBQzGzBoBoKWchsknsYJvgqF4p9EcDpC\nNpcu/XQM+w77crM/xFpHLZC8GScNfGYVIZr6TOD7Q9xKKMYXxE9LipVlyCSc\njtJsr7OBaqE+CE0fV0AUOL3dO+a0K8e5QXrzP0+mLe74jnoUEFVM4qbz6ZcR\nbfxb\r\n=LLNM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e543628c3.0","@material/tab":"12.0.0-canary.e543628c3.0","@material/base":"12.0.0-canary.e543628c3.0","@material/animation":"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/tab-scroller_12.0.0-canary.e543628c3.0_1623287315599_0.6141880545902851","host":"s3://npm-registry-packages"}},"12.0.0-canary.e0c346286.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e0c346286.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7a5babe1a98c96c12e109967037b88f5cba54d54","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e0c346286.0.tgz","fileCount":52,"integrity":"sha512-fNFwHrYDxn4UXvKT34APXNGnTTvsIrDRRqUhbq8dC7/lBgVGEGOfCHAloBeR5DM/ORryDAyRY2ORg5i/DqBF4Q==","signatures":[{"sig":"MEYCIQD7iC0jHMURQHqn4/ggtzESy4ORCKoFYvJlWygxifGQ4AIhALIqDqba0oK3VP4COq9NjRnEmXU4w/8t2ZPYuy/Lnja5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwj+uCRA9TVsSAnZWagAAW7YP/Aw6OYu57WmVmZSd2cMy\nqX7GiibFEkxYv9yW1PI6n9r0DJ4W4XDBn8LiV2/864QQoeAkR/nKrOYdbEzy\nJO/mamLYOn6zfzQmCaYVUx9kb3V9IeCSF72Bf2sqBY1NnoD/vr5ZnrCzpYvV\nRaoiibC6FPzdzUg91S2Jj1Za96qbhuv4zRTpJiNLQwvQJTbhYEjek59wLfQu\nZyzAf+jo6zvnPxhOQBFqcERPIiK74a50ZJfkrCP4gOvzuVLRLGOVTB4i6YYp\nHgrRth+yqxY+i8sktqkSmohMS9ysChwaR6eOnC5gwn76Wz5IqyohACWv2yFs\nHVS9d7WoEh57GW6l4swj5q6xdAwsSyEjvPMAR+JLL1pid7yyPZNxEZbjC9mk\nCOau4Iw2WYqoQzdUYx+4mnah+5F8rvYYHOauPgtiGB/0sMTsAoBmJB7ugOYt\nnUyrL4EBfASikicJHtgdhNqxlmpswSf+/7jcLTJletWMJhmk36ffLc0avTHE\noMrti+s9zW4UGxh9Db/7L2QF4HN1dJSd2YHhWCdj/Oo7fnAx1hcAh/81vvlA\nGmKAb8beVxFO8TmU+JiL1p+23Cmi5a5nGPw6Z6qAuSqwcBnWWarzEhz0cf7V\ngiamoCZm3Rwjdn6KL+qb7IQb5RNJkTTSbvqVULxRqv7Pznl1rCPrair3nazR\nTw04\r\n=mAxR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e0c346286.0","@material/tab":"12.0.0-canary.e0c346286.0","@material/base":"12.0.0-canary.e0c346286.0","@material/animation":"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/tab-scroller_12.0.0-canary.e0c346286.0_1623343022701_0.006532881128322954","host":"s3://npm-registry-packages"}},"12.0.0-canary.f43af5633.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f43af5633.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"87d910a3691c757ebd8e5181162bd059946c1836","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f43af5633.0.tgz","fileCount":52,"integrity":"sha512-n4tbBM02HgZMUDcQ6y2b6iSajV4d2UqfE8tnAARylWqczF0UFuEVKRk0TFsZMiiJXNItadY4Gft2DpsiPnfD1A==","signatures":[{"sig":"MEUCICl0N/kfIm56o1uXDZAB14zmC7wvwYS1vPLVhBG7Ml78AiEArEAG0lYMHQZEc9o79FJXCWkQu8EL51he2bVUJ8/VIu4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgwnfoCRA9TVsSAnZWagAABlwP/jD/MJpwBN9R9o2mc0eu\nP/rMAJar9FrudhwPnj00oxe1uhyZVr4Y2dJ+HCblAtDhQX9UC/98PiHElYdy\nNp/Jj2dtZ00tOIj6htJMhmoK4yDS72WT7pMT1ALVVEiBZU4xd75cEkB7qJ3F\najDAOp443vYFjd4+fE/bUqsjxna4oqFWKEZuQU1oKslcliHYTstf/zzDUMx+\nhpVss8FYNbine7N11wP5/25tHH01TZw5wkcCiG1WKrtZoQGiKm0IjbjHSYW5\nGOv6yaJojVrLXRvk9iEcWD32ePbUXqlZF4aNlNlVzNDRMM1j9Bdn5Mekk0Is\nUWk01SXyCDl/Xe8mPFiwCnAnHThGzQLawXCNnPOjclWzktsbIS9x22LvIyri\nnNSjCc4n48FoYEdXT69/zyD8LcPZY2p9SWmEfm8J4iuvwG4/zHxZ8lpXxAfE\nj803retCqchhoP87oJU8V5NDUGlZE5rwxDlP7+WNbAllB2JZiQ8KBOYdvAJ+\n96mK4tXiJ9PUd4t7ds3evYou+IRWp2n7lVkMtI1mlFeGALc+ycHlfZs6UN/r\nY32Rb+PD3wxf6Pw4KkmWw7jC2V47bwSGjc9FxBlXZm+mgtUkfusGiv4cjmCl\nrJtOZA2XBnVWVjlotGn3NT57CVYz7x59xnvG5C9lVHu2MrczVrBjUw5tlAVA\nLlSk\r\n=IiR2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f43af5633.0","@material/tab":"12.0.0-canary.f43af5633.0","@material/base":"12.0.0-canary.f43af5633.0","@material/animation":"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/tab-scroller_12.0.0-canary.f43af5633.0_1623357416174_0.383949583956424","host":"s3://npm-registry-packages"}},"12.0.0-canary.8415ae585.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8415ae585.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dcd0f273b1a26606bb6ce09e0df26873d31ec8ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8415ae585.0.tgz","fileCount":52,"integrity":"sha512-eadf66zt1TLPmpd4tZLV804Ra/YBk2t8MXrcBx+1T85G+xWMRqtsLfJsfxeatmS8Vuov+XR0xH+OmaKb6MaV3g==","signatures":[{"sig":"MEUCIQDCTFvhrPUV8Kkyn7N4vx+o0DdMHXIAFnA/UBbYVHs4cAIgSyrpgC4ZqY1InG+3kAnHh6u8jDfXxjfj+pqxVWjv6KI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw4omCRA9TVsSAnZWagAAChAP/0PZIqJD5pvfG0heVop3\nBAmGwOSU+OCsSr/thTyDxtejraGkZGKfYqFY8+ps+sLNLKkjdC/2YOShqyoW\n6Z8zlnaylrDkF1ZXkg4nD95/xBOvsxhe+7nO92EcCxJkAqZMhDvfjEcLHO2Q\nT//V2Ny4ObmanEBvGAC4Oun5BRDK1ZgKOZJDd/KjzPsatZzGq0aiZJOwFvUn\najdYyp0rxyzSU7VV2nVC4PhmjEaEIhYDBql52SUwpWNRvI7bUWd5R+hh/AFo\nv8GuU/lQFENMrvxhQCcJXcyuCsOMB+/iUWW3aMncnkZxs/bSdS51IZ03bfxG\n8cANhFSAEwpyuH2saj+sTiM8T/tlvAsz+Fy7y/Gm3w1y0LjDu59fvAEZ1Sn8\n/RNtdZNzH+3457gxQhpdzzv6X4o71F/io+i2LaRYzWyhGt+tWqKoKH16Vz9f\ngzg3O1yxkccvtPx/p+PbjuTph4TAq4F3DWKxG3Go7fhi9MsxDJycLcutORrs\nK4nzxMEaq44BR+OAYucb33gMMJrZfG1B+ce85XshH015rBL8Ygr6hO9EmvYt\n5PepQshKqLsfFRx8oA8uPckM7Z2MV22LYSm122LKR0nunQUw8LkGOIaXT7wV\nxu2SmTC2XtdB2CWtkSfz8+XU8b/lODtSMGLLKWImdArPC5rBhCTpuR9+kC8n\nBVxS\r\n=xDoX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8415ae585.0","@material/tab":"12.0.0-canary.8415ae585.0","@material/base":"12.0.0-canary.8415ae585.0","@material/animation":"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/tab-scroller_12.0.0-canary.8415ae585.0_1623427622536_0.06566464845864894","host":"s3://npm-registry-packages"}},"12.0.0-canary.598fcccc8.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.598fcccc8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"515eabddf8d12b2dba1c2eec464bf7f68ba6557f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.598fcccc8.0.tgz","fileCount":52,"integrity":"sha512-Z+XMMb2LQ/uS674PstoHjeEUS4wkHvCY4T6xe0VXWaVUtqz9nYuPzv4YxCFx35AVCiLqF/4NCJVl0AV7yWmOhQ==","signatures":[{"sig":"MEYCIQCpp0UhFxqOvbaf5BRjEiS3MSDlGQAoWqBl0sYKKfvMSQIhANRKXOFLbqjHhsVg5bxcIE6I6R8HMPNC8Pnyf5BZEo6e","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgw9n1CRA9TVsSAnZWagAAb9YP/349+rDJT5XIfvt5l2No\n47QTbSz+0x/VrUh1fAPNtQieyXwfWPgA2Y5L3WowU5l+0a6U61Y5lVZ457Rk\nKFHv5ihgPXXNPTmFdbBsVvJEhgxDl24i1qSEXSUxOCewJqSZEZRC17TF5f3B\naXVdX0L4/DQhS4sgIoxC92usyeya2N74UqllFpthDcOBN1eNku36m/FYFGiC\nVvWbRyXyONI8T6tXImaJqUmRnLljLHwcojsPp+M4QDMOrU+D0YKnI3KDYdeu\nVEVNLli0ex4s6CN79OvVLh6lwJCKsIAIjBtkZMyHnfmPgmKdj53z/mrl0Xkq\nKUWd7fx8rQawtz2CkcVJqg72zyu/SppRY9469rWym/I55ihIw9IpI4GXfQh4\n3n++0tTWvsgcsLN0phxJqzRBkksaqpQxkUletF11sUcAf9zh1GKt3WsTZmR3\no2WBsnksx+EaaDRKY1AEe073DQif2wZTK4lDOWgH+ksRNIDkoYsoJYaZJCDL\nMlesRZrsINJ8MCdtkUNTEsEzIunwwaH/J+7e3dzllttS/YDHGZkS+ZWZBHL2\nnhg/sHldhjj3KY/zivnu5/q1commvjTh/WMQtzaNxsSUoPaD2jJMMe5dYuBs\nHZ+qgIaAKicyaDvk3pZ1BcGCBCvs7XFg0EkCAz+mEYlkWluffhLqDWHpYiuL\n8B1o\r\n=tl1o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.598fcccc8.0","@material/tab":"12.0.0-canary.598fcccc8.0","@material/base":"12.0.0-canary.598fcccc8.0","@material/animation":"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/tab-scroller_12.0.0-canary.598fcccc8.0_1623448052875_0.09287985541134125","host":"s3://npm-registry-packages"}},"12.0.0-canary.5d0605188.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5d0605188.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"384fea379f0d2e5d702ef9f6a3c790954ed09111","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5d0605188.0.tgz","fileCount":52,"integrity":"sha512-EWDq+7iUIygGTRYyd0eDcrzxaHUmF93xY/CSi3YWOQ115URpddVgpEtEuGu/I4EgCSg3BVaMChMD6gsD10qIXA==","signatures":[{"sig":"MEQCIBfaxuPkZfggy8yYYY65AumZKbuyAjuYs1k7NND5BupdAiAVFb7L0TUGoKEOzT1WmUSUK90EjVD+EeC2PrAXO9rDJw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx5SMCRA9TVsSAnZWagAAwioQAJ8YJ8U6xO4WSMnoXyM1\nJm6cgQUKFzb6vPmHvTm8+W10nEeRqM1RzUPEFeajuYqs0mCDAGg9Mw2eEAic\nNGfq6IgICFhfjE/ef7YmOY2CUiQKOGVXPMqlz8Kly1weaNBpTxNWk0capDai\nucURxFTNlmbwOiH5S1KSlsMbFhS135kqTTPlXImZRnHFnjkbC8qxWWYoCj0U\nqrgX4rez5oBTNL+7+BEpm4ePSMMPvUOYV8FJYZ+Y2Z+IxlfdFz8QakHS8A+6\nM/DVvrYdgPpCWG87pso6hzXOUFfyYGHSEDBuDpFSkViuMx/BFDI0DdzRpcwy\nZtEIZw7NzyVmsUKumK+yvJildJ3Wnkgq6DHyXFMPi0nFAIyRVhQtDY9djeqr\n4wyl91b1MTtKpLmq+wOIlx3Ug2qZn63QgPIUQt7J9Y4eIB4KUCf2X0E4vusy\n25t2wERbIaA21CXfDn6D0np6lKbXesZLW0tgQuzttYEBH7Mi6TLV9/4K0X3C\ndkCeXigHh3J3kSLC25ASvF07OsLXdmgApKciE5MMMUMKLAd2lZ//eu6Oiqgq\nwgaK4/Kph8MVWHUKSZzKHeX32jN6QoF7oVH3+74E4ktTtTw3UDGMjKMi/sNr\n7zN35HufbDLgrw9Wk4P2RN/EVQQ+l1zfTd2hEQ/7DmNhDH3XDfh59un9N8ez\nLmCe\r\n=0QKm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5d0605188.0","@material/tab":"12.0.0-canary.5d0605188.0","@material/base":"12.0.0-canary.5d0605188.0","@material/animation":"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/tab-scroller_12.0.0-canary.5d0605188.0_1623692428715_0.8133807930159402","host":"s3://npm-registry-packages"}},"12.0.0-canary.f147a2271.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f147a2271.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5a95331755141144c54704d8519f1c3a5c500614","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f147a2271.0.tgz","fileCount":52,"integrity":"sha512-Leu8Z4g8u4y/5BRxNKrLdoF6DD4XHS5i8g+wgvp4QNNybKP1NZC9+4AMPNFYWCXSVXypgIgn7ZgWnoaQbz2z+Q==","signatures":[{"sig":"MEYCIQC1WzS3jAIEW55qEf9JXouhdI31fL3Ok8vSHFDmZyPAYAIhAIbrEmF4xxe4oHLxbC7lENpu6YkFLUzMlDwSJ6TFYCfD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx6u4CRA9TVsSAnZWagAA8LsP/jpTKqb9R4riUMt2Hal7\nv3LQuFjU23MUWsCJfJMUVET/8uMIeuamvz+ub+SgGZtMDEsGDbWBbUE4BycY\n/u1dKVD8nghh00aXsukHm86WetFreslLYmhXrkSaRM+R1hZimK0n12BHYON1\nkqb0j1C6CMb7GCJ+S8/yo1B/n5Kb7iyidXuZJoOjwU0SXOXXkRLJ4ZFXLUbE\nGW3ixTEsCaYFhd0drU+/7GoD+SzbpBhdRDhZ4PiULlT8jtBpFiERLTlVWc4J\nSF+Pese2YLTGS4b5fLJ0qMgRqAigrRaBK5xLVhjqSjuGdFVOGLRoEQAB8Tzd\nUXgOBh29/2FX/U2RRIops3lNNSq19qH1NYzdB9udDopxL47ouefCnosrK0sc\n4iubvBvYlrVDACsaaym22bT9i5SivAKw0pqgntImIOURdAG/mzszqACQfCGF\np8QFVSw+Yaml23x1pLjymmfHJxAQQvUGoFdaoDNQ9ArdAepK/STR0+QVxWiZ\nvbT1Zed3clYzdqGEo+Hjij6dsiMkqeP9uPzqLXGN/6n3alBz6u8EPquh75ws\n8c5cfKHO1SQbMNN1lxj/98g0XcpnZoyvOwH5TKcAtx7vZGzj1NYMYXE3sPJq\nscnP4Cri81O7wiHpgPAiuRTjc6S8Ob2tKSGO+1EGVfxTtsJGEbQFF42k/ASI\nMSIx\r\n=poLL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f147a2271.0","@material/tab":"12.0.0-canary.f147a2271.0","@material/base":"12.0.0-canary.f147a2271.0","@material/animation":"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/tab-scroller_12.0.0-canary.f147a2271.0_1623698360336_0.7432096981672289","host":"s3://npm-registry-packages"}},"12.0.0-canary.33579e00b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.33579e00b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2c49baf7c2003a8f735ebd1d76a012e8c1a54416","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.33579e00b.0.tgz","fileCount":52,"integrity":"sha512-h2/M0fuujr4bH4H9ssofDGOAIlMScSw06K5O0BBw4qWo1n7qAO/rJLZVg7w8DJOQgcsLOA5HI5/+gFa7Pj/Wsw==","signatures":[{"sig":"MEYCIQD1IRGOxQhTPSFdEfAtHDaRJvnFC097pNsD7LMwW4uGbwIhALjQbkehFTILnBC0dzdHLjjcbUNY6L7r94iKT9RllDpA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgx/LzCRA9TVsSAnZWagAABTwQAJwkpRg+GSkUjzTsYb4P\n50skSVOACENtNwOdnsw77zvezfLgSfVe52xTgvWGQ+XT1MCGQD9QT4yBqOGP\nxhoZz30nokm3a1zU4BeypoZ5pva4Nf4nqyb45FgUFyoBrsN1IFCYNmaO0xcN\n4czQ3++At3vReXHNz2ZTcTp9pIH4MOeuUo5okAqpCPy87yzzVR+l4mInpNx+\nLUrQIFGNmfpI+oE07jYNIiorCYrMz/NKky2ZwXHLWrrZgC69vHTj3OC3M2dk\naYo9f4xpzWWGZJAM6zg4eRhEETlnwhWphgbnG84sb8HdHMu59300+A4I6rG7\nDNeYprmAUjJBfPYWSFFnUvCbwLDtmFCMIwn7INcI9kPlWD8h5E3l0+pwR11q\nhvHpBXlH0VLXRQRWTMfOGbgfIzrCJKDIQfU+ez8jhagS8srhyXhTuk6mnsDq\ngTzCJIggYZ0vasb5SY9h9K4a7R65ccgiSOq9U63JsQ2tfLeNIt6YAzwUrnVp\nmXEe2EQLwxzx1NOzTkqcbizlEngAjSBnr+GmCDmGF1+uLNgC2vvuwNek8KMJ\nChOn4Yg++mXkI7VadbQ8t9H1ONBWZd6NDRFeejiFF4yLOttIQABsHJjUvfQl\nJQUKCE38ywpRrKvhumA890+JuGB0apHNRPzY/YW4CTOVfJpx6V4RYJrMBHH8\n+u13\r\n=+R9o\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33579e00b.0","@material/tab":"12.0.0-canary.33579e00b.0","@material/base":"12.0.0-canary.33579e00b.0","@material/animation":"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/tab-scroller_12.0.0-canary.33579e00b.0_1623716595337_0.6581109578947228","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6909c0e6.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a6909c0e6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"598cf5275a761c436c4f723c85b481848506a576","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a6909c0e6.0.tgz","fileCount":52,"integrity":"sha512-U266Qtbj/0JqsdD0Ar8vkyV+WwHud6dpbEb65oJmqtxE91uAl1OcdrIaU0OinT4L6Q+HHJlehbV9iogo0snLmg==","signatures":[{"sig":"MEUCIQD3Kqc0iG7I1B8WmO5tCZYy3RsB60txlb6wTVFgwWrVXQIgR1Pq3VJe7ChVgvjsp6ZPB+Ocjqw0EXd8zCN+G98qr40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyPH6CRA9TVsSAnZWagAAbbwP/0vz0NIy0CBmg/f3Ff1t\nmZNT4TY0tHtSAf19TEp22mLa018x+fQrd8BSajoI1VPUTdtSinHqNPkSCynV\nvHTyCvmimra7hevehkO2towWT2XirjQaBDzSpPPiG/tD4p7MH6M491EWbsps\njZaMVRVUjaASR02jr+0+1pIISWdBvGOQIEnwMOmJVhBc9CjYqvL9LmGxLqI4\nePD2Ki+0WX5LLXO0f500OMlpyVZ0tRIN2bCo6nBXFYEKB3H8aNYgrsMYCeoo\nQZZhSG2lKCkRmP4DsvCWCUQIt9xW/nhaDj3K8T+A6rliGigxZfZhAIouy+VW\n0XJPJ0kzMX5T7gry579aDHBVg/puP1yC2kCfYIn7z/tIFM94kt7OPH+3Cm55\nFCYV+ymFyOTLw4G+j3u7zq2grye6OFg7jeySuDEXPSaR/34pBDExIIvoYQ6y\nYe1dmdU+dEKHNOidp5qIQ7UO792OdcoID3FJmxRemlMdIU9qh2zIFplEknZA\nBT+XArksS+DYmqClmLkPxWzsvBdA7pewf5qP8kSmGHZWtz0A2VRtSPyORamA\naVgALbkkt3+I4LpUjpRKXfXMPiwbxnPv7CpZQ7hOmHbzg1vKU+8TzyNRAdho\nZ71lRx1lMbQ1kqpk3/c3czG5k7vImvooGg+fzD2sxufHsbPvsF9Lo7aZSdL6\nGbP1\r\n=Khjx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6909c0e6.0","@material/tab":"12.0.0-canary.a6909c0e6.0","@material/base":"12.0.0-canary.a6909c0e6.0","@material/animation":"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/tab-scroller_12.0.0-canary.a6909c0e6.0_1623781882354_0.8694158586810805","host":"s3://npm-registry-packages"}},"12.0.0-canary.c18b5925b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c18b5925b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9f003d072fb153a40103f33465add18f974141e7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c18b5925b.0.tgz","fileCount":52,"integrity":"sha512-gzY7QKBTzIWpe/BUVobK9Cz/mTcKJJzZzz5k6/8RCwjV9ui6V+4ZKU4CFy2XGbyHA45j7rtpcJk8MZyKhYiOWA==","signatures":[{"sig":"MEQCIDz7p+dqVCw9ud5dmGG6u4CH4p9eMybbpowRxuzWaZGNAiAQ1CbzpxFBiJT8nD3tK0opxezaI8MvkpbqLTd/vyGa5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":339234,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyRXxCRA9TVsSAnZWagAAuZoP/jX5nt3+/se22wlkfFZM\nufBc538/T6hzEGR0Uc5pJRBFoTD9nux1fnRIrgfbB9jm/7tD0xsY6VdsOLz+\ncL7yfn4sHir33kxNuJ8GOVHqWixhF1BwIvys4X53WyPgJSaB+Q+RDd+QmYT1\nwWHe/X87Oo/NbHm4zNqam35/9HmaEbVosJ2CH2mDPY+Ccs9DKpyxEeOK9fhr\n9uJdY70T6aO/pShZCm+apj/Bmm46AgDTEHVVkVLzzJImoMVFjsUbNPGfdMfC\njIon+mRr2FEqItwVYgN8LcayVxNRvM2oL8+ZRdppIdP16iCsMXDYq8l4kQQ+\nLhoh9BV58QZWgbuAPphXAbh9JyHZDeNOT9jvpKkhsw2imy1PKqgSkh+Fr8eX\n21RPgODTKhcaDc+bUgqqj4xhT24tpTNWq1PhptmlyyG+kcMjJmplaC1sVnBh\nEYarNLhdFwpoIQX+Dx764sVaBMFQmXa/uppHwrZlr0qwiZNe6m44N8KYr6Hc\niERIE3CIpiGYfP2WAd5IofHB8aG1GNRsB8ouF2+MzKON9MKTZXik+tZhV4Vw\nRCnG0cZlZBTBo1kTRovPSDvqKxsrFSV3/V4N4MX4juqSU/lI+VesAuAPbvcD\npki7TwKb2cVmFc+aKVhCS4zLRRmIeTSDhR/H06B3Zo75KOJnUyd97guZFDAx\ncAjp\r\n=YTpr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c18b5925b.0","@material/tab":"12.0.0-canary.c18b5925b.0","@material/base":"12.0.0-canary.c18b5925b.0","@material/animation":"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/tab-scroller_12.0.0-canary.c18b5925b.0_1623791089293_0.11139762918939655","host":"s3://npm-registry-packages"}},"12.0.0-canary.271fff902.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.271fff902.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a784255ac5a4f22f52f235d407ed3715a2da0844","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.271fff902.0.tgz","fileCount":52,"integrity":"sha512-UraamVzyXbJadG59KJbQ74pK0YO6aNyPMyn62aGFVJO/pIvlWA/zOGqBlWoC5fNDGXG2FKdG8Tsr8O/E3hPz5Q==","signatures":[{"sig":"MEUCIQDNWbxOqhvICUMs1dsJDVzjyXSYWp6TFxT4i2Yq9zxZ2gIgBTilem4zjVGBa4Vb7rJ34Jt+IHtde9eD0zAjz025KU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS8fCRA9TVsSAnZWagAA858QAJFv/8exFu0Pd84iuBzP\nDo1czILBWlo7Uc+RCfmX0B1CsfgbxA3Fl9Eh/WMY2B22Sy5pobpptP7TLncW\ne6o5/fuwnyBlqhAey8my8VKa3Fyz/iRv50NnM3IZKSLq43uFCe9JGYkyfcA5\nCl0wQOtX7kSOMMgJ6ErsN0XheSYroftfmEhO31SQ1lAywtmrwge+3IBUCohE\nR2LlBpaolnwdmJCQpT4UxfG9Z+Icx5Fv63VMBQZUE0L6sbRsN+F4uDaxkOS+\ntCPSSfaNPrHgQGXjVobtiY87uqvYRoFqy2eRfEvgFzbfNxrfLNipY5/DJnoD\n8/TILy4/MXMJFLB1v5Srmlmxdux3tSu8uz8BajR276KIHOA0JvEd3KjMJ9RG\nRF2q1X05v6JxG44/SocGCZq5t/VkCt60Zi82fy5nXMwG/EMr2N9D71Oxj0+i\nKI569EkBZHzzToq5jo07ExQKl9l4z7RpTvkFjkPVp6gleb3Mb2yBJXmi/alJ\nqyvuxRQabqaD7NNs28Ef6J5PNKLo9sxDal3iFxcTSzAXs2kstXhAUqPqr0ER\nSNzOGfb8OFauq76TOYeXvNYglpq699xmHguj3WcF0z7blnwBKi5VGBBMMkY2\ncnfENqthGEIPye+ZgUpMF75bIKAz2lp6D/Lumysj+UrXFqjXKAhEPYiklMlg\n9RC4\r\n=P2na\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.271fff902.0","@material/tab":"12.0.0-canary.271fff902.0","@material/base":"12.0.0-canary.271fff902.0","@material/animation":"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/tab-scroller_12.0.0-canary.271fff902.0_1623797535472_0.20800228472102167","host":"s3://npm-registry-packages"}},"12.0.0-canary.7ea2e830d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.7ea2e830d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c159d7e3a0f8de12925d84bc870f695bd15e6dc5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.7ea2e830d.0.tgz","fileCount":52,"integrity":"sha512-itlMuxV/iOvRzsnVcqimiFfFZJ9P0GBbe/HEh+ZGAxQ2mvQIpL95NRb6HMXJ1sle3+BtBaPPF3ZvLS4IJhCNmg==","signatures":[{"sig":"MEUCIAiNmx5MAGM9LCpycSfiNrRga447NKXiN4rf6LCF+g4gAiEAiqRxoXzRojnCqscaG6e6HuAPMY7VQJKOAqcka2gPWBg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":341624,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgyS90CRA9TVsSAnZWagAA3iUP/300p8kFpCNaOdLNvs9G\nm559kbIiNP1GHVa4MwBMLMsI2ZxOBPzu/aIjmMWw+cdnuS44FNdunS/KxhSU\nKDa/19TJ0VeMturGmCINupfOiHeJKJb6vuAl7OHhuyTtVodqpEzVNeFNVDzp\nFWBJpFIkOaDvpL1xbIJ7yalQee+/mrv6UDA32BpxJ9Did4+Guj4+VJh5ekbc\nqTyvHSitmMEp1SbL9ftS1x8V4oXKgSrJ75i92noN2y67RyrZc0RYwFmTB93P\ncfDlm7u3UskK9/MLVId1ugTQ9CgPl82hmOkSVWOSqhkFkzoRASkNEvKUJoEw\nUnPZyWqqGAbR8/lhErj7iJX0KEepauVMds43UpB3kryNH26UBon0/a63xnME\n4IiUnvULal6SHZUyn7XlQRcZ6Qki+TpHguM/iXkhh1EWrMNMERgmKD5QXJgl\nXklK5jkRs5whsjcsxo5WHtE5XKwnpoig7jKC2JKVeo9hJuqrFfcvy6V+prjg\nH7VazuBlWxvfHzCJf2uxrjzbDCUkiZRNdlUS6RgxDZTVpG+rWRjnaO70ErMz\nu324b3+btkOBV+GfPmdRkpTYtDb2/MMes2iLTorBtvphsJgaqzkGDpr1AyhH\ngPlDHcDr19CbxU14Z+bQxEE3YlVyXjmGr+GuA67HVvhrCyn9aMYQGUwVT/7z\nGOMZ\r\n=HolG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7ea2e830d.0","@material/tab":"12.0.0-canary.7ea2e830d.0","@material/base":"12.0.0-canary.7ea2e830d.0","@material/animation":"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/tab-scroller_12.0.0-canary.7ea2e830d.0_1623797620599_0.8206637013486433","host":"s3://npm-registry-packages"}},"12.0.0-canary.d96f0a1e0.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d96f0a1e0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4629693d53cb2d56b694e66b33c119793e081b13","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d96f0a1e0.0.tgz","fileCount":52,"integrity":"sha512-TaFfGPqtFi4nH3NvGlGK7CQtsR8dPASPKJY3cC23KHFfu/9P6BlCexWsGH5LJmyqd9+1Z9yJzaBt1AVmw/oRBw==","signatures":[{"sig":"MEQCIHhU5Vsq7QfwyjU7UfT1D42JarTXdDpfe1gMGWl8mNVwAiBv8PFcs8SPUjlBgLChaDetaevn/9mNfxK7i6VFuvvLfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgymgYCRA9TVsSAnZWagAAnMQP+wblTndk9gEcTF0Ai16E\njYnJFvKWQjiGhYxwZi5GzODUu8aRJLC1Mdk72/WUhaPPkKv22yUNkM/7y8pw\nOpYqFrJDszU3qh/yc0wNX2nidsRl3C7E8/XdloxYd8KJjfRBKXZZRLWxl/t/\nlRv4wESO37hLuG2vAb0lIyuK/mpcAPkneepYaGLfSxrYJ8qjlnNf8rWNlJvB\n4z1Sb2ajQMDDquNR1FphJW04cHFSQq1j2QxbH+gdOSsnDt8iUNoBAS1clS4N\nx3TBfvrEKdS8oqPPT8/QolRnPFR9lJkDl6+kE4+n2gj5DDx0fLrgHSjq4J0H\n6hVZZqiVRIyYbtOwCD3+QMtE3lMfOrzqOA9RqQeHACC5wh4ryOSjNHu46BtW\n7CHIQzErWzP5CW8zx8NK+UImUDQxXjUuDUTX3oujzmZfgOVTzztpd/HjG0mt\nu8AK1FkqiR9dgyJcs2geEohCHZivHCcjPBJX+10lovKxAqOR26SoXLK0gNDM\n430giQJCc9O5ecyIe3bdR/tqzTy7ZiU7+AdHJYi1Ft8aMxeg/HRU1QqZUlFD\nEKCWYXB4SP2dY7/vTb/NyJD56KF146pKKwpltuarjh0HmMDS31DiCwjrbntR\nD4+6c3ZWMVdC87pyvNMxei46urbGABLuN2hKeCZH8p+X2FB28Ie3WPPMIh+C\n0aP/\r\n=uuBn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d96f0a1e0.0","@material/tab":"12.0.0-canary.d96f0a1e0.0","@material/base":"12.0.0-canary.d96f0a1e0.0","@material/animation":"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/tab-scroller_12.0.0-canary.d96f0a1e0.0_1623877656048_0.5228099271342923","host":"s3://npm-registry-packages"}},"12.0.0-canary.a6183801a.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.a6183801a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c9f840735102c10945a5731bb243dba02a915e1d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.a6183801a.0.tgz","fileCount":52,"integrity":"sha512-ZligyFNT2veX2+N35gM8tpWh6G6QYwK3xZi3ldquiPYd5CD9DIhGFFUsypT+U4yry3LAsfQ42IntJrQp0nWZZg==","signatures":[{"sig":"MEQCIHLgGSkIYdnfb9ureA674Leo51n013sWSHw4aQbGseDVAiACQHfM3xENlDNAg2Jm3wJNK4YjPqrJU9hffSnkH8s2Rw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgynXxCRA9TVsSAnZWagAAK68QAIQeAPWh3GDR6CIAGVqs\nZrV/9xBEL4MqMmQVbd6I60yZxdYf51rIOO4Lh97vBnsqgW3p20pujelhNwkB\nEwIk4eY9DspmRerdGa2ofUhimP86JEAGL5zwyjkxK9pt7Alt6PYSSx298ezG\nYP69z2XurlBY1K3dW4p4qu4UqBFCHI5PECO9t8SL/VoTAX3PT+SWxLxEGk9d\n4e8/sY6zAF1pAgNzv/fde+Bwg9MkwOm7kx8heKjv0wUNe32naht6+wGVHQIq\n22FUMO60ovnvToj3KI+4ICGa2DXu3anOOyKat7qqtDXUzOZXMQxINUIGMP0Y\nE3nTv/XlgMLymOPDWDrhF7mPcSWCbJz7mZg+wuBGyTQMX8t4XYm/ErU2n9nA\nAJDDHBV89IokLpdwDkyWZ9le172x4b3Gw1gQczGbL/rwb1sNldb9bZUAtRdV\ntFgyH5K+0K5NpeEYz2phDNtQTAzML+NfSLyi3q4kRFvhCP52gg/OehTLEjIi\njiO0cWRzuTGlSfr7Nz3o4QYp8/TGM5cLgIy/ktLHWCeTQrL2/gwsQdK08Olv\n+JciWXpEqCE5y/l4x3O2EZMpT21W33fHjcYFfOF+6gapVeQQeqxQ3WARKFk0\nsQo01ZYDuyyIrFqn5yN/a26mhjyrmycB+jdHXjYDqaut9un2pM9MX9UsOjJB\n6G9C\r\n=tWYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.a6183801a.0","@material/tab":"12.0.0-canary.a6183801a.0","@material/base":"12.0.0-canary.a6183801a.0","@material/animation":"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/tab-scroller_12.0.0-canary.a6183801a.0_1623881200584_0.2619011512416678","host":"s3://npm-registry-packages"}},"12.0.0-canary.940550232.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.940550232.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"83e632565e437a19842045ec1099e5ce17d42674","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.940550232.0.tgz","fileCount":52,"integrity":"sha512-MJRCAwCn3x9rA5arPMs7UjgWoBeTHqlZtfmo4uYr6jqlMT7md3ALAsahYHuNT7HkVx4oPC3OssJgei8zYWQ4GQ==","signatures":[{"sig":"MEUCIQCbJ4dPMaevN1GCLVGU18NPQZD263C693MX2oO6Z+wgigIgKHJYDyseIIwKJg0W+7odD+gAVCv0w65QnNTx6SkzCNI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgy6VoCRA9TVsSAnZWagAA/qgQAIIAbpryudmr5WZ4U6v/\nXmzIiChm3nV1Qj2/51FVKoe4jSdW+jf9lwyvjOirP77QbiE0THokQ1TwFKH4\nGGL9Jv7Q4eW6SRB5coU3+2L7sLRizSWnQnJbpOfB5pomn/s/Xe9galdAebzq\nDdhILw0fdeQ/6SA2RtptjaYk3D7IZH5x8lfxot+9sapmu6WqWjKgYZ1Bq3kI\n2trfY0Y0bdLl4ggLGSYMaubmsYWAD9SxkBBjt57gHuF9Z6ViyylXebTkWcQE\n2OtRfyCxp+is1fCXZaiARxZO1XhrLGdpwKtytBKYRBum2QtF5sOdHsuEXXkj\ndY0j4NFA1EN6nQCqBh04ZXi26OCtv7G/H6YTIyx5fFI17kiNscfYT4CgfkMm\nhCf/xF2aTadg2rH266cJgUvZQ4NEEK25qMveDy5CoBJpmMULpcZcPr2mPi3f\nE2U+kwoUQdybuMZ3mS7kcdaJ11Gle3HM6ApemCsMxgECZBlGUaH0XgCucg5W\nS1Ee/K+buayvDBQ8ADtZX+d9LxNY5BfnqP0AXPs5Su4wgfL6DK7lx5ZqrkVz\nYR8LHjSF/8VI2+nF1rsMMqKC88ocapAH24OtzXIxTuvSi0k57QlIDbqlv2xa\ni123ooQAtvA3Y0zKxwMEDyhpVhG9BXxmUc3JdM/bYT5/mHI8KolFxOzOmISz\n4d5f\r\n=/kND\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.940550232.0","@material/tab":"12.0.0-canary.940550232.0","@material/base":"12.0.0-canary.940550232.0","@material/animation":"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/tab-scroller_12.0.0-canary.940550232.0_1623958887666_0.5975647979609464","host":"s3://npm-registry-packages"}},"12.0.0-canary.f705e8048.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.f705e8048.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6133f399b8e21297c6260d7c88ce0092413a2a60","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.f705e8048.0.tgz","fileCount":52,"integrity":"sha512-t9Al3tYhrhnN+fE8QmHx7CVrPyQYkd9d9p9MFmn1h+KKbND8Nsu2ROTQuEVDaJuaggQzzNx479EfBPrqIQVMYw==","signatures":[{"sig":"MEYCIQDXoPBMeaFn3emEAgdEuSu9+O5ZXLy7Kr4ENBxeAIIeDAIhAP/nm68IsbpS5x1COhGjcE+0hO3Js/I18eYXWCXV1TkY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzLr4CRA9TVsSAnZWagAAsXQP/j7E48Inmf9cK43W/cH/\nvrcnsyWWyg7R5+SXx0Sffr2c7DCFWnJYZk5BN6NlNWLJXm8gPEObdsaCGLgG\n+ej8D1+p0TMv4o/s2PrJM8bTKOGnbZKLRpXP7y2Fz2DNFvF3hlBCtgvglEIs\nZkB5sBwcLwictaYAskYS3LmRZ/Elv9BgEuFH5hKQE4JoAWnZEdbw4bNFiC/v\nKJ/Q6Nc33x42Y14FFVl3st9UAC8bbirWual+ulGgOHFNZ30beCUqOLNp3Y9N\nuTs7X6rBj/cTlQ7FcLAUaE4GpE9GGtkvLCMJWQO8DesOor/wtu9bCX5rtjRY\nMAYEOYVcgrI1yWmVM9xAYrpHgGzBC+YU9j/93FPpyfhJRYJNswJ75iVeG/+C\nX190x+xQ6ocGapPQRX3obHnx/W1oF+2TqqIuqBkOYNh2nGBYN+VV6h0SkwFQ\nYB/XrVnH+vFY40E+1u6ZzPl4+PojZt20UIx62gn7HHcCDNGHocEWIjSxiHMT\nTmW+dlNxV+tg/Iuk6uEIV+qSanCmgi6gnDkQGKlUOx+OEMRmc+poP7auSO/d\nW8HJYAifJdUq3HXZhEfnQBo30xfr9+YmqHtf7NNhukWfQKEZgyxv6K6yd6Wq\nprVcN01jpWkkd1MdgavMibBQmSqlpx3Ra5LXt+2eipcZ69BCTV9Ioc9gIJdO\n845g\r\n=E87Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.f705e8048.0","@material/tab":"12.0.0-canary.f705e8048.0","@material/base":"12.0.0-canary.f705e8048.0","@material/animation":"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/tab-scroller_12.0.0-canary.f705e8048.0_1624029943935_0.0394246154920308","host":"s3://npm-registry-packages"}},"12.0.0-canary.08d791f37.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.08d791f37.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c94d432bfa8f4d23a173af1728be3abc26f76a86","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.08d791f37.0.tgz","fileCount":52,"integrity":"sha512-o8It0hRXhZAmLncVZLSpp9uNxk57kwxH4o76/OeOxGWliOzfXYSjXqsOBVAVVq6KySwO5cO34JSGKxTvr6atWQ==","signatures":[{"sig":"MEUCIQDq/xMEng9h4KixV0GmIvw/cD8TkrmMCy8lTvk1om4CtAIgLMEOfe7qsGuHRbd6LCEIn6IjidjiHLDvhoeW/IJIkmo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJgzQxXCRA9TVsSAnZWagAAUEAQAJDQyy7sUiFoqp1j0I+n\nUTehDvbRcnFtIY8yfniseJ4fXo98+okJx/4SsfU6zzspPyHdfoGHXTcc9OA7\nCi+UcE1astnHqofeSiMzT+AEfc/wCg7VOHGnmuml/qAvugUjtyD/0HRIOLLr\nerb18vRBAJ52ntDv+04AQ4zpc5FDSk36GnotdOfaYTEZBWJUt0kw3goslDTw\n4ag/OD+I7rslMyc6H0LbbnWxdgYoAEOuUktHdzC7FWTRI/D4lHkCE87b6SEG\n86qWM9co3AyHOoKw9WjwlCBYer0O79imVhozORAVB8+5XuvRJ/26BH1LNUtm\nYdZfsfVPqMMAKeSg/jl4Es16f+FJVVyuo9zyspXPGF1ZIy90+oLLepvWDejZ\n+FHzW8ECfcf8CuCaRyxihiD3EV6AeAxRn3KfVKGnG7KAutmORUAz/taOenNn\nNZiPYHcwkPOozf4lAfAo3zS+1xDphBQ7gIWJaPekuCTpwy2eK62py/ooPUP+\nPQWPDLNjhDlR6EgMC9q3//Y6QRUnZqa0amEKNl2C3T1pVxwwtlLjyWn7lavV\nBdu67DBaG+AaR575ea5za+/7OOaHFU3s4J8bUGV9FCq+TBxoU23zchev2Txk\npHzGyBTusrA5I1+JiIzyC7TpaR4Lu01+93+VFR1tJ3u59POmSIWxqB7CKj1W\n3XkH\r\n=JNEo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.08d791f37.0","@material/tab":"12.0.0-canary.08d791f37.0","@material/base":"12.0.0-canary.08d791f37.0","@material/animation":"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/tab-scroller_12.0.0-canary.08d791f37.0_1624050774912_0.1226695506793749","host":"s3://npm-registry-packages"}},"12.0.0-canary.e38d7440f.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e38d7440f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e8b7edf35b48ad7029a0becbe4f46c3a162cd506","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e38d7440f.0.tgz","fileCount":52,"integrity":"sha512-fBFU2fvl2dLdghVPT5G/xAFMquJ7VdRQ2hEstsGPxRXs13Cz6Japu9cwaBgNwMa+rjq51uYDQZT2OBDz7TKtug==","signatures":[{"sig":"MEUCIQCd8421Ite7RmVGLlxDFgjRxHd99XSoEpjWkDHliP8W8QIgONr7RkdXY7shHKVhW3BPrOOamdLDufAnnVTltbKcl3U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0M9bCRA9TVsSAnZWagAAdj4P/2s/GKqSQx7sGiaWsJdS\n7g0/4LQmcki2aFAhlLxvigYrodHZSKD09k4FlhvCxS9fO/XyKR4NxrxZHOXY\ngpnFC0bI1kyQzpv1ZvA9UMOmJZj43pOxROHWUlq7cQH4jKxKez/XkEZlB/6b\nrQr+eYKeLdOgmXwjE+oblSQ+BVUkh1aFjkr1yVDifTaMyPuOu4QyQHcd4u4y\nwFV/6qSbJt8Rk2G0EQKq0ehsq/LmHgq/l2hjZU+OkHl8YxoxZSRaIh4AdBbU\n+i50ThtzNFtSTQj2LiPrjmrFLA9CBNjr8l/AITEQG4b8yjWfQ+2q6CB6ELpa\n/cKW029Fs4LrrDVQtsAwjz5haQNEDiUbf5YRGe6pVDn1LI5BSPbZ5eor40+2\neiPKgTUwoyoKJz71Qa48ClD5jK5ep1eFPNS2qxjwhKRwzInVBV6CHFZzmJYO\nZ1Pw3BHlX6TrNAn7cMdgsBeo63+9u+TM54Lp8UCZviTJYXsXV3r7goziY0sq\nXHUOvKT/SojrnCbHlPiK8HB5fsLC5premFHHH2psVF7ueSlRU6OMSxKWwKA3\nchOj1+P0pnX7RMxtoyM3yuRws+qW3U0EQm98N5euiyNMLrpNhVcKAwgrkhXD\nH8tcasuEQDoiMBgBK4W7TYLI6SEQFxLJzxEUiJ5KWYPbLkxZPEwxCHZND92C\n6Y3a\r\n=OgWE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e38d7440f.0","@material/tab":"12.0.0-canary.e38d7440f.0","@material/base":"12.0.0-canary.e38d7440f.0","@material/animation":"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/tab-scroller_12.0.0-canary.e38d7440f.0_1624297306524_0.5827757592610934","host":"s3://npm-registry-packages"}},"12.0.0-canary.75900a5a9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.75900a5a9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3ee7cf02f4889732d4c81222655d97153886069a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.75900a5a9.0.tgz","fileCount":52,"integrity":"sha512-E8kv++LBDbEk1vTMp4rNwr2/BejRM7wO/VjUweL5LytTUgl+kI52dwUIgeMhkhojAEbIP8POuERXf7deMuyEZg==","signatures":[{"sig":"MEYCIQCOfIUjMcn4cj+8g6py3jR1Z5o4FlvT64idFdo7+PWLbAIhAKs+1Umli60/uV7Lv99meZaM0y3DupCb4tED3AcjW+Zb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0NyaCRA9TVsSAnZWagAAcAIP/RwFWo4ElHVbSzAtzJ5u\nFwIqbqvpxQYws00AYz+Z1x6L7+r/GNUU0gQ3nAP77hv2QSoSYYDLAasgQFBB\nLz5YkhN7kctVSf8RlJ7GeOxhYlBxst7IV8if8KtdlzLR+5Da32xYII/JmXFv\nxu2jFHjEeBo10gn8u/sK6TTisJQb14HswjlJ7ALX/KJfOUOKkFXg7ATba1bv\nENsmhnLyJi0HILjCe/i4z7NEIcLLV36LBuaGxnDVDJ7eaSCx6Mu/0oVxSw/1\n1419CtFXuPCWPlN0sJpH1ovgIPIXnhYsRh1a2DJ8A9bJWPZtXgAzAf1jpPny\nu7SgIHkffIUbTSP5NEPBOoHiloN4iKCEeINuAtVbh1+aaNePdPbRk9r8UL1b\nJ+sQGfFki4Gi7QgvGQm5qym8K8UgaxdxBZdcevDNLVmGjm09NqOEJE6G8zlJ\nmqXNMGF5d9mNMw/yFr1hLkGaCVMv82g61l1wIE6UzsWeBLgSEu+/CNxPll30\nWf6XkqbDv4oZKoJdbzMoyGq+SMeQUgMrYjQHc0/8qnl/37phJ0iex4GlZcrO\n5WLFHdD45crJJ2fepgKYKPD0+Wsyqg/PeW+eWg4z3AQfx+5LmaRBoAQpvXUa\n26WRfBcmZ9OCrixaO4bO52gKH5npOFqac4tF//VHby6cFlLC4TtuerNQrWxf\ngGML\r\n=5fa/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.75900a5a9.0","@material/tab":"12.0.0-canary.75900a5a9.0","@material/base":"12.0.0-canary.75900a5a9.0","@material/animation":"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/tab-scroller_12.0.0-canary.75900a5a9.0_1624300698204_0.7350760100245548","host":"s3://npm-registry-packages"}},"12.0.0-canary.33e6f50e9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.33e6f50e9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dee4444da663fe5e52a946641c8717102a097e30","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.33e6f50e9.0.tgz","fileCount":52,"integrity":"sha512-SMIrE7a6yAfmpx3TlVBCuoJjsUl+4Dq3XYtSIjqjBmGa7ijoqNjWSoRGaRXoAfMF8jF/YgV0CbqMOuW6UDdt4w==","signatures":[{"sig":"MEYCIQC8Q2AGO0BQwAAjspK2YMAyItkvcOt9Qjeay3Si2ahv2wIhAO57NeJI9cdGiv3CE1uIox7zJ92xMckoD6Q1E6NRavnq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg0nycCRA9TVsSAnZWagAAc1YP/jX9PK8YfC9347cjyzTi\nQURJX/PXWrA2pouqg9N0kjwxgXYzBtNqfP/nI1GS1fgKm7jS1CqEl/1d5iJ2\nBOKixRr6H/JKAsCfTR2c6x+c4L57+OpjJHmkjiBHLm8aJn9V7qoNmwaf0xrX\nWUAQ29i7tjZg8wNi764jBzWLRYafNBueYmtoVvKe9b8UA8aPVyZVe9v3nc4p\n4DdRMUlT2i1aPFesFOXVNI1ax9eAV1cfS3jt9F32+YymlEXD8jU8FOvHRyss\nB8zv+nZHHPd+WA+thSTmVREdocFmylMuQrfQBW22I8gdGXzfTfIgWbl3WF2e\nJaFjO9bAm6k0T2C55dmBoNEXl71jvjRm+JqOMnbqgHSposyY5YfvQ/8Hdmot\nQmPtl05559OfC/yKUr7/+36P3kmEq5Bg3meLdCW00EW7MnsoK0E6ABAEBI4M\nH2l7KvvWU9zlRWYD2I5G/CYkOwpeBiAJ36mIMld9B3Y10vBXchjLWKFYZ3Kd\nrI/nM3tuCMlgzbHbzRR3dmzrnhxNPvihVkSjPQrePckChxBmGuSYAkwa96lw\n2aIJdfvx2Lvvm5/8AhU8TvRy2n3oEBlxg6fsYTVdilkHTgF1X0+X2zXH07K3\np/0IjM1yVYC2LdXzhABmRruuZ4ht2JeadFFQKrla/AHxputjbPGlXucZ/LfU\nZr9v\r\n=8OSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.33e6f50e9.0","@material/tab":"12.0.0-canary.33e6f50e9.0","@material/base":"12.0.0-canary.33e6f50e9.0","@material/animation":"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/tab-scroller_12.0.0-canary.33e6f50e9.0_1624407195658_0.9533918843928804","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c685301d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8c685301d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f0d599d03c6aac4a24575078ba3a379787f13d2f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8c685301d.0.tgz","fileCount":52,"integrity":"sha512-j3EwXabQvXDKCL58KZiUZa2lgGCtyTbstcBAAjBJA9NgsPsn0NNu9U3MlGuin3hUU+WLsLBW1KxXW471qFL4Fg==","signatures":[{"sig":"MEUCIApSM6PzMMqEEFKDu/o3C7fI+oxggMK4pnoU5Ll6akfcAiEA+8XLc57+QQhY1qpmrJRnzh7c4yDTBp2COWGIGryCEgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg03ytCRA9TVsSAnZWagAA6nIP/24rpeBh231vrrmy+YKb\nrJKjIBal29cKKLus6hMp5Zjr6E6H9MN4g2GG4SkMqZ8cX5mHjW0n7Z50OtTN\nq9iWq2exsq66SBE18jycGvOWlUpQrBdGNx2NOfjyb8AH8NclQnL6XWn5oSgM\nlxbvIRxfJ74EJkzJyfYyPHFpCJjV+fpNMwO/OVM6rU5a0GSbjBm2aaeUhF6W\nIwcbhswAcMYDQaDoFDjJ+b5D4bPGd0r/KaPaWyHp4yNYj52YcGBAYLviyU75\nn9SB/Q4/IkP9Y6goj8ap5/ioYvAzF6t71D0iof1OOPu8Z0bBl7NhOt8cMCb1\n5IFU6JRRuNg53z/a0ELhnvgpnPNhG2Zi3Hl5j7QtHIJQqEIs8lm+yNy6YFMz\nbdMk2a5WEkFktuMfRyxPKfxl2r5T6bo/5kgdKGQt/jQCW7NhKZqHsqKKk3kb\nxFX6gze8QxOyLgcNk+ngTQGor82PlSyGVxQLybh9f8wjXQ6rhyOZZlLej5dP\nBvviDc+0yMHQulwwEsSPKUTdJCnbDrwI9c/L7vWKinONlXURUomA6rkLd2/1\npDcA7NuHt8Gq5mzlwUEnND3I3vQki0bALlsTk7mVKQ1ukM9hsYrzbn2Y22AR\nT5vUi7I9I9ObciTQ6mIw2Br8e5Mc1a/YWEye0BzO8vyVRxWjJH+c8BMA54Tk\nYnhm\r\n=JX0T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c685301d.0","@material/tab":"12.0.0-canary.8c685301d.0","@material/base":"12.0.0-canary.8c685301d.0","@material/animation":"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/tab-scroller_12.0.0-canary.8c685301d.0_1624472749215_0.69541270060017","host":"s3://npm-registry-packages"}},"12.0.0-canary.8c7d994ae.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.8c7d994ae.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"34dfe1732fe860a0ee13263ba6b0851127c0da23","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.8c7d994ae.0.tgz","fileCount":52,"integrity":"sha512-Wm1I5OQPGSRz6Tai5VzhZpOOJmGkp7Vwo62C42dtz6AoOqhRQ4VC6sTX0XCflJ+bQOKlD3sxuZoz6/Yd33qD3Q==","signatures":[{"sig":"MEQCIEtZun9NiiE4XGAwBfKpofG/aQYo2h6K5NNdSJyb0OLPAiBlbRPH6uL0g5E+JZvHph68duUZkXjwTpZD+WUQhla9Ew==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg04tmCRA9TVsSAnZWagAAjd8QAIp8htJe78zPRgfXR1uX\nipY2wKXMoq7n8XzoOcPkmOngtC6EdUdLljCjSHzvXSC3uKSlfO8RLS9sbQFi\nF+EWGOPlRImpUbwe3gjSn//p3HP4lx6Fg0hp3RBJXq98UV/hlppOHUpglOfs\njstlYX2RStrRfxI++gUlsXH1hIyXCap9GAZNxgp+vgBDQzHFBkr21a4l1zDc\nrZXALMm23eiEsVrGHapWtWB+cFyomaXamCbVlxzvG4edacBS6MrzV5Y5Cwc8\nj6dw32ESv9WdMiml1GHK8atTol8PD4GgKVHOFvSQAY1e40c2jK0RTSSS52FB\n9eqwI2sjSfyfnU3nR/mMDGyX+bjQWnTtftn5JkrgcgyKMqUIutJDmsaH/OU9\nhzJNtPD5uu81+8kc7ZxxSyJAGrXAdGu9gIQT7/RA395JFIcHqdm4uJ0e8YqK\n2PYGzHFgWZzQdM4mlkEczefBNGAJ4Z3yUWTft3H65k1m2UE3jOCr9mTqQ7UV\n4Nsu2YA2eVyHuJ8BNgOVC6ZYTbb4BIVf88I0zwhU6PnietGqQggAs+e8bgOM\nV7xlIcs85dVipNZmUTxAoyfvGnstV4Z6tCE1a/rkhyLOhJEE0sAwTnV4jFDZ\nUsqvOOD6hcM4eUGsntOAlqmHEWKTSr/UyyPChY59WVUTcokhv4CuikpNz7Bo\n6rP1\r\n=fFcx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.8c7d994ae.0","@material/tab":"12.0.0-canary.8c7d994ae.0","@material/base":"12.0.0-canary.8c7d994ae.0","@material/animation":"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/tab-scroller_12.0.0-canary.8c7d994ae.0_1624476518142_0.13953881964709547","host":"s3://npm-registry-packages"}},"12.0.0-canary.4ccd39bdd.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4ccd39bdd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dfae863fa0903a38ae4b5ab20e22ce152b3acba9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4ccd39bdd.0.tgz","fileCount":52,"integrity":"sha512-Gqkz4mTV/HmholtwbfwjxMUzEy5JLGHY4/qKN9uzRKVyNOtpNOl0Z9b5R0cHIPPIR9XqiuTe7kFPUcqwzM0CnA==","signatures":[{"sig":"MEUCIH38Na6e+db0WAjoUZESzjG5KTjPpeI4Yzi7wcrX85LtAiEA4sTtham1/CAtfE96v/mooXqCtnd0cbQMKSQzsipo4zw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg1K/JCRA9TVsSAnZWagAAl78P/3Qzcub0y1WADtpKzoss\nhhlwuf34zwm9ECGMP1C54qFG4b8M9Tn6wieyt1Ru2fcrkgvzv3Ped1ELgi0E\ny9N6L8z6k2F6GD57eCUXaPGiHvfLdzzfNN6M9jczu3fgYQ/aUY+r6Ug1zYGE\nwtvOeGOAy8YsejLzeZfve3F0Gw4/XRV4lJhUfZpVhPViHwFYWYdOj3VZWz+k\n7ntF1qE7OPxNd1QHvuVO8TiI+l4mWcdujMyffi5/zkrCViCfLcc513xmScIw\n1/l0VlN4ImHevkr9nBkOQGDmeKoY4w3ZUIIwfBGFXe6olKEB7Dn2sq3k9S16\nhWygsyg0ol3OeCUO02QOIx4sE3Wyg15Ko1l4W4q2xpXmJ8PXAYD0aqjTCG2D\n9DJErgKUxlqzuDRuHMSXlXrutA/w/GOF80RDbMaln/iVhotEtqp3cJ5ONVHQ\n9S/GXCa+QN4K2X513ub6yMIhx+mUPEM40CEdplHEAj3mgC/jgnHPvk5KHeY2\nBp4k2wtRGR+k3kKR32biefRh73dPp26oHQlp2WXD7+xk+zYCxHx9VDVL7mRE\nOezCUpzjxqMDmrpymI4TsPkFEw8SBY/5hB2Zgq3uU0CySAc3yS2VSipA9tfz\nbjSdoWm3CxUdEIr3faC8tlCvcZ1JQIoAcSzmS2tE3oQBNUtAaq+6pq0Ucij3\n8f4K\r\n=1Iv/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4ccd39bdd.0","@material/tab":"12.0.0-canary.4ccd39bdd.0","@material/base":"12.0.0-canary.4ccd39bdd.0","@material/animation":"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/tab-scroller_12.0.0-canary.4ccd39bdd.0_1624551368600_0.1580509437266162","host":"s3://npm-registry-packages"}},"12.0.0-canary.17553e9f8.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.17553e9f8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c3bce299ceea53d0007d2c5fd195828f96555543","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.17553e9f8.0.tgz","fileCount":52,"integrity":"sha512-rK5Pbhaqppv4S8AkZqxdwyR6QiIwfINtt2cAwSG6hdk1G2AQbYCeHql1uYBrokWGo+zDHIFjR9YTKsaq5pAOKg==","signatures":[{"sig":"MEYCIQCmj5ViehWwwmhN9Xx7gy95UZFsKmt3VZFnFxkMNhwWXQIhAM37XJcvdDxeIPt0Xfn8MdBe4u6lsVHksVlXOF7xXSUe","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg2lL7CRA9TVsSAnZWagAAKp4P/jPPye+0MgG+Tri10VZS\nkM+yP7cs4dRSGRDUObxtrcCWsJdNG8W64mhSYrW/SsX4LS2KOdzkWaLYphsk\nf5NEdVEG4JVmT/oFH/fpBM0NJm8TFIcchrbU6CZnyx15ZxeMzLQRRP4KHVVa\n2orKsPviLu2XjD07F/A7EQjfCeyn0eXEJoqW9HFDq7UMErnc5MdvEVJjPZ7F\n3voNO3c8lCrLPnVcdrxzXWriOTn0IaUGBWWsGDJdN4x0sFZ5ucjQlxy0eeoN\n/bpfULJ/4deWLtP0dl4s2Et/BDBy8W5PvlK3ylavShyXuRpV0ny02Y0ATYrw\nLhXdT7eAQHSlau/X6gI/4NrR3JVbFRt71ReKvzJcyljo7BvcxkEAG+xiq0Kp\nmH4aksbe1PZQu6FX5nU66P0hNZm997VhmMda51R+s3vkBvy/bFLAqolW4KXQ\nfrCGy421xUawYUZq5/IMKjL7xX7HctdDB+K/GGZaihVuL1xfjCHVC+VmsKQV\nJ1vO/2PAGoldENnG5R6F7xlKqg3mLcZO6yT+jnLNDk/Zg4GKletbj4mxiBpP\nr7bTlKEdDH6jyPhu8KQd6k/iQyLAm/Ijspc8R0mYMStv1M0ZqXy+yskGNGsY\nF0qgHWL4ulUBdBeswF9uQY+sgjUCka1ZWhjbvenUDLpt25YcBsBWegojGEXx\nt0Hd\r\n=6mtL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.17553e9f8.0","@material/tab":"12.0.0-canary.17553e9f8.0","@material/base":"12.0.0-canary.17553e9f8.0","@material/animation":"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/tab-scroller_12.0.0-canary.17553e9f8.0_1624920826679_0.8494805173834812","host":"s3://npm-registry-packages"}},"12.0.0-canary.4c80072fd.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4c80072fd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e2f5e76c0d46d0f895e6b3ec537e637e42bf320d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4c80072fd.0.tgz","fileCount":52,"integrity":"sha512-Jqh0mFjDqk3VLJrAWicZM8q/sger1+1T6BaKAswe+8MZr29mrB9F5gzsZKOImWkC/gyvjfyZw4yMDKKxxd9UPg==","signatures":[{"sig":"MEYCIQDAnP/rQmckwBa3YDd1HFHBd4xgIiYXbsrY1i3KWbmHeQIhAIylelJM32twmrvcXtyX2LYy3l7G+w/4OlEgeZBrpAtZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg22l7CRA9TVsSAnZWagAAvXwQAImlEtr0oNWzX+sYMVVK\nL2e9jnVZqqBDeB4guyU09OyUJPrEfHGtC6DJDPGqv2PsZREffcGgr0Lk58BZ\n1BtsJqW7f1ILoHFSceuy541oxCdo369LDCLy6zs6e+coZ7g6T0FzYymWnHJp\nCcr9loTSfLWJbTvORwpni1HgHU5jfVmu0b5CZ6c+lPWWpsVtkSWjELwzXrJY\nHa3h/1lbMWsR0mI/4oSadkGxq6jT0E341/PTMd4r0HcPWLkrzujR1v8EQIsK\nJvZOUKWCnnuUsykMoIwursHXdoB2Z/xh7WtiepSY/KZzbc1lta7yhKFakask\nFAthlSuKwP4uybBaeRho+UOYka4EEdd0YDLkxEZAx/O186+eUbdkY8+GIQRW\nnB+nTmK8q51letiN/10der7UqkzMzV+qfJdhouWBp6gCdRrKAZSuByvh1eRY\nqGGCppkJZulmOBLaEqVJ6dt4LBROQKxDZ8mI/hkcTvuQARnB7tA/mYObFdMA\nQHlx5exS0FVwahguLl5s3AU7k2J3QNF2mmHXlaPPKW9ZHK3GffsP1nyS3BC3\nCIm3W1WNWlnfobqCwSJ0zpc+wawmUWvbJttg7TYOLUdC1EE3rbXhwR2mfVwZ\nCoBmcrS6RnazcmME/Cgsga1EBTL3mufbxAdupLTD8UkqQwiPGx3nH52OLKFf\nS9qS\r\n=xfM1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4c80072fd.0","@material/tab":"12.0.0-canary.4c80072fd.0","@material/base":"12.0.0-canary.4c80072fd.0","@material/animation":"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/tab-scroller_12.0.0-canary.4c80072fd.0_1624992123295_0.5987841702730734","host":"s3://npm-registry-packages"}},"12.0.0-canary.796811db7.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.796811db7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7cf4efeb1e3e08ac82297e9010e5915b7f3ba7c7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.796811db7.0.tgz","fileCount":52,"integrity":"sha512-XuG3ixB/O9wNoc4PdMAORAWD1H37ylUyH7FfgMZZmees61dujEIB6iDjy0f04aHj1JKFB5EPACTwmA4/3kpxkA==","signatures":[{"sig":"MEUCIHTmgk0Og9ixLY/LldJ6hv3YQ8CvHvbqJNrJTzR0sug4AiEA32WEk+9jKnZ+HFONe80Y4JfReEXn86yNogng9pR2qiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3QaXCRA9TVsSAnZWagAAj6wP/0Lzjsc598DhzJN8VGap\noiEJIEsmr86BbEIKa4YoGOGqMM9PQ0+NHoMht9S6dykPRfCT2urFYkCaEg/4\nJyn2gQcoMglyeQj6Nt1JSzBZhmEeX7ferHSWboz/HgHZwrvCRoSwdKHMaAlM\nZ4hGU1haSFMecK4EMkctuRsZjWSVYGFOEJzMvzGMMasOtT3WakYUqLgOXWiT\n5diGSQ45jr+GbJ9VJSVPh9ahKHYX1WX/gpbm+ItmGDhD+/FGa1n4UMi1jVhu\nROGhiZmyq8ceCQisYu72eHtqm37CiPRrl+oVqa7TF4QAQF57x4rWd6OFa5Ce\n2q2R3aHfOycBXnBqnLVdl8HUAlLYO738DkcEaTci8ZzNaxKmM8pIMSC4lgtH\nJKx422gHXaOSetKCAJ7Ysji/KylHmWZvoe7OtReHkHoeIx2JvtGYWMKaKtKf\n+eScUQQNTWrHFqQt9a8CyU+ET10Z1Qm/wC3FyxuUU9XxfSovSITtLCczXr66\nQZ5boWYGEJyeZUqDz4+rmKZTq7Hvk/B3xRGhD2ofjDbgeqwR/gRyCTP4pq5E\nxCRiVO5MCiJlY6a5+UdRAPRmeYUS4mK5fhR1WchhVkRZX3SrFNfvC6ItagEC\nu1IkQhT5buiKDbA5Z9NxEV9NxAsV5RJt5OMulRPXGHFPD4276y3iXooJtY3f\n8XXF\r\n=HMmq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.796811db7.0","@material/tab":"12.0.0-canary.796811db7.0","@material/base":"12.0.0-canary.796811db7.0","@material/animation":"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/tab-scroller_12.0.0-canary.796811db7.0_1625097878476_0.02579378922068809","host":"s3://npm-registry-packages"}},"12.0.0-canary.70e1efdca.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.70e1efdca.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"af869040a5d2f6634107f70487a8f8e2b5b5e1a5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.70e1efdca.0.tgz","fileCount":52,"integrity":"sha512-hWrDfhspLx8/NX/n6ONnMxLytDcz7AVANkrvvmyfic6rxqt8D/A3R/5kaDoJaf8h+3tO8EbIaln8sQINtS5FEA==","signatures":[{"sig":"MEYCIQCou/A0kqYtRuwfVhPLrnZX8cBc6Y6mbpo+J4ljr4aUcwIhAPh+RQmBCqbbrcE2dFYEa6AJgSO5KHYSUXKQKta0s/tW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg3fZmCRA9TVsSAnZWagAAInoP/R+yB2T1QTjOTlcQYQV3\nD7px/9BlkcC9YUGXIOKEbe3FFzvryTr+phfBPZfQ/zn0Rcv6ZopUk87BDzQl\nnOcl9PDg1SAh8UkgAMmU1Pa1HpJm/4obvebjUCPV0QduDMZ0FwsHPSO0JavJ\n9CqhAp7KVQxxoluSyzCjmrr0DQoCDpfXrAb5V5qnRzSkhqDfGkqd09Duut/S\nJLkhCR2G9WVxWJkwWJ579iRJasPWj4u/9HHD5qJQyoPGr6/1RhUmRb2iMskN\nBtYX3cqbSUQfTQEokZFE9r0y/bss32paW04tp5f00TuFAPZFTQeqlLDBiCHy\ni55BGKlG6SU3JuKqZEmNqoesNUI56JpBbLLjf/OLIjHSwR5+HlYP8FIe+VNU\nY7Z7rlUEvP4CWcVgoD4UpvD1MFDbKJk2BQ9Uq8FN5wZHRS5w9x94UuH0cu+S\nU/sX7EoS4cFVUIv1oyKME101fiSV4tAIvZoa9u/5NkDkVFm/xp+Uv7gvLDxu\nhj7tnDlV1hx5kz8S9j6SXcS6uUnVYXqWIqWzqwJxceh596AwAM7w7ttuvBN3\nQy3yfekkX51HoNOCOsmD84eF3FvYc2upyRQso+mY9KRkXb7p4iFKYULmDh7B\nXXSi8NfBBrNlz7sQTM9WegVnrO16812PWonaxNLzW6HWsNdcfOxNUf122KI0\nik/N\r\n=xulH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.70e1efdca.0","@material/tab":"12.0.0-canary.70e1efdca.0","@material/base":"12.0.0-canary.70e1efdca.0","@material/animation":"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/tab-scroller_12.0.0-canary.70e1efdca.0_1625159270293_0.48749680099031667","host":"s3://npm-registry-packages"}},"12.0.0-canary.435866d32.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.435866d32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9d3898252cf7c850311356b7336948008506d172","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.435866d32.0.tgz","fileCount":52,"integrity":"sha512-czElY/91ibco0QyPJ0Ytf31MjUHjlaFnuSX4GDS0/q6Erg56DaoRBg4jr3LHciBdHhI9nX5N+TWSv9Cpva/u0A==","signatures":[{"sig":"MEYCIQD5BlB+p2JLX+sySO7jRlP6qXdSIMhdJEiXKIjIa7AfRQIhAM/xAJ9PZQ+QVgvqsGOEmMsUizZ/fo6+Al4FDyYoRy7/","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg31lgCRA9TVsSAnZWagAAVWgQAKP8z+G/7ie8Y0+6tl9n\nTEXhF68E4IvYfYplziKio1ItU+YRulk+NRtGTJG5fvuTOTTlmoqokYQB9JPd\nf/AeMFWXgGlaBJKqJhaQjVBG/akGfQTTQfyINbe3UUFjHW9RCY/V1fXBPS9/\nZNhYd+QdahckF4FjOHnF/sbVV0/1lesMMFGLtjfuFotmJLNtQx/rMkpGSKts\nPnC8HYGT05QAnE2YZqGFfVNBycthRs/UT/bmrb/KGmjEfA38JvcAWOTIeYhi\n0gwAquX4a7hFeskGEqnsf2cVM54yEdIKsO9eD4lCMeaVkDML82//H46XSEfh\nuSgda52U1901+uXKzwU/S996NEg2hvHpNmLZnfl2vGogOyT1sjcsA23ava2k\n1ej4Mzqg/jOra2epVhchTh9WFV6R7PKLxsqBXhrXUwca0X+epgJ7lsyOTKx+\nKQ6CdF7YT2E6QlFHlKTl58qBUfobSSh7j/c2UAtd6zT+dXP8DnBo1M5QvYsw\nhaNGmoKaMq0umu6HXx6uJqwR0nCiXjhskSNAJcQkllr2PTBzhvVqfzxy7DJJ\nuv9Ny5tOl6a4aB67f7z4xYdieG19J4cTOsG94ygdNGvjsNq/ccLztj6K+tah\nGUca2DUDFrbSTsRdIezHFgCjQXkqHOSaVqcLAsbySPAophqhvMCg21hfB3ti\nbr2C\r\n=tGDk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.435866d32.0","@material/tab":"12.0.0-canary.435866d32.0","@material/base":"12.0.0-canary.435866d32.0","@material/animation":"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/tab-scroller_12.0.0-canary.435866d32.0_1625250143461_0.5754557278239907","host":"s3://npm-registry-packages"}},"12.0.0-canary.d0f9f3f2e.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d0f9f3f2e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4f9b04f74cad83b48659a13318869663a2e12087","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d0f9f3f2e.0.tgz","fileCount":52,"integrity":"sha512-r69Rcc5ei3dMLNMfuEdPz7pwfusQkO0vTkKRz+1cQpBz0LWfmg9KWWntWTZBpjSYIwBWiCLMNryCHrIIQ0yWsg==","signatures":[{"sig":"MEQCIDS34YgTP9Az/LVCdBR7Rx9lEFghN/yGmC7lDI91E4OdAiBHOEdxhW8PzXF2890G3c8IdS0OI9ehih/3uIiVLoOrjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg36jMCRA9TVsSAnZWagAA80oP/jjYNvPiy04zrzeNFrCQ\nkcUh7irHnOhzypXK9JMu1msFI/c0myZyS9WTSMOJ8/eww4XjFCBqzQ7R3MtC\nd1dpMpTVLhjum5xb8Um3RXaCGPdzyjlWCyRfFopTS4NA5POJzlfcLg+x966L\n2eeaxE8KHjY4KyI0Bg5wBiMGsv2Hy1SCqE0g9v59AjFdSGebwBMc14wak50D\nQFjjY+3+QEQXKmHuxHXLiSSwZ+XKRXz9R8P7+SieluIToqtqDhkOES3dlACF\nnj+M8wAn0b9UrQM71ZL5TurHZZPj2aX2pwWU8iap8JDiSUV1jx8YiYLetPDg\nC5QM+fYNMvyLZylhSGpF7ey48ZK5AOiR+s+4EWsPVHm43YIdbbWIeaqgV3gU\nTZ7edNAVWYjao13NbRcDzjdGSmKvNXHYmqSIdwj8geE6r2jRa492iZR+LGgM\njuCmAaqDyF0i0IIc8gNUJjqp7dhpTerqM9B9ogD3tNbVU56DRzpEwK8L5bHa\nXqrG70eCJyyWPR/uyAGl5xgaxLF5BtJLqf+QZkwUxgB+22npmydL4hRiDdIc\n+wlqjokGPVw+9b/d5NY10H6oRibDflu7rKazWgBEtx9wuDr2zK09FZYYDBGZ\nFk47JcaoFI0kejAeei6lmJPyHZ3DWbgsQb7+/2RSV1jPCMYuXvaxmXZ8GzHJ\njOcb\r\n=r/ff\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d0f9f3f2e.0","@material/tab":"12.0.0-canary.d0f9f3f2e.0","@material/base":"12.0.0-canary.d0f9f3f2e.0","@material/animation":"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/tab-scroller_12.0.0-canary.d0f9f3f2e.0_1625270476484_0.4121744917675263","host":"s3://npm-registry-packages"}},"12.0.0-canary.adeac0549.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.adeac0549.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1928d97ddee1d91819b1fd731e07e36fe352fd75","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.adeac0549.0.tgz","fileCount":52,"integrity":"sha512-HfBnmY/ZYLfcb3Adh7YKkK8lfbn3e8X7H1N4PYYWKVA71H+cZmMHB55bPxalB3ofF3WnmMABlktJ7arpC4ZxIA==","signatures":[{"sig":"MEYCIQCofNmp55Y5k/X6CN3AkwzTsPtK8lqzX1qbzzd7cWZgrAIhAN5JlKClBA4AiuTqKg14Wm5sldZL6MVWR5aP2OWuL/ju","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg5xV8CRA9TVsSAnZWagAADyoP/1anx7nxbAhyBmUAApiB\nvewswheHCKrVl6D/3kJQPhu6Qf3W4no/GZtRcb5ki5jbwus7gfOepmQsPQTE\nwV52zZT4N2yaY0CNuH4Sxey3nmxuGNEij3/daguetLpYw55tILXPV4rHv2DK\nmg/1GtLXznUWO3HUoox2hOHM+iKWCaV9xGueegAYOC41rodgEtPLiV+NkvRi\nP2pkogmSkKZ+8hODU/Yb8T7xWOV6FTXqxKESTL1JIRQsK6IfaBnP/ZSdMRqQ\nmLhbD5yFOxQpxC5extVUJAamlzyEOb+jGmhJVKaEBE4JcUHl5ju3S+7b+QZJ\n5OpnUXt+qSq4wYQ7dp0IpwwIjPc7i4zUUY0Ts0raMI7kqBUDZRs1aQ7SJbmM\nqUr9gLm6E2QY1UAZ5/4bVL/x1KS5JHa65YL/7QO/axUHew816sjmAU1iXIPJ\nLd52SQzQF/7+mpR1aYk/xYHzF6YfCV+c8SZL3fSMT+iig7hrjQVF0UdCVCPH\ncqCcVAIAMFwIGKh/duqXPTRzb6L9CvrLHttbyH2+6F0/RrkWDaxgx56x9KVf\nnxSacZI3wP2haPDaSTrTn5HWF3JYLSYA3El4uxW8toDuYMY+FAwNNHhABTfi\nqJ2iOi+6sgYpSI+7IL1UEsEJh23AEhqIpTEfFdL0fv5nDpHZHvWH3aHDqwkI\nJ5rU\r\n=/Eed\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.adeac0549.0","@material/tab":"12.0.0-canary.adeac0549.0","@material/base":"12.0.0-canary.adeac0549.0","@material/animation":"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/tab-scroller_12.0.0-canary.adeac0549.0_1625757051971_0.7829145454153179","host":"s3://npm-registry-packages"}},"12.0.0-canary.068fd5028.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.068fd5028.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"457d7d8e58c867bdc1968cc3df3daf29f66cbd82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.068fd5028.0.tgz","fileCount":52,"integrity":"sha512-eSCx4Tvk1r5R4ANGOCXcBeN3ZQzGPT0qGXCkeK4QpF88iDTSydtM7uh7IumuxASL1RxWUNTEV230LovQi0cwsQ==","signatures":[{"sig":"MEYCIQDxd/dv0rxR3mChmiDy4yUhE4mj7fXFuZQ4RwosHD8JLwIhAMtG0MO7he6fBhiBkP3Ld49mMzAW3ZM+nNdX4CPX5dEs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg50xYCRA9TVsSAnZWagAAvhsP+QHuusf961ULVHFIxRm0\nGOPhLsiIV/tgAMLpCnAatgBi87WXgCsy+O/aSz6VSrUu6nLEKVuVt0Fuk4zd\nNW3VFG6BY/TiLnA4ef1w5mcmNYkIK3GZOFljeAOWoQhueub9YkgrTJEfQfpU\nZow4EVvmhkK+q5J5mbOy/vf6QWiTv80BhrV6n20QlUkHBhazGQVGr4d+lDrv\nw548s9ZJd0+mn+u+/NBIHKMhffEtqdp/OqXhJ9DyIZzU9Jh8bICnMWZunHtG\no0fWPk2l5N42YFyu52FgXFdh8w3jSVDEZqXKUitaSXYBov61ewOQ7N+vqnqq\nOK01CGxd0PoN9uKNP1hbRn35JSqm8gTt6Nyh/7n77AEPbMSTBoe1O2macHPp\n/TWdDOURouVYxvFkxMybqvM6zrssaufcfZhN8yjvIPizrPqNxUE+DQ5kaK8M\nkVp/VayPunzcdiaoswFBbojOBmmK9cMkbD2AVcYEYK+feTCPLxykO607DGSP\n0r209I80H9cPHO809xA84le9cUd/v4zYj2uTTOf9MA/8Oo/apKQAYATblv0Y\n2mG4zKAkTgzPoPP834dN1g8ra+ayoQGtVXCjPZj+TCOU5PaTM9pAxQOY/XaF\nEfXGYVRL+ZpnzMx8TXwXasW7FeGd0Z00uU0+gRjRQwrNiLeSSelDt6IiMi2I\n0tct\r\n=f7aD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.068fd5028.0","@material/tab":"12.0.0-canary.068fd5028.0","@material/base":"12.0.0-canary.068fd5028.0","@material/animation":"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/tab-scroller_12.0.0-canary.068fd5028.0_1625771095711_0.5786641283471445","host":"s3://npm-registry-packages"}},"12.0.0-canary.5dfec7a14.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5dfec7a14.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e47d0d805fcb63b242c8931c1aa43ef8f90c6a62","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5dfec7a14.0.tgz","fileCount":52,"integrity":"sha512-5IHBpx4vkkI2P2dzI2eU/U1T5Tr2TpSRnZGGvbj6CaSUMwA1q1LcdZKXg0yp9C0yRRQCtEKRkv2pDY0dvshBmQ==","signatures":[{"sig":"MEQCIHpr41uK5Gqp61cA/ndFnXKK1JUL03jDDkiGVBIooqLNAiB0Lk3BDMkqp0qgShErg12lVYnzEXCeAuSHRYsprGk2Vw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KCFCRA9TVsSAnZWagAAe2kP/Rcl2Ze5etwnOcCg1wGa\nw8RK2nNeqGbSc+82sYKz+7wUHwTitrvyjaGZPKHzIH18+Y/UIFVzPNHede82\n+LqSURmK8twXkAtv846OHomXlySkpfkKTRQZ+vccNBAGMTfya2B9xi5LI+by\nvpxPt7AG2tCHk3TadG9AcKzptU81VUW4NJQ8VXFXziwVlJtS47y7GgoCzzz0\nLz7ko+VY3bOkxHTE21soaDU2bl/nb5rHZnxsWxBDJTytetlqvgJLMMSou2px\nY00gx3ehzJ3b3ZME+q0ml6qxjFN74uv8iYWdhpKByIZaDKYZoz7HlzlTphUs\nOEPTBG0xJDaiyp6yfrH4HU2fZ2S72sFrzKgcG7x608xl8w4J1e9J/UKbriSM\nIPeAEXTEBGYjQf4Itj+ZvM5x33d1XluDBghvTOVZsMpKpVFFetd604AWHCk2\nqZDNyiHj2S3xcM3Hh+bujOjop1uwQcVaDVbHbAeWuc1no8TLoS71uaHNEHy1\nZPhUxiIzSrR91EXyfSL69FWHAN4m9qSTz3XphPkOWsI619KWkl2/CvGIdpZU\nbL9Q8lnCDZKP/udf0veRQThusqu8zPoyQ4VmR8i7fgsizY2l/rw3ACvCyZac\nzagiAEz7FJPs8W8c3kdlfly3bLuoEwpk8zMAFpIJNp9XNztSrLfrVSYWKrk1\nxEIB\r\n=Lj9H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5dfec7a14.0","@material/tab":"12.0.0-canary.5dfec7a14.0","@material/base":"12.0.0-canary.5dfec7a14.0","@material/animation":"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/tab-scroller_12.0.0-canary.5dfec7a14.0_1626120324926_0.11189675359497109","host":"s3://npm-registry-packages"}},"12.0.0-canary.07a73750c.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.07a73750c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c67118320c094f0968560c6fdc833f83d3ab1550","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.07a73750c.0.tgz","fileCount":52,"integrity":"sha512-4jVJqjLhOt6AesZ2w+4V2FOUyywrt7WFoZMvchQO+a/W8VEg5qlPHssCwtEzztq7LzDl3eh0zWzVV/NChbvGqw==","signatures":[{"sig":"MEYCIQDR92fsrRFZGclDAK4uGjk/3OFIh7S+uHfphADwAiLjqgIhALqTQprQRR3YbjBt19/q/uyv9MNlsfzwDPavsXBM8r8W","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7KWCCRA9TVsSAnZWagAAvQQP/3XW/3zoJ6JM/IFj8Bfb\nIBRrqGSHEfY88ypu84+IRX1nFx1G2zLpmT4Dn5B2gLmYjH/PXJF6z7LQXU5l\n3gI9MMdjshu2xSpM5OZer3p5r0SOd498JcdYseXsC4k+jYX1BB582oNTqlBn\n6AAT9HjOYXZe5rq/9Hx7gi3WsdKoBW5CiMkxac6P4R6eZyfhZ8etK7AK7BzW\n1VkH//FLlRa2hH3qAC7RkBUd2s7cNuEK+ZlXmklnGfNIdObzPJQdwOTWwopw\nUlcku6Y6CJiGXvz21OGumKyAVmxxhvicOGtoDNZoi2BcdV7IZMzdxPvX4ElJ\nGZg3g1p5sw7HEgWVxxuP15mMSWtMlak0nsFRSU+bWqZOSAmfxuCNFfG72fXZ\n4kqqchx2xaSR6UX56jnqUkqLGpdjDTdzgDb9oZvojGpV9VUZDhFvl1/HWsgK\ntV+BDdfl3xhtnJYRFP+zMcpwGGL+DJcVWh/0ru8Ceds8MsbWFwTLi4/52VA8\ngU8AWTTaMJP/Oq4GAU4kiFm7jGTGbSMs04rGGw6H8z2Pb5l8U4LmFZfNVQXk\nP9aalaDPGBbg63cfJWUM3BN7Utn2jvbxQRxwXxEvVfQXwzVKv+Juc7PUKz3L\nxLShQnhchsVGKTsIwByVXTKaQRXpPgJZKGrtTMEPwMSFXb3uiwBHclYnBKAw\nMPSo\r\n=cWeN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.07a73750c.0","@material/tab":"12.0.0-canary.07a73750c.0","@material/base":"12.0.0-canary.07a73750c.0","@material/animation":"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/tab-scroller_12.0.0-canary.07a73750c.0_1626121602373_0.1777071670969943","host":"s3://npm-registry-packages"}},"12.0.0-canary.3e4c6dca1.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.3e4c6dca1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ab44b63a0a1aa3a0781171604bddc8faaa3bc8fd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.3e4c6dca1.0.tgz","fileCount":52,"integrity":"sha512-Rr1GJO+E6hNRE3dsVBSUPZb8dDuZZwR5y37dWr43bExwm6yNnwJtkm32qoUMpe1Kfyz8s2Mnyns89AqhQeaY5w==","signatures":[{"sig":"MEUCICDZHbn7QMrc20rhSZVeFE+KAnJU7cdtBv+bXEjiZ1txAiEA/aamSHvyU5yhBDajMQAjJOjHy/g7xITKSluAX9Ier0Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7PHiCRA9TVsSAnZWagAA+nsQAIalUGu9fT9ZV1IEsOFb\n6KlW6W492W/r8Y3zNeGYAzmSs1m1JXky0TOckwMnobYwlUicv0PJifhA3NZp\na7gvdM2CqcuM/QN3Uyy/UqtIbmLRHkw+FxfJV4CmmgLf5RDF20DD7oc+eRhy\nntF/9is75i0FxrqbgSTvB28G8cbnQUZsEmHTILR4zreTPXZEyVoN7qn5gEwv\nsaqh+PqHLrYAi9c2Cl3teiqwTEdIUqkUA+EgTQ5ZDoOwYvy9k7/EeTdTN6Ul\n+JyEbOnQ78SjfHrrU5c0DYvSwmox9zTXJuNOxAixI3n8lwZKUl8/fDC3VigY\nh9Y4N5+dtTP8H2w3COYgHE+Q1ejyo1yvyfV8m5KVbXQOedVzU56k6V/90e7B\nnSuXr3MPb4JkoV9U6vbhF8BFhwzZC8PXOsaxbW+AnAHNaQN57sylSG+RSG9v\nJ4gwYMG5LezO6DBO8sojU6USmmYDoax0xUJVhoNOQzdkvcRIHiF+eZyvaBtE\n31sFrs+9Lg/WohZGjJCrXsDdoparYTUF2Bx/QD5lbk05ddLD77S15Rw/A+uA\nv684L8TNxfKsmoshC30/3JMkWvPCSYTEMWf9SZn7cz4qFgcnT24jcnaoFvrX\nYm+vEvGgWO/tUUeV3aYUMipYDefMoWH0xROtqGvtgdaZRM61FQ5dXzJ6uZ0n\nyF6m\r\n=Uimh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3e4c6dca1.0","@material/tab":"12.0.0-canary.3e4c6dca1.0","@material/base":"12.0.0-canary.3e4c6dca1.0","@material/animation":"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/tab-scroller_12.0.0-canary.3e4c6dca1.0_1626141153605_0.4932548508220409","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea77795b1.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ea77795b1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7949242fda7191368411106fefd17f283f2ae2b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ea77795b1.0.tgz","fileCount":52,"integrity":"sha512-WNtecLUjVKdpwWfer2Z+O5VcE4ALizSPlydQQmKWNXMaVFrFpR3D/qoh8jX81LtAa9nfyzuUjyhDDDOhVj48gA==","signatures":[{"sig":"MEYCIQCpS1zx1UOBUHPCE1q85XjzCgAK66XdneFy697Wcn8hzgIhAMSplBo6FGOd4KoIjR2Ocgf5dqpAiQfqCYpAkD8XQQTn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7bZLCRA9TVsSAnZWagAAhMYQAIhpufj85DB5+JQ77/4l\n5B2fEGfZBmUedDw62Xkwk27Hb/xGouXo4nySmwMn72xbY8liGYK38EHIXLoJ\nkbB4blDG50uo4AXznCn+ORRkV56OSsRCa5zbeAFe7p/B+/rF+ZuymGm6T808\n8+2I3HGHQb0eOnFxh/qIPu+WFdDUxisRdVTOmIQtVkaikxhI44yPjlUBH+N3\nT2Rgjxnf/rocaap+1uas5rbREigYItXNxTB1owQCxcqvzTev89P1RllP9Rzc\nPlm1o2pdelmDVGdcuWbDc82Wh9+KvdrvBk3+KIbm4qmCyjy57Sk35HNN7NWP\nRH3LTp0a87xBzcDBuWrQm23EM3OzTzze2Ykd2w4Bvb0CZVUk/5ex0IAq9wUc\n9rSJtHpj/SiVaAhTLKFTkydCUZ86M/TbJvW5L31jh5eoHNjTOABKUvOIWUGk\n3t22Xs4YeiSst10mx84zZ9MBCY3pt5cBMxMml5H6/5JH3hR+Du/TFlLehbRy\nGKXzjunvnct5dExRGtNEg6OLsILIOvP1zwagygUiqSWj28vWGOQUwJGdMwTB\n90zHW2+yjlvLpCxN+m4AgonL1mVrWsm4aYT+PWiNZhB4HH/8l3aFaZeVtnzn\nYhcnRVg9nNs/CRkOVYVT7p06DZ+DyivMn0sA/QANuqbTvUDYv3qkWQKEuauw\nH4lB\r\n=pQON\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea77795b1.0","@material/tab":"12.0.0-canary.ea77795b1.0","@material/base":"12.0.0-canary.ea77795b1.0","@material/animation":"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/tab-scroller_12.0.0-canary.ea77795b1.0_1626191435566_0.9561988003740918","host":"s3://npm-registry-packages"}},"12.0.0-canary.15a179fad.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.15a179fad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ea98e705d0aa4b3f60995a716d2244f6fe59d5d4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.15a179fad.0.tgz","fileCount":52,"integrity":"sha512-NNEspmiIXM1VLsiTreSEuAHVTY/TJEq5BkK/IECAbFDmjSxspC3c03t+W+c5ATMjwqVDdSZ4KGtY6tYkZ9kFXQ==","signatures":[{"sig":"MEYCIQCXKQxfuHeKO+0zjV5WM6kboYtzyc7PhBQqfjRtGPwdZgIhAL8EkiwV2YvGxoj1G9CixVdkXx1UMo4XnZHchIuvMeQx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7dclCRA9TVsSAnZWagAAeH4P/jKKqGdfSUww056KDHKr\nHhOG8sgW6mK+Noid9pSSiH5o7LISgBB8m52AExjppeePemOMtEJvt+ORts31\nHK2PY8cd8D5iTOQ/A1ryz4icM7M7vt3GLIyLoScmO9I+NtN9gCHIePENlmdZ\nPX37uiy09Tcy5ZFcy9xtFIn2pA+ao2DI1O18UM+uIuxYfQzzSkza4tdYrU+G\nP0Puzup8uzPb+plBZgZqS/TPFOiaBcLC+///yFyuZwVSSEwjNP5UweedISq1\nx/05r2fl1AUPUAERK14tbfcVfurQZhToAN0qga2WyHfaG1T4wi3LMeRUQB3O\n4dQUO/8PAaps1GObBLja+n6/pNoT40Plmu7eFVc50JEybobFaIpjWlSI6FDz\nKua4AkZbf+FhGQYsaEz0k9kFtLTsA1fOGNrVi2jnUGRfYECGwdTcQ50lVQ9e\njy9x3jAugVTn/54XR2Gb1lGBztFttgOiXUAzt6NWCxnYIpAAdwzQYqg9C5n7\nmIbqHjFALZNRgoulyH/sC3vXg7btvf158t+Jz55p+/miSnje+l6lTqwmPKey\nrrONqnBXK8NWRyhjsthU5DZQ8lRG3qDmhE6R2C4bqbbmWHpUUSEYcu/97lVR\n1MfLnNGimAIWfgZ1cVMoauUa1RJyVCJaplVpastsWeQoI0FRPOsmSJhpdB1z\nPFAm\r\n=0Kbq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.15a179fad.0","@material/tab":"12.0.0-canary.15a179fad.0","@material/base":"12.0.0-canary.15a179fad.0","@material/animation":"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/tab-scroller_12.0.0-canary.15a179fad.0_1626199845368_0.7644926457152337","host":"s3://npm-registry-packages"}},"12.0.0-canary.c73142a1b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.c73142a1b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b42f6024b439dd18075e38467577822680f39d63","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.c73142a1b.0.tgz","fileCount":52,"integrity":"sha512-SE3CrEGXCYTAcK6A9agcMUYe9TOKd/Vi+hUl0kvAhOZUwmDzZbJIab8jU+pCk5kPakndV6SyPkwo9PcR/kZoDQ==","signatures":[{"sig":"MEYCIQCL9LWS192dII/O4vwMHO7kI4ei6ITs9hXng+BJP1oQswIhAOltA4MN5YkLnfgY16LNbnNwttIsPmJ0q3y8ji7kRpm+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7d9ICRA9TVsSAnZWagAA04MP/iS6q92VpPjBVZtFCDT0\n54iSlYypcij5xrdRgM9ZQ/HVwpGSKnaQBS5kZxZutXIyFDT6FMdNg0/jlcDg\nR9LHiSFu3fTqV96LW45KKgR/ijSwjz74S3we2nauXuvRrrnT7mezlwwJH8Kd\nYb1i8e3gjowerFEwcQZgREd/Q/+EIeT4fevMTEJsSBwsvpykwmV34pkWxc76\nTBCiO1Nr8j31vTGe/NftfoReXsjUXL5KoouhuRx50+N9kK8NDUxEZNrVEiwx\nKt4DUvPe0pdn1qqyOayn9GOliM2WcKXc+f8SqRSudbDxbd9CskNWHlwIrkCj\nv2LKigXVCjQO8YkYT2rtaLzx124OXrzC5RMhyXYWVGrE7EwM1OzZzPetZ0b0\nku/U/EQpkamkGoiSH0XIYi/VCVLfktu2uah5IAos+htIReemn+g2R3Q157E+\nKSZ8zBI0zz4+1smtyG5hZnZm0aShZLqHf3NIAu0wAjliTTAWgUnG/wl7FuDm\n7tB0ET8Jt5wL5OVo7pIrotzWJ0aZ37Rlfl80kM/KoqGRaVXyGe55oSGk5b9I\nugtISz5B/vK0a2NGd3jO6tMFYOAm1yqmG9CL6FydPkAy5TlfzqKPN2VqTOS5\nTqdpzxe2I6eVFYkQXmyZBijMDv5yZxbzn/XdKkLg1JYmumh9C7//SK1ACIgD\nWT3t\r\n=0Ebs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.c73142a1b.0","@material/tab":"12.0.0-canary.c73142a1b.0","@material/base":"12.0.0-canary.c73142a1b.0","@material/animation":"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/tab-scroller_12.0.0-canary.c73142a1b.0_1626201927882_0.6873699356744938","host":"s3://npm-registry-packages"}},"12.0.0-canary.d923db73a.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d923db73a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e0cb3d755e1d7bd0beedb0801caaf0dd27028cf1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d923db73a.0.tgz","fileCount":52,"integrity":"sha512-xgTKE467X19EDy/zrVlW9fFpTANpVJxivoaYdmNWTIprdfzPIexI9eDcYs7HcbAI2YS71XGEz5y66t77Zgy1xA==","signatures":[{"sig":"MEUCIFEuXGUYE6jMq9gMN51FJ3sGZN+J+YbCgrJTkW7TITT+AiEAzk91Dtbywqh45MKX0wviHs7EdK+FG85AuDrtsFKQBi4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7f2vCRA9TVsSAnZWagAAyvUP/A0AE1fQzc1yZPB6Srk1\nwBDCPTbZ8J1XWIOz3Gill7ZPMr5vDEhQ1yxPyDTbYlY4c7SepyzPVuYm0uPP\nQXUSpUfQsttSvKKc591j9sXaMklE1pcrHA6pSZTArn1dsyBXYOYdbxshysuR\nM2pIcqoUkhw7Hb/B5dEJ04pxFFtK1bQ+BgZgDYDEH5/jSJ0/atdes0sylP8L\nICSXoMAs3UHYGP+c98bat159FwewuiiGcCIufd9U1tB2hiXQ33VivVqNEEZJ\na4g7BuBbLnqeB3EdX6/B30hlk+lOKFLSSuF00rtbwG8lQsSb4xFi7hTnEAC4\nsbZqh3+C4+qUnXDaHRXSY8h9ggFkTjc7PhMM3o70svKz93S6yBsBUF89chdZ\namGF+zVW/9LOv+TVsBTdqtr48KaU3UFEMG+M5J0AMo/xFBtpTWVimpGr9olX\n1R8e04LncC+FnxkdzEeararhtxRl/3jTISTOi3qCGGct7PC/XNr9IX8cNH2t\nTT/9t0jBIvNQ1zOIL8umcX0uYpSoRHTHGyXplX7elMpcldK1Ad5LsciUTrA4\nY6P+Fn1FJAZabsvpEEpgXAreguKspQCXfyMvCwuYeqxglmN5i6ffME+ECEBr\n0qmSI9/7Qn8zDI1ihgxKl3FLSKRrSiewyroRPAJzqMdB1yS+1iPTkJ2DL/i8\nxhCm\r\n=2Z2+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d923db73a.0","@material/tab":"12.0.0-canary.d923db73a.0","@material/base":"12.0.0-canary.d923db73a.0","@material/animation":"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/tab-scroller_12.0.0-canary.d923db73a.0_1626209710674_0.4290653247071248","host":"s3://npm-registry-packages"}},"12.0.0-canary.22d29cbb4.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.22d29cbb4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"44d9c07300dc5c7468523d950d45daf2164ff3e5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.22d29cbb4.0.tgz","fileCount":52,"integrity":"sha512-IaFQiwJ/MKhbFvKcGmlAFNHCxXf5THyjefgzav/k0Fu49vzQFA1ZiSTvPU7/d0vV/G2amaba+l5w9TP9/n4KFw==","signatures":[{"sig":"MEUCIQCLMIEpKLei2fsYpQEMgwRBtwZBZZaf5WEteJ4CVXe0igIgS6BC3tWUKj0nhU1PmIFzkcnrnCz761qzcZepAjqItrY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7hkPCRA9TVsSAnZWagAALdkP/05bwneMS0O1saNE0kK4\nAYVUlifeRvAFEhofTSyhQIgsmbGf7lCHxaYSAVUwgxwv5UVSUqBebAGRU1ay\nJV8J/3I3EZCdNfpFLjBFZe/FtkU0yDHQTMcFmOzwKP83II4CgrdLQ8484vbD\n9oV/7iURK2w/hGmzHq+T4ukIhfkJGcYydU1LZNLt1O5xseP+BNt8xyiMGBag\nvvY83jC2VKEkM+KaqYPIoE8v/v5TtNFMqlNbtHqf7FdOzxFUQRoEDZnJW8iL\nNUsYsm2YGwCNOryyPP9d7GJ5MXVv80eZ0Pw1IAEoSnvw9+9YTkrOertf3MNA\nAkcr6iIUu9R4xvES+19zev1X9VwrqIn4Z1GpExGPXbtFjv+cwxMJbBz+KQsX\nSejtRDbQmO56ORzMxS5S7v50xK5Aqiun/HR/ME0lA+yZ7y5+tcrUz2O5H+0+\nLq6vQVZxkdJ/YW2d+sHALgG0YULcJenuW7gi7n/p1qII8T4CJRcIrXFm0uAa\nTxbJNlDXKOPhJGBXn2kb+3DQAtvqQof/44pFsJ4NvsaVCRpnIXdeYkjd19rO\nFLcYS8asguA3sdqyRBuznCk14hZSYPFnpjFlkeTq14N3Wc7IlpfQu/2//mTZ\nYI3O+B/3gLVsnl6DpqIkZOeC5K2cjSCoxx28IO8HteQqFYmCDThm0e6oEHJT\nmrcB\r\n=02Re\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22d29cbb4.0","@material/tab":"12.0.0-canary.22d29cbb4.0","@material/base":"12.0.0-canary.22d29cbb4.0","@material/animation":"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/tab-scroller_12.0.0-canary.22d29cbb4.0_1626216719333_0.2595779400182634","host":"s3://npm-registry-packages"}},"12.0.0-canary.2749604bc.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.2749604bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e947b1141ef37165f4861226cde6b6856626dec6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.2749604bc.0.tgz","fileCount":52,"integrity":"sha512-cmpsAi1Cs3Xxv3s00cSK9mswSC8ZSbmQ5pK9dnUCpDzP9Xt7rkCkX19+LiTapWVZ2SQRw/gklem8L5eQgTqOiQ==","signatures":[{"sig":"MEQCIA1qiOgTyCNEWxtuo0GcmCO+PcmSbmvhiEzivikFJCqhAiAiAA3Olc+hr8YJZ8cVNHfp9PoxMK+EwedWRWvDKHWuqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg7w+SCRA9TVsSAnZWagAAUvcP/298pHmrMxXXcwbXcRAh\niEyGaNIRq8uDg/kVyIzWUGHJIWKn4S+mXbPgIzULRJhlgaTYsBHM8wHUno5A\nH10OsLM0ey9IaQjeL+7Ks7wbOSxlAITJyu6Sp+/4VOS6iYCSCfqOTckSACRX\nAU5r0hL56iuAEoeQtSY3rb7FqrbjRf6MPAUDnzlb1p3QkABQCydOP4yRC/nb\nFqUXkZVshFb4kQzaRuKWsaia7226ZJvvzVQ3nZnTHhoG8HNBGHdIxqyEEWnm\ninInmcB7rKXWMJJDtdmXf1P0Qf4/jz5IfzRKUNyyj28hlHXBoROMvrKMdq3p\nudnLccOnCoejKncRhzwkczXYCqGgd//TD1PD68yp9A7hMo+ruu7zkvW4YwmL\n9eKmr5RZhyiHNFvuj1qqUG1AL2IIUGpRRWKTJpHqx5JbkogwwFX36DkGUjKe\nTuPhAv6Ih+ofmO/CtQHAakft1c+1Bvjzz8JySJdrtSae3BN/jj1ncrKQ6Jb6\ntqtGfXCh9UHTu6xDuWbhEYS7wc7DoErq6UjXltIBKj5BFCKp0VXJY0tdbnG5\nsC7s+4ZMsEys+UslUnfBzj2o9yaN/Tqtoe/5NkEwrHYftnKKOdVfvga+j1JB\nsebCEvVjstGRVscUfSv0M93z16Vh+UaciT3ajp7225/NtoSQ41c4pv51w4qk\np0eG\r\n=nZan\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.2749604bc.0","@material/tab":"12.0.0-canary.2749604bc.0","@material/base":"12.0.0-canary.2749604bc.0","@material/animation":"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/tab-scroller_12.0.0-canary.2749604bc.0_1626279825753_0.1202391596366914","host":"s3://npm-registry-packages"}},"12.0.0-canary.e1703bed9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.e1703bed9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bd44b89996cf6641e9a2ca056de188fa6f227fe6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.e1703bed9.0.tgz","fileCount":52,"integrity":"sha512-+l/uxisGFYNs1ghjEL1fudJs4BvQK3CUA8TXhPdH+gvujq+yGbaCE0hOs+kYnZ76cPcqo26t1N6TKE5Zg2ZtEQ==","signatures":[{"sig":"MEUCIQDImtpomWgkVDxSZwFw97kTjY+AZ8EUcNvAX8KTBNPx7wIgcYirUrjgssD2ml8D/aMOyxvY2yBHSj/lSraFTjDnGrw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg71vlCRA9TVsSAnZWagAAL48P/2bmXLPPIgBVVqhBKWRb\nu/ranK6murSz57LGVx+5L95kY68/GLr3Xt4F82he/98tXPw7I/aWMJ4H9xrx\nwmbYtG2ReowJWR6JmZQUDwsSeFXZCNQCJuiA1A+wftTb5sI1H6EGPtKTPxjR\nIOgyciUJ0ynDz8hkfVGQ89Xm+AUTXHqsIhrXiHYgYTNqqr0cyC9CyV2Uf/Vh\nEuZiUBIkMWf36EQiL9ltt0/6ZSNarX1jcvx+FK3WoyiBecAqUjSr3L4oYBwL\nfcrV6BFfAAZspEo7Gqh3l7ftgmnUTtBSjHmK8rjNj1TzAW1qHJfNwZKkKPED\nuKqupwgNjT/Sxvogz7z7rRHYQjV3FsJ3t3CSNcwQV6y8GVZrn4ga/murwLTI\nc/a5Cqp1yM/Zdrb8kmIUIyU54HfRX1j7yJZ73Aph6sA4sKgQsqAZStMasGfK\nWByuiVHU931pDLePeQnJtslwikXJUJpBTUXHl5Kpx/OLUFlOtktaiN5nUKnj\nDW4riJdoy4Fdiqb/trNCfYcga7y9s71O+jKjJg7iaxcOt3ixLNqspEMGfFyd\ns6kuW1SyQJTYvcFJuFBGVgbTkme+HxdcozEWhusfhMXZyU0n/WwE52M7XnBv\noSgyi/cQRsYm33WtWryDOJO5dZENnVVvG4NOF/xhcWXfT5M2NSfc8lNFMoGV\np+DX\r\n=v7k5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.e1703bed9.0","@material/tab":"12.0.0-canary.e1703bed9.0","@material/base":"12.0.0-canary.e1703bed9.0","@material/animation":"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/tab-scroller_12.0.0-canary.e1703bed9.0_1626299364670_0.7411069174247364","host":"s3://npm-registry-packages"}},"12.0.0-canary.de48eff0d.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.de48eff0d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ed2f5d941ec5ecf9e9eb987ba8352d026d9dc89a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.de48eff0d.0.tgz","fileCount":52,"integrity":"sha512-V0ktcCTNV/GUg7nSEl0ICkLXYRG9Ztdnq1wAszWKvwVcKgVE3fC+h8jmXT7InaR3K6emr4o+kCjo4H+6b71J/A==","signatures":[{"sig":"MEYCIQDDp6lrOutGllV03m2+3Li0PJed5j3naBnRawVL6t8K4wIhAL9ih9INwSOv0UN+Zr/VznGCZPmy4Rp9oi3MqO8028gp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8GvHCRA9TVsSAnZWagAAt9sP/35OkWOTVdAsx96chK5F\ny/bf8FThk/7I3gq9dOpxGvfYREP31se6Im9i8kB4DVJQANDq5Nio0hReR/Mc\nVOTODgauqxDu45nIjSut8lqWXgjofq0mLNT3m3xvh5ZqkK5rupAVf+y1z6oz\nTKTMV22Tkze5KX2fyRNP5nBZcYZjIO7nQMj+MzGCd5H8DUMnhxqXD/1Hmpsv\n77fVQslEhySG/Y3VAB9nKKfdaUIEgzqUQvxd1Y73ieQQH3XY8bA8gw8P+P6S\nB/HX6UqTNBVqycGBj/Fac0YEF2JIPSajNmH48ZM8SxOFiLG5lJUdNecWx0QL\nhAJ1AxZOZGcqgLh/+BQWcxON77U8vwvTq4Z4goYH+HB51C8lR+zhM92c2ZqN\naw1cgMKMiB8gM2B/snSsxcUosfWUKxn+jpNIzJDD/ize1fUkSpvHrtgk1gM3\nH5r2vQDU9B6DRJa5P98GBmpJmmvBmA8aq3P6qh/Tez4JdBtjj5kry1IdMPlZ\n0irGXe244tlFPfvE7KmUSaztdDsMR85pn3AL0ZA1bNLFXX7JQ/1E9MaEu8Ut\ngMjBJYxH0tGge90H2uvIowpPOHmPUlkekr0CoyC70mitupsKn/qiqPFUcrRs\nGsgfzMganrXv+tPSVAxQP2gOXL11TUUW591UGjq8zqGwD+3y3x8h5FjdKGIL\noj0a\r\n=LyqK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.de48eff0d.0","@material/tab":"12.0.0-canary.de48eff0d.0","@material/base":"12.0.0-canary.de48eff0d.0","@material/animation":"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/tab-scroller_12.0.0-canary.de48eff0d.0_1626368966956_0.05201840088314613","host":"s3://npm-registry-packages"}},"12.0.0-canary.4f060adc5.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4f060adc5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"33c9f8b06ff4b046d5068bc3c605251aaf49e150","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4f060adc5.0.tgz","fileCount":52,"integrity":"sha512-VYxWEfGw5qhGkm28wc2jWHUNH8pyX1IO7P9HQ9ga3T7N9nIRnKziHEanJg/2RnPWZY5q36V8WhVTxx5oxMdepA==","signatures":[{"sig":"MEUCIQD1Yk1tQmihwHj3Pqtgl4Ios9pBDhL+lWQrhDIwGl2XCAIgEWSpIhc1GTaH2i2AisMTy1l8ZcrozkGHrr8FguIByjY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342917,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8IsfCRA9TVsSAnZWagAAdlIP/3I+H8B035prMPhKdHA+\nttNfKn4nZ2jFbSwej31zRSwwQsXEnOXOIlAOj1kXXdm+I4vQCEo853P6R0cH\nkzS8zjoe9pGARfa7x+MAtaTpxXx0OYlxiYP2Sa0ICDug3i70x1SGwL/vl3+T\nZQWYltDssXag91jjrae9zBqgjZRQjA1ZpWHEbu1CE8wP1NU5QYGU30Qi8zql\nHjo3Y9xw+l7cUMon99zWtIIVVjw+dX7lA1BcTt3bcmc8CiQVgzy8Ed9VUMGb\nEbDrBtMR7N/dusXfvRD1qtpQbG458ZHWUy9S/lBWjM+Cic54HzX6RPaly9NR\nMiOPxubyeHasmWrqEO4f1kIWdhM6Fg/rf82c/P0nUhHztgBjwKt1vOW5ULz1\nwTWpx/0FsjWCvSKjmhGz8y/Tczc9ljpzgLx21osNWdc0J5NrXcfESTfTxwmH\nKMWl8NPaBV3l/LlSe0oinzw3SmlR412CIl83x4hFqYJPGWvvQ2x8hWpBnZo3\n0sTo4pximRguMr/XfG1qIQ/ZLkNzTWT21lt0lvQaPja/YLTfdq3icTbfR+jo\nlJlZvoAKnbA+rzG1lh5faBG9P/pT8oRfv2NRBv/ieYk7rZCa9ek+yZOZB3YW\n8Z9+AP22joMV4KME3Duyq3dbXrgYx/rzIF14Esxm77JJWlGAkRzhD9fMc+6G\n2kdm\r\n=U5dd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4f060adc5.0","@material/tab":"12.0.0-canary.4f060adc5.0","@material/base":"12.0.0-canary.4f060adc5.0","@material/animation":"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/tab-scroller_12.0.0-canary.4f060adc5.0_1626376990892_0.6688587243668325","host":"s3://npm-registry-packages"}},"12.0.0-canary.bd25779b2.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.bd25779b2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b81b956aca03163798713143fadb8f7225304a6d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.bd25779b2.0.tgz","fileCount":52,"integrity":"sha512-CbCTCrXpO50wP9ppZjrm+PqUdu0/ystztipyDVuw7x1gCBwXqaMbbedZyX2Gg0uBbKfoo9QUQ7uU/sN/t+1meg==","signatures":[{"sig":"MEUCIQCjaxrUkimrROoLMk7XyMGq2S7TMZ0v4dkKVmkeQzJh5QIgRmiGvMF4yp+HgusYaI6X8dB64/iiAgnjf8oTl4GtNh8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8J31CRA9TVsSAnZWagAAmp4P/Ro5fYpYB9zbdP13WAj5\nbvMSuA1lMeO7BYGzF3nlqNg4M8U791GiydadJqLBKPe0rptwb2w6zyZ1VsYW\nKdpuWqqV5aRfl4qW1yaasEgWdun7uIih6UVqjTLDaOnJOBv6/qIqiC+cWqHR\nH7ZXhj0/KMeGhSrBPPY40TB0titwPNTAP4FfQ1KUnMorCXvpbfsD3S4kv2Mp\nYD7Kf3tcK3NGq4qzSJtaRtwK9kTqNeQOPkx+hPwARnMWGAhgQCW0kPgO06Ay\ncXYWZQ00cTfTI1DAYk4AJYBk6l3c3THgdHFa8wiyDT1CTdkcVnA/4NcxeK35\ng2Z9XyJWTF97xTNRwk33oSTjF0wjhDk456LXxsRBa9nlhrIxk1ET9iOB0SeG\n5lYaK862HoNrOcoKJoBFdGk18xuICFBH79j1n/5bQorRvwD+Ux4dbaGlIzrz\nyu/ZU3n7xsCtd1dYHuyb+UogMKUMJ1q8fTmuf+7PDjlIGdytnYS40rzp0gJ5\nROIK6x+4qoCCxgQ5Inl8k0K+fFpyRcIDFS53wVxkC7gO8Pp3rAj03J5TMN8I\nmWyeNv5woyPYGZpK6ywlVmaABBJo9wB7VgjiPKFGTS+NpnJbDwhyrKxWiA5i\nrWe1AlcFvIULTW0xSPNJdkhTK0iI3dhbNrUirkSWR20/66qp+WzaVbaOffMN\nFgnw\r\n=zrNL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.bd25779b2.0","@material/tab":"12.0.0-canary.bd25779b2.0","@material/base":"12.0.0-canary.bd25779b2.0","@material/animation":"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/tab-scroller_12.0.0-canary.bd25779b2.0_1626381813060_0.9403852076989314","host":"s3://npm-registry-packages"}},"12.0.0-canary.9f68a932e.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.9f68a932e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ffefca00482d392c7b731e97b8829c870a5129b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.9f68a932e.0.tgz","fileCount":52,"integrity":"sha512-lw9Dky4ExIn2lmIPVFEywOPkex9vky+io83dWfI2fvC0MzCYNw/2bIsVJmseFGryXPXmCaF2GC7L5mZwkE/EGw==","signatures":[{"sig":"MEUCIGiGdiyHbbEJ7PpHJzJgyvl16V1UmC5C4BSbwfVHiazUAiEAz2ky6FX9+G9jQS8cjKO4WcraCJqeTdD6rldRcCCJqhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8LHYCRA9TVsSAnZWagAA+YcP/RdbG6HT+RDUEs0GVU/C\ndQTfx6En6Eo79XVcrF7dDh/fXCDRXuMM6dnz0AUrwlGR502jpMMwWaRY2oJI\nYs+mmmzCR0vpwp0b/18xVmxTcnoIdi2Ft+a79+yXN8CBPbR/3jhhMEM7dOBc\naDNgwP/uEnhePhTXAfizjqSo50Cd04k/F4sankIXggyM7emYBVau6b4fplNk\nf8qvEh2nih+pjru59JgJM0r1L5fAjDv8WFa6GLf/mRKcBFYDjbU/tYKIITV+\nDN1QLTtz70mIA+YDxoe5X5QYTh03qHhF/CDZrs2rh8Y+3vLvQIBHvbBqCmyK\nNk38dyznnoRpcl6bD+WPi5fx/uP7ftlquFalyqw6d4vrW82Gj4F2LYzVyPQX\nrpKAKnhRfacU7WWMxtWJEUI1QFPdH8sAVy/sGo4lm5mgy6gky6b7IfIJxSO/\nbybk9lNzwGvV1HddjvBUgpStbjrIb64P8EPBh+PU0irDPJoRXmzbyvwXAZtm\noFWnABVuRt/H9i2DyvJvX2lUyaY65Y31PUlcugn0W0z5M4jGEd33DFr38yuu\nHHoQjY3+0bJThp/hA/vskkHPRG82mIA56Vmf1iUwz8YxDNeemIjoei+uI8vP\nQi1woJSNcQRAKq79qSH0sUnMNDclGk2Ho8khbMVAj+f23sVf+13wLVDn8yIY\nVPHc\r\n=1Iy/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.9f68a932e.0","@material/tab":"12.0.0-canary.9f68a932e.0","@material/base":"12.0.0-canary.9f68a932e.0","@material/animation":"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/tab-scroller_12.0.0-canary.9f68a932e.0_1626386903999_0.6630193330792062","host":"s3://npm-registry-packages"}},"12.0.0-canary.4eecdeaf0.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4eecdeaf0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"719d78058f0ff4eb0900f9c5a750e8bbf291b857","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4eecdeaf0.0.tgz","fileCount":52,"integrity":"sha512-Br7Izj2MV/8xoVN9x66lwpETMRif5TLtAqifAZo1hRVOzmc7byFSY9Y+GocY//f6/KxRcLnrDgoV1mwNv2eRsA==","signatures":[{"sig":"MEYCIQC7nlXBFwiEvoWmxuNfVdin5DEkLWoA6gDy9LNx3tizXgIhALrByLOT8dlvEa2DTV/vhPCxSD3qZLlRnkvf4ff1GBWN","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8Z6+CRA9TVsSAnZWagAAZLAP/i8RCdoRb6ul7Pn5hh2O\n3yAdm7FDyHSKSd0ST+Zj4AuGzux8FUOzs2ws1OmMjlzvMwYKiwrkITayr89E\nvW2Ukw6mtrypprGu9cJiUrKLOM98w983/iLxHK/X/XKYRd5VwG/4CUmuBe/5\nCCFSarzJHPRh6JgxM4sOjScfYQAlQ/0PP/w4a87DF/7RubhdFF8ktehpYTMg\nbM2MupvxYw+2cxJgIN8E+eyQgwtRLRPfF6wWIDcoxpawTO9dqOJPtuECtsFJ\nctMpmXVTwyT0VW5WJxx0jQAkAdr3rpEdgq7BLZdZ5DykLDjjovvM9DliyuiP\n7kn3dWZIr0AfmM9D/SXvB0Gx1bt5ZxBqshKHbXKA1t7XDdRjOUe+GpWdZR1K\nFysVFL9v+QAYnjcax3NiKOQ6na2+gMEaAXAYeXVFR8GHeqtkEiS3fFHXM8pt\nuork2irHqN30A8WTek5E0EyPT/vYSbcaWTVhOHAkisoBZSwfJb6YoIZleBSU\nFsggjNur7SjmG0aV6zmuxckhgKV0nzKuO5g6kdItKwSGFX/7upeD6mLiGJIn\n6aZokdRsMoAbY1Z/l26WwGEysq3BW2jeoz4O9NuWlqNb7/LPj5zlOxQ+kxeh\nEq1x1C+DK+R4nqzcPbQlp3IO9Yls12Ns4vrkriqFqriKvJTR+3OWW1c8mSO7\nxpxD\r\n=sOi/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4eecdeaf0.0","@material/tab":"12.0.0-canary.4eecdeaf0.0","@material/base":"12.0.0-canary.4eecdeaf0.0","@material/animation":"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/tab-scroller_12.0.0-canary.4eecdeaf0.0_1626447550030_0.15425525438071763","host":"s3://npm-registry-packages"}},"12.0.0-canary.7239684d4.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.7239684d4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"76e204dc49551765ec2430a4bc2a78adb4ccf5fc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.7239684d4.0.tgz","fileCount":52,"integrity":"sha512-ah1gJn4EAgwhubpGE+TnVu2eBs9r3O97/zTZDcu6rSlIrQ0ADiIxUhVOnS/nJqnZG20q4B+OGzRUfac0xTfPxA==","signatures":[{"sig":"MEUCIQDnhqztCSOCqKsOLpSpLBYxtDxm119duPbrnQRCosMxrAIgdHoVxIoGAKvZNWOMeLL0OAsRSIAV8lr4aAKtl68XStw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8a0UCRA9TVsSAnZWagAA8EAP/iDIpH4F9MsY/0pkTgi0\nZuN7JpF+XuQObibIbRQbcuTvBUhuiuk4+02awrK2qLyGrnMz4U/Wf8eOXPKa\nsuo67ara6gxDBFLLQyjdNizfxGx4gbEc7e9luSetFuiw64TBNwMh7WSAXu9t\n3tzxpHy67UyquJ0p4EYt1oca8tKgssHqcGbZUYFS7cV95fgabklsCpOrfUNh\nNP8XSxBqB+HhNwGH6bQjNmFIKQoleRFFPiylAuVQpHTkoP8Tn16N3oL0K5gt\njiWTxSynp34iNRCoBYFLv8kPhco5gyVJUHMNDAQpUNVKQwCKcPUKtAGwMAUb\ncjSkOq3esNhCh0lNcD7YOjySZm5yEpiJn0CVDc+pUOT3FHv9CMdHK9R2uKxs\nGb++4kJNBEmDlYtg385THtTfSUsm26mZEHCnB3rzUg+ODrUiC1PDKKWAQPFX\nPS4Pd3ND6ABNOhxpdEtCw/InyO+ALVyLu0OX5Y7BC3sYX+4T/CWwice6BtwF\nmbvmtdPaCSu0qKT7ZhDc7Es25KpOzAjGBPvz5mCWQrPvqLoYd59Yt1N588L3\ne17FY97Yg2emS6BFLlHLFCwt8usIMvb632CrmPauFM1gJhRRIbd6JrwnEG8O\n9Qd+XDQzMAzIoM/YEI3lPUWw2eWf2dkIpQTxIsNTzkr6pAEAVm52sRlH1/n3\nM2KO\r\n=6rNz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.7239684d4.0","@material/tab":"12.0.0-canary.7239684d4.0","@material/base":"12.0.0-canary.7239684d4.0","@material/animation":"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/tab-scroller_12.0.0-canary.7239684d4.0_1626451220094_0.6658932087938445","host":"s3://npm-registry-packages"}},"12.0.0-canary.d5f1f7c72.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.d5f1f7c72.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a65a1f028d034615805e09494fe01245cef6f416","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.d5f1f7c72.0.tgz","fileCount":52,"integrity":"sha512-2QY3V0RT3eXRs2HExcIhxVHdh2k++2X5yg6387cH7PoYhT3tUUkUzBEwPBKDGbc2ueVtEVge7LULpdl1Cq6pRg==","signatures":[{"sig":"MEUCIQDNMjhMORl1Qz+aSUVCTzBo3AP3Bve84K85FbdzWK1RkwIgA3YDMTj9+rc6vz5S4/T/uzX8c2ylvVq58r4ySJ7iKXs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8bCRCRA9TVsSAnZWagAAptoP/jCBJtylDs9XjMxJOgti\n8sKXRZAkOoh7BZ/IG56EjlayqlkxOHWafa9QdBNO2ngPi/YxO/EJrWEmN48N\nqtGaY8CkOJTGZ5//vYhLWNSRvmKjiQkReAO2+PNuwXwUAtRgpwlR7tpDEXZM\np726sFLwpWWNVFAhQrTOj2sFgR/sUyMrJ725S9Tgt9KQBWZI0B1XM1qaRB6O\nrlJMOREfFHRbZRXKNcdM+5lNRrD81R7lXjVqQh6V6Hw8EjnJs1H17S27ctCK\nDouT2lFNm42XeVK7/oyBU+isOid+VF0FU2bAGDHmaQXsdm5IVZydGMr7WR61\nRRUBorAm1NqkzUzEqqXeevDNze5swGAdNSu1z8cLFYJQ9Dk9QXO1HZM5ajFp\nufis/l2cFF+6stwFJhzOI4T890RPtuYWaOvvnCXvwyNGZNQMktTv6xGaspu/\nhOAO5wc/r7XYq2QzcMYmnYNRDAtB6SxGjT0Xpzd7L+yeH4Dl7+SHAlJJzb4A\nYfHr8s0gctnqqIt1tMAv20W6I/TXpZyQ8vCAa6ctivyVg9cpvWLJQ7gEkgUp\nDjz+IUDKWMzIf1PaWP3N8vJ5FhLKeq7/wQdRJVOCE8CkxWx7xRPIdA1pKppb\npyqKc10jL4V0ETVML6Ig224bHNdHGiJWhsBSuR2cqYgxOg28JS6dJnEpGYMR\nlLzW\r\n=+frR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.d5f1f7c72.0","@material/tab":"12.0.0-canary.d5f1f7c72.0","@material/base":"12.0.0-canary.d5f1f7c72.0","@material/animation":"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/tab-scroller_12.0.0-canary.d5f1f7c72.0_1626452113304_0.6779410112813864","host":"s3://npm-registry-packages"}},"12.0.0-canary.4d95812f9.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.4d95812f9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"21eee4311e7d659402591fb37ca32059a0db2880","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.4d95812f9.0.tgz","fileCount":52,"integrity":"sha512-WHLL7vOQKRNTWzW/eNEF4XSpZD9zbf4V0Y3p5F5tW1pwvNIHD5F1O/Ewg9P9toMGzEXBuCP1To/0TCwdauS6Wg==","signatures":[{"sig":"MEUCIC5XEMItv57fVIJEdEj8ypvwiwYuptWpfZWaKHUQwmxLAiEA6ErwL+AScMcaPWQ3lYu6ev7pytI1yz/aKGeGftfVVic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg8eGZCRA9TVsSAnZWagAA0mYP/RyEL4PDlqaTdEDYhyei\nBL80MgmIl2PiPpdrL4D2Bc+9aVfaOlCYYPkOPBFnO1T/mT2WnABTyE97iwUS\nmaSPO0t4izfRiqS9gcM5jKKziBoaaanQNJ0qWdq3NgCiVURWNwrz9COEcdCk\n6QWYpPQYasDCnNQYiFdaPDcCjO25I5oSlz+vZvCHYr5Vi5Lb3zCw/zW4aFcv\n74XxYAl0jIC83eiDQTn3AkVx3R+6VLJQEknpMBK84VQbU2rbzXPl2VTygGPS\naxcyQhecn2m722E6pXMbYKbe06/sPmWSq4TqIY+Ut9CpLOK7YWJDbmjn2ieK\nQTwaK9I55qLrA64/jFaUqA0cJxKIH8LCmVeb9Hi07cg9zWGCZNjzacRUZ+GS\nQuCPS7rgRqfMog2oQjoXtTSLT/HOUw4re/QDSRq/3tXesh/zOTfVBPU6oROQ\n9iqbHm2hu1GnWRrUfb34GZeH1Y2Ji+n6JTLEgBzIVnghJneyzqvGDMGj7ULK\nOi51PtP9fd9oCd4yUejE+k0EjbjRvJz2Q6Ml85j6m8zNDmMmzKb86olCHYcX\n8fJeU+Il5Xuj0XmdCpfXIoFkmhzGhzJNRHahXjLm2vo34pz3LY3cwpSsvQ06\nFeoaDHxIg4Zt7Ol9oYjV9iQD54UvXgoo1we445Bezv/c5PeQ8nJ5xSDvXcm5\n9Evh\r\n=jhHQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.4d95812f9.0","@material/tab":"12.0.0-canary.4d95812f9.0","@material/base":"12.0.0-canary.4d95812f9.0","@material/animation":"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/tab-scroller_12.0.0-canary.4d95812f9.0_1626464665383_0.4537455991742443","host":"s3://npm-registry-packages"}},"12.0.0-canary.38d1846cc.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.38d1846cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3a43e512ab834f1a9e31299e7430d98e70e901bc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.38d1846cc.0.tgz","fileCount":52,"integrity":"sha512-0ybvyvMpYdsz2x+/d+eA0j/x3jBrSoYHDGpJsNAnNQbTCOojIO6kz7tmoa1ysoQfXp+lBxk38BP0GZX0tsj5Pg==","signatures":[{"sig":"MEYCIQC0Dmmuwz7qpH3X6ixR3QqqLbRV+kRWbkMGCsEMC6SGYgIhAOjoO9cXfe5fNYYsLL1JfS4iBSly3SfVVNzK3CZ6w6L7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9cfECRA9TVsSAnZWagAAYVQP/jVwzHdfvTsq5su9uZHP\nUYOtGrrsiJAqcbs7Jx9QB/mUqg3BdekCsy1PwV0TT/yCBKSFaXbPY0KDPYpL\n/0GiifdPxqZ2DILmD6WIUkRG8u2ds9ZrHQR2H6Uvli2QUKCR7PF62jRtbp4Z\nlR4TNrwmlfMVT1stMmlj3SSPcRX+DSWK6M8SMqEy/gnxBO7AmmrXScv+bd73\nOCeAKlu+khTyt72fE669nQw/S9vya9htBKhRxDwt/fEXpuEccfpQMixdqjab\nzvJWFYg0+6LrVfvTQW+FsTypXUt9dkyPXTAc9gzMZbid/M2Xj7B8SWHT7Ki9\n2pED5ADdP44CUtst7D5GSlFgc5Xz4eSnTk8Qi2sVg6ZehbACgMo3FN5rSVCX\noUpVyY7C40xHbLxhJuhmreujVuXxWESFyHiSmBnDilMXrfQCGFKR5rFVOq6F\n8RDq4PHt+o5lcSj7MHpkMG6izuHwZaB7BQmu5GgWKNDzgeBkvXkI4CEedvFW\nO62lxK3575o30SqW9CMfA3C+U+/FLKaIjXSiVIPl35tn8AqAPd9x9xJZpO0v\n5d7/CCF0fz1FvRAI291FdzN5uiqJhP1KR4a9ROzA7cq9oe0Tl10jFVWMLNUc\ntEjKKvPG+C2CxKPTqGf+RQCt8VpBpzaVem8sHCsC1/aAhdn+i8xRKYJUHx1V\nk3Gb\r\n=tTZ+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.38d1846cc.0","@material/tab":"12.0.0-canary.38d1846cc.0","@material/base":"12.0.0-canary.38d1846cc.0","@material/animation":"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/tab-scroller_12.0.0-canary.38d1846cc.0_1626720196064_0.5055698409424494","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f691eccf.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.3f691eccf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5306f4e4bd60c6368e46202929b7cfb8535782f7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.3f691eccf.0.tgz","fileCount":52,"integrity":"sha512-2N44F22ZkBMBLw5UppdgXuDugHOK4z2wQzks95Ku5e76gXkWF2rmDlt/2vCUQk1L93YbUHOCKhavF4ncu5UzDw==","signatures":[{"sig":"MEUCICgN0gRZ6zBAYTNyyY5pLrFmrjRG9dBnv2rE5smma4+wAiEA3k7C5GbeNjPKCj3BOLluWPPEBa+yK1GW4rjffnI4ec0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9vVtCRA9TVsSAnZWagAAseoP/Rx9GCnx7T7u/JaH1Hy4\nOA2xFos3PIUrT+ZZjS7brSzVrxYPSIWLPofWyrHbFa42ruy3akiUjbLl8nMd\n7Zf5Zn86WLsGElCXlyDTNrpAvZU0rV8+HnU6bYpVM9H6ET9rCK0UlSB4luqg\nzougRtLajVJIN50EL8Hi8hiQFGKNiWwi/un/3Hqu1aU0RPaUAXlduWBdQQwc\nFol5w2QeegbJQF7lUEHcCfGYEE5LUqvZLCOR1i7uq7yC3BmLFgrJEcvW/pr3\n+8CezI9R6qjitC/V03rPs3MWMF9tkpnTPhNGm8ymgA3wwxiZQyU5OQ/wEYpM\n+EgaF31xZhCArNKDsJ+RXs4vmxCF1lQ+jN+mSfeKZc66aFttSxVtb9rt9VAm\nn3L7fzo9iFtr3cH3Hd/LhPSH5rZTM8OpRCJSdVSFadRTd8IGe2n8yA6ceHCS\nkI+GcXTxKQvvdu6CP5dLFH1MnsJx/q34VOMHuK1SsWcgT/qMncItQyTv3nNc\nPm7nLmQoR5h+DbOKTRy42QTolhQkjdrRQqZwuzFJFK/xgx8VkZhxCKTNlGOU\n8cf6ZBg521gv5gob4apgTLSTEnQip7CMVU7LcI6dCag/9MsErfpay2LK4rCi\nZYgCcfunod+4bV8soULBUy6gI9vt+Q4/dlZ3vrPc/hB2cuTUnMSKuu99CLU2\nx7KB\r\n=sapk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f691eccf.0","@material/tab":"12.0.0-canary.3f691eccf.0","@material/base":"12.0.0-canary.3f691eccf.0","@material/animation":"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/tab-scroller_12.0.0-canary.3f691eccf.0_1626797421672_0.8122181585064707","host":"s3://npm-registry-packages"}},"12.0.0-canary.ebb5c73bb.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ebb5c73bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39de7c364c8800a077dc70d569f16e5ca81d9bea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ebb5c73bb.0.tgz","fileCount":52,"integrity":"sha512-UrA2UiUpndZSSSM6BEjQo9rGtjHRZXUuW3ZKYoY0g9TmLNAyPxzvOlrMr86OEG/sMTQFuTezyyN70zPxo1WywQ==","signatures":[{"sig":"MEUCIQD7dibzdUZl2xEqr8ZpZ3hgN2UWqFn5CcEdbjbSnZdR5wIgTLNvLaeyb3JwIiHMqY89Yt5rQAqiT+ZXJk/SvyWiV8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9wCYCRA9TVsSAnZWagAApuUP/3ZYV1KKHNmNbxUTAphl\n4FYIKN6Tg8ijUSz3sdCtWWju64mLIJCUsrnyrBb7Yqa8Y1p/yLIBI4P9AA7q\nr6KNrHzjdUt+OtWq3yILjl8IuOmB4mqSAwHnbTz6/kLntggkntq//g2se7IN\n/R6UgaYXRJZXXiW8pN5uDDoUdP8zINNKes6A4fI+mAgaylqNb82kvEvwTZwR\nyzZmp0jwuX3xPIjf7LVsAnIFeSHRhY15XKHCSusYxGYamKVHvn9njBnr/Xlv\nrXsWtdfsmpD+6bmSMTaa11kqKhJ0Bgf8KXnTV0O42Hx4jocAsOgTecrd/KV6\nA9FgR2rmqnucfWz9kdFS9Mbi6V1CvCm6pI9jShIYMZJTjFxH/lYqwJi4Kyq3\nTejxbAjXCAGVTsSE6e6F0Jb7w3baWldu7fp4lJCNuFDHvNJfwAd2Y5ARNrxG\nwK25HWdW1p8OEJ7A2wF3upJAOw5HF7trKIevXKCuXulWH0LUBBYLnncp6uGK\nNaMNhJ4Vs87I4qbqK3CpHJQ7HYPyZMnmsSRDwSerCDEopxfKZ9H1/xltoqqQ\n0e8dPzS19mxzfWT7Gqvi2n7JM4wkDwK5WsVjqCo2uZyY+0Igd4ITPAfWaDe4\n6RaPTqGM4ECNJl7ieyZertfOB0+5XfRq/ZlZfikHZNJQZcRa21qqUTvnwmKq\nWRfo\r\n=LxYD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ebb5c73bb.0","@material/tab":"12.0.0-canary.ebb5c73bb.0","@material/base":"12.0.0-canary.ebb5c73bb.0","@material/animation":"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/tab-scroller_12.0.0-canary.ebb5c73bb.0_1626800280717_0.6280037431298224","host":"s3://npm-registry-packages"}},"12.0.0-nightly.778a0e8a.0":{"name":"@material/tab-scroller","version":"12.0.0-nightly.778a0e8a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fb994763e4e98fe1c5a4d43678a7ea049c1fa49e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-nightly.778a0e8a.0.tgz","fileCount":52,"integrity":"sha512-fDMwgvpibyR/utY6S+z/S9WqtA8gcP6V6NBxAiDqfvGkn9BJMRkutRfKJ+xFaFEkPD+mo3honhNtTCwHfdTg2Q==","signatures":[{"sig":"MEQCIHzQTm2Tl+ylKl13D3OcHN7cyerric7ECCDroeY6rUIvAiB3C2HuiakxJz/SnCB/2LGd9Kv8q4BHCdYGuPaVykNn2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342857,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg9zrlCRA9TVsSAnZWagAALIYQAJSVkyNwtI3kcXaSDTQO\nQ5cTSK/19Z4OS65QIczy44MkpaoQbApzEfwevGDANVlF9CgV8qNKbrXYI7Bl\neNkmJf5mA0zl1XdZ6CiSjPy4aBX+F7+hO1WeZrLR4IsGYw9xMBUiwLDBpRtr\n2vu5LS3d4WKjd2PwgRC5OkTP8U16bUluP/nDIcv0p1sQfJQrFqyPYCIIiF2k\nH54IqyATM2dNfyc+SM6qVVbMmTNfHNfOSIXfJNbujtmSF1fum6tQJMjsze5j\n4B3kRLxEcGnXueIyj5R/sSuQSpIQYHvk90R4Gp5uNX2cR4Tv+3RzuVSWj0m9\nMxM05l9O9vGhecRpVKIFPG3MketADHXu31fUSZrqOBD4S9ALl3oaBOzJ/VaD\nXunYD0lx2mrIlHHmRGYktugwS5WiLWdGZd31dh/EfE5VYmlhJElUpM+gjVLH\nYiVrtSCNH0UDcxDWBcYsEI/k5/QwNVifzXjaRnCNEaJ7Off8Pn0E3+Y3to0b\nHTNan0mmd5rnkm1rt2KhImPtdGlJAY1z6ObYyOTkPkebqD/lqKl5t+5nRIsk\nVv2MYeRGlJicTtYf1roGGDvSj/midYqMX6Up5/OKBOAsYMRMQzFNFZKfCkIj\nkOC6lVVOTW4qb2zm5EsTuUzVvlcdWIsvCXStASrDDwNruVnSYBTliQfRCnnz\nMf+1\r\n=vBAC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-nightly.778a0e8a.0","@material/tab":"12.0.0-nightly.778a0e8a.0","@material/base":"12.0.0-nightly.778a0e8a.0","@material/animation":"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/tab-scroller_12.0.0-nightly.778a0e8a.0_1626815205377_0.1508664190662392","host":"s3://npm-registry-packages"}},"12.0.0-canary.791311bba.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.791311bba.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f0c2e94aab7fd617cbcda66037987807272db0d9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.791311bba.0.tgz","fileCount":52,"integrity":"sha512-F78aigWsdp9CPMQwCmDxS63cu6TA4O1LLP7F7X7Rrj3EKc71ZYAeI+Bk6UeHFmCwwMRY6SfDxcnbPurulD52Nw==","signatures":[{"sig":"MEUCIQCpfU3OqtP85IDwa2nXMoV4B1FwBKx6mQJODeKKu7qFwAIgRlaCsINMu7WK9WKxCKj0HO75mGy7Eg5vyC4f2si8tx0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg90lwCRA9TVsSAnZWagAAJhkP/0sWdYUQbxS0ZMz0BeQi\nzRjk/yh/cfLbSg+TK+nx3lvqmr19lJghMhaV/czanov/Dir5oNkxktXDU8Jt\nkPt+WKU0HD036UMKuOSU8pSCznmwo8bwqALuJTY3hVMGTRprMoNjiYfe/KT1\nN5qi31y0JDoRXLhRpYeF6Hb4+ULqo3ZU/zWxgmXIsiZd0bq9VGGN92S5ejWx\nhf869rAt9CDZmc5P6j6q0ZzW2OR2s0X6POwML55JvlwWZQmbJ9tT4o7KIBFe\nJ4wqMOjRQZWwchdDn3ZMhlsWLZoiqGO6xnTJrUre5KZjkZQ9oLuWzsqEPu40\n5xeOS5EYz7YQ2H38r+6VG0JsBNXSM9xExZIGro4eMqyE1q3G6+966ABK0dN7\nDdPSAEUu4a6D6BP2VlRMO4S/n+ORdRMivOwuSuryRikOYEHkeT/ceewTOolR\nFHMPdokFVMAxgrg3lw2ctV+fCsqS1KnZWIBVFg63rGo9NfDxEE9BnO1nqXxI\n5bagYFsUB761x/FSeaRrbV80f1UITOct1ku7VGC5Z988hoRaGaJy8XcPkAhh\nVyWEqY/sAEN36IlG3UU0oQ+DBgbmQaW3z/IeuQZeoZwInPa7EK3dXgdZCIA9\neWAwGE/x2hiEIleTRm6zIGGt0axZfIR28tt5Ohifcql70Mz9A6NbzamDY7uv\ntk6y\r\n=3Vpw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.791311bba.0","@material/tab":"12.0.0-canary.791311bba.0","@material/base":"12.0.0-canary.791311bba.0","@material/animation":"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/tab-scroller_12.0.0-canary.791311bba.0_1626818928237_0.8182300830215306","host":"s3://npm-registry-packages"}},"12.0.0-canary.85e9a6ac3.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.85e9a6ac3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b9bdbb6a5ab9f82b9fc3696ef64783ae71ccc614","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.85e9a6ac3.0.tgz","fileCount":52,"integrity":"sha512-xkncfiZdRTdE4lf2QA2LtNXhgK8C39nbk4R1N7EhvhEr9GAyl+isZwkYdd4vPo5sPqcuLAGkVvmn4xIzXkmjTQ==","signatures":[{"sig":"MEUCIHej6gUa2dFnXguC8iV1qRGVvwz5qzhjeXwSQkRs9EiiAiEA7lX7cWopSVcVEtzUgT/RV2fo/syCmZuwNZbpgACCRqU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+D8oCRA9TVsSAnZWagAA3z8P/Amwqj5FHYtqIqTGa0Be\nKdLVmgjXjZIV6aC6nZp6kTZ0bwBTVN2zj/1vjL2NEm1KIwei9i9937fVXDs4\n6pUa6mwf3qvy17n16675iXPzPdwcJ65ajYHbrKQdVicw2W/k4RhgjnkZI5OV\nmkmVY807Bbmmj7AqKMEXOKfTvbAIQ3KB/fZ/DE+41/1MUe3qzrCSQccVFqet\nMEZUR3FT/oSed06VUmC4aM2dmHHt0zJF3CsgU+AId53VVVJrWjIUCihX3I2c\nMECfV7UFW41xKGftNTaLidhCF81vDNt5I8auWFDQDjzw4ypO1YtsebAMm41V\noxaxt0zSoIxDG3kQ/3Mx6BhOyohOsvLms7uxcwBhRg9oL5fgqZIqyESm9mpc\n6VysaNERvCn/T5TfDbQUi9Z2C0wMQdK4jDLs6Sg79vtrFD0bOqtoDjJ2PzEQ\no/UQXUVX3uo9I1O64xwLpQyUGInf7/6cquKDEtxWjiOHqhpRcxS+ObrttKS/\ntoBVpLnFxeEPq9eoLVPovewachkGBtrVtWY6jNXzlFzRaSydVklOfFnD0/SN\nowBH6TheZekLfAxDhDibIXtsIrw4gz345eXLPC9Y9WVgu9MFGXjNh9Nky0Ld\nqCwSoR60s78i8+kBVItizK0RwqTzw2k+iBLDgoBWyPWVM3qW8YzOQW3Myt9Z\nveSZ\r\n=tcPe\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.85e9a6ac3.0","@material/tab":"12.0.0-canary.85e9a6ac3.0","@material/base":"12.0.0-canary.85e9a6ac3.0","@material/animation":"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/tab-scroller_12.0.0-canary.85e9a6ac3.0_1626881832749_0.3207895416903732","host":"s3://npm-registry-packages"}},"12.0.0-canary.6b0442278.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.6b0442278.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1593e02c97f68e0a110f0a91e3fbc3df77d5d63f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.6b0442278.0.tgz","fileCount":52,"integrity":"sha512-5TfHok7H/u+Qob4LZ1jYRTzponhfNzGuTSD+aE6YPGr206kuxyOkuqzv9Av46aWQkiMzSc8n/JtCkbDeD6TXtw==","signatures":[{"sig":"MEUCIQC6v1ufRMlXZDOKxct7S0TO8gwJ+Rh3jQxjNRGwmgOtRAIgVxNq/IKvKqLlEUw5r3eO/0VznpSIviZVHrHbqlLipgw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343091,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+GydCRA9TVsSAnZWagAA5SUP/Awe+97maDjVLHzQdPK2\nv6KXBcMSyPU+naTHYzGXcAKtFL/nn1CVgHWrxlopuv1mCxac4nCJwzt+uB0L\nko3u/0jzP3O8nV/Moa2BmDxo0UHL5MwQEEbNKvqRj3dop6ZCWmndLUXLzwj1\nGE0orMp5waJcOENIm8brEf82SHLlHwAvU4flgsIlLr4psCYXnrQT6kkf5COu\n98TFldN69HfHaGvJwLEjwwRxk9JPwhD5+qrgJ7FZuI+y+LWE17mdNUlf4eSp\nfpfpWO+qwuO9J4ai7FDcmnmIg+BYMagldwe7PGkfAtq+rpaMt6N93ibAgxNU\n3Fj3EvTm1mixPkmCkJGa20UJ2+5L/CDOtc0sTn79Pxg/2jc85BHn9aEV7oQm\nWS/bwvAk9meOEoBLSAuRO3Lacs72NuC4yl4+Bi3mBrXusolIIVGx5CtqzRzm\n/SfDgudUIZFjhTeqX4ub/hki6O5dwAhLbGQ/dgemvblwLiSGJgon4gY9/1AE\nsRamlRol3orCarte4fDMh+/ESGVdRh9WoBa7d+nS61Rp1AVwv1R69a1rAveN\ns+PyIEuurtL9XrOEA9YxhuCZItl/EDnhlWcr1UTzNnfHK7cLrx+kxPfiq9bi\nazC5wufm4kz2RjGovhvnAWZrojTYCZIw9kR0cKcBc0BPuUSyibeuz6HeFFLD\neOPS\r\n=Xqol\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.6b0442278.0","@material/tab":"12.0.0-canary.6b0442278.0","@material/base":"12.0.0-canary.6b0442278.0","@material/animation":"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/tab-scroller_12.0.0-canary.6b0442278.0_1626893469004_0.15689395736775769","host":"s3://npm-registry-packages"}},"12.0.0-canary.5f00e454a.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.5f00e454a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4b1cfb5cab417f7ee79ebbf06ac34ef9e8642a0d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.5f00e454a.0.tgz","fileCount":52,"integrity":"sha512-gf/bGPym6UiM/QduW9bpuKw6hiUp7Ybe7nt3siwX5E+Cqal8pvqBow52ED6ZtCRQWECWfVPog2Bj1j4JWSiTXA==","signatures":[{"sig":"MEUCIHQ9Y/1ZfAHXDjS76yODBOaOKN8p0RcM0dn3JkQA9uZiAiEArSRt3Kd3HRqLjYQ1d+ctZh+bnYZMCXcX9RBNwfNH8Cw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+aXaCRA9TVsSAnZWagAAddIP/1kgITijM0kYyGnpDMaT\n3NL6s7ohWt46Q0kkCRCbpEOEN313gZy+LxoO62MsYSOcyluAET/bu+jVM1GO\nwR2rHddIlIP4S6uPopC6CzN8eDj9oEdUqONS+u3kyePIIg4dpswp7E0RnCNf\nA0TsB+jZgQJKt0AJJL4gxBPqxP17/gun53pVwiOda7Sv1y0iJ8k1PcmSAIBx\n7+mAZls7WesRi1qhJSjtCv4BK2z+zMaOlWEVZxxAf4SrsFyuQrzbnVt0sC4p\ns5rt+nXjn/buC4FbgQ33qPVrKZV+w6XiAOPaRceSJ5YSgjqUjhPOAZZfpesS\nE+DySp5B5sAd9oxw96YealzX8Laq/KSdxB1kOXJSNLZZUCCY+XUFUutGz6Gl\n+rYikqcT+ZIwrWWQZNsAcT9vOxvjTWGKI4EIkUZjWq61/yZjusedsqnieG8M\nqyvWT1lUgsAuG1DsHDQO+Uh0hDwweoIZzDbqAh9/CB3zBBbL0rTVhQtEZIz3\neLFxyBav4nwtDtj247S1dxg4wxsKwxpykuxUNiZyszwIlppBglVQbp/lXSov\nDQr8+AJodWlk1FljP+0fhfDqwqeYZRO/Y6aAcCRdKYITw1iU0/K9NnPXBm9F\nns63p0naBj5GvKYlbx4sbgNPvpcXhmn4vA2VMQ22SJSZ/dUUWxaCwcRgVLTs\nHtDa\r\n=yE3g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.5f00e454a.0","@material/tab":"12.0.0-canary.5f00e454a.0","@material/base":"12.0.0-canary.5f00e454a.0","@material/animation":"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/tab-scroller_12.0.0-canary.5f00e454a.0_1626973658168_0.7165941151832593","host":"s3://npm-registry-packages"}},"12.0.0-canary.90e08fc6b.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.90e08fc6b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"382a187bb312c55127e40f4489f609736ec7d5b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.90e08fc6b.0.tgz","fileCount":52,"integrity":"sha512-tp1D61WQNqLQUnr/ZnrwDwcGW/Osf86zvvyVLFycz6RtVEg0eupst/i2GmEJL98vjS2JcpSMMa9ll+BijaiHAw==","signatures":[{"sig":"MEYCIQCwLm9siU4NYKXhOxO6W0pdZPiCnMQugTq0cxbNhL20QwIhAMYVjQRHvroFQvxfxNtk4CQalstz+XArjrQqIndciZFW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+gG1CRA9TVsSAnZWagAAliMP/20tZqwCJFZ1s5ZbAn2T\nudvG52UDGzr90rP3gdpiiZD3E/ajo5Z6vkBreOb25dhid9zjDqDC2L9XqH32\nJ0d8AUf3h/fOfzt+00hSlmyvQkOSh2pV6V/BsU7+++VzeTYrxW80WdBB/Xob\nihk/xMsXpHqRhy6KPiThRhuaUsTLFd9iUfT/AtzA6HW5tTvhdsWwpaY972lg\nhxB11BbgvkTjAqQ0yjHYgpPKounzi6YMk0op9ixgaRgsWp8on+IcUXTWefud\nH75/eR94cTYPPq7xpazuxopgfJ4XtW7KcbC5F5c57/ddBE9iW2F6VTEvoXLm\nZoRsyLbgbPwx0RZTz6x+2rRPX/+ne/tX+lMW+XNjsV3aknJiyByO6h9Rojpk\nFJMFjn7foP73aXFqcMOKo5z5Fz4ATC6F84DE8OokPgzT8H+I9pop0qTzIgB0\nbz7K6gv0wkjdcVqT1dmzhcTCcmmI1kmtsIDtwy+1/XYM6ipx+1nFpXCWvft9\nbgHps8VaJ7MHwqL437Vjo4Np2qEquOsNvH30ci2a32OG83418coM7uXilTsR\nd39Ku5WHt5260bPKPo8ySV+OVgIP9m/H2YU+6eYL8XF0StOvYpRst/kLPQIv\n+6+V0gW6LlOkN89V1knoHQdh5OtxW7KaI+BKnJE28i54Pix8wUhXEZy95p/n\nSNwS\r\n=QW4u\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.90e08fc6b.0","@material/tab":"12.0.0-canary.90e08fc6b.0","@material/base":"12.0.0-canary.90e08fc6b.0","@material/animation":"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/tab-scroller_12.0.0-canary.90e08fc6b.0_1626997173046_0.6667502043467388","host":"s3://npm-registry-packages"}},"12.0.0-canary.cf5b9eb86.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.cf5b9eb86.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"be26d7a83f509f624c2b1c18b964166a38d9d671","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.cf5b9eb86.0.tgz","fileCount":52,"integrity":"sha512-zGJYxxdVk4LClYDlY2mzXlc0vyQf3dGQIPqdueT9WFVKHO2f2nQc9vL+VQG58lDYgVw1w66QChK/LjFfW883LQ==","signatures":[{"sig":"MEQCIAO67ArYXryTHQipvrT/CNZKVZC2DQlFzJLxUgCsl7rPAiAZwtDCR0NFmQVTchS81eJ294ykEwyiisfYm/aITQb+3g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wbJCRA9TVsSAnZWagAAKDEP/i6fwGdJ1y44SJ6GiUjX\nhSGuGc7N7aaHcHxuw8qKXWRjnklHKdU97wD5fZWQVGsckrh4InCvE2Ab7rfJ\n0Xu6UxfgtL0hGIwY1z+s0vZWpnieZ1nWiwco6H0g4dmPH+qQGZTKY76iZ/X0\nwp1k1bJ2t90RRFAYemNlAWg0jB7qAGSkfoXIHHa86qCOMomT1yQdBc5fKRA6\n5MKpQbUHZKXpg2/OkvzsIbWJa4Zed0lKMiIjUWmT6wlfwNsgm0pbEj/FbKp6\nnsv6kYTk3YyWRBWOoJzKAfeoYF1mGqCUx7zVYzVyvtoHm7pE1JUETAtfF18G\nHZwkdrKxKFW782GFdvTgMMiv1hz6LKtESkpYESNT87wFloXWzFZgv2jigZjh\ntnzRdmm5skSjacr1sAjDI/URgAgT7v2BmRDNJ3Mv98uZaPvUQvBmQS0pCJDq\nuZToRUhvxHY5tW1SmvfDba6u/PQIug0YTdmtbZNdAWZSqeHgmJ2mz3aAYmL5\nEyfEg6CrxbjKwWRxCPRh/WFAwX5eKBmiKtiPE2rMUNGQAnMYwVfKo6cTONUv\nJV6gM7lwBLYunB1Ut6qZYXSzRPyk/iSQ9mrZsSTn7Z4azfyapOVI07bH7m/w\nbQjjWP6LsUt7jYlQ7Wt0RZM35Gt0+Om5UvtLbZJjmG5xSEUW6yApUcB3S7Ud\nrSNG\r\n=aH6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.cf5b9eb86.0","@material/tab":"12.0.0-canary.cf5b9eb86.0","@material/base":"12.0.0-canary.cf5b9eb86.0","@material/animation":"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/tab-scroller_12.0.0-canary.cf5b9eb86.0_1627064009823_0.009229505920262282","host":"s3://npm-registry-packages"}},"12.0.0-canary.3f36ac75c.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.3f36ac75c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8fd532ec2c9a28aa5ef5156974fda8e20c364fbc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.3f36ac75c.0.tgz","fileCount":52,"integrity":"sha512-vhWOQQSDSDappTcPHxEPeb8QwdrTbZ2KhdGzfyU8C5l91+q1pl1BrzGmOR+kfC1HtoyqUC+C1UESr21ZbMHmng==","signatures":[{"sig":"MEQCIHEx9fo5gVO7Qj4kWeMZ9RbXs8Z3gFRVNaFIgN1Taco5AiBFP/O7taceyTpTqOx9dxP699GyjzB2y7ajJsSy8pDs4g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg+wt0CRA9TVsSAnZWagAAIlAQAJSUfBCTZfTjab5031RM\nQRBkI9QzhsxOnJRQ0zLbjFxZ544KftbqxzsaOIyEI9sfYozsEqXCteAU40l9\ncuMrZ73Z47YTtmbheUaKgd0rddccINCUoAByBrh+bIdb44c3lOuUOolC9uIJ\nAShzQ0n2rkvguTyN10+Ecjq94lG+ter/PzZ9uYX18A2rqQ6DfMWV+jL4+7Uc\nP4OZNUM3BRdzhstUYn2bX3uvIZUReOJs7ujBzzwGyYLmFf0Q4drrGuOPWnXd\nDj4K6zdnPCo6Bq+LLbGfbawQhI78L4ttz5WIMvOH7WPFBbkSlhAC6ARdgsPA\nat6S9Nn/tTZdYGEcx3X34YHWHJVLKGVQjm68Nz/6ep5Wh4b3ZmTnz2IrYh/o\nKJb2tZQvY9Wtzt05Qr0bv0hnf8BwLSP8G/LMyvJL0OG9HDaIXBtR0fWv2ifC\nuKsV/++uQEGept0kIvNuKJukbh4HvTOk0NVHXdPQfGUHFn7vlhtiYpRRBNd/\nzh99wMyNmfOmUvzPO9NH74Mi0GCnpXk4n52GsCJ274RigUoRoet+Jq6JGcVg\nSc3iIYyyTecA/zHGz4yxTbrL/G2wwfyLJ9MwV2RvmLvjE/YoEsEhYuVNv5Mf\nND41KI7DCBLGbsNKncYSSvixBZrk/oJ+svzuE35navRJ4SskL0MP5l9n+nNL\n302Z\r\n=YYkL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.3f36ac75c.0","@material/tab":"12.0.0-canary.3f36ac75c.0","@material/base":"12.0.0-canary.3f36ac75c.0","@material/animation":"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/tab-scroller_12.0.0-canary.3f36ac75c.0_1627065204492_0.10566250915248432","host":"s3://npm-registry-packages"}},"12.0.0-canary.ea1e1b850.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.ea1e1b850.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a4792e821f0ddd859ffaa23eb68a8b0163399a9f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.ea1e1b850.0.tgz","fileCount":52,"integrity":"sha512-ohY3d+j95J+XW3gMdq5kxvc/Yfp+cILPAuXfa3rGdfURCxNQ9Z8by5AQ/+0yEfnsrXq6t6m2iHYUVGSc0xEPPw==","signatures":[{"sig":"MEYCIQCMHs4wpWQt+NWc3MvgBSzLFdrra6nY7De4wXaWLLGQAgIhAKlnR6MnL5G78b54YbxwmcRQECLOK0Vn2Z4Bzm0sIFGD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJg/H6cCRA9TVsSAnZWagAAoLUP/AiyxAdHzjAf4YLTZ67e\n6ju84UTBXzScZlwb32A6FVV/lNl/fTD6zFevIrfY2agmI9ukUZ+OLgljmXNB\nQkUVGyCuevnhxMi6el9ZY4me11XvG0YS0JxUOOZMIYW2WoztnrsAzk63FtHP\noQ2N/FKH6OpzAsurbHncgtBlwlt7CwRqZxhQekDUdVZEHThkLMetQDfROeFW\n9IQhqKw9PhL8pEsrf35ltbhZ7rFKiEfjtnPD6vPGaOCQ/2SBL9egIs0KwhjO\ntBV6t0++cNZ++mvrzgA43AtMrd8KxjikNLbwuC5cjWx1f6xq8ce+9xb9+M/a\n0VlVyObQCA0G28rzFdWV5y1oNLGv3Enf6o+fiMciygpheRAa2fU0EzGuX+7s\nhQaJmLWCSP6cp+VmyjZ9VkrX01KhF3TYRLS/IOQZzeUsRLhCMx7he5jSdYQH\n9w5JRl2MCq+JPHdSyeiUUf7uuaCnkFzjLGFrjebTiows6uf/bHzLHHX4vvei\n2mxTQ1d2sKJd3KG8cjcTf8IMvo7JHyNjSvCBlwJ5PO7Qi8UNqSzT22QNsEHS\nA4FVV+XFyzjlhciw/mIl6dvxcwsuDqBxxYpauXVyXoegEY0cY2ifqxGlnZM4\nY9WeSCmgZr9Udkz8nYjDrU29aXjz3SuNRLlquCcarU3DlJDHlaK4P1DmQ/Gn\n48LX\r\n=+swF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.ea1e1b850.0","@material/tab":"12.0.0-canary.ea1e1b850.0","@material/base":"12.0.0-canary.ea1e1b850.0","@material/animation":"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/tab-scroller_12.0.0-canary.ea1e1b850.0_1627160220663_0.842071271774048","host":"s3://npm-registry-packages"}},"12.0.0-canary.22f390c43.0":{"name":"@material/tab-scroller","version":"12.0.0-canary.22f390c43.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d9e699f3d340dd072be3dfeba9992dd3fb4ddb50","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0-canary.22f390c43.0.tgz","fileCount":52,"integrity":"sha512-z4D9GWm69cVNfNNMqXV2nzCympUWndR/OhMHCy+f037TfiLo68gt4wzkOIZOLi02gPMOzkTdLm6sBRpvSGSblw==","signatures":[{"sig":"MEUCIDXKN97JVkqqk3AIQ6u8v8TYkKTiNF6D0yilpOpwYcuXAiEAvRrwpZHoTpbNiq1/2QlJbtQak1c32QHh5NaWftZOx5k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAFf0CRA9TVsSAnZWagAAwC0P/23R4Ac6Guh9enj/+1J5\noW6U26H0hu8Y9CKkLduskE126y3GA/nrYp+eMgykXD1tfLMTZw5EyDNicwby\nzKQA3QLdCB8XdNPHEjwR9lMrsHAx6f/ihs+jFedrY3F+uD9oSexsczbG9ZPH\nFhlIQNfHhR9yd36YczOcb+go/0KPDN2I2KbDrZEifm0uuBOmFSMHydoVWFJm\n1/BL7lXpe/2Me04AA9cbxSv9Teta/4YuwwBPm0OtORSpjAIi4N1sPGDe69KE\nXfjHf+bJpANvH4pg3FVHZX1BEto9Cw7TFiAZpEjPrxvEKSeZ5pCsso9JjZK2\njHEInoijpMUX8ChI2+u9cSKxqd7tGiCLOxhKXitNRjbXdnh0cLg5qA5mELAt\nbeD/0tRg4v+8woTKjOg54frB4B+DtgZw2wstorBjWJ/GSrP9ak2PDbGdJCmz\ntYqEorOH0KNYMazUIWE0BcZPmhCbnFyEVk6yFywUyS4ofBdtau2FQBnTgiVV\nBOXgd0xd/3cfzpwANlnyvKTzAge3+BF9Tj1+R33H+xcGyjonqfM57DGu6Y51\n+Ll4pvbZpf/6LdX5kZsJgo22/NX4xt41QVbISDg01xTKbs7fdGKSKLTXi73s\n7MyX8nI0QYmP9BQXDMlNBaTEC1ExjttjmVtY7JsAxoPuFvcFE2LDwsr8jfAp\nIQfp\r\n=CcUp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"12.0.0-canary.22f390c43.0","@material/tab":"12.0.0-canary.22f390c43.0","@material/base":"12.0.0-canary.22f390c43.0","@material/animation":"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/tab-scroller_12.0.0-canary.22f390c43.0_1627412468188_0.6434421270696322","host":"s3://npm-registry-packages"}},"12.0.0":{"name":"@material/tab-scroller","version":"12.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"94cf91dd5f4bf5a9938f0fdacdcb5560edb9880b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-12.0.0.tgz","fileCount":51,"integrity":"sha512-t/4b9/xJHJBx/qINzOaxn5JKBMoz5NG2FeLeSX4SkigExeVWyAGY+SSw5u/aeVi1BJzXQpsAX2ypbVTgiIMdxw==","signatures":[{"sig":"MEYCIQCiJr8vRuPkVUfqdTOFETCBVJd6UOrjXU9VxQBJhhcTwgIhAI32oHVOU7gbIwlHZe+Fqk2BQIo+GgrdvMm7rlG5Bv7q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":342567,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGOuCRA9TVsSAnZWagAA2PEP/j/MRdebyW25YpqbSBpB\nqC99HO9DRyvuwqyrlMsHdQCZ1cG4bpqSA0uWaf5yG3egOmgSjqMI15bBGfV5\nz3jUISqbppS8+NxB9coC/yc3NG+o6Iv+iZZgzz+hp4mJ80vkXBcdUIFwGzDF\nujUj1bRyIP8CqLbFutNnXqxZV5fruH8KAcRfgvWQA6qUDlI03pFBnc6rQfrr\ncFwmLOaLU87aF2AX+fGrFC0j9cwsqn23pUrYvV0blZALWNsi7vSGjaYBKaLv\n8LdWI0sN3FPCH5cI4e5shTv7WalSYbApTVkjguYZeQl/qVan4PodRc+gB47P\n4Ko004zSo3iHb7r+pNwljoAMxYp4V9CqdS4T946eh7jCRNY8pDoBenDNzex0\noHt1qsPP6AXj1WN3TnD5MFRxkw/+uCx2ekxSA56ff0orpN1Ndhi1U6beR63L\ng87m5SZdWz7JOw/zG4zXNZPa/FI66OjkD+XBF2bha1XLdkMV1ucK73+lfveG\nvhOLV54MeRD1Geo9uB1bJc337RUKeRsnFQKyumSF2+j7xHbHC4rDDGkfx3fN\njdtnU9a/tce6uDlGIVufplI1d8WHWyVIy+tLkifA1fKvqDkUk26D8Q+HRYVz\ndbm8rL62ot4jy1jkIYvUmGJPBk+M4V7DRJlW9uAzye/Hsdp7cwmKnQaGnD4V\nPFJ4\r\n=9kXX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^12.0.0","@material/tab":"^12.0.0","@material/base":"^12.0.0","@material/animation":"^12.0.0","@material/feature-targeting":"^12.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_12.0.0_1627415470392_0.6060796699724973","host":"s3://npm-registry-packages"}},"13.0.0-canary.ae85f7eba.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.ae85f7eba.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e806bf4a143f85c67d712ea775f8f7acb37cfe1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.ae85f7eba.0.tgz","fileCount":52,"integrity":"sha512-s4UaZJgUcYMZOMJxsWShSO+WhB3OwMCmH1y4kpVnLzJXrNSvQ2wYvRwPvyClKMw2qVA0DyeeHuBCFI/UReaxbA==","signatures":[{"sig":"MEUCIE67kLgP6WoWmwbCr3Z6KZS59kgNUWYRZfXHZmwbKwtxAiEAmN5XBZk5NA45WVioonuKrbYqaojJeVK9Tc6zJ8QVObM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343182,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAGQQCRA9TVsSAnZWagAAN00P/1rQB55LDoaYWnhSl1IH\nfbXwcX+25T7E8UKTU89Xu5d5rS3aCLIzqArgdNSoJyPSE1O7+iVenH2W3fyS\nYXmfFXEmp4Kz9r3NsLDUP7zmd3G6+YNDIbeTgvgZTu0lOOGJUI05fnyTRoEH\n9UxMbHHJv45tSL2qF4l5XAqjQ76YeVTe9fQwJrYCqCLearCqJKznFO3dbR7P\nrkoP0SGDQP/Q3gCFNfJRmvzhUDXfG5E/EEpUtnA/HoOaWGHvO4ktvS7wffsb\nwHowg7E2j1cuI9SkEOFMfqTRHQbczfwj38zU9fpQG1MlQ+Opore59PbOwTHF\ndyb71sCkkwHOgfXn5Tqd24bNyosabPFho+DO5dAC3MwO5nXvHsZVKCjsFWo0\nG6v8ULpdwp9W6lb0s/BheKkHi2eDdO0Wzgz8lnj9P8Ic3puvwt+KgRW9waIJ\n6ITDVMfEs/mX6ex5sokqRBL7/OdVHl2gbhDafivhA3SRf5rDMk/47gGCz6Xt\nqqyHIH4DPplja1afu7W2hejah3F/wbTKqHFI+SNiT5dTrvTt+9Y5DC9HfEBf\nqZ4UgwPNUmSowm5uLe24vX8r51O2qghX0G+3y/wv5KqZOi4u6TG3gW5ntP2k\nnKoF0QyE1eH62WJuAHNiY2ZUuUC7BGAygR3BxzZwGFiSzb81ckuyygbx4/wf\n1UhR\r\n=uY+t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ae85f7eba.0","@material/tab":"13.0.0-canary.ae85f7eba.0","@material/base":"13.0.0-canary.ae85f7eba.0","@material/animation":"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/tab-scroller_13.0.0-canary.ae85f7eba.0_1627415568248_0.984627426238263","host":"s3://npm-registry-packages"}},"13.0.0-canary.5981207f7.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.5981207f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fa0bde574201583b37e55b014e250b6447b70e4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.5981207f7.0.tgz","fileCount":52,"integrity":"sha512-lWz75arr2UVoSkSAxBs6zB9B+l+S0HjBAOxlNcdf12XRBY7at4nryP78xD+hbk1hXX6kMN5XwUhyeoSzxt8CmQ==","signatures":[{"sig":"MEUCIQCSICH6cj7xrHcIsEZB5YLo+BC4xcWzftsiuLVHUw518AIgRIoFgZE5xR4Vc6kB6YwvZ7fzgKzjbO9gYLL9kyjMg1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAJSBCRA9TVsSAnZWagAAoYsQAKFMBr25B72/UlxRBg9p\nxUSYBRJIueZqr93FbF8vLCdcEAPBHjYtkqNNmkx1NGk+eW8zXz8U9nH7cKN4\nOUkVG6tSU3TUmKsP7cJxrFDd6ZTXsyJfNk5x8ysPiAgdHyjULqatmA6Oa1zu\njBeQGILuFanrG35QB+zMfUTu/v60z0IUFtLFobjtBYIaAuhBoCGOH6mRsKB5\n1rkRdmMgUDLzHmflqKtNzqozk5jYmz5ntYhKoLvjFp7ArNevUwdapXvryNUq\nehEnCPCHbiP9IO1T0haGlr48avRzZcknibSiPN3d3a8heKWail5/+dyKxppp\n3faGqleyvC4BitQ/DXpCPVTq2Nd+kCIZZPkvPX103SOKj2pKFvMOae4bVfS5\n5AUC5rxLuU15SHHLuvtzxd+3YxVImeeY5a/FmnjFP9uDgHoA4wYYvUwJ85JB\nQ5Wkwy8kZMXA5IfsxhvM5e6jrIzRrhd2RsvfGxlnRt7hbrLpu7Z48T9VbGGX\npbBxravYHWLv05rWM4tM0IRIB1rnQzrjvnxpw7z5pJimGWhNjmsdsh62LRZF\nP4K+aHVL4D0OUINdXA2AOm9m4iFdksZ5F5mO7Gv9Jq218Zkt9LmTUPGvTGGr\naaniMq4rHciM/kyjYHS0A2OaXlKlHqyKG7NVvUO/iJWRJHs2W+cwiVVIOPm8\njGpP\r\n=IkPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5981207f7.0","@material/tab":"13.0.0-canary.5981207f7.0","@material/base":"13.0.0-canary.5981207f7.0","@material/animation":"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/tab-scroller_13.0.0-canary.5981207f7.0_1627427968988_0.34265464568893655","host":"s3://npm-registry-packages"}},"13.0.0-canary.83bdd0222.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.83bdd0222.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"84291d5e6c25dd8e5a62fa6c57948b3b9b01fc52","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.83bdd0222.0.tgz","fileCount":52,"integrity":"sha512-myMiVllCIRXkdh74PJtQ2D5QZ1BBmGgNcVPDiPkqLgGHf6DPCqlLOc+GwlWfDZK6WG6lB0PRaohM7iX2UnV9fA==","signatures":[{"sig":"MEQCIBdyrXXlwgTSsOD7St04tpllatHD2RBVUBIo5UzaBM7OAiB45+U+A8RouIy6qv36WmSnygstAnfb9VXWEGj26VJ9DA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAZNzCRA9TVsSAnZWagAA4bkQAJaUam29oevWXunYYqOC\nchvvAtL/WsRgCjB/0KTcjr4QDSpV7zkooUOKUIjtqHnp+IhdzNVsSpQWCHIo\neHf6B8xcYvFa0d3gk3eWVJZU6e9xAzvP3G3zfUDzmlzIEDzMz007Fgd3XHk/\nOdopvhzkf/FfcLFnibwHvl9RFB1R/6wSma/Re1HWDQSdxeWLNpm5AIALlhnT\nNfADeX2B78tc2bSAZlkTGJPbugOX6/Po4aPsRVcvS4sW2dPUG5iv+I1pQp6Q\n5Eul12jZ6k/PUGe0ttujmSNac9e690DRdQCmbVwTkGN7ipNitKtx9S3/p4Vo\nBGsB3JBoBv7152o4fbFhIk5ewrprb7Eq3fZdg7wJVwFrZBoCveCvbG1PGZ+m\nXSi3rFzncK7HK0q+9NYUxD87MpF21wnGmUlgxQcXjou4IhraJdt5XDLEFyN6\nD7g/scA3FAI4sAUODpowdi/0wS8jpYV9egvDE6mNih+O1Xz//jEpQeXI0PzC\nvS9zscq4ssPzIIxda2u2f3m9Vl9nP3Cv2AiN0uTohgXL5AS4RyE9fwBpSa79\nXDNuYYAEqzWOhLGsSnXDtmwPoPARGx8uVxzRQxoCUGcVQlTCpKwV5ixzEa2Y\nGEMUNAmtS/gPzwO7rPx1xcL/Z1NUoQGdQuAFh/bdf0lr3GkafTlTszQTJc2A\nO80N\r\n=KBbb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83bdd0222.0","@material/tab":"13.0.0-canary.83bdd0222.0","@material/base":"13.0.0-canary.83bdd0222.0","@material/animation":"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/tab-scroller_13.0.0-canary.83bdd0222.0_1627493234742_0.7707676583035916","host":"s3://npm-registry-packages"}},"13.0.0-canary.28656298a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.28656298a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4a675942d48011929496ee492cd954cfb2d3740b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.28656298a.0.tgz","fileCount":52,"integrity":"sha512-KNe4vRtmWEGEeb7RuR/RlWjPcyMWrepiildynpB6OIsbrPOCKLiz0DJ6uCkNYx92wWHOQmcb7uOoGCb9i41gzg==","signatures":[{"sig":"MEYCIQDWi0itKYD5mp2eA3SeFfXswG83qD/1Qx8Tr04cln5ZxgIhAJcx3Qj0VNI9igHUoeBrgh5wzRruqbnqy96MbAg7uKFd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAu/8CRA9TVsSAnZWagAAyIQP/jmJMJQUzJ6jQvm31N6R\n6F1c9f3SByEFnKsYDU60NrOW8Ftb6Brzm6iC/hQZYRDaz8zzHDehZfKCGNRg\nHtB9KcS2QzTWrpdtllXY6SdhSelAT9hAYhXPQneINfsFZ3sEsojgS3YPkMz1\nLEBaz2GsqcwwynJFNXDlztIF1WCc54hRT0DagYA3BouCJIOFHBvKqtKEEL0j\nLsw6kTQJH0UdBykaujZS8o2WnaG+hIwQSxxWsreYSKqlhrrlf68jL9oQsgvi\n4cdCHIMLkiYW+J5ulJGtic4HTV2JfqA7DxlJy0H+3jzkPjbbZJGqPMe5ZYnb\neEUb5WIFA3gGSGwb21RXpaHWha9d9sJTA6VoFaTL5Ep0cNGirsmu3FpLfSb0\n+8f0gERGuCyLJWEoveipxDz9MXLuehnNgzXxfoPB5NPhLcD2hDUZzCcKQ+pu\nIFmqrbV2wEdNWZl4lr+2y8CsWoVmGxMT3ENZ0RrqHglmcUpKw0cit6yVj4+8\nMUXml68e2TzMjbwY6BgQ7R2+HNMH//Toht6HII+fafa35i7FEUb5udNSZoJH\nzJ3WYonDNHr0eeQJnCF2TlwidHeivGPRg+JwOl3WTyFceQbxMHezrpRMTbI5\n4jLvkuIiFaeDz2cxWjHFhjWX1SQoFV/GQCfkbF9AzCa7p8BRgjM5X8o1MPGf\n8yFw\r\n=S13H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28656298a.0","@material/tab":"13.0.0-canary.28656298a.0","@material/base":"13.0.0-canary.28656298a.0","@material/animation":"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/tab-scroller_13.0.0-canary.28656298a.0_1627582459937_0.5028808608531448","host":"s3://npm-registry-packages"}},"13.0.0-canary.9e797daaf.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.9e797daaf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"440018a98fd018a93083d2191be1652dbed8338f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.9e797daaf.0.tgz","fileCount":52,"integrity":"sha512-6HBFbWguK3CpJOWNppWKnFqAysugOnftXfJ6NHoWxifByXz2RkqXCerIGj7Hv99mXXZWfc8OtNCN20FidRvfIQ==","signatures":[{"sig":"MEUCIBblcTa6Tw5zXCuQ0iUTe/Hq9sQIiQ76Ri+X2Cmd6JwPAiEAheZrIHOpxxzQCuKTcAaSIaV6VhcJmmuERt6sNwsXYnU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhAvUzCRA9TVsSAnZWagAAJ8UQAKMa+ar6mYOB2hjYo6+K\ngbO4eI832DRPse+kqF7KnahtgHWewkQd1HtFkL0pChDldIIvCKQA3v+NNYMP\nBp2G3+U/pg0m9Rw30QKGro3RnWlyKdJCq5G3YehwDIJdV1/B+D08dtHeWM/S\n6g9nGY5jk8/iwjHC4SvNwBBrUNVtvSoHE7AgpZnngw4g6NHGlXD0ttoRZ+3a\nmlN7Xco9WA0Ev9B9M9nyvGXav/miGidNv9TM0Dt7YqBOYj5f4Bsq0jcAvQd6\n5pgtz+jSquS2YjPHBAsplfTf0IcNk0NPSaoH0Prn+wZ9f6P4VvSJ52cuWYiq\nErOWwDi4NSIcSrNGJU6fV+Bs7Y1GSszfe4YYZuH9uEDKkfbvJsve5ztyW+Mj\n4Q2N/Fz6qKuaIHOW5YplQ+Du7XTDjP0bmTHe5BZUIBBXRkR8OU1GK5bn1G6Z\ntBPrFuvwbbvheKMq89HCLv4OosVwZ0D+jp1lJZGGj16NNFG6G4SJFqAMDAts\nh2M6sHa7gPavxZpN0nN8k0bM8N4rgelGfnXR9YjTWUV51QrNMx7955ORHvz5\nEcTn4Bbfo3hRGJ2Z1BhMSpW/15xiUnmX70Yvk7ok+0R0aR7s/VwiZh5G4Orm\n6xmljG59CqCWotjUNYwyFxUkd0PwLNj2Wh1wvh5UkuX7HwVeb7ezUMuZGWEp\n2IWv\r\n=ojQ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9e797daaf.0","@material/tab":"13.0.0-canary.9e797daaf.0","@material/base":"13.0.0-canary.9e797daaf.0","@material/animation":"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/tab-scroller_13.0.0-canary.9e797daaf.0_1627583795679_0.48041449130295","host":"s3://npm-registry-packages"}},"13.0.0-canary.adb9f1ad8.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.adb9f1ad8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"28730922c34e3bae5521446189d491cc52b32a2d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.adb9f1ad8.0.tgz","fileCount":52,"integrity":"sha512-TwLPUVzuKfM31BKXMpQs2PR750uixp92wYOsVTdnmG+TVp39A0U7YCDtyUSkP+iw5NsgOJATf5DSUT38gTVACQ==","signatures":[{"sig":"MEUCIFPu5fz3R0X5i6eaUtLzDi0owrDTxlnEgczkvV1xEXbjAiEA1gZRsxOhS0pkXvOnjEjPh00fTf5YI1yhazPjV86ZjgQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBE2vCRA9TVsSAnZWagAABYoP+QGB8OJciIzxbkhBXk5X\nu1BSTOa19TNa1Pe3meCGppy3SIIvOnVNYTVeyeRrRJhB4vOx4kJD8vAyX7+B\nMTlo0CUHr1xUeQl6Jvh7NS68Gd/MRLtXdJ20jZCyQvZ+YSOYN75mNWUb6h0f\nVVuMmos6bFIPT8qXt1eVLJdlAUxiFogYMshrtbdx/qDMCwN2pekEOfJA0IZP\nKd+0oWPEs7HqOpSDjHWeZeUnrVsgPAkKZG/Eg3PmGe7pWt4u4HB01yGg/EN+\nvzuVMju15odD87RzfF7veIXIBKi2aDIZ5ccfD9hfrnkn6QIW5rU85gmOzSlu\nf8fpMJKbfdU2LConHZVlXKgQLqXkrKxOZron3exA8BQYDziMbsWr7Q7PnkYx\nBXTWAToR2mYfwd3d4PwP76e7oq9jA/2FFkLaPeSYZWD0sGew3Da1j+cS5ccH\ns2d5q8Q8M2CcAyBYXmQ+DuFIXqcRQYTeau9b6jNhrnhJWjUUxqmDVhK0qyY3\no3A97EFz3Uv7k5xGOENUcbMpwKbijEKCZMI/YruYrbCCRPsJFqofhaJWRvvy\n6XF/6frjTBeGpz09OBZu0aldR4nvaomK0+QTjgylhVuz9tyQoQbpjIQM1Ez+\n3VPGbhHdLc6zCR3cVoi4iuw4G8nM6dh7+IEwFUaCHZzrO9UAMniiI9j0zH5f\n6KZe\r\n=vdIf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.adb9f1ad8.0","@material/tab":"13.0.0-canary.adb9f1ad8.0","@material/base":"13.0.0-canary.adb9f1ad8.0","@material/animation":"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/tab-scroller_13.0.0-canary.adb9f1ad8.0_1627671983694_0.04464644518488048","host":"s3://npm-registry-packages"}},"13.0.0-canary.cc5377458.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.cc5377458.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"02688a9c9135fdf17b0b16100507521022e90a72","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.cc5377458.0.tgz","fileCount":52,"integrity":"sha512-v2k27YSxcjZOBuSVsWC0M27N0S5APAGrqONw0VhUSxUOilYTyCfy3MOq2yKhtUy67/nZhZjl4GhJdZfSJ2YwOQ==","signatures":[{"sig":"MEYCIQDkSCvDgRugSFT1JONC5zYrX4+l6W0ROrGsHbUF1DctzQIhALUeqVUaAu2/Nf0ar8i9ZofEJqzJCIP9PhzdNTWPuSAo","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhBHBtCRA9TVsSAnZWagAAb5MP/0nw0lPKqrI0i+oIKd6/\nW380H/KW5PUvVSbTIfS82irPvD6zdKjO25Ca1gC4YUKOOkUGu+qVr7Di/fh5\nwAMVsnrmONvnl8ELC4PNdIqXumdtcC/EV/QJ0DEp+Lc4zxAsPvyZ6wpiXDFN\nIVlz9w6hwR1+ZUvGHkE8M+7v8SZZGMRivw/tpXnX47u/YRRmFam+pCvYK/Sr\nw6iANXp4J1DQhRZzlRMO5UiEUEXRYRvVc4ce1F59ytTua7OMO4+6hRYuOvBg\nbYylF0KHGLBanGu+FFzmLSV6GvhaZX5Z2eAUudNVb0L2oVUBbk3Qhx78zGqr\n5W27ssg+W1+WXxnfxFjzgPYnH9m/JrgY70gs9gWnUKn12ygE9etvnz0E9ske\nVn9Ox/D62BOc4TUzOyW3gAPMVPHMuRunBhHD8lOwQ8LFr+BidB9OWcj8D3CQ\n/Y3zt436GKCNt0Nfhs6wTxL1X3n1j9p8X9qzKV8RoQFhWdwi4dgzAtrCMAqM\nsZ/ofrVXuzV4p4pd1nqw3DG7bojEuwmWDnUzHr9IBU8NkUq5MpOViEAfzTmh\nx2fTUdiKj8GMFj9/IxOG1W4/BxBEP8Lzfq4lsI5vw5Z7ISBS1FuYWVnQ0cZ3\n2FJSjpqEOgunULJKdLmO5qX5k0qzjxUNy1lP8RpRndks/sjwRi31keTU4eVh\n69Wr\r\n=rWZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.cc5377458.0","@material/tab":"13.0.0-canary.cc5377458.0","@material/base":"13.0.0-canary.cc5377458.0","@material/animation":"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/tab-scroller_13.0.0-canary.cc5377458.0_1627680877216_0.7001047769760684","host":"s3://npm-registry-packages"}},"13.0.0-canary.a395972cf.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.a395972cf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"26d8589ad3718560f0e1ff51e955a0bfb8728aaf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.a395972cf.0.tgz","fileCount":52,"integrity":"sha512-h3MnQZm/B8mlfFSn9Cub9xnX6aigf5jqIJd/pl/LBlH+DGdom9StcAGpq5c1VJhAIbkZ9KPHRkeZpNd0WZhB3A==","signatures":[{"sig":"MEUCIEZqgBUiMD0MQ6cdZMcj/DM9KNaouQpxRz5kaD8kVsRbAiEArIUFls8WuHWTrieynBCz+755DUJjJuN1WVfh7AjziOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCbQVCRA9TVsSAnZWagAAckEP/icEEVsseUiNUMtpRP51\nFdYrpg/Tpo2KiOBg72SbslDBPoqO60j9wxE3iNXwyrtxQ/wcDmFE5rxh2ip4\nC01dRM4VntJtBXPqxZzWoc3euJolUmkPPvltP+3/M7B4x5bPwhuGV5wnn69w\nDqnuyq0oOp6cYfb0TCVJ3zmSSEy1yzM0KE1ZkRoCQK5AimWrtDv/jNHidSxm\naNKcfscuYwHlKkYMZ0Rryi4E8WLmKUVMMu7Rk4UYKUMhKbr6efRchYXVlR8x\nqPItTdDbMoCEI/8BL8Ynui4aib2E+subQefF8DnE2RrK6tTWcgoomToTGu9V\n1rLJAiqemhs9GyJKsUO0kiDj5S64inFUwCI8sKZPdOAuA9Qf1xUjt2J9nAvb\nWkaLy1YfcVTgmNGugRhXYnT9ckOu3ygluplU+XfIID9NXg2FscHdwz2F2jL0\ndD2iS8vRfLEaz31GJ2HR3liEVDqnunshQOGCIhHL92DtA+MMHxTu2Sm+MpYY\n8xonDz4xEWUSYtH8+riwUh4uOPfgrygUWzszzI5omYJydVwcmr7UI+uRP5w0\npM4MLztrDweAysqDhJoDJGL9jxtiQSAsJc2LdsNJZZMicoGKU+us7s3jOFjX\nifmyu+R0MzQTVb8K9TrNXbgeJj1prfVHaLANK5fSJZ/udQ/HV/cFh7dfJQVZ\nJf+x\r\n=4o28\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a395972cf.0","@material/tab":"13.0.0-canary.a395972cf.0","@material/base":"13.0.0-canary.a395972cf.0","@material/animation":"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/tab-scroller_13.0.0-canary.a395972cf.0_1628025877063_0.08818211989550373","host":"s3://npm-registry-packages"}},"13.0.0-canary.7c96e6b98.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.7c96e6b98.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b7d595330c2f3c13984cee14e0fb8f0e4cf630d7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.7c96e6b98.0.tgz","fileCount":52,"integrity":"sha512-Z4XZdGqgAqeB+sThwtltaoTXAhJnSvVuM3kVy3llWnqclWrC+ibqt+07GAZRq+sOCa27yEkMB1JtqvNhDLFhNA==","signatures":[{"sig":"MEQCIAdisuXMKgqy+rXwzHtc6BY623BJsMQn5sV+R8t7nMwUAiBegHNZSHx5yavk+WXb48kr+cDEr10yg8kwDegGpfIc9w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCb/vCRA9TVsSAnZWagAAq54QAJzUBwbaBfMT2MyMWB+a\na1Gi7kClElqToi3yREtQxKoUEXlfWeomRAhTIv0nxzlfVgBlECVsGPf2wayM\nCQ2aAJTVPvYPpFw+86wEI+Z0W8mJXnjABNi4SX4ocRR2MY+8DPm8loI0Msal\n7BbnUXbdHVAag2eBQwjU7NoMT3yquRdaBLefdCV1K46K4QOWfN/JeiTZocno\nAYu+osmccxiEQjYiBRjBtoSLmuYrvuVZl5h5RUBO3aLHrPaij4lRloTTMz0z\nimDwLxyCTD7m1uc1SoWqqYbn61Rx6Xsq0ubxArPEu0v6QVFJwE6jK/CZBHpm\nIlm0D1pIYnT7EygeCr+wHTdxpKfVPSipWp2tRvfgsWLJMbVdKZTIIHW5zzYt\nL33JXI2AVbm62K8MPU1d1uH5/wAQcO3VL6psfznQzgkPEw0i66v0UykfLyUH\ng/mcNwDBlVU78Up6sGK+ew7SPtoMtmNhjGGUO1E5yjW9TWEyqkwMCRJ22FKW\nlWF8RhAwykOPpUrWRcfCEWAbj0NNZY8jsJpH33d7JI9p+4AoJzEb07mkZS0+\nGkbBF0SrWtsPH27xBdGgMmTP7EFS5wg+Xo2R7TIUWbFkSSekX08Sp+PZaP3T\nMHObtaLBz4I4lXkgM7loi129uqpe1rXCPO5mrJqY++5bXGLHw/7yjOiEwXiH\nAsPd\r\n=FF/K\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7c96e6b98.0","@material/tab":"13.0.0-canary.7c96e6b98.0","@material/base":"13.0.0-canary.7c96e6b98.0","@material/animation":"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/tab-scroller_13.0.0-canary.7c96e6b98.0_1628028911092_0.8341826593097608","host":"s3://npm-registry-packages"}},"13.0.0-canary.a80c8b2c2.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.a80c8b2c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"60c8ab237575027bfca516ed1d735c607f487d6d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.a80c8b2c2.0.tgz","fileCount":52,"integrity":"sha512-hWLp6tWUrJnM1HDPPibK9cOIVhtpvabgORg0xPjTocwBcvMHuYWVRDBD/Mr1xZSwlRZx9M+ZakUc9Kh0uprtlQ==","signatures":[{"sig":"MEUCIQDPfrDPiT45ahFdxf2KfOrqXnUWSaadm6hQCugY58W6fwIgfmNYzg+V8ptnn4wWxyeq5hNwrzBbmJ/GNSQ+ifOWRV4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhCyo/CRA9TVsSAnZWagAA+qMP/AmKATFxz/buML7Te7xb\nTXoStxdYtClXCJyMYyFgFftVdVOXeLKdZ88P0uQGl/GLOIKc/tWymVzklRYG\np93y9Gx5NRodc7V39zKKJ4ruUNNWAbxibTb1v0m6pYAbKxuZgzi7pQuYZnml\nbaLtcjdU0uFO3/oP33eqXv5zD/SNcxTsWGdJsUPncEw/DrxWeLqZxxwqjR/c\nuDNcaXdGWeVpldEot39/LupB0vE08ElhpGI7PtUZou3UfV5GDFXnS4CwuIz7\nzrraKX8aeQV5vbviNAEY3xBEBRtBaLeRZCbCUbdpKIYihXqsYpQBY7Ibylji\nWnn+CEtJ7rRlpsYp81JsR/bxHOtZ3lb0ojKlIvxnGYD70fhT6CUZa6/gl5Vs\nP+tY2kmaYTCXD+fLdT0di2kg3iyDB+gJn5iogLoqAroGMqpKtemQRU2yg0IL\nXaDUMno2A5JIhJQAg3QlSlJvwUQBu05zMPrMhWh7i+4bL1wTKszeiHIBqPRu\nIg0dDSufiSf5gb2J+r2QFNrzKZOTVflfjVhJdTJF+NbAlh5PkuZm/P/CyLsp\nqlum9oNoep706mPGlcYJNqDXa0IJV3/wmRPZ5noOBnWW3HsDOgAQ0l5U6sFW\nMd33D8RlCC+aEcj6D5qqrsiGcllcdMfCVfP5hLhQhEBCDdu/K8t+tapfix8M\na4As\r\n=MPAW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.a80c8b2c2.0","@material/tab":"13.0.0-canary.a80c8b2c2.0","@material/base":"13.0.0-canary.a80c8b2c2.0","@material/animation":"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/tab-scroller_13.0.0-canary.a80c8b2c2.0_1628121663076_0.4583312802598416","host":"s3://npm-registry-packages"}},"13.0.0-canary.3dd611091.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.3dd611091.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b15a54c946ce31c4616e1aa0f7317b11fbeb5eac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.3dd611091.0.tgz","fileCount":52,"integrity":"sha512-Q+nRRtRQleKTwwEDJK3UvBDXCPynRuf6tWplk5TnL9keCqm2k7CHt+6zBeMI03DVvnbY86EoyIjOakNDALBdBA==","signatures":[{"sig":"MEUCIBSfWiyQlNscIShQRpetkp6btqkpi+otlq5ioFzj5iOgAiEAhlnUKCQH0LzmGvMA/L3N4rH1vQIpcer6MdNlyeksdBs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhC2G7CRA9TVsSAnZWagAAB1kQAKTz2Z2n5xn5obBhJBkQ\nOhXYwDLWcUIh59OnjFeX40oPTSURuEz7cws7p0ycFvEq+uh2LmfULQukFwdP\nnRmLNpIO2fVjEYYdlYrOw3jmfq4ZNgyq7xFIxx+5cALJ2Pvhr2Pyt+1iEvRM\nY00cq0Mk7YzX3oRwh+XKi3GDz0FQBnX5MY7pNSRo2No4PjHr9K2mkxxNfeQ7\nkkqsKzxbAAWI4VtB/DeYuzeHvBckJbLEeEnz3kVynJhwQLcFplLlPQN06Wcj\nQH4/1GlheLMUw2wn/jeYFiad+NJ0GB7cBfUGfSp4+fDUhUahu43VoCZg6vpw\n0PxxLZh1zQSIuITrcGdPrZiFAtNv2CSh2A8+MSowthx/G3pne0k6RvAvPKxt\ndljaRkwcn85GLaLEtgyw0fZEXGIbyPi5vbu4pEAzb5Ly/QrH1Iq49tGWp7Sp\n8RQuxbid+E82UYE7AZbtZmwmJ8wBoKLBYu6A0Gv6KzLwPcP6011e/uW/tTNR\n4tUKBwkFh1NYBQF94xAxqKGwe5YXGZ+OXLy8D6ULtBpV+fOqTak7iqsQ10w1\nZSXH2IFE83nB8jtB5Ty8KL7+qcMfvgwe7b/q/cQMnB0TBo1kvXDw7jXMHPxE\nNm6d/5p4F5WWNDFfAdWiXdy17CmweTqX2n5vlrqwelVXiNLWSNj2bq7F2IqS\nJtRi\r\n=Qkq6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3dd611091.0","@material/tab":"13.0.0-canary.3dd611091.0","@material/base":"13.0.0-canary.3dd611091.0","@material/animation":"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/tab-scroller_13.0.0-canary.3dd611091.0_1628135867522_0.052551621336349275","host":"s3://npm-registry-packages"}},"13.0.0-canary.5dee37ff6.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.5dee37ff6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e4cdf6c8c8d61c8d07af5040fad76ee288e67247","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.5dee37ff6.0.tgz","fileCount":52,"integrity":"sha512-x4imOyt1JKkWC/6CFjozGC8BcboMhgBlcXRAzak28ry2GZ3Hc39ByQDVt3fb2EEvUjxudbUoScLZeZTHF+8T3Q==","signatures":[{"sig":"MEQCIBAj2Qbrj1DtuxhO+n2cBEXjuHMHJ9PIRZzIX9Cq0JNVAiBTtaznAvKJbO5bF6bRfversg5kla9eDL0HhfLnRoOUTg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDCNICRA9TVsSAnZWagAAsyoP/3vQALi0FWC7SB7H8rrP\n+d6aFHycvt5r376zDZSJIkBdLpYY8XMsZ77J2tzPswyLhoT4AH1NCLNNYCVm\nfbEoLFiazEEKmRVBv977Tyyw39EUdHZSZbMb4hZ8un2VNKOHjDyvDEG0oMt6\nf+0/nnve++RwK/2rI2KGODVGqcBN37MFkoXiLPbbHWlBF9A9cWb9i7yw+vwJ\n8vq1R+Fn8WyQYZZSvquex2y32SZAt6br2UvJqWyrwg89eJqmrJX8DpiiXSHd\nNSkN+eFxlkPQxppzMyXy7qnu0QQNsePo5lZBF+IpthZWQW7W6Y+BOhNQ9ykU\nzPXMwgq0FvRexx4mAwIl8s9foUwTf3TpNjAthTSqL/T6SBN1HSKqbjwlMn6G\npkVAWxfq9r6RptJ+ctEPrGfOZ+xTzMStwhLEV1Y5ZImsX8886hsOhQVrC/hd\nQdXGQASVEci3XlGM12rTSB8r+ScnSJEwca+GN2RQbx0jHLLX96DLk9DLyM7V\ng9Ebl60VnveRzviSWNhTj8vQ9wJyZK/dRnjpa07NOEwXXxWz3Zkd8r2Xj1Mo\nB6G7SyAH+6KJML+GG5smrsw/ntUALjFIJ05keqhGHt3Kt+4YYSVwQQuSN8yk\nFzv8UQHT/rhPXe+1nABk3bxJ3Pj3L/k1pCd8djAG3nBKXFG/S+I65uBFmTXP\nEqDo\r\n=ij6X\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5dee37ff6.0","@material/tab":"13.0.0-canary.5dee37ff6.0","@material/base":"13.0.0-canary.5dee37ff6.0","@material/animation":"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/tab-scroller_13.0.0-canary.5dee37ff6.0_1628185416652_0.1649505496976722","host":"s3://npm-registry-packages"}},"13.0.0-canary.bf405d22a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.bf405d22a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b969eaca911c83a9fb340bebdd76d4019e240e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.bf405d22a.0.tgz","fileCount":52,"integrity":"sha512-+H69FwxlhK0Mbfk+o8COj9nN9rIQcQohzBJUmaNC36CvYUaY7WzHQzsiv8hNkNL6bW7zTqn99ztMKSZeZtoKCg==","signatures":[{"sig":"MEYCIQDEtI9zjMfot25utFVrA9CdD2vL924/sHI5RboowxgsSgIhAIIz7Exx//QmdeckL+W3oRkuqimLwAhLZhELw/jjXFU1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":343059,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDEfKCRA9TVsSAnZWagAAUb8P/A4WPGhXdrLerwnwMhCT\n2wTdkkWi1T+e/fE+ZJZfsMIWrIwEOztiI9bWQMn2Ryl16BIVUcisKm1k1thU\niw7mNBYyvqXe9zwxrBRp763KksImyJf2AcIQIj/3oELgp0nFqI3gquFcaziy\nObJkmjenTcffyGil8EFxsK27S2gbRc6ehqmaJBBFEReH34id/JTk0j2a/SGF\nU3epqYjtevrTW+vJo2aenfQMmEnTNWrBVhUZ5s/8XymA6Rrv7l293c7pRLjE\nhCXnDgn/0rLs8SaJU/IKvJ/j7npvlklfMWEUOsF2D+WzQjPJbwhjg75RFCI7\n4DNDH7gJHUv/Nx5FHWgtK0j9HylujR3xm6/HSqBnNqU9DmIRdxw1+fNb8Vv6\n05stxmARs+yeizY/PIBX3iHV48L5psas5LKuEe6xb0MMfI4xqo58jkgTxiqF\nnd2Ui81mQDPZJtEyIrdOjzJYLLj64kHowkjo6DugY8S4zdII1KEBAS2lQ81V\nIQ6u9Vi5nIMjScRXhyVvWPmmjdwfq/vFtRJQobjtstJeSIdW8dgmJEhJKtv8\nZ1FrdyB+uEdIAMLrobT8zMP1Pl6w9U7AvlPCW7WLiN38MNKP5wxrcJyDGX+h\nzyIi99dwi8osqxm4n4zRvR2dYBsY/3Uy01QCLvWQ9bHZ4/96Ja3ix7S+tVi4\njXw1\r\n=ZYzp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","types":"dist/mdc.tabScroller.d.ts","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.bf405d22a.0","@material/tab":"13.0.0-canary.bf405d22a.0","@material/base":"13.0.0-canary.bf405d22a.0","@material/animation":"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/tab-scroller_13.0.0-canary.bf405d22a.0_1628194762661_0.9776632526378013","host":"s3://npm-registry-packages"}},"13.0.0-canary.b47dd37a6.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.b47dd37a6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d190c9e4a062cc7942b911e0184ef41d5456dee1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.b47dd37a6.0.tgz","fileCount":51,"integrity":"sha512-SS/T/OXma7A0RtgcGhaiWJgeO7yYw2mDDX6O8yUi3rs8YA0ZjiGIdsyLaQu0YnZSuKzKBJUKBwd94GsoWZbCfg==","signatures":[{"sig":"MEQCIGpIvlggp0Un7OUVo6jWBMm2fgsAr8b6h7PCrYS/8f3eAiBauc0O2kl5is/K1p+cpCSW3uMQ+H9RCMwUH/hsjkUgVg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDE9BCRA9TVsSAnZWagAALh8P/0gxVujnhvnC0xTx2U2S\n09bu3ltfWoV4qjCts+/VtU10j0SfTMxtEZI9I8blhdMVbXFJBZJpRHx12NIP\n7fRnDCIX/4kxcmtac+ltkEt5ldPABY5XMF9/66u9ahqEZIUDhXpF5zou88oK\n7B3MjsiQfrBgVSYbNwnq6SQdLLdscKU0d+D2JcsxgEuaSl+xkTkdy0Ae23M1\nBSG7szUaac22cy2DXUiyKoSpU4ur8G7Lu8ZruZcUrrOmpkXG8hQJmLCFfGPT\nEi7SY/OFEnBmPR7Nkarg4ecNYQNH0Y4lhEhMjFy3kPDBSTRI8D7A8s6GJ4J/\nJZ1DuIktCgxAsKje89WjMKvFufy4PXW85xg5AGqOQiPGn6HRfRnTFNsNH75X\nTkxbMVysKO8l+KX+rXD+pzjtsIKN+gnU4QnaqifKsO3Jkc9AvpuTyOZtWi9k\nli4KjQC9Bmx27BUjqXSs73e2ydG7NhcaahrVi3nVOuYWXNzQhRR8u48deu34\ncc3HP4l2VqzesjC+ehZLNgwVJbSuEUaUZihM4/HEPgLI3bT9IJTQEDJkJArU\n6GWf4ebRY5fC/3u97HQchjNZRH0zQFDEAlwQu8tePYDIfD6jbVgAkEi6ixpI\nAU/QsvOGU9IM0dd31tYJCqSxrfAYiZomA01ZpnFLn7RFLYk2km7defB/xQZ8\nU1D/\r\n=p2hB\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b47dd37a6.0","@material/tab":"13.0.0-canary.b47dd37a6.0","@material/base":"13.0.0-canary.b47dd37a6.0","@material/animation":"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/tab-scroller_13.0.0-canary.b47dd37a6.0_1628196672852_0.061916813915102065","host":"s3://npm-registry-packages"}},"13.0.0-canary.6c82b965b.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.6c82b965b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"871bce4939b9502695a88031c44631df632646a7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.6c82b965b.0.tgz","fileCount":51,"integrity":"sha512-aAISAyF2+QE0VV/2ep/En24SGc11cE35aF/vY3QS0gYs0YvGW7WAWLq3jYdygmLRoCzOOPFVCw4C1cYvO29vgQ==","signatures":[{"sig":"MEYCIQCo/qvb5YEX1G097BAZmU7KCIQvKnNNBxc4Mr+e3+IAbQIhANEmAD1NuUfEYVrx9zMwLOs8FZzE6U/BSKhvNbt9gfPR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWBHCRA9TVsSAnZWagAAOG4P/3djlJOcueEH0Y2wHFML\n10tPH6znRfD3qhPpJmnDyZze65eDvbtVovLEv84Yt9z5dWsRPe9PIngCAyB0\nGeVV6gIwGK+HoVgF6t3oG0CDyxOTAXcml3XrGqIt9XGmLjdZwt9YFkXVQz64\nchRtycAdGhOubTlIrZJB6M5gVo780qb2DbktUG19gWWmUKS9bMlnY3R6i8Un\nnYhqyNLJIYHoPxWSa1T+sW30jakmoFwfGly+trYgyapnXB606nzntXIpt9Lo\nSo6ogBDxMa8XdGxWutRIftLDG8EympJlCNyBlDIBPsBFcnj3wSFdVB5fY/sh\nhA8Wm+vnGKL+ghF5LyPOdu6LmDcYG7+5zKaH3HWBTdo6x2lz2AoTWLjjrCrL\ngGLkqiudFdi05l38XDB64H7sXEiPnDRckhfD9X/CAKB66gUQ2+1AIKfIvWiJ\nAYaB9TIqP94XGgnzpbJUBL6sXLP1qOdjcZkThfYk1cV2vQt/rWOQ+wnBAagR\nhRrinrxFZ9YL2ONyGFSMlA5BWDDigwH1c62sAExYe1OwszDJ6MMI7TKQnB01\nLnEXe/ilmPbRVLDiHazM3a6cYtG/kR3Q0mMLDuV1E8qoa1Mpokl7bHtdLOhK\n8Hw5eY9JrIynHNkLYQjwz67CHTIAZNCwzKTnprcr0xl9DQHnmlfW+I43SolB\nY9zg\r\n=DSVX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6c82b965b.0","@material/tab":"13.0.0-canary.6c82b965b.0","@material/base":"13.0.0-canary.6c82b965b.0","@material/animation":"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/tab-scroller_13.0.0-canary.6c82b965b.0_1628266566930_0.9733720538205839","host":"s3://npm-registry-packages"}},"13.0.0-canary.4ca11fe76.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.4ca11fe76.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a3441eecfc189eac28039335e5dc080b11e6fb75","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.4ca11fe76.0.tgz","fileCount":51,"integrity":"sha512-8Lfy2H8bUe78f9ofT03uu92nWZOWPJiP6Ezuz947aRCjFPQBrOb78DhZGG+mFXS9hIMFMpWd0Z0uTagq27pcLQ==","signatures":[{"sig":"MEUCIQCrCvcvPcWa4/oCbIfkwTliNwICBANdpjsqQteifQinVwIgeTCGEpJfynacc2ASNcHovSU+YNkE4q5NjPRNjoc7KiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhDWyhCRA9TVsSAnZWagAADKoP+QESmBKziiB7PH3prmCW\njKN2nkvK7OkAMUaPxn8IXFKJITUdcl3zCb9n5Jou6//bEdkvoKHmbTR5Za5/\n/jwlFcawJlI0fyh+INU+4J0KDD17Q7fzCyn6Vkt7pHSXk5U0PVN0GsEePVWF\nrBYPTUxV4WXYdkfdgnmTprdqXco61rGFyg8IRdBhpqEKlJ/LyQ+yvTw46bka\nEVr7KMxbKb87Z4Rc/DWIEEhhIdUup9teBtBKdj3iVMEPhLhqARsjZ1qIx3aW\nFVPOnyi/g0kL1fLpyMr1oRskQvIzHJVPhrGIOAPhietl4F0uxrBDveGd6Wlv\n9DBW5LAawJr1X0sEsz7l0HVAzWq3MCbjycOiMnJhuwaBrWKf3eRid0c3YGAV\nmz1HrQpOh2FHbEXIGCDSGD/0LdbU05nM0rNyzrltEJQr5BkRsisvhADlKOr2\nCMqpNANn09E7EIXkBCkYg9RsVl1xU7U45D90pENiHmMO1kUTETNQa3jhtJMo\nysTBWPqMlAeUSeyIhcSauabTBv40bWcTmfHvcGL0E2nrzcwnNQpsDNxmN0xb\n/J0z0EXqsDl+V4NQMPTLmXQUqRXvy0FQhPX+yTEy6CDTAyA+zdyYDtB58Jxw\nLQmEwWWh0n8UHTc9GQWDQC0JHiqPGu63FXnfd74lBYtWTfw6AQIsMcgznk6P\nWQf9\r\n=6Sh8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4ca11fe76.0","@material/tab":"13.0.0-canary.4ca11fe76.0","@material/base":"13.0.0-canary.4ca11fe76.0","@material/animation":"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/tab-scroller_13.0.0-canary.4ca11fe76.0_1628269729052_0.5455074649140697","host":"s3://npm-registry-packages"}},"13.0.0-canary.510cf90f2.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.510cf90f2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aa5f88b3223e7afe158136152309cf6f237803db","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.510cf90f2.0.tgz","fileCount":51,"integrity":"sha512-PD5Bwkb7aQlGEOCA2k5Pe67TYLQzB2sl5dQQya2crGkGS2MKizjAX+myD8ZzPYMCt/kyYhNPkNY2iY430jPTiw==","signatures":[{"sig":"MEUCIC3uxuQDOhst3QvB2y8Jr6L/Ckhh9573dZ9BsVkc7YoGAiEAn9qwUHI5VkfPakGMRQbzGGB5cJOU8RltXBmAPzAwBQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEWNtCRA9TVsSAnZWagAA01UP/0WKRTqLiYalHMhIJlS8\n6iDLo0XNtj7Un1PQM81XCyo7LBx4ENhP8Yfef9ei4KUfnNgEouTMumQdawvp\nCDc1AYeXzA5pNdi16wcaJB3nYCywhJjyy1OTKDx5mAoKlUerWsebQqKQWzgy\nGX8Zgi7g2+3EqQlACuFnwxV5s11QwhncENtR/g3UWuQkjO1cENxeJgMF+ZmF\nfiDGTiFzy1FWrWGSyAG4K+Ph1zAqjtD1EpOOooj0BbgQmmf11pSVkdtFgxrJ\nu3jTat5sErd078gAMmmfRtTg49ISy6eob6zGlTQ2dLrfDHQiYBwwm/fFzhvr\nAFkUPqvzk1/VudAJMIbKZFXjZgkuh2GDCsSWtfUam5XDCF9xBL8f5amuXldU\nMvKuSnirMjmxIbgcH8C7pHhrQWs2esziKG8PUnaiz9oljwraBXLPYnmS1iLP\nCWIYjAc66wTQU7caonMxfgN2QlG64mkY90CreQDgqNDSKPofF7tKr6FVKP1N\nRO2hSnQohokXDXTuWxa6q4AS083DvaR7ecPidL4LBsVqfn3Ii4ARLDhvwbkC\notwFjh2wq3GeN/dOtNJQClG4tfdM2X/5A1YXTHYRQt91PpIvb2tnrxg9Q9Fp\nAtOL9rniC5KL7RwIz6YUAzKH13aDg5TDLezQ9WbS4Pgqx9h+geL2wT+k2QEY\nPlbq\r\n=S0mO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.510cf90f2.0","@material/tab":"13.0.0-canary.510cf90f2.0","@material/base":"13.0.0-canary.510cf90f2.0","@material/animation":"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/tab-scroller_13.0.0-canary.510cf90f2.0_1628529517273_0.24206919939863503","host":"s3://npm-registry-packages"}},"13.0.0-canary.17580ebf7.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.17580ebf7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3733c89e53ea5e39f23beb33506a1b60efd98fea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.17580ebf7.0.tgz","fileCount":51,"integrity":"sha512-69SGrDEwWDpMUJk4esoaxOzSc7/FFEOSfH22gkKOLRDHt94JtNCid44PtpLPk5UVlA6Do/+Xyt6e6FuGQkRN4w==","signatures":[{"sig":"MEUCIFpBcCH0Poijgz4cb8A0M0kKXS8s2RYlRZ/F3Z5k5lyPAiEAzH1Xm/ttQ2dKlxiRQxAiYfeSb129hbX3aT3oR//K5wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXGLCRA9TVsSAnZWagAATWwP/01cJQoanpt86wJWhWYp\nLKwmx8qxVjkorYGaWj4G9LJp0Cc3jil3pD+r+fByiLKDkaqsEjm+4KqeUT6e\nPbomErw6zHzlHMtkYrw4cyghZFIjjR846Dl21GOFxo22hsldIpGGNcfz9RHq\nznsbzMn1P6WhYfdwnAaoqaAJJBZgB9nZGOuYxPZ4ewM2Ta1EydSW6IZfIfhl\nnJuP/gj4cMNhxZfc1q9hIu8ziieq9zzh6PSFz9+wb+rSMtjQJpPL6BZE/Ucp\nuAtMMyvDmgmZy4auqx+4Fny8bJZH70ucu8H8tZhWBpQuBCUqhk5Xz9+kLqgF\nmbNI/5FuDmyCyFIQtWSr2OhyD92NKunwmiLZt/0wsrYPmdbe3Eb5GUZnY258\nmjgMnjov9yBiHW5ij8Nws45ETzCYMJfazAklBWdnqE7QkfT2xpIFunD3LXun\nr/NNcFuGzaFU71PlxHxgVBNlNCCOk1VYHwisudtW0MJ/fuo6hPptlcsnsYEB\n5Z/80YCbUWLKFOX54nZYKEwaL8NwMVeKq6dc+sGGpmtlc+ncNR5I/OqdgVTn\nbqjR8In5oTz7JgpN85hGDwXV3RGPcgV8ZdWm5x9l1MY5bTSwBVnScLi+W7jC\nDhjOfFqTl0eJk3AkcA3lT2dcN3PAhf8ZcyZKqiq2i6yOd5P5VHWNukAazqM7\nbVzO\r\n=IQ7Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.17580ebf7.0","@material/tab":"13.0.0-canary.17580ebf7.0","@material/base":"13.0.0-canary.17580ebf7.0","@material/animation":"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/tab-scroller_13.0.0-canary.17580ebf7.0_1628533130942_0.9207043881940555","host":"s3://npm-registry-packages"}},"13.0.0-canary.7249a3060.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.7249a3060.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2c153347e5fa062d7ebc66819a3c6e15a495cc3d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.7249a3060.0.tgz","fileCount":51,"integrity":"sha512-lOPc7niJ6Ph07MqzPskvY97tqbV23J+mr4ghOvrG4waT0j96cbXZs72aZZuFqpLHJLRNNxMeQxfn7bMdqBjavA==","signatures":[{"sig":"MEYCIQDfztesmEKQ3cmWsUzTNvuEAhcFY4BV7Gyhlb5/Cr/ojAIhAOuhC05cbnVACiNeeE13WcFMVeI7XcuLV4bnOaC4V1Kj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhEXJ9CRA9TVsSAnZWagAAmlsP/3XxJNhql1tl65yfw3jd\nJ/epYAebyw0sl8bmRBMmL90PsRfleUPkzXOT27uwUiDcKgaOFyntqY7Uhm3S\nEWhRXSK2rbWtaYv4OKUbjrZqKpcsowozCvQxPAs1b7tgRqw1xpdLYd/gP27t\nLj1ZLFgzs9RG7osQAkyXomfCNP0ov9Trui2+sJl1R2hg0goCeLD+1ISBGiYI\nt9N9UNIRlwpOwY1BQqN41Wu5EF33DJw3EZnbJdmKvvaGCYDO+aR74kMeOhBT\nIX4WIZLsGCimnX8r4VkKtacNOGQG09av2LLYWyTf1WE799nMrLZ+nwBGmQaj\n3ri/hhfcY0IxkDhQGbrPGSgdDcCwwTc9fhB7WMvnjEVMTV9I3ZSSfjnXPHsK\nZ9qcww2Yk9PJTkyg8jdOYJhG8XHMm8Ki5lI/JIDLrh9FVfOCNv58f89C8zKw\nJJlS4n402axYCH3Kf6RQbEfFE3e9Bsk+0OdtWtURTjNL40Ry+T/XOwJBUZ+1\nfymKablMRGcA3Chf3/cxhyQjGBlkahzMX6Js8BDbCu9fih0xskGl8l+aiTtF\nSSMF5mutsTAscXOv+u0EIsKpxRIvHh2zURfmTJCzml7ZQG1TlQtbxojr3pBI\npp8upoEMQqUlvBVSVQT054Btf0I23ISEF8ceROQV/Bp8YNgRNClvcAWVKwZE\nRqbn\r\n=uaSq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7249a3060.0","@material/tab":"13.0.0-canary.7249a3060.0","@material/base":"13.0.0-canary.7249a3060.0","@material/animation":"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/tab-scroller_13.0.0-canary.7249a3060.0_1628533372958_0.2457552294936176","host":"s3://npm-registry-packages"}},"13.0.0-canary.4c405863b.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.4c405863b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e92165d496388d7bb9e02442c4144ce3eea2f5a1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.4c405863b.0.tgz","fileCount":51,"integrity":"sha512-8GkjHWesZHCuRrxDfu4WJfaYGkVd49c7A5qDzXA8o51qyhqhW4M7ey6KcJTMTQCWoIJtg/bUpNadF1vfVliZqQ==","signatures":[{"sig":"MEUCIA7FokzoiVFxKvpaZV8AGWyLai/OhxL896hZNskwryavAiEA3TPz/7UDYmw5O0IvqiIffGCPTbCdEeeGwMzjAXh+AI8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhErpwCRA9TVsSAnZWagAAHXgP/083s8AYc7xfohy2vnpC\nBq4AKLjljldyf8om1DH9aaxWQYaqTYT7U7dFTSIwRtwo6AB9eeg/7edhWr+/\newnsq6D3M5i5B1Hm66a4IVDn+A4tCSFy2EFKJ4jEmuxYUuwSCDFSv0vHgZKe\ntS2l61rm1WxiX7r5SCdUByfGQzK8NViIFuBPY2CJrXSwlysHbNpdI7mzq5dW\nU1qlXGlse1m53hY/sDCV4pdyX9xxNiR6dU9Bp/AIcy5X5IENjPGtgcoX3Lyl\nqvx5iJr2DAZqMaKq/qWrzL01XddykmfIu9L3H/ZWv7WcrhsjnfK2nDuCCuup\nSW2qvViyey9CLRn91PLlAGTKAxaPAJS7ih/ccNRIjk+QpinDWxX8DF2ZWAwK\nW9HUc17M0XJ342HSavGH+FxHGKQ2XL56XBlxIp7p+YOpMj7t3pfOR3u/pcy+\n5+zYNhHxPg18e4BWLxFpdX7XNLdbNMRccQH3MG3efEfRD8EBxnKvrpAZvAfL\n1thN8j9Q0GvWYceqQDk2K7ekVAZeiPEiDrUZM+8ucaVCuW9lzjZvAaYfBlru\n/2w2Vz7N31L+X7VbowFOni3DL6kk3W315QWAUtll0iM+eJrrQXwbfcVzxo65\nAUGCORlpxtRCVX9Y/TZ9z7gPJMMZca60zOPvXTLnNJOKbXcSMaWZAbD5h2Y7\np4y9\r\n=VC2Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.4c405863b.0","@material/tab":"13.0.0-canary.4c405863b.0","@material/base":"13.0.0-canary.4c405863b.0","@material/animation":"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/tab-scroller_13.0.0-canary.4c405863b.0_1628617328789_0.1778441549933123","host":"s3://npm-registry-packages"}},"13.0.0-canary.f4241a42a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.f4241a42a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e771f33cbe791636f83b11c29f8aa43c4359137a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.f4241a42a.0.tgz","fileCount":51,"integrity":"sha512-auzjHkivhJfs510rNUvRylNZ0+f9GrSVxAW3uKLOOMk9P7XJwbwSVg9uy941KUGt7JPDe5oQbqNTpxzTkrW1Ew==","signatures":[{"sig":"MEUCIQDQpoty8Enf+sgsJbpjxH6zRrvib/zb6gLX2L52iEq6PQIgRF3HLFNU7S7elvkh5jj2OB4/+RBz+aix1s5k/v+InII=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFAJHCRA9TVsSAnZWagAAeiwP/14W9f3GKF9PGdTFcfH8\n6XJ3wqlXWJI0DqkOSymZqiQ/v3f1OzOG9O61X0jLbr1J3klBnoN/bO3Z3CBh\nMRvhnoyYWcxbF2ItVSIi385pYAdQn8XYRAtBsQqrypz5LcX4bppOUTRjMI7M\nk3dB+M5LepjIDKe/J1VzYJJZM2jvK+w360v7c7aBMU8elIyGUoz5b/fsVWts\nqOqB3hIP2yHZh/NNK/eCO26SFlJmL/V/kA6LlfjndvcGgEIJ+huD6CT8MJZD\nWu3BfzZs9hes0ravVyKExeJ2QVFDv+zyqRRwvDL2XbW/GaGbzrqb8njL43Ex\nd+2fx9vdMjpnOGj7vHEgrwQDZzLVo/UqNzfDz0W/DSLkxjo74yfvZS1/vfYh\nhs7XQJDnRUAXnhMlMvVrJUUA+xJapGXB1OQqadtiXJN+aOhwh/pp3mdcYYGM\nHlyG+Y/sr+zIZ1PD/bg4DNaj6cG9srhkynzpo4hc2LhDwHqq2quxFZI+yS0o\n8VqxPV2jx/xeRpqo1Le4tEDznF7xv0Suqkkta9HXBaQGTr0pBULKRG16+4DJ\nExOkGFZASdYksWV5zTKGjT/2oCJgtYAXxQtOUo67tx3dUNJKTnno8TajqLwt\nUPMsiYedClhT1CVH435aSbVU3egMoD3TkVQCwl+ms27ZYtYrPDGjB8t/6jSw\n1eXW\r\n=dnBz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f4241a42a.0","@material/tab":"13.0.0-canary.f4241a42a.0","@material/base":"13.0.0-canary.f4241a42a.0","@material/animation":"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/tab-scroller_13.0.0-canary.f4241a42a.0_1628701255740_0.2106863451864296","host":"s3://npm-registry-packages"}},"13.0.0-canary.0ad12ed3c.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.0ad12ed3c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ec5e83001062e472877a0c310ac1ad720511bec7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.0ad12ed3c.0.tgz","fileCount":51,"integrity":"sha512-RKggPNjFg5BoRT2Xw+Wqq48tlaIX1hWB+7dl+PnTojPVLU8CUo/dO7c1liOE5VkZpPrK7detdQDNEDuoWYzp+Q==","signatures":[{"sig":"MEUCIQCIvX03paVaiBA4uDX3NjZzdxoxkRELR11MNugEuwpeuwIgeRa4o0doNwtXQkgbnPDx6jXm0emg1mD7fld5iP20kS0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFEFbCRA9TVsSAnZWagAA3OsP/RHTL2M4OgNy/tkRtLYc\nAWV1Bo9z/LGHR7HDYDH+kuJZCKphnn6vxyRBvYLiRKtphnIlXTErwhASyVUq\n1J1GQNiBU8+1YoO/trED0NTRVSsJVJco+XDyTfwfMVuvzlJmHZWC/+WXYtUe\nf3uIZE2CCuifO5fiZuPQz1oGi02OdFgkbJp0ougM+KVb/HGljDlYK6wypizd\nX58pLpOvYVDQjGCsDfLny8RBj351lNuOFhXTwfe1OFj4dnZaiSKCWPkW6Kz1\nzduFgSZCJk4Bqs8Lv2X+WEYjvtNzsWYnDmyW8CBV3UyiqTJTA8SVAQA+Tp6I\nZ/kEocR3Y9ezrYf1tNyeFXtNiKYq6HqxxbcIcQh6vwHgsY4SxW+vk0eTJCjq\n7rxr44LINuOip/8BJ/NpHeNLGEk+fK6IKfb7ZrFCiQCDZO8ixro+c/C+atfV\n62qy5fNJ9aAZBek5K6H0OLMi/Vy4yj/pyHcAx0JTdQes9KOY7IJ06xWlI4Dc\nDqEBAj9xBjJrlU/bckBpsBXo+DG4Q2ppExX3C2EuzGSrX2VZRMiDQLOgdoPl\nbL5a1uxNNYpfFIhmHcQK9Qgaw83tAuwJVOj2on8vkjpPct7gm/OcoeChuBkj\nz59ygDuBqzZIYfH/JE9Nr118DGZfCoHRzU8MNyiN/DQOb7tUkQMWMcPmcZt/\nFS6n\r\n=7Ii0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0ad12ed3c.0","@material/tab":"13.0.0-canary.0ad12ed3c.0","@material/base":"13.0.0-canary.0ad12ed3c.0","@material/animation":"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/tab-scroller_13.0.0-canary.0ad12ed3c.0_1628717402718_0.7274652680066196","host":"s3://npm-registry-packages"}},"13.0.0-canary.077dcfcfe.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.077dcfcfe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"110f8bd1fb060ca821f2289548a2ee53ec914ea1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.077dcfcfe.0.tgz","fileCount":51,"integrity":"sha512-NH7nwWw8zrhxOjxAK3Ocbw/pbCU5G8uFycxFcK2Mu+xwZxs9Cd/jswjTlKBVMLG6yQknU/VQbJ48LjDQkg0F8Q==","signatures":[{"sig":"MEUCIQCeWqoBCjG67Fm3WW6rR/wbmvDhtCe9Y/L9HHHzgEkYpwIgVATvM4M2VD4vkinITyBZ4Z5Q6jyV1Gn9m5o5Rsl2wvI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFWDWCRA9TVsSAnZWagAAXp8P/RE8yyc4HXls7ZfMpp2I\neQOejuYzJRH6BgzYPMjH73q/RplIWDodzLXDGsN7GlkXBIFLA1ktKNhXZJeH\nwxHPA53VnOTGOwuvEJgxu4NyD3beIorQSNt6sfudfv2jIJsoBKPsQ/1Rr7zb\nmYafO+OtRSrhpFBPKY2s3e9K1Ab3/smzdBkeQqyPLeG0OyZu9KSmRhIT8xiO\naNVXTmDG4RdnjcEtTWouI3CwnKE1E19kvLVs8h6hLhnaiAkZbkEGlQ7c2WHp\nFrdZb/DLZ6gnFBeCGomA/pO2JCb64RbRg8EeD6Ae+sNJJFRqwy0KfBgUlsLG\n6uxATdGL2Dscev9wR6Q8XJjmEnyrhNwyatBf4ieJoGWEIHM1HTSvW/MSjEY4\nAjI6BSXoNvzCIiB+gt7RZjJ9P2BIJe18YLq543khR/OI4ikdg7ZKcsvGTnkG\nj3QG7eqVVR9P60blDpPsNW4wdVAMBZ2HDrpm3ZRn+AeYWOOtRGCWKlG5P8kF\n3AGdaAI/WwrtEhDLLSQMkC12B6i94DMfi3/oa2lKP5evmxXMTeohs01c6p88\nDsqBeGyVzWxzXSiIEUOOcZhYZba0wJItaoD3zu58rx8n8nURqbCE/7IV2DY8\nwN+1+nEBQd2qgRmG2cOOFdOSv7WT53l8MK4golx3U3TKopoazSSH09oEbcq7\nuYpg\r\n=rNvA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.077dcfcfe.0","@material/tab":"13.0.0-canary.077dcfcfe.0","@material/base":"13.0.0-canary.077dcfcfe.0","@material/animation":"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/tab-scroller_13.0.0-canary.077dcfcfe.0_1628790998615_0.647224739350236","host":"s3://npm-registry-packages"}},"13.0.0-canary.e3346766f.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e3346766f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8ae4a2242682c0fa920400dc2e5f6ad7bb844b8f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e3346766f.0.tgz","fileCount":51,"integrity":"sha512-ts3dQfHaHHSmOM9BYvNXsW3uKcyiQYWy9d0j2C/9mMiEEyWUJdPZf7rZZqaw9U/dHVvTDUKOFM+QEZ+59Nwbtw==","signatures":[{"sig":"MEUCIADFYmLN9z0VoyOsA/RkCdvrm5ekb3HTkOvTCQLjn0CiAiEAtZ0LjCS7r/kR6ixW+B0EqNq4MeSUYOPxgqSx0MZrDrU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFswfCRA9TVsSAnZWagAAJjIP/25Pd54N0SibjSWoWEFl\n9XTGlkKWB4N/W+L6lHRwoXKuH8AcikMtBvC4JJNr4pIkcCpc6mfPtUtlZLhc\n3Bmn5uz8sFfHNOhw7Q3wFTSD5e1qTanN5qjyv+6gYgGxAWuAspk5iJEC8cuk\nyDS6kJmCHV2X3vy8U7P3WP5Sx1Klp/qUvS5TEY4Ve+UMj4/WcuVyD3ZC4BnK\n5jhyAk0+aVSVq9Af+gqigJqllysbUJ1GMA+YqWivejB/Ymy+gnhB9gxmQ1LL\nnnI/OcxWldEA5i3c6y8AyiFVcDIIlUgTmq7AM1WX3s2+kfsUuKHwpS2wv05n\niOlnC5q/DQeFn0YMDQ+yDWwPAv7rhp+bFtzfjAncCB8ReJynn/HlOHzwhQX+\naYRoHTyetPBF/P1pdX6JTRyrT5afcCdbEGJJz4QgF4Fp7wvXFBagjLexKmyy\nSJITy+kQe3snCed/GGR77ufv3KjzakNLksM1nogmKlhwFLvqazw4CChRomd5\nwFGjEjhuKu5SQ2Nvd1BAqOvEuaYcLko782xPNb+cJHPFGhH+W3xjUa8Gbbnw\nZImSxw2GzDvbmzeGubK/9EWN3xHevenoeb4QOlnDvKCLqj8WA2eUXNa4xbfc\nbgYPqeqGbaPEFzX4gWvV8TWSmiv9pvvxImcOm3zOqjB+kHlSgx3Hee0ZtWin\nR5Uw\r\n=B/G1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e3346766f.0","@material/tab":"13.0.0-canary.e3346766f.0","@material/base":"13.0.0-canary.e3346766f.0","@material/animation":"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/tab-scroller_13.0.0-canary.e3346766f.0_1628883999308_0.4794836213234004","host":"s3://npm-registry-packages"}},"13.0.0-canary.2fb068fb0.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.2fb068fb0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c1f563c40e6a9c880fe7360c236d7ae3aa42f05e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.2fb068fb0.0.tgz","fileCount":51,"integrity":"sha512-TDPcDj0MbBmvPgdMMBv/X907bEzt7sbPDovCblyAHuq+BHnkANe/uWR9uFwYgZh4CVohnqeWFnESbU8ffVj9bQ==","signatures":[{"sig":"MEUCICqVMqb5n+3RCM2OrcWPUoMfWOZ6/MF+zqCAfJlTpt0fAiEA9htetTaEt6vAPosoMdAtFMOYzr6ufuOQhQ5u1hwj7Mo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhFszdCRA9TVsSAnZWagAAoIcP/2WWEtt38OebOxP9ICR/\nmoot1ldHnTc//sPKmzAj9NjdTaXNTpgI7t16UvOQ71SdXWBEYmR5mr4KS4WH\n2ifD+iQGfagJviJmU8BsxHq9ai4Ggz33cBnRHjERZwMb/mL+E241sKAcXO4l\nmFOlbUkjmW4VT7iHZvdwKv08IQMRs4ZHaDIyA6hWitKNCXKigi8S1WUcMnvo\n6qCjKOBWPBAXNyKvlWXfpG7cf2kAmjomOTflfQEUbD8hqBrBL6i38y0Pomza\n8Dgcrg7+hxpbG/B0NX3xonG5SXOFlnySKgZdnBy+1o3nqcsdiWhH64TsgVOQ\niQBo4Mhqg03yblNBXzclFuCQCEeUDuTOMWYyDoRR+7j3VCa51DqiCnmiBla5\nRb7rLvgvLv6Wohuy3IJv0WK/m/gv7F7Kt5GBvj2wh8HH/SyKZRpECqH5Uy1l\nnxdDz6DjrHJLI8GruPp7XhQf0hRuncXu4XbuXczbExBXiR+rpwxr9a2DzJyS\nmoLn0JoWgTjguoCFmEKZUlbTduMVntNBYREQ+2VKkC+FXM82BqbdiUlqyS25\nCDsS+ejs5+OksF+3OlgQkof7ggQZyNzq9auBAWligXhiXaS2T6VOwCIX+lYR\nv0cC9Sjf9pi/30RrOSnv+7C5fbywWT7R0Oc/U4he4oXZH97hQYnUvjgJV+7w\ngi22\r\n=0qrX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2fb068fb0.0","@material/tab":"13.0.0-canary.2fb068fb0.0","@material/base":"13.0.0-canary.2fb068fb0.0","@material/animation":"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/tab-scroller_13.0.0-canary.2fb068fb0.0_1628884188903_0.8992868979334168","host":"s3://npm-registry-packages"}},"13.0.0-canary.fb76c5069.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.fb76c5069.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5bfea99dcfbd61e2d7d6a8fbe1aff893e5a6677f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.fb76c5069.0.tgz","fileCount":51,"integrity":"sha512-pJlGFhfxHLuErNIhTaaxsxdUa56gX7ptPyH6uUZdLU171yc7tEy+cawvvqa3sv44QluP/Fur2bui++7iK8QC4Q==","signatures":[{"sig":"MEQCIDbEgDKjnYoP7E3o7El0zP6CekkE2CSs4uIMWTvFp/O1AiA2aD8FGRutLk+aRdmQqgC4tEZunzlZtZQb+eSQnx5jNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhGsX0CRA9TVsSAnZWagAA4t4P/jUpgE8hS4Xy2/60aVy1\nM6VErtDoGUm6c+02wGD1brCyJzp+QuUGdthSSpR1F9kNlAI7KlAiogrxqAWb\ndSGOOLH3hGIOZOtAMKBVhMqSTwizio2uZzuRACc3GM7geD8KO+ps7ZX32jDB\nZJ7E9cwEpyhJkMU+e3n9Coy3L2ciO+UoZVWQz9TiqwqYzpDYJROumt/5N2uz\n291f7byfZT6tjr10Jx4zjUsH/lCQ/a+B+fdt7HFTUP1SBORlGvM344SiRidW\nOkbCJwip6qvR1pYlko8Sist6uFeXsdUoyZtr5Adzu9dzPSuV3rXS+wvFOTyR\nGmrnrOmBfPCqJMVOywZ/vDqsRo2kwkIwQK+IU+nIepwucJGdQZ14jgI/Yy7Z\nxWpQUICSk/MtuyJXecc39BXhEyRrGre/M2PUnKxmplGCfcf3ZFnUhjmytITd\nZqc4A2yUZaVkmwByGOh4meSSk2LHuR6fbIZk6UMl9Hc9x8UOeeBxxGmyv+78\nyNy15JAyOriDMUilQ8Vvv4fsiDRJD11PcBP00BSeLYBSXcLMAgRw/TERROWK\n43stI5pdhMQDN1AGYhbXKxjHpblaen3A0x8uDYeJ017y9GGzZHiRP1znIIyG\nV5VqgAC7YVvnRJ40RuOs2mvCPexWPdlLWBMTP+UjNfNoL3ej6t3+GEzCHzfk\nwlr1\r\n=MaL9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fb76c5069.0","@material/tab":"13.0.0-canary.fb76c5069.0","@material/base":"13.0.0-canary.fb76c5069.0","@material/animation":"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/tab-scroller_13.0.0-canary.fb76c5069.0_1629144564365_0.661504387539364","host":"s3://npm-registry-packages"}},"13.0.0-canary.457d89aad.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.457d89aad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"84beba87204beb1742f827601f285e84392aaac4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.457d89aad.0.tgz","fileCount":51,"integrity":"sha512-gvzh6CRGMFDlt/fElLFtOfTnRpn1htBSF5ypfkJQtEqbvey+NmJAbna3xu+84bh/e008x6J430aSWn/9AxuKtw==","signatures":[{"sig":"MEMCH01cLiOllIYPgmTjGGdScPvnXxJ+7ahLwGywJLjQ+0wCIBq2c9N2CA2V/6pIig3OpSbMaSD4NlGmWnIcfSKJmbC5","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhG9RdCRA9TVsSAnZWagAAjdcP/3s8sATJ0rIg8fE/ArNN\nmZPhmL8ZVnu4LR8gy43HLs33CmAlZD3V/Te0QbLxo/dqT6psLFB8AiSU815h\ncrcaLISmd+icLPcoANU8E5Le2vvkTcqK8xnbZdA3FjSFwXxlAnZQdxCVz2HJ\nKXgLqcxCyawfXdNmXGTygaTX/b6t9j1w0HBoLQyDyC6L2dwT7IhpW+3G5BrZ\nFUNHkNL9K+tEw35bAGIjVtiosK37KFAJrTOFdbuJ1HEmEtRCYe3Vcy2Jbb4W\nFDztTf3T9LUKi0LYNjpMxMOEcFGYQC2kpmGt22OXwbUaAqCszl20rmSlRAwL\nH43ARSf3g9oVLuzk/1FaVeiu7au+9avxUzyW8MI8iY6ktvR/eJdb7eJo4uxz\nYjDEEiLpI6BQQwmuh4UH4Si/P5O8MwcHBGsttklTiKCkWwTeHPPaV2eqb3UD\nT8r5ujlDAJW0CqU5Ybkiwm0oj8jPy1xbVomzJ8PWMjCqcvcptTdJuQkSUc01\nOQluOsp6gYWazb2M+DPZfUKmwhTWD/7T0t/pN6QXVXtCb3dFrDJ8bV2KEMxR\ndFdnTtDG/eIWHSpLg/r3QBP+SPp7Qi//MKIkic3seiIfzIuPwsyZiYjI7xF5\nf5G/p8G+CMj5bMb1u03Hbsq9w1DfijfVytwnqSGuuUroY5tngVLTvftewYv7\nKgWs\r\n=hbVP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.457d89aad.0","@material/tab":"13.0.0-canary.457d89aad.0","@material/base":"13.0.0-canary.457d89aad.0","@material/animation":"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/tab-scroller_13.0.0-canary.457d89aad.0_1629213789402_0.64427605261862","host":"s3://npm-registry-packages"}},"13.0.0-canary.0de2f2edc.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.0de2f2edc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e4c86ec2ae154ef0c24d118f62c2006062ff8ffe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.0de2f2edc.0.tgz","fileCount":51,"integrity":"sha512-JpPQjEIHFi9EM8lDHy+USKS8AgpCcdn1eGr5EUne7r7yVu5AZK7sOFBIC2Ag/piTEd3tRkfT5pr2U3WemQJqcA==","signatures":[{"sig":"MEYCIQCq9nEwUrcIrEulZPLyBDyFfNLq7VrLMvkvxSxYEzYjcAIhAL8R8yygB/X9eQNzQS7qRMggrLvS0qaKW5xIP5tQztRs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHCJECRA9TVsSAnZWagAAYLUP/jspzEqx+QeQ0NZ0tKEF\nS2S6qLEPJW/4w+47OvUHmffNxePDBGNWkOE6cKR5wh51YORnBXPcsFYxsgK7\nZvopiosLqOEoEYqYAyI4AFFH2NlaO+D9DOYvwooNxsQ10p5IC3o+phdYnz/L\nfjYDjX2NyasHc3lMu7brjQgtvBD1+xuo1i8AXyeSrS9QTZetWpbXA47q/G3q\n0eOne243lhgEAE3PPkx14Jiyt30hevc/8vFhiCw7U+EnDNoAOs235k3MO7XD\nSqDNiUr7hkxO2PsW3ZVjeQ119Rp1aHaDf8VR1iZYhoPuOwqUrMtPsZjIYBs1\ndX1iGx3FFligdmOnn47uBh9ZPHVa3lk1GcEOJtCM5FzDJ7ncpdz/JU+MFPoY\nkP2iwuuTlMzCmwZLPf01wU4cI41qC6b6sF7FKrbDeLKbjIdb0IaD6QxXBz4h\nPedUu8RIezObIWs8U70+G5941ozHqV/i+oBXFmzPX6d+F9rj7zPphg/0eUCA\nBsZpnkZk0JhePVzU0iPU/xe/IexAkDX63fS2/dCbiWly3mdKvpQMnf2Z+TOE\nha/wHUbfHkcV5fdrzlxchMYhFMUQe8SVSyI8VeBtD3b5y+4fdnghbFkvjMx3\njvI601eg3tVcQYhqhxODnEIjzwscW5f22QVbwy0nERRkG4Kp779KZcnE18s9\nuOv5\r\n=EVoT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0de2f2edc.0","@material/tab":"13.0.0-canary.0de2f2edc.0","@material/base":"13.0.0-canary.0de2f2edc.0","@material/animation":"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/tab-scroller_13.0.0-canary.0de2f2edc.0_1629233732140_0.8389353463033702","host":"s3://npm-registry-packages"}},"13.0.0-canary.1f9259b9d.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.1f9259b9d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2141262e04ed55cfaee77f3bb4cd7f65ec0bf0fb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.1f9259b9d.0.tgz","fileCount":51,"integrity":"sha512-EKpf/PdtapitUmfbj4nnpjB7MAyws2KAckKvoQDnYR9ULB9ro4WgihifORtA13y+FEgF9009d7mYNk5nhS0bfw==","signatures":[{"sig":"MEQCICye8+7zF58CN8m65ggy+bw843kY8zgXhtyHiPYxS3agAiAbLUCpX9dJ6IifZbmquzyH9eCF/CavkYPdTpSIHHGqGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHDUFCRA9TVsSAnZWagAA3ywP/Rri9XNfema/vO7E28le\nJPLm9O6byxcv6cNw4q/qHP+SFuNtxggxRmoEBGUSb477tNE7P00vdTq+qnN8\nfYQjBtIYTuQGb6Xy5QVbMWU/gQ8CWu+OVhLxIwbe1kbwA0nYwIpd/5Nxq9RD\nNH9Xx4likA4tluLfAmu4pRkB2t46AyZolvB8mAvv6rBVFdqBnlM0Pb6ud8gm\nqsXomFTkNaiX5smoJcGsIFZOKLGMCVActjXdn0MWubYKpDHcpIRQ/DpV0ymr\nswMxzEAbmtFNixM89HRQ7orIsDRXKWLOiCz99WlEc5UDZ1uthMwU6zCNvutr\nR5pn1z8cjUHi1OB0KkFc+Ut0YGZI8RzGGEs797z/45MaYBMKyO0oEZvEyi+n\nhyK0RGysPiykZM9KFd1jZ40HxIUtla9ntciEpaa6Fs8udOjtHGLMNQ5frGEU\nAD9MNGBrXAzm5RBByXNETdgrmKUE+Zp/AxOgqEVZnG+85AVU9mhTU1fnKmfH\n9NLhiG2OrYmT/DkjEypWln1suw2hUP+OY99LKQfecKo3liEtxpADc/b5iOmx\njDrGQykIZTGAUzaV7xYBpj2nPdQMNSOlHnOMLsNKXIOnQ/5Ki2Dde5rAtP7z\n+gG3hOnYQeqqreFOYk1sj1nhkAwJUDqGMo1mfQlA2HznULRYQ+3wpjqXvfIP\nD6F4\r\n=3GUk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1f9259b9d.0","@material/tab":"13.0.0-canary.1f9259b9d.0","@material/base":"13.0.0-canary.1f9259b9d.0","@material/animation":"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/tab-scroller_13.0.0-canary.1f9259b9d.0_1629238533696_0.9393387081279894","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b9290351.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.3b9290351.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b51a6e082aec13fa749d6b3318daca782220202a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.3b9290351.0.tgz","fileCount":51,"integrity":"sha512-AAB2cWTf4Zai6WQPhjhpOC8oKTTbHg9nWgHPnS0VLBPZCm6fhG6OJJH0MjA8WDweURugwP+broweDgvDqQv1Ow==","signatures":[{"sig":"MEYCIQD9WI3M0Uw9dig2PN+XE/6D42k8mltIJCzp6Dxv4FfcrwIhANSyV5UDl0rWz4iA3MzadlIJa9jFs1ehRvXzuiwKedl1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHJnACRA9TVsSAnZWagAAS9QP/39QRh5k8DCws9mVj7pH\nruAUzrI+xNXGpRARrKVOEtqVLC58Ghe+5XSovDk83zmOGBy62yGUPvnBnIIS\nFoTsPf8+y43JXzfJIP23xHwOMzDRTbCYnRLYSPfILT+370tFS6xjdNChlQep\nVKwaeCzWnutyqpFhKXDmQAMebRkNCmK11tbU3WALdrJOqX6M74k+SlVGvrZA\n7H1Skhq9iuMqA6n7VcZ2jbz43D58bA8PKPwdHcDttVZi1oxBFLFVy1kckem6\n436CNCB7EYwZbMjeo3RVP3pjtgGERfc+kFWJa7FIt15sbHALVM3eGgsxgquK\n6sW69aItvDDqaxdsr84x2CU342pvobAKduKXr5bqh1rim+GPOR355Vu/wsND\nhmUT3r58cbseoImgCBDQfCGfk7VR4mVWL09ypSDhioaXeQHplrKSRtqOt7yg\nClCX98yCf30xemnInLZM2k5LoBTS9AmY5zzo4cynL/TRjmVQt/8A0+wY3yIq\nPiazs0g4xb1DdFCg5crLjC+2/k5/JdOPNLm4Qtv+hq2vhqADb71iLY1YMk+9\np+C0FsjpOqJwdpHgms561HEZp05klAk2bfFoadgLkN3Wm/wB7iprSfmH0vQv\nvlqvcjco/DfmDRzm1FGLYQiBIJQYI8vO6xNyNmqyTe9c+EMVpEmKUZjF05iX\nmls3\r\n=tmrj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b9290351.0","@material/tab":"13.0.0-canary.3b9290351.0","@material/base":"13.0.0-canary.3b9290351.0","@material/animation":"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/tab-scroller_13.0.0-canary.3b9290351.0_1629264320004_0.39846106247747226","host":"s3://npm-registry-packages"}},"13.0.0-canary.43d2eed2a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.43d2eed2a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aa8ad6cc3c87e88fa37e35a8a40825ef7030934a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.43d2eed2a.0.tgz","fileCount":51,"integrity":"sha512-Ceu0FneP47i0AM7hgUHwuzUrkUYlmsVX2TouC0bP/Ppn+IfU0vWA40xM1lFOqwberBfPrkMB1brGl0u8HPC+vw==","signatures":[{"sig":"MEUCIDdXdQSGagkY6WwChBQfpaHHxy+YiJvP2BGDeMLAIuQ8AiEAtDlSX7j7/ZF8iV+iVF70N1gq7m2eOxfjYbh6OnxlgGA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHS9SCRA9TVsSAnZWagAA+D0P/1tluqnSVhWKeu1sZdbD\ns3Ccl5U/kiMv0zES1ZdH0t595jgFv4dVvL8RVEwx03+7pMg+feMPAKZYjazY\nhg9tyLvge/iKftGrJ5QdN9Z7UYwKS+bHQYo0UvgdecBmLfFH6BikwMhzBS2s\nFYIuju3iJpWlRcv2BQl4Llt5vv8PY/3BRRkNfvP8ueg9eJpu5uhlvgNmuL87\nqatj8m/Ie33kUuD1Ke+rl0r9IsvlylwEXBbvrSYqg+8I9Tqf55yVxPBdw26C\nIsiH3F5FBx4q5RftL15mfXMq+w69yAYf28wE7pKvG+6c1brG+N8KyqF4EKuv\n/mUfcrZGrzgxHfVfPgb90n8cAMIHDPEii4u7r89xVrYw8BH7hrRWOjb5YncL\nTGEN4pmOVUVcc4ZmAs7vruzOLjr0WUNatVsFqU7KDJnWwPOV/gVqG6DqNm+U\naUxVDCtgSNQWPWClh/+R4L+VW6C5vLmKjeK1W2y06wS2uV8ZWeKpo++pRLLq\npl2K5OqyngGVXbaRDkH6+UTBQet1mNWrW4UVE797K+TaRsuqnfBW0yNtaxuT\nWb4dy7NCqjn7uQud/MO4xA5p4C9Oq5VeMGqYc15VnmbIpTd6Ngs8GtQs/q2c\npDr8pL/XiVSJlthcjh0SRg/a5SkQD5g956fwDKThyXLKj7GgKe3NEOc8RRBB\naZD1\r\n=ibgS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.43d2eed2a.0","@material/tab":"13.0.0-canary.43d2eed2a.0","@material/base":"13.0.0-canary.43d2eed2a.0","@material/animation":"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/tab-scroller_13.0.0-canary.43d2eed2a.0_1629302610778_0.9113193138794191","host":"s3://npm-registry-packages"}},"13.0.0-canary.0a9069300.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.0a9069300.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"13467b74fc9399561759ec183e097487f09344fb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.0a9069300.0.tgz","fileCount":51,"integrity":"sha512-GpDe0CZlNTUFYvlp6Hv0+5kp6VekWLRK02p5uuYhX8o5+mO0CCrJYNRnEgRSo7mkSRpalLGGdWAGojc16Xy3Hg==","signatures":[{"sig":"MEYCIQCgQi5qNp63NhWVIBGGJ/mKJ9BYtIaFIRAnSqgfwFlPKgIhANH90/qu/wtf2n2ReSiFUHY2YApu4xGQ2tdLppQSZBba","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhHoRwCRA9TVsSAnZWagAAj+cP/2LJOkZSk66aLQlCLELX\nV67JKHFN/1PdfNG7mCGMb681HvCzhWdEpZzcn6JIkl9dFyQr4sUlMOQ95YQR\nkQfBjhpTpzSDKAVP7V+oPAGDVdMRrplzWglQV1gtQ88bupylvD5Swz02LTSg\nLqTPT3/YWpsD5uNtU+6iqb8VJvxN/vfDCSLxyDJocWu4NOq07N+1Lv0NoX6G\nwpPEajJWZ4h3u6u6teAoRavHLw3VTbwuQbGvFc19oVO/q60cS68nVcJRqX3z\nF8JWtDk8crwFcCNZh+hsTl73h3LOUtbLrwmqVhEQ5wAMm93q+RexHTdROisp\nDzBQw0MRqIdjeNT4wRESsbD6XDuwNU9cSdp9orocpMl3KJyuw1sPeZoOEpeD\nlZLk4BeGFq/Ba+bON0tAQDqzzmHTcJhfYw4ZNZOG38m+P9Ag6Lyv4iFyA650\nZiBgL7ywVzWuJfAAYi2Px5OeBnCyHNS5pIjdsT8r684LnmJXVHAkq3XmE4Jz\nNvbCo4Ws1pNeoqL4udvZKxcvMSMIbCgUL8Ebjf3y1ZEj7mOOOvnigitVFi7C\nGxH+jtmjYToGFbi0QgZgoguKO1ZbgLrSFxSlDJf124nR4UuL9nC6I4J26Ctm\n/y9zn497MObds3Qhes6WFFLWD21AljuRKHmPGeeIsT0gYyzf8biW2607SBqc\nPY6P\r\n=iZ3W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.0a9069300.0","@material/tab":"13.0.0-canary.0a9069300.0","@material/base":"13.0.0-canary.0a9069300.0","@material/animation":"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/tab-scroller_13.0.0-canary.0a9069300.0_1629389935921_0.5010296983096665","host":"s3://npm-registry-packages"}},"13.0.0-canary.7da413ed8.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.7da413ed8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"78936fede3e5043e7fd767374e99a27ea4702a93","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.7da413ed8.0.tgz","fileCount":51,"integrity":"sha512-2gRJR8uGazYRxZxzt0FavMAXf1yq15HdShqXeEgelBgIdR8+RpwsQazspb0zEtHiqltk2Dcy+bTAoUGUMN7gjQ==","signatures":[{"sig":"MEUCIQCRugRHUVB+BsLRZWtbciDJf6RuQHCm8lBewQtNlBj54QIgZ4lEOLX6NASvi6qcy/byEWLX0LdONeY9fiPqS3ofDLc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhH88xCRA9TVsSAnZWagAAtE0QAKLsbK6veuD0o+gTUmPJ\neaGc6ArbARZ0yzT6ArosGG8nA1g+C3UTXl8zX7qTgcfvssDNS0cjAyh49LLL\nKRH9fWGGcxepXA3Pnrfr/hip7YxYJW7jZ6ksnbcR6W0qhNX4u+v4sXY4RcbF\n1M+xK3ls2jETr8FPIO9mVi4lhTUzdPfeGLr0luk7b2MEBXFpJV1TqCxdbZaK\nZ/bTS8iZmYrFkotn6BdYkMSKdQIn7ZKXrJloilAT+M6FL/kdPdgBTjcbmXGG\nKQEhXqpTT5u/kZENR1cQ2pUwbmhn0g8apZqy0IzsO7fD3vhkPGnrZYS1aogl\ngG3dtE7ROPtkVShu773nvm9b8M9n6V6Ks2LD00pkX4jY2vmS5Am9dW01ZZdo\ndaXCly0wvK8tb3y9eGFaqvKQ4BwnjHV9BCqB9341DvULa5uZE+q8Gvhryt7x\n1tI3i1H5ATpe/ZBjQa3oUCtAZokz/JFk5JSIVPPHGIDCA6Cpqongs7CyogwQ\nPscyIbff5AxTfu4M6wPKIP5vPxEDqqVnzrWU/RZG0KXWpETnGoKjsj5xvC+M\nyz5JCVXkETuljSliS4bUyhohVZutWHtw99saOb4OZ7GP5pRtn1EkUFU+IPdY\ni74W2y48rMKTRSOS+FTLRTDWkirjkyOFH4jAdOLlOxHdxdcTPheWGV5nnDiZ\nKEYX\r\n=lbu4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.7da413ed8.0","@material/tab":"13.0.0-canary.7da413ed8.0","@material/base":"13.0.0-canary.7da413ed8.0","@material/animation":"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/tab-scroller_13.0.0-canary.7da413ed8.0_1629474609464_0.3373258994748711","host":"s3://npm-registry-packages"}},"13.0.0-canary.e1e69fd8e.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e1e69fd8e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"499f5a64f6daf157093a1d0761f16d0a3af03985","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e1e69fd8e.0.tgz","fileCount":51,"integrity":"sha512-hKXtkHT0iomL6//KVyC4FP09aS394TbkF7EbO9VxphNpT1P8D6ntzRxPYP7yRju92BRYsQQspN9C0zioICjfug==","signatures":[{"sig":"MEQCIFUIkHD42REddDpnCfuz9I2G2G3shQW7B1HF9lvjBOcAAiA3ykxYqrlnV8IF7dEnkzIAjFNC3ZdQWYgz+MmXkbw9pg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIAOLCRA9TVsSAnZWagAA2+MP+QAvqoks7Qn30CN5ub38\n/t+jhPQI3OnwtmjaVK66QD4iykQZq+GYflPQH6VlTPrSqYEAMbIt3jZblCKW\nS5H1jIzcTQrckie6/5I0VDhKm6BiZ6XxEA6Y6YefSTgRxhfefJa2leK+7b1l\nuiXreXn9LdCZLbDvi1DPNC/WkO1OQ/nmWnQuR6OT5lQuaGThm4wlNbMXvZ3a\nTTsTWVfzSRf03cKcBkypQIwlLGLhOHJe2i/JaTYYau8zetfiR5DkdFFdGo29\nqVl4tqejhkpSVOlFTW8Bfc9K61ff5TG2Fmx9h8lXbdPstgFKqEeRY43ehGOF\nqltLlueEmPcGPp97z9mvwuQa2+BPTJW7eUqikzY8LrYQ7LXFqHsFuU6UCzsY\n/9y28ZLgSgKDzrMdpStD4EsC6fzblQ7L8FOH6lEyOT52LWMSoulW3CDoZV17\nf2iZGmS+8jDiqeM95pQ2pysEjC4+JLA5GMyI1DnN3215dcIDGBpjpwbWAzZe\nLwlRbo7IugL3T1Lx1O+2xkqTPJYg3jzEOo9KoXJu8T/hGLGnzawNJGKEp3qW\neQUlD1Zq/wCtR0QSfiaD66LVRWO/a477yrqQbeCrBZltL8yYLHUzIyUWgHyQ\nRTaznR4LFEAfbudUffzPMBZ32bLhSo/PPnQ5+qoRfZ7qvzrss8AfkuiaAOXW\n/Lp4\r\n=RAVt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e1e69fd8e.0","@material/tab":"13.0.0-canary.e1e69fd8e.0","@material/base":"13.0.0-canary.e1e69fd8e.0","@material/animation":"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/tab-scroller_13.0.0-canary.e1e69fd8e.0_1629488011525_0.23273625375465112","host":"s3://npm-registry-packages"}},"13.0.0-canary.f5afc16df.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.f5afc16df.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fd1138666eb23de1d65ad7bf1d45741e1e717cf9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.f5afc16df.0.tgz","fileCount":51,"integrity":"sha512-/unZnXsAnbG3O3c8x3/8HhD9p/MMqUp6Sa9BFkXZgrbqbBVspwYLbGU0hgb5J8UDUI8VgtptiQLW06CFWw+AxQ==","signatures":[{"sig":"MEUCIGloHCciQKcTuhEvykO9T5LroxaVr4VANhKdQz4KNLbeAiEAw6gZUbLe1ckVvElyFgaUs1rxIkXzmThBlQ22Vj5WbJI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhIBBOCRA9TVsSAnZWagAAQhEP/A6dWGrnplJbOkgIgwH2\nGvm0MHqvZGR9WmfdzyZSw4iR5QyCeWqRncWkyxpxTMXAMT23lmC/8ZMYF/1x\n2y95nj7XiTGvOkcMqE64dcfceU3ja0dZ8Pn0Mtk6Ez1d9IrvbNPQ4zLnkvEs\ntjGhlQhM6BeE5BYLworzpnjmkHvtfekuu/APSrQ+LLaY527j3v4K3jsjTDeM\nHvDO4ZWC384cjOz8wN4Faq7FpR/vlysyw426uAPkIgbCjoljo8/f7EBckMlS\nF5m+bwk4weVl8fk1X5dls15U4ZN4g7o4OzoWMpR7MwQbkJC6YoO1o6lLBp6e\nCMdHfDdJPtWqahZt4alyYPjBpBvnKg9xPH3Wcd04X72cFQE4aMbJbZxsNH8A\ntwVOkOYtoKdViTn6mZDAyoTT4mrbGvaSu0LJASBN2tPIseuO98nSNin8xc1f\n5BXtoqalS455yBVLoAG8nl8q/kjW+AqMnNwoPVABIsq4IM2niCky3Wb+j22y\nBvKVszqwyzKJUvrgb1/n9+SyU5Q9hWJxSE4Vs9KODre9T6fifGDscTiA49GO\nGwu0em5T7YS1t5U7ymAz4NWwbPtqzqJTbh+oRngQdZTEGVQLETLzoyS4RwgR\nduSY7XYaE3399PqepVZ/WkYAEQxrR7kDC8c66WCWRiwyF+JwtDiwb5PQcpqd\nc8YA\r\n=4vyo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.f5afc16df.0","@material/tab":"13.0.0-canary.f5afc16df.0","@material/base":"13.0.0-canary.f5afc16df.0","@material/animation":"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/tab-scroller_13.0.0-canary.f5afc16df.0_1629491278512_0.6450265072276697","host":"s3://npm-registry-packages"}},"13.0.0-canary.28d0d75bb.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.28d0d75bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"17fde6393b9cdbb34485dd75f8269e3ff9dd54b7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.28d0d75bb.0.tgz","fileCount":51,"integrity":"sha512-Xj4sihT5Soxv14B0sXFcLc35bNkj6iFMG2k33jNEODbszvVUi30PSguiuZgJbKQlOr7A24ot8FXhpriJqnJ7Bg==","signatures":[{"sig":"MEUCIDLGaUgL6XXruWcUlHr9Aew7ljAzH87udxhK3YhB3rHdAiEA7TMpIJGCskomnTHW2iwq8NzxaAbrKllwuQlbshPE8kQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhICryCRA9TVsSAnZWagAAdf0P/1XX16Pwz5Z6z9Hro0GA\nm7aXqed/xsYw919vVRJJ9smhNBpede5/F4Osryj++pmDQe+xsqSs+UbLMSqH\nKrt/26+1rc7Q+eD6gTdl49YgW6Eylfdndlqub9hIqY9B1ubIl9OOxe06I2i9\ntpRS7OZOJwZeD3ta3LD4hr3Igm25W1ohC7KGxWP6bTTXmxGywn7ms7ZS9pZ1\nmRUG69qo1eCmG7MsHDAaGqoqvwRJ+2qSS2Kf6sMjbDYVEQUOoRlMHuruxFrY\n4vk6hfpsd+Amzz9sHw64LA1PwboqYItWBRrCjB9FQ8OAVJgM/Here3+GrLMj\nbQu99SC8q2/9q9CN2IDYIlOOLzOeZy7LSFGGPophExqnWVuk6D+R8LW5OH+m\nd2gnyTgYvVtrOlxnMWtQmeNtHAVFdfme511DK3UHbg4yhZFdWPPg4RBWmUT4\n+z2F7isCyL30yF7jF99/HMNnJBoiDIB/EtZ1CXA9p5hLtI7OMuc+bgPkn8tF\nvBRKR/ac1T/Lzis3bkx87alVZU9szC2/aB4uoi64nlGVif9/zU7f3mFHSEeA\nYHF+U/5UMi+9XlQKNM0zKYMcfo/rWCaJdjg/KmPEOCyTPNj0hvDbB9yKdZMT\n0ltKlwqnxCwTrM5sSmdJ3guHt9i1U79P5VaQlNmBz/J2T/UD62VbtWI7GW9M\nsf8W\r\n=CFmX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.28d0d75bb.0","@material/tab":"13.0.0-canary.28d0d75bb.0","@material/base":"13.0.0-canary.28d0d75bb.0","@material/animation":"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/tab-scroller_13.0.0-canary.28d0d75bb.0_1629498098034_0.3084513883236424","host":"s3://npm-registry-packages"}},"13.0.0-canary.21ece5360.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.21ece5360.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"753ae5c1ac8bf6a1c2b647214fb2bde0db3567dc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.21ece5360.0.tgz","fileCount":51,"integrity":"sha512-OYXT5k4tgbxyNqMebMTY6cevjOS1dkmP2OGTIVrhnLtpMxs2BKW1+W7qDRWhlUyghHI6qSCk465Mgh45cRtOqA==","signatures":[{"sig":"MEUCIQC1gZV8OmvT61AsJ8xb9FSqZLymlVTuvGq0bfmuevaidgIgIMJKlnTF52+dwcMkQiyVTKmq96ZwYSl4Si1UyHsdEiU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhID6cCRA9TVsSAnZWagAA+u0P/i1w7Gj+TXytfWNWem1Z\nJh4ojPfaB/NbJ2I81Fmwt3LPuLTba8HKGiKpF+RRCOszmS6Nj4/z+a0TqVME\nUA5us3p62+ErcFSd8o8N1nWnVnaOL/PcX+7kel1DHID1noadSdf6QvDbOl0/\nPV+prCEKu2MN7wXvWIO2b3CpAU3oS60DCq/0/t/j6jsys/l6BuLpOIPdlgsF\ncJnGgEAVtCiiTHwMS7AW4JxzE07+Kno3QTfUySm7XP7x4qXjLmd8fCNwwRfQ\n55JVObtqcVZL58vna7X7H4677mPHMUKIECUovUMmi3R/R7egGS0gKpOXZl9J\nsXoHlupmXf79uK3McDMuOF57QDgfuyXd80jdwsgSRRpouEVDRV3wqhB8R0BM\nvFKAK6EoiqoLmB2M/SwCaYqfGzRKGqnijhBTwSSizJ98wPOL7zPk/ivsqAh8\nj10is2MCsy+LdOfE5Q2udulf3BK+jjHH74mUoKEPplrsjj3tix57pF8avnqG\nzc4KRbxcTSVp40KgZ/vFjIJ3Zs8k+yxFUUd32qo4wk8373jhk4E0gaTyeoX4\n3Y0XYnKOp9KKec49ClaSP1oeEDq4f30WZit92QOkH5YBgniqKCChwOV4YXFd\nFgFiRf/IFcDUoZumCUXZxwY2GbMqW0ukN63XxnQ8QRNnB86c8oPDIs5orOdi\nPJte\r\n=FoSV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.21ece5360.0","@material/tab":"13.0.0-canary.21ece5360.0","@material/base":"13.0.0-canary.21ece5360.0","@material/animation":"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/tab-scroller_13.0.0-canary.21ece5360.0_1629503132678_0.9253764545969119","host":"s3://npm-registry-packages"}},"13.0.0-canary.8de07c02a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.8de07c02a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5cbd84e3467e204a0e7dff44d104b0fcf645447b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.8de07c02a.0.tgz","fileCount":51,"integrity":"sha512-QlwKMfeN0SKCX+BBsAkxX6AVoefPb04OYY0soRaUHbDEK4nxdjskoUe2vuM1lOaWF2txoPOEKx+ItCqpNqy5xA==","signatures":[{"sig":"MEYCIQDMtcyv4P7LllZO0j5mNT2Nl3KWtWHJ/zHG5JM+T4ohIAIhAL0WfP97OEJZy0Yj0HOjvhorMWslaBjve6eeR9SeQYFC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhI76ACRA9TVsSAnZWagAA46YP/jrh8eWdiaypTshAmYR0\nYJeHdj/oPZgJxoJcZvpisrHH8UkNk25FdPd5BTNxmk14pOBdlbkRazcGKcpH\ncwU47Adws7f8KBBYh+S/ClbqNQMXpEgDFGcMRJumeku20R5bUc0Lvw7Vnux0\nRv5bsPBs62IQvJxFFUlM999+gAB9ufZsMeb/FxRL7xnUmM/UjudwXtNoGaeM\n78HtcV7MJ2apdhZBT0lUPT2Teyik8nNTVOwkTQ6OMhqx0zUcPIA1vMb4IACx\nZPjB3NQxliro9zJHu/AH2i29wT1DBWy7UdTjG4uUpbtTJnVTgosb1Eq9079c\n2V1Rbqju5szcTJSng+UT7An4kfLylpHmkYAP1dsd5nrWWHL0SdLeGGx6sXnQ\nsG9sT2p/FXu51OpZv5/4F6Puqa84CjQ9RVYO8M7hlQzHtNr0d7YWb3VHYWm9\nY5sbxRPwWu4Fce9pPDtgel4uo4f9zYqcxLsorLJfPhTs1O2EROdKdUSMpa4N\nfUcOg8cCbcDWwZCgz92LkDmgmivIq63vb6vNotoezXuIOzliWLfgpasHMoBD\nni6F0V2aK30GX15xLc3OVrKV+sG7A+2qO8K2NoAkn5nYdjDbVSIS2XfYHa8I\ncFmIVyVbUY77X40fV+nhIpfuGuxHfVXIPOPQmnv1vSnyNx+vxb8Ufr/X2ubn\ngok0\r\n=f8oy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8de07c02a.0","@material/tab":"13.0.0-canary.8de07c02a.0","@material/base":"13.0.0-canary.8de07c02a.0","@material/animation":"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/tab-scroller_13.0.0-canary.8de07c02a.0_1629732479937_0.07817710563161495","host":"s3://npm-registry-packages"}},"13.0.0-canary.65aa63b0c.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.65aa63b0c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"26acdd5cf7dae3fbe9a00f760813b4993db1292c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.65aa63b0c.0.tgz","fileCount":51,"integrity":"sha512-CD8jrL76lPLVcOxTMjsuUK68Y6vc4qtzzwo+8UxkwGJn9actI9J5jISt+Mqm2Vk78WAlpQWWfk6VVm0alGpqkg==","signatures":[{"sig":"MEQCIBFmI9BP0VBWD63zOX9RVbZ30iaPoG0oN3nkoLtsE3GrAiAatp0LAJEKaKn8/fxv6BcNU8BPaUkP9mRdBaqFf0pvsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRB6CRA9TVsSAnZWagAACvkP/Au0r/36zhzh0vbQC1jU\nHreeb+LtXKXaJp8mvKOevynCQIbY87pcQaIXUy1Out3BT3HD72+zAIMPAfUC\nV5JTXGWD5DIVrb+m5bcNiDTmyha3jNqRMjoOEKGVnwunbUf46WbV4H6VaBDQ\nnpMWbm7gXsD3zXTIYMak5W3EZvtuXBNBNGOLgnj5NNVHnKpVw0oFW9Bq/I4i\nDtvQeditsowW3bPNkZeQnpyneArb5IafbUxr295BnABxLU340vIeXylCiLLe\nYPMo0xlij0RMl/D39/krDulOVezJgjt9s0oRgWsG8n6PQINkm0M9AmUUno7d\nei+yfY8YMe6hiVgI0bWgaQZDu6JkMpeJo63nGbxbNeVESc5EAxgfIoZ6q/7V\njn0+rY3O3wbjhiptuiKNKfJbfcRmeAA7XZvVu/QQtyNsNYZ0/MoxDQxZP54j\ncH5wAClQGNo+vWK1C+iaztdk+kHOREVosNhdIwjnxMyEaE/qPbssoOrXpPuj\nDYdmhN37iPZUHGOHsu+ITOaroK5/Y4UajTaPkEgaQkBiMyy+h8ACdJ/EKa0x\nVnJ3VfJvjt+t9Did2jpcFN5d7152R/EAx24qT0DpImHrjqB+vcHDL5euUnUg\nBYijYSDvSa9qSZzEDeRdIm+Ojb5DUOSXheu/NEyqxozak9mUpV8wFQ4e6pLF\ngh56\r\n=bFHp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65aa63b0c.0","@material/tab":"13.0.0-canary.65aa63b0c.0","@material/base":"13.0.0-canary.65aa63b0c.0","@material/animation":"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/tab-scroller_13.0.0-canary.65aa63b0c.0_1629819002655_0.14396976973928166","host":"s3://npm-registry-packages"}},"13.0.0-canary.15981e9d9.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.15981e9d9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ad8ead9d62dd379342e2b2ae294ba4462b6f7ef4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.15981e9d9.0.tgz","fileCount":51,"integrity":"sha512-iGPf2EYH6lCvNk9USR2brEDXnJryFI+mlMVNwMDH/JgAKBVbG13IDdAzIpqr0uq+SDTtYr8tTJv56DgQKwmJVQ==","signatures":[{"sig":"MEQCIEJDFGGVmV0O2QgHBSNa9/ZFW4lKyrVIdAQ+1lhNyHmXAiBm3A7UJXSpf9Jac/fKZZ7UmMFPcLDRwrdf03DDvZx+FQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJRvUCRA9TVsSAnZWagAAzPcP/1S3JztBzduRAcBlGlwA\nPxVXHRPQk7gSfzDNnrpEvV9HQ69aKf84rQQs6oGDkdNzEBjpF56PFRt/oz/Z\nTEWPsJjXxWU60J/sCaxVfzanV4y7l1LKlWtpqf+FX80EfKQ2keHSAyT+fx0D\nXTpn9dv70OihSJhEE1x5xvQkCRgD3i12rhznAaVGiTwbWC7T6xUT+Lc+WKnx\nuS/Mk3rFGPL0i7FZnCakiReCFiDHLDxHsaIy4rLQ/R3Q3ROB4rfB1psuq7zh\nh90auJta5fwoK3UBPOZtTva6eW3SlTANdIva6jp9vJFAYoxXO5fS7X4BLI0D\niJlaImvdYKOrItM7T/mXrp7F8UL4WeFvxYhKRCBUZE3ML9rc4/ftiAKNocOD\na5P063FlK0IRK988MTr1J5TjX9yX7+DsiSilbekFmrA5hARDshtlDxmFt1uz\n2UNh+1acZN9A9GWFoMurDW/nx+LN6MXGZrgx19y50BMg8kKldEG85Ru/0aTZ\n9N3J3hvOEKYceZ45YgX2/BB0rfqBYjy9gafiPOeqboYhLMGIF7nE9tEIiS/Z\nZsyhuLeE5Sg6w3TyvBsqRJt/9yf6XgqNywXcUQf55dQR2qEOHdL4S3yqBwDi\nQObh4XKc+wZxNErtec+oP2T5hO+H8d0sZiRv5SZ03dgoS1nFLj0LQu7HYIV6\ntjXF\r\n=6itS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.15981e9d9.0","@material/tab":"13.0.0-canary.15981e9d9.0","@material/base":"13.0.0-canary.15981e9d9.0","@material/animation":"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/tab-scroller_13.0.0-canary.15981e9d9.0_1629821908242_0.43651443544375734","host":"s3://npm-registry-packages"}},"13.0.0-canary.fa7520f62.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.fa7520f62.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7ae738779b615b7269303ac276307851c7e5248a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.fa7520f62.0.tgz","fileCount":51,"integrity":"sha512-Bie6+uG6vienJRgV2kRqogCZig97NtOM6s03xV+/wBL4zEALHFbYn7sruv2tRJuH84piy04s1ubizE9Fe+tgyw==","signatures":[{"sig":"MEQCIGbdnPieoiwrEWixZD3+THcWopeS5tVmt+e6+9WinCHNAiBGKQTpxL61vQdOzRM6GKwWKbode+Q8SfK61vl7cDjNow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXK1CRA9TVsSAnZWagAA1IkQAJMgLvSexzUWAVFHNPfd\nYvfgENfxq+9GHO5s2UonYLUxE5vJ2G3Q0/m+bghsigPcLslkyBKVKk8g8jb0\niNhqe8mUa9O5RStbdugr34ekP8KmMR+kb35AKP9MMoLm9ZOYpdxpZ2AO0dkp\nyAm1AHbtX7v339vCyZa+EqMOGN2Xn1hbV9bpG1Oko39qWAGQvDmIMTgLyGBL\nECl8k46IcyDRYAQbJnZvvGbUK3pFhLBsAf2+41CZ9E5xNQb6l/lUY7ExUh2W\nVVCH5d7MWusQmEAziSvJIV/9IZ0ThoR9I4sqYBXOFIga+8aCkchBEy7ELfIU\nb4csva/4NfJocXL98E4mqxAq5uL/XJVvu1a9DtxlXwiFO5Vc1DnF9f23noQx\nPxAY9ptvy5XOUZwxDDDNzUPnHLB2Fq5ugOKRqD1SjsCSR4PULowaUG0LomTi\nicVziaT7OrqwF4Efg5da30Xl/+zHhSp/3r45aG1rTG3yhmeGWmoNJDNN23LZ\n57vgKo+5uAlvTDkfpvI4+4zpHMstibi4tNhkzHiIK2G0X5uVJ/ugo+UNrNAB\n5FHwplU39U9tzs8C0cTbfSeDBhpv3IhPQhBF3ZygwMkgjwbhNHmNRsVgdFL4\nW6iVgTL5NI0NVnqbhy6+8h+kaxd65DSbMNJPZVSF/XN2Zp0xManOZzwryMPB\nbIZz\r\n=o+73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fa7520f62.0","@material/tab":"13.0.0-canary.fa7520f62.0","@material/base":"13.0.0-canary.fa7520f62.0","@material/animation":"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/tab-scroller_13.0.0-canary.fa7520f62.0_1629844149191_0.750384200009431","host":"s3://npm-registry-packages"}},"13.0.0-canary.ce25bc3ec.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.ce25bc3ec.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"adb2440a5055627257f7dcb2ed91e415bd152edd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.ce25bc3ec.0.tgz","fileCount":51,"integrity":"sha512-4yyxbHfwkSeGLtrhIrKt9lRE2B/vSbdzIlQWOLGNnDLlLqRLdKlXUBp07LgD6zd1XqH+HFJ3+Kh8oSIXgFSwcg==","signatures":[{"sig":"MEQCIBaiFkoon4JsbWomYJKLEv+CoYYdB5iNGZaQh5uiKLofAiA5EiqPTE7KonGpWgeX7wHG3ioXHIAAXv62wsTE1gkpxg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJXeNCRA9TVsSAnZWagAA4ssQAJjExOVZkiCEMhUzl7GN\nHc9mw3nz36y8qOPL+XPQQcy8jGYA6Ip3o2q4aO7X+tp7LLJmz9LWbOOi4f2p\nTKkKJnp1ZfJ4X1Nr3oG6mlTDod90LaO1rlVy/KQCkKxftnAEb9XbThrm4pR2\nD5OO1zSF62Ku5sa/cyGnq/6CaGfboAJrcO2ShizSXeBPQn+bJoHLty2M+GnO\n+dUubHCFUYSmttipuqXsiY2Prr1s3cN0QrLBrmH0FzUGmOpnlQdc73px1mo9\n/yydx9csn+qLM7WBAc10DJ1b+4uNwaz5PZTdptwVk5GuYkCZF6PdVYL/D6Eq\njI+mg4RgK/nWOoSU4agrwjdJK1tUXnSGI8dPn9Ye4+91SjshxkgdqaB17Inr\nLSIOjauA9laL7viN4SoHz/e89RJOjmbBqXCLXKaEhYLG8wUb7RdRmEEBKekU\nmNLaqvkE7UNkrF2ol6ZQt9z9v4qmelvjO9KDSrNGLLaFHUmqDF6lBDBeTZkx\nQMv83cTlNv/X1uEk2No5ir5yIFCorDYgcxEAWhOuUZNlxVbpncVnbv2QOwwn\nhB8hwdaPGJgqBsAtyV8ZquJ0ibukgBLui2F1VxIri4IRQot0rqucMejjyNik\nxEUQ9QOcQdaSwfoq2JjSepBWFLflF9wrWgTJcmNXaiHA/2oXLcV3x+yMA/DN\nFc3o\r\n=/Nl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.ce25bc3ec.0","@material/tab":"13.0.0-canary.ce25bc3ec.0","@material/base":"13.0.0-canary.ce25bc3ec.0","@material/animation":"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/tab-scroller_13.0.0-canary.ce25bc3ec.0_1629845389022_0.4404675568243539","host":"s3://npm-registry-packages"}},"13.0.0-canary.12f5622e1.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.12f5622e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f8a807a590927240841b70b6f9ace5a787381b78","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.12f5622e1.0.tgz","fileCount":51,"integrity":"sha512-7OdZDVRjP34aWyQyMqcPT/Hr9nyCHmveWeaSJEqfTnCjfmhYYSBYe8QEr9uuRiUMj5yhRTEyWNdEA9l6HVTwJQ==","signatures":[{"sig":"MEUCIQDohKAXLfvtwij3W1jMFsOpEZfXx8SrIpEumUlHsNG34wIgGOOLaEPXGL5MvWd76cVecCTt3ApTmEZicx/TsXfL2zI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJX6ACRA9TVsSAnZWagAAQoAP/it4+8CzcPqcMmrTZ8Dr\nALu80CWsJQ9s0TpH9kLAX9psFq5C6X0T6JT6pNBsKprMzjMsMhj2bxgC4etM\nbggi83rMxxnv3y9xu+e9u3OXSwzIjfhFSD5KtOiqW2MGPlH7Siz/MyfgIfmq\nwBasFcukgA6538TyD92K9ako69hlomnCiOcy4YP0nlWotzOyrT0hiVE2R5B0\nLq9jMOlkc5yfEufj5QaN7R8vcgbFhtYCtDEcIaABEW1Q/D58zah+UmOZ06eG\nEuk4M0S8qHnpIg/ZewE577HhM6CJ0OA9PWCDwTV4oLvhIo5tQSflQPwxl5rq\n2jyBUoE0KCt6ez6oVzb3JqGWujqwluzQ22J5oyZz9XOJ45xJdFaTZMP/+pvf\nwnbmVyLGyIdSEPXcwVGmSkiiuhK1ATKKvofpsAyhzhG3fbBdz60k878OHiCU\nD00Mfhh5lDRTC3tifkFBlu5lJssAkM7fNZ6H7v+hUyW2LLYilDoIDL9N1bYq\nMN1YKAMjsio7+WD8v7UDh+NCmOE/1FjUWIowiaHnWyyC8NpzNoJbMZ62vJV5\n2w8AaBjogycdScqnUtTBKXL10tbD4vNOJSj0ggyEOHmTwjfEsmyOn5eB2X4g\n6Tjr5UbFV3wAzvD9Bl9JInumxplaqras1rRpPJa2wBHEb/ePPdywz5RBrQyX\nSbQ6\r\n=cFvV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.12f5622e1.0","@material/tab":"13.0.0-canary.12f5622e1.0","@material/base":"13.0.0-canary.12f5622e1.0","@material/animation":"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/tab-scroller_13.0.0-canary.12f5622e1.0_1629847168383_0.6677859451558819","host":"s3://npm-registry-packages"}},"13.0.0-canary.d97f8f133.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d97f8f133.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"427658df6b71390f2c06489c67c2e5ce637e22a4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d97f8f133.0.tgz","fileCount":51,"integrity":"sha512-AaKlm64srKfLAH/qmU29rsKKdNOIHyW8djhCPMBsq/acqG5UqcFdmkHARgVc5BPdnKfi5TNi3fZ8uJLAXoWa+w==","signatures":[{"sig":"MEUCIQC3kV7xZhBWQytyNE++QP5Ux27qFx/1Rmkd/kQi03ATEgIgBiX7VLBoI3OAF2SY5dzbQnJwyORIja4SFAenoI95m40=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJo04CRA9TVsSAnZWagAAuYMP/RPZx0s6NR+N+hwdPwe4\nXF9B2uQnjDTNPtGgnoSRnH4gOywula8o2pdxv7ojzxJsQiStDZwjUPZ8IOGe\n/gyHbSrIUhPYfi5xcxRUNsfQg82crYC1mwmL6noDyEiBin4RQmiKyH7XeTEz\nxMsGUn9fTTqG4GjZheIGKe68ry6O72MtHGsJz8mKYJ9btyi6WTwxhSyla5RN\nV6RRSbgEhFyv4pXwTmaOy+huaElIaTUZrdnR51cYtV5v7iZS9K5VnW3a5L1r\nzx9hnhfqKfN8oGR9v6Wm7DEOp3AHVvy1+h+P63/l3TiIyTObh4WCo+Ynfh95\nZaHVczW+skk8JLe10QKzP7sXx0LM/JrrwZhSii6XqxLVV3snKturFMbx5Ddh\nVmPK5ftLOzgPWrBJsOkiomxSuTVMO+2lOm1ZJ5VIA+m92SqzIUiDhtwa7xts\nNZ8qDlJUKX3sCpxozJqueRvVVZy9ml60PxYIYmZRp7fdd0Dnjli0LuAOd2eW\nQUUR0ylHZR1PSZYyZTJ5ZXq53RiD450zfpaygXy3GJS8m0EgGpA/rdzBEGJn\neKNjPUvG3th1pRAY8zV8rS470vIyqxfCBmWs9iaf0fp82Bh9Xiy4NQwAFlQV\niycQJLAnUUKdPeM3s5fXn4S3MQ2s+9Kw25Q5Vmdcv6dL7LzBb+vU3nHtN8Z0\nTd1G\r\n=sTUP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d97f8f133.0","@material/tab":"13.0.0-canary.d97f8f133.0","@material/base":"13.0.0-canary.d97f8f133.0","@material/animation":"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/tab-scroller_13.0.0-canary.d97f8f133.0_1629916472108_0.762126199501098","host":"s3://npm-registry-packages"}},"13.0.0-canary.d86fb6fac.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d86fb6fac.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e104eb36f8cf59ebfc56b186b35ab76b52cb32bd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d86fb6fac.0.tgz","fileCount":51,"integrity":"sha512-EzjmvZcjog+IIaOFCq1U2RmqdipD7ufNQ9B9bB3rwHu+IH7FtKbpkecQHFHhqKkMm7MFxB6go5S+6gPb1HlW6A==","signatures":[{"sig":"MEYCIQCWnYxruxKSVlY8GchjAMbNRHzXzmxqeDVsE0vfEQGksQIhAIoILyT8MT5s+w2tDqe4Qjp8tHsM2y9+TCdt0r1+OU+N","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJpIHCRA9TVsSAnZWagAAGLYP/1a7p7oFe20YzgCLzR8V\nF6ufeIllEe1vH5Bn6q0hzdVQtlZZuPWE30HcyDgQM5IhjvGgl+35V2ZsxzrI\nAaWpcH3kc9iu8RsNhSgwXzuekd+dpyQ8hFKffbEOLiNXQ5YNyw8s39KFEcNj\noXqvytEjLT6rZZe+vUTXI3VPcjKkhH76Eyy6TvtOoYK8zSW/WkprbPPOMTgO\n0TWVZFCfev6plcszCAgw+KUBGxtWrjaYA3njrWbLZ27M+ap0AYPwWnBrZ7py\nMOwgCoi6kDFutTLUfrkstlCsRTeYi60g3NsJi5jWYTHsk45hQ1lqfkeE9i4F\napnRNY+TsNhuhDRBNvrWCwbKR0fgPqDT0fNTVdWcVhU87seWEb3SqBf6O8cV\no2Mi6xX83MI1LH9rdTaEfUtlH08mnycJqS9/JPUV1BVx/C8LmdZwsLioVn/c\nafDJlOiXm7Y9RoozzCdwVqtYAzXeXRwLDqzRBpv3xjAdJ22EkRLgP+1AEy+q\noRySDMoF8g2o+RdZJZKRwgQc90aeoDJl+kkFQ2kjJ6kmPLhFhMzKxQiF3gCF\n/oG0gHwv8vA3GuoM/7am1lHt+KU14Ibo8iKASZcO9rT+pUnaAkN61rNu5MD/\nqEovrv3uWs4nh8WyeQk1N+ixRMmWtVCc9N9L76HcctijYaES+YT6SscntB9D\nIQzZ\r\n=/99S\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d86fb6fac.0","@material/tab":"13.0.0-canary.d86fb6fac.0","@material/base":"13.0.0-canary.d86fb6fac.0","@material/animation":"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/tab-scroller_13.0.0-canary.d86fb6fac.0_1629917702872_0.6648128854854514","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8554dbbf.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e8554dbbf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"77fd0cee547bf2852abce4f738bbcc007b842b88","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e8554dbbf.0.tgz","fileCount":51,"integrity":"sha512-jWBqj0bgZZgJhPhOGsFOOWNswURqoBLyMHGq1fnLMn00tke72J/5XF8xe+O9cROq62HUMZH5DD9NGD0WPdsa7w==","signatures":[{"sig":"MEQCIH2d601Cfkc1cLm601DohLsA0eijY8JYKRxSeu0ASGd5AiAQLQ+MsDgz6v/bICqwlqL+VeQk2cql6R7z0sGZt5LmKQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJr2MCRA9TVsSAnZWagAAlWoP/2Ek+EhBH1Mo9xah5awj\nj5WvqVDVa1zGZeTAiohk4j9suqiuvqIJiSiz4KivmJbksAxbSGKQ9DUXil22\n+2tOL88TMFq7bdbczPJZsGhmuVLXpaRBcT+LwKqMCT2fOf8XJypU91Cplvyg\nyoKKdwsIO65XAfZJWu/jCqD1umjL0FivsBykM4665RmlYqKD/yDRc+aodyQG\nv+7Y3G4lRUw9Yais8TXS8KKVz83NsQsdEb5pRRc9SJnHNdBtPLwTmZmlandD\nFAZ3w64o9ahz3nGqei67VXCk+LTG3aMTyB2BkBwlWdVC2iujYwcS1+h6W+Xk\nKvyUNuYjymdQNb3BljkZm8kg2aaNwH716XeqXVNCK8QmTAf6TXq3zn5KOS30\n9LRdJcW12fgAR5ppZz3MBsxu9eMe2fIodiYkuNaRAKlq8cUHjPkPp/k63ufl\n842qhwB23jpW2UvIJiT2m0rh4wa74t0U5woceGsuEnV3bBukEOVEcEaQkUQ9\n0NvG95e8cqmfWH0SDSYe+UB06JvXbv+xwio99cmNspWTdFURMJHmaxvRUyVc\ngpf8VXFBQH0bS5YY23s7nRmJvMzeymTxsViwvBwHU0JrhOYyT4h8a1TPvv2t\ngEVfmEDAGtBUjbSYFZfEdznX+li0ZKwbdkmxGxBpPeAlVcV8CzHlj5rh5odx\npCNY\r\n=Zo/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8554dbbf.0","@material/tab":"13.0.0-canary.e8554dbbf.0","@material/base":"13.0.0-canary.e8554dbbf.0","@material/animation":"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/tab-scroller_13.0.0-canary.e8554dbbf.0_1629928844640_0.7329208228671442","host":"s3://npm-registry-packages"}},"13.0.0-canary.877e3fb0d.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.877e3fb0d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6a7f640592b9fe0c34b12d322c9eb9c53e1dda38","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.877e3fb0d.0.tgz","fileCount":51,"integrity":"sha512-0qFe+8n1Ksq/VfYl0RV1yuXa0u3Ju8LgjAgfkv7ET3ZDlGelb7sb5RO/dN4kcgQWUstuEfl/ECE6nt51C2wvBQ==","signatures":[{"sig":"MEUCIAdjCzD/I84rx45I/e242z9EWROTfjz7wdvo8KstBOqVAiEAqbciBzGZZsFwbUykS1JCVwtsvAVHBBAhDNADItGxCiY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7W3CRA9TVsSAnZWagAAp00P/RXw8MwC52frdwKvVVCg\nidxDwQtWIvqnu5fsh7OUZTerX7drDI+8/retJJj9ILc7Xge9sQzd0sSZukrk\nnBXed6tclivO8jtcWg4Vk/j5OjHDxxLh7xIpiKvFTXNlPtMyoJIfwtAUY6of\nZEDOlFnWq7zm3KqNm/SFYyStKdlp0gF6XXMe+BIBe/nEV+nBnkk9xJjLNf8u\nsrt1TuP2Gdu1l2el276K7EAjvIWx+GVTKV9oklLYqaPGCCm8GHCX8LK1bJf9\nc+ENj5tVP0IEd8VmO/4mKXH+EIIrULNmP3PTmDSxYGnil/Ru5aVysAIjtGkW\ncASZG6nmEhzd+RT0uK33TPhbLJt2uJ1rAvo+rCD7rABnr+TrC9hyWI/b3Skc\nOnaJLgCF/IbFElKjRGrtSgrK+MaMQztymcBUkuzL1adnT53vVVR51gg6Ute/\nMuuXBXvZ7uFO3AfZbPTxSK2QQQkbjYpPphuQQdteaX2ypiw5R9TxZCR5Ons3\nFdt0Jb3RpXR6Ncw2bqJeQ8RGraS59VzEkI1/9l243BfnbgVQ2ZncZzcpSJlO\niwLUHsTagU4do81Yyq5cJHk4LBS0Cti8BiFWk8oyMeLYQ59sOJ6P8THqLeKW\n+X34x3FCcczBHs8/uQ/Zg1b0kS4Khp59dOtEdIyQyeTVYBa5HZrU8JmakZy4\nJcAX\r\n=+b/l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.877e3fb0d.0","@material/tab":"13.0.0-canary.877e3fb0d.0","@material/base":"13.0.0-canary.877e3fb0d.0","@material/animation":"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/tab-scroller_13.0.0-canary.877e3fb0d.0_1629992375189_0.44799294544523915","host":"s3://npm-registry-packages"}},"13.0.0-canary.6236f3576.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.6236f3576.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a8bdeabf5f44706c341cd391d7fac41b985765b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.6236f3576.0.tgz","fileCount":51,"integrity":"sha512-M0wwpFZsG1nK5m2OjsZVglAiqpB4slubvkQ26AflIPS3T5wnWwDIDbE9quDSWGv1P7kihak62alwjZmP5aTksQ==","signatures":[{"sig":"MEQCIDnE6le3aiA7yOATEmD7RF2YmXmWNcfkLfCZomCU0jGhAiBdU4sM9FKXNuO8uiQ+q42T1MRqGwmQ0bR+s8LxFe9GmA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ7w4CRA9TVsSAnZWagAAKvAP/21wmFMAtfqLpsbkKkbp\nKl59UfxIJG3a2rt2ovgfsa9fbMK1wRZ1v+iG5L/L01GuGwG5TOwm3w6Z/Z0S\neeG0d5AX42xaIrZ8kCh5dMnrf965yDxLV+ZRA6PA9RH+p2FMMHLvcsk9ireY\n3PB2yi1JCmLqrqrHYmeb0De7E39Xu9yC5dMXjH11kjE8709olyu11MTyhuUy\naEuHptIWhXLbzSYguOxqx1PI5H4P4nnqWqVeWo7LhUO6vrDo26zYxGmtiIil\nf9/xNg0aQjQZKJKVc7twgu543mk9eaKA1ktu3hvUxW+uhlkpl1/GSy95lYMU\n/+nTTD6XDJ61qLiZS71neXs+udoao+vzT3/dPdd1LkqQhGIOUgvUNm3Hbrgh\nZSx9se1rYorgFTeJZnw+aKf8zesZ6VixfuXyESkHxoL+mLeP2DPXbN0sa1xR\nOkZ3+ciGFWd2osMwrbY/wa4Rkk0yx6De3BEEd5zgmz6XPWBtA+aDFUqg1Dsb\nvm+mdzNDt36CMkzgJyP+JksxY0QX1r0UNFc5+uhExhQTWkP1dq0CoG32Mmlx\nPvm/dA/8E8KBOcqTh0z6GITArBBVF9aLwPkAACt2wAzSFC4IBpGrk1vnGgym\nu0LneRxLTtEAJ/IpMhEyDNEDnL7NsKLorP1pap/PPy6E9PHX0mXf6Zv5X3/4\nai9t\r\n=bQl3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6236f3576.0","@material/tab":"13.0.0-canary.6236f3576.0","@material/base":"13.0.0-canary.6236f3576.0","@material/animation":"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/tab-scroller_13.0.0-canary.6236f3576.0_1629994040055_0.6652488207950895","host":"s3://npm-registry-packages"}},"13.0.0-canary.1d19158a1.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.1d19158a1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b68b88dd63424aefa2660414da0e4f1e057d79b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.1d19158a1.0.tgz","fileCount":51,"integrity":"sha512-wUQy8aIvtjJfLvh6hS/B8INYyQATPBQEp7YTQxZyXFD4FJsm4DL3P3rVGTdOBX1ibPAM5sI3PKOMZqNdxrdY1A==","signatures":[{"sig":"MEUCIQCs1545qY67/jNt6sH5OVg+JVHVPqqLcDBFgDqbntnzvAIgKjI1FDEEu48ttnY4gExoxMNJun3RuEs6NJwASNlfxdM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhJ8sJCRA9TVsSAnZWagAAeOAQAIFBJCzTYXndFdR6I4Ke\nXdOvX9xCL+BmoVbtLB+GMjedaneq5eLDFoE30cBdaMFvsSQ7qZdVRYXEbrno\na8V6c4QgNKBC/+utokN+26W30JSv4LcrSYHGe8rDGxPRGkXeduS7C+IIk4eY\nCLuXngA5ZY/bQBznLejUEJV7RXorsq8tgCr6C3JzAcqjfLPZm+dmRJpQgVSZ\ngS2L1scSOMKUwwL+JH9hWgRukEQ9IqF6LfQk0VQXEOG59k6m5mMB+nz/fZbI\nbPV+9Za25rDBcheGC1tUqFFT2h0gh8n+aeJMJA2dA7UwMATB3/8G/XhbQPjD\ng5uspnCMa2AX8QLphZhMYdLWy62zb6nqHvra1NMu3BoyXSoAHRNfaQOIb4/Q\nF3L80ZBeAsGGrZIUvdjl8If/hJ+dZ4n8/VRGq8O0qCFiycgsZsapY/Irj1Gn\nrjyJMiq99tUG4UiCXUTsb8JxHG9d63+owIX6opD6o5xwARHb10r2wDXMMv1x\nDu6f5dGM6juuM9WQq0AaOXT3P3NBUKOvxTyBjj0b8kCj5k+Dk3BSuk8LPjF2\nhuSP1Ppx4BTX/CiktY3Q2r/ef+n+F5Yt3ebExXFcc8zKJDX09RZhLX81J+O9\njSr9CGjllQIHwceR98ZYGalTnbrLtk2sK16nk6dp1WIkSl7zv0hYcmt9KEEe\nNr/L\r\n=aYwV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1d19158a1.0","@material/tab":"13.0.0-canary.1d19158a1.0","@material/base":"13.0.0-canary.1d19158a1.0","@material/animation":"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/tab-scroller_13.0.0-canary.1d19158a1.0_1629997833220_0.9887043199863594","host":"s3://npm-registry-packages"}},"13.0.0-canary.6adc9e83f.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.6adc9e83f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"584b285c5fd33fa24425df26292423c2e0bc4266","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.6adc9e83f.0.tgz","fileCount":51,"integrity":"sha512-Qw/snn4OaJohoikYu0O178KZfQ8WTlPN9b16+jw4r4PVy8zSSj3VS+US3d/hopTzOvfowLKnUwYsVewlBulgcw==","signatures":[{"sig":"MEQCIB+CZISGDnphjmvjAxsQc4ggvpomQdepTxnPqUXSd+d/AiBkTwRtiKSHoO7EHd2KtFPyBiDJg6Kdo2hBaGpuaVfrPw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhLV+RCRA9TVsSAnZWagAARJ4P/2trPNGBSuU7WP8Y/0Ia\nbZx60staQc+6v3FcVqZIWOQNba1iyQxBp71qoWthZ/YMbX3+NZB08eJfeOrS\nuJpoX3vs7v6WI64Q7h0odU2jFa/jwM2j9QlySkYzrlJC8VLDpRHIJyXNqcaX\nz3xzciI6gTREhNC1xEaxw9Iobl7qLCcXrWrGilPMQVlhML5dD+XE1QrJoIio\nJDZsnB8nqB9zmzCLxKkzDtvQbo7n40nSFYEDIl4+yursIw6+UaXuNTfNHMj4\nig21Xgfgx3AL2RHjY+GlCK3cWc3AFda05HsH0D04GXm+EjhnkJS6fpGr204Y\ngqZRjDrAUnuPAQkbPff31h2wRZ1ZpLrMbzDEpEgQEQQ+8dNLj+yuux+XaUEM\nJJrAJCZPZAUH533Ui7cA/wDS7oaUeH+HHl7WoQH10lXC58qi9+28hTp5tQ6I\nXpaJrjgx0oPoMP/zo6pL8lEUMYFroLsFfz+5xVpRfJgqRKKvfvHqf/Hpp2bu\n6k4sr685bir25oM5toyP62WGePRwR+NcffzQwF+HAyaKCca1CEfm7F199G3w\n93nM7uXz4E1u5Q5JsO1o977G1g9hOx0AvU23G5WR68E86OPyKoenoRMti0/O\nMB62IvQwAtTW92Bpl4IhVhMOzxnLwhmGQErsszTWjxH8QJa2e95/x/FBqM/d\n0bRG\r\n=aFUl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6adc9e83f.0","@material/tab":"13.0.0-canary.6adc9e83f.0","@material/base":"13.0.0-canary.6adc9e83f.0","@material/animation":"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/tab-scroller_13.0.0-canary.6adc9e83f.0_1630363537113_0.07954642547456015","host":"s3://npm-registry-packages"}},"13.0.0-canary.d082790f0.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d082790f0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0a5187d19c0c6eb3bddfb9c4c130377377c7e9c9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d082790f0.0.tgz","fileCount":51,"integrity":"sha512-BQDHeonZflJvWKThG2agdylw11gvqEjTl/VefmHZ7w+VJmAlJpgUKJJY+wqMX8WppDvdcvLdgsWsOeuhCoNyAA==","signatures":[{"sig":"MEUCIGN3Yw8nzIGUK8EfIKfsCKBPdSwFnn+6eVVyaQgNPLl1AiEAy/UCQYdj4dSfMPIuwNoO/Wq1Mxx/QzHJsSbnobwcP8w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhL/bbCRA9TVsSAnZWagAAZRoQAKD6drTc0AqPJwgEtRou\nxNzlFZ2I6K3iJz1DWg2OKG46V2hCxBiT2dtIDGA0efHuO4C0uDeOKzP6TgRe\nEo1THUN6zaX+cd2IWc45Ib6syQrqiMn9LZJ2zliVpEVqAr4CxSpTvwQdw+i2\n4Lo9GgS5+a9BuCjCdj7qKG/hu+f7cuFi5Ju4+fe/Ri9uYY0twV+HyLiQUG/r\nq5T5nav+Y/MGCCiQ4s8BAiFDj41j6D40ScS6EBOodv4en3qGeIATBmFLHKGN\nKgQIUfJLKvPHLVgkmfP71xfpruxdcT6mUSvjhNLVXYPpMiGS0QMgl/7We/2B\nE5V7RghsGx70FKS8Ojj3q/FijgIjT/XYiDE1x6PM5iT+pPWmzDSWtl/K6aoC\n8RNNh+1ZmU9Ky4/5Gt1n7T2ZZLF6WoW5eXO2wU+C79aFzKoxUQLx3ocPMiIM\n5S0Fn/7SW3+XrwMMtu3RpLsBERglUCyiIYiLC1nj4Y1dIJRmvVYaDSqgXVhK\nILOq8rFYE8QdBJeZhLmB8x7ZZxWoWaRXCZwgDF7URy6zmo17V7pBx2Hq5xei\nVlD5MFvh+0ftsHZ3mtalbfEytyp7ENq5BRVkjd2KqnV1Ya4unaIUMLdo1UTE\n3tqV3UTG50EJ1l+fH7mbp1Qy9o7rgkoFG0pxYQL6xUGxrLyQ0774rDSODrQb\nKlYb\r\n=JCRs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d082790f0.0","@material/tab":"13.0.0-canary.d082790f0.0","@material/base":"13.0.0-canary.d082790f0.0","@material/animation":"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/tab-scroller_13.0.0-canary.d082790f0.0_1630533339383_0.6631778923692422","host":"s3://npm-registry-packages"}},"13.0.0-canary.e2c4f0196.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e2c4f0196.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f7198dc48079c2159f06a706d462f930d2a2a479","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e2c4f0196.0.tgz","fileCount":51,"integrity":"sha512-95QtAliq4K1edQnS0RxG03VaKGahiyc+Iw/N/C246X6nkDOP7t4fa+YBpL9C7QbF2M5+yQdR1h+d+9krl55DHA==","signatures":[{"sig":"MEYCIQCUl9lpFx8aOOQrfdmLmCf38am5BMxtx5RPkQsAZk6NQAIhALHYZO5skR6W0EkvNFZFq9YKA22D+iL94xVgAv/prDb1","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMDMgCRA9TVsSAnZWagAAamsQAIOuA1sBNH4lghjDcqVY\n8mi+gPUylW6fzrlU8rr6+PvyYcHGRVXrvNdzmnhz79SqyqSvgkyHf+a+Zlls\ntJi6IOi6e6tXXp5Uo1HwlyAuHgNFI221G3bttoQCeP5XdhpH8OxC9zdoaGas\ni5iS0VDHQW4HM6iUP5zWaIrgrNe+TSh3MR1827F73R3ecNHXjGrAPfNskOyr\nkkYwyGUW/4qpR8riuCAy+yVmm2UrpLC2sWCTBm4tfKYdQgTts8AlNCC9Lwgz\nKVdZx3cxx5WkMZaH2D7vvF0TT+ogOnLSGDriCXBjQCr0mMsSZHF+Xexgd471\nWCaq2amNY2nttYuKyYkPV+1jZ4FeQnU345dFHaLeI1wSuJasp+G4sVmM/VwA\neu8MrIanTIkmc1VXtF0mJbwKQ7jH6AytPVGugVBklpckY/ZhEvYYfY0kWhKK\nAbyhjK74PgyTMwQ/O+ievViOYhU58gNqPXYW8/icgLBQwqIoBo830U+YgJqV\niv3lK1wqcXOdv9sOHjBsKQeSbgkSnN31PmBHAhx63AH0uVPnhjo4JX/QMw/0\nn/p4v7FyPh5T2H+JcdjPa588MARuk/qNBJGKPMPbKPeUJ2JzRmAJ7ydfOuSf\nTW3jY8AGYtR8AWqzl8b6eEbR5oaoPAxUjLyrsx1/fGt0IUZGaUTjI0kyqAUj\nlx10\r\n=Glu5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e2c4f0196.0","@material/tab":"13.0.0-canary.e2c4f0196.0","@material/base":"13.0.0-canary.e2c4f0196.0","@material/animation":"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/tab-scroller_13.0.0-canary.e2c4f0196.0_1630548767759_0.9341707982062513","host":"s3://npm-registry-packages"}},"13.0.0-canary.611db508e.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.611db508e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1a6982c7ed3188f80d3b680487117de9d440a136","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.611db508e.0.tgz","fileCount":51,"integrity":"sha512-dB/2clg19jn+hZG8Ji5nmJF8zoNYCPL+coGus+rG9jPWQNwaMngaD1x+0Th+tHZydX9Fbk95pAQvnwGqRuwRHQ==","signatures":[{"sig":"MEUCIQCK0jeVbUGBXcch2l/xAVlzDbvtscXABwC6L3EICNA2NgIgLP1NpGxAMsUlK1v4xkBa4UrmVF1gIbzsgs9TwTH3wg0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMEITCRA9TVsSAnZWagAAyjsP/1aASMtdB5cBIkG3Jdpy\n9H9W1o+qByftpYqlCau0AI2e2Ryr4Sc8XWCCDlOegmo1DmyOur11qOUuu4UX\nJcrKB1G6F/S/lmoRVA+0ACs7z69j5eodImLrr8j4xTbENYzs5q4lEAN1N/cR\nod6Fbs5+HKOAdb42mZMAIdrlXoO31YoFGUNwc+4p5xDMfV3RTb7cC/J8EiNY\nYdwbXnKmluz+s4bt+oQM8dnBjF/160enqNPtdZj0w5f9NqraeAaBFnxPIOI9\nQ3xXuqLqTYoxPAf/PnkkthYypiUxaYdL7yddCaA8ezhkpgEpOIz0zOY2WfdH\nkp63L9iUzSfVsj4UOnYbpiX+kGjeItG0NksUpwONAmKlzuyfXCRIINsfCZpP\n3xMXN/wPInIfxMbhbk+BvWD9cd1yW+AhKgnUdHOr+6+4SJm+MmdvDn2pNpg8\nrXyaMDAffl9w+fNDl1oWAaNkqc8NW7dsqDaQGEnAZH0OqmHq9k+mCTcZCjDD\nwtv7SBV2ej9RfdSycAH7BgNzx701ms3sSfLPkDRKuomQbhkWYRnNZV2tHJ31\nidg8QItZXzWC1lLLYgOVWV08VlPH/gS5QNbG9vRG5085Ven2X21yYozqeuSg\nxlwa0eFxGnVsBuN857s7UKliePFlE86rY3GD2winJox2zqOpPOuzoSFveqL6\nP9z1\r\n=7xMA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.611db508e.0","@material/tab":"13.0.0-canary.611db508e.0","@material/base":"13.0.0-canary.611db508e.0","@material/animation":"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/tab-scroller_13.0.0-canary.611db508e.0_1630552594908_0.3508056477955932","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4706933f.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d4706933f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3be4b8199461df4d11efa73461f555b06bf1db37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d4706933f.0.tgz","fileCount":51,"integrity":"sha512-Bbf0AwwktzoHQ+xC2LkxubxSZF4avv0lPQqhhuaRa2APMdib3UJqkM7pYQ+uZVFdl1A2qOZnUgSJk+xrUEa25g==","signatures":[{"sig":"MEUCIQDTXuRZdTIJ0NFxx+KkbceuuoVQNXqEzImjQxctiQinYQIgGwmxWkQ74RdNHLHVg7u85zVF+tE910X/JuvAjYwCQi0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMPAbCRA9TVsSAnZWagAAM84P/0klb9X/HZu75gNV2fIM\nPqWqVNlrhfDaXLWB2ls325V7vEPvMHBWATytywEbZev/uY+58PdHEQnQ7O+0\nwESSMz+gHMcZ2CoLdSSBX+ZTvXiR2q24OI0HAs3yLe7PYMztptd1AdUI4M40\n9m5aebzFIaZFQi7VO9EgDK8rVeZSz9Yk8+YQeSkSvcff2sq6MpvehKQWqo7R\nlIF22giBwJ5wjUrKXB4Rvd28Vc4bQdpIhQHWupJsAHIj+Q+9DwsMbs28QMao\nm631J0C960lDoubgPuCes0giN7Rw9uX9lw7lUh15zSTIDl+42Q438PvoF1Aa\nmRFzDvZEVl9uvc3TtvjPvm0zkFETy4g92HDjGGtC4ddZdOej/N4XVqAT+HBK\nNnoJ601/+WDwTPShrqDKnyfAlFDZUKhWkYlmTpaA+IykSDhyh5MebYXLKmhV\nEA/c5OE5HJWVw+xnl5aTWLwlkVo9Ym9fRtWjW3dSq+TJjp4iMasibvusL2e1\ncOWZyWCD4MP96hrz2uvlo/eJKaon1AobvC6wAUlrENilgT4E/2+vORhVYkI4\ne3qN5NCsdksgQoNga3SZduvPThVIaSd545U0uJrQJMSnBMBPSObXQw9YYfJ+\nD22i9Qr/MZTNF4ajje0tYbSSW8KDvAPEGEjGMFmh8+6k3BjjTxG0eQDfs7n2\nM2bh\r\n=IbV3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4706933f.0","@material/tab":"13.0.0-canary.d4706933f.0","@material/base":"13.0.0-canary.d4706933f.0","@material/animation":"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/tab-scroller_13.0.0-canary.d4706933f.0_1630597147822_0.5996984878852261","host":"s3://npm-registry-packages"}},"13.0.0-canary.c16fe03ce.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.c16fe03ce.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e9fc402590fb6e5a57743d5a28a712ecc5e1efda","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.c16fe03ce.0.tgz","fileCount":51,"integrity":"sha512-ffOde9ckDenzYkcK/ih26DPSo7Fkj3N9Xx2M8XpAqzjFUr4TGg6ggbNCaV1ou6zdBeUpeG/lxkAztyMh5ZPd7w==","signatures":[{"sig":"MEUCIQCiu9T3i4muzAu6mftrYZkWLhhLvYNAYw8XlRpMI+sJWAIgQCnmHR+Xu3GaiovmdHpk6IlGQx2fnGAoguh7X5o+GDQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326026,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMQ3iCRA9TVsSAnZWagAA0+wQAJQlunJE2/FnFlfUhz5o\nJXOF8Jn9KxDfZEsRRLVrgo/20MlzrK4BKJ+Pp4tabJmweBv9rvAsEsYYxJee\nV+YqpTZVGJ1Jw/W77qKJKveLtE8nYbFIAqDfWP+ws08bAzC47saZdKxOtA8E\n8YZ3IsA5zyFv1Zg9HNExYKfsmwnUIVn+k0F4FESre/D92g6TNk6dsP0HnD+g\nu855TpRaDUsymS+zk/R5OMZ28luYrzD1VXJqnogBk1Csi5+/drJK/kc5bhuM\n3+s/dXwMLCdX2/xgN6aGeTmyQX/BVJY1M8ACYStLaAR0mj5woHNObk7bNop4\nMlfF1EDvHhQzBZ84l67kiO5wkgWoK1d6IFk+g8PJHLuWOUhmJQgC1PbOzRU5\nVP8UToKkKaO6E22RypG/1gGaTzQ5kjv6AQM0Rx0kafk6NR16tFFTEkW0ByzV\nJVkaHiD1oCTAKqX+8DMvA4oUIvOWy48ZoU5xsp4PQj/JNUTPRvuRRQrhDHAS\nRM05RDsX3cG3HwQhUnj0bO/iuTcq+bfErbEhxcVU2z9wGYWcislTJ4uArX3L\nB2EgA16H56WzxqEySZYx3d8Lm3DP81ZnJL55CyvLzJGwqjjZU4FALgkjuiqL\n1gfDnQQLNhChV0+WcJ0QeBQK65DU8tJq366sw1b3vU0cgO0qh67mVneEQFxY\ntUyD\r\n=7tDN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c16fe03ce.0","@material/tab":"13.0.0-canary.c16fe03ce.0","@material/base":"13.0.0-canary.c16fe03ce.0","@material/animation":"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/tab-scroller_13.0.0-canary.c16fe03ce.0_1630604769947_0.37231065929977425","host":"s3://npm-registry-packages"}},"13.0.0-canary.9203a958a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.9203a958a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"88f9c9d49368fcffd3182ef8d00bebf41cc799fe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.9203a958a.0.tgz","fileCount":51,"integrity":"sha512-c4RN6fWcoUCrG0eVH2j6J096f1BNx+bknbBs58eGBAayNFZe8QYwXTixk9fB2ZWMahJ6Nn1C+DMkMH0c9YgJ1w==","signatures":[{"sig":"MEYCIQDADpOpwMipxP/RCsS1Ao8RCHh2SVVzPgJ3B1fjigKcOgIhAOFkYkKniG3Q+RQs+3U/MIYft0JS15HWWPyb7KBaI6Qg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":325978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMWKaCRA9TVsSAnZWagAADncQAINQSZbWgJjTN/QPsgBB\ng8Czua7pN0Z5Nh1u1n7K4gyUs3vzdtXCDskmBg+kYGfvcwqc7r4gR2xveueH\nif/kEGDoivJjnqjK6keCcUKUguB7aaO+ezYLU7EcvMovIcJDIBkOZp1WFHL+\nnV91cv7RWeEVifNT/l1ADIaoLx4SIWVhag85IksbzAmgrYBaVMnBQTCNtJAJ\nBq3jigkDwx2owzauzAsS8ZY+uLJ/PjWYm14X79ielTtCdUZnzD4pE1Rg+3qr\nt59/i3nKn89FCLhmpHHPRmY6zGKDkkpifb9I37eU3tYFor9uHpdUZSUGrjgU\nwuQnMQ/C65UaitwWRN2LVOOgoBCgWhE29e7NJCbY4W8UEOzGScS39S9wg13y\nJnMFJPRH1GaEsJ1AlYz+LNyrZT5w5Mo2tjQYDbUmUrHgXEANq+EUMnRFPSiv\naDrffUX2ESQV6xIGacdZoG/4V1WSWGBppanz8Ic2Q8c1ULCVML63YTwTZeh6\n9+8aAkL1H4zqza5vNfnAoKLPRGlGA/8W8jsSJqfYoFuMQ2HFDgUOfE5znFkQ\nOW/zU2L9lpU0x4ccW9mUQlY9ExQdsU4r9hDqZaKYrA1RPNZBZJ1TsfmJp3ma\njIt9Y+rMbxrkKrv59SdhLPWjBL7W6JMJRcBStJLnnQJAkR9VfkoiwH6RziC7\nQxWY\r\n=Z6fR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.9203a958a.0","@material/tab":"13.0.0-canary.9203a958a.0","@material/base":"13.0.0-canary.9203a958a.0","@material/animation":"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/tab-scroller_13.0.0-canary.9203a958a.0_1630626458031_0.2452373229968252","host":"s3://npm-registry-packages"}},"13.0.0-canary.fddd5ae93.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.fddd5ae93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9a5fbe537380ab4196ad424f02f13c2875ae99b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.fddd5ae93.0.tgz","fileCount":51,"integrity":"sha512-D8oNJUNikHMJ5prYLBaq476oAJjXiVCLpGPzq3kLdtLS2cg90d2fz2lsjKXdRd7HC69gJbZrsiKNtprEDl902w==","signatures":[{"sig":"MEUCIA+7Z2CoW/s6hhdoTaVAkp+lZP5OkKoayqLozHjkGpioAiEA57k8xXxV6iMCKp1iI364/TmG5zTXrH6vjK5QjlpnC5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":325978,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc9NCRA9TVsSAnZWagAAZvgP/3VErG57rDxzuxrLEqrV\nMim+Ms0uoPEv/43jsxNPRJOyDlPZ4LsDrMMhC1oFDOu4yrfEaajbQMUD/bG1\n+bVhNpSg7jOGRN+O/o4/fOu2m3FLUde1CEafMWhCssfvqypW6VfhqHEdd/sQ\nQlExlPSO7komPJCSLeFL5yPSgfywSwsADtyRXTB4EDXGYZPmR+lMK+8canr5\nZCbDvVSJymU+XDeycWGc1ubZ/ASg9YiMBcXa6F3TQxCnBCqB/SmuKtyXyh7U\nMMIRszLXQKw/1JWdFb/cIwlk07zlQSMci/EcUdix8FyH4maQds55ZlSCLc3M\n8yTJqarCvBJDi18eCDzHdXGdcmLu6qr4oxnleuyx3O+MaLNOHMpmiRQTZ3vW\nxZxn3wJ9KIRXOkBSRIvAHBk6nTzP/N9VkyUl55UQnpoeQjWqPCDjtRrb0iZS\nbJFYKIK2nuehF+2h7pyDe4tN1Wpmvpt6++g/fNeKTDZuEg+GenCz4jFwnYYV\nALvnU4g8ubCioLTFxRiBMEPD4TsfXMFU7iEIVBqx8nBN1WU8gG/Y2FtBjmTP\nICEi0JyBMVrrZZwi4aKsC3EoaM7rxVSTDCJUm001lbyL2mVU2sHxIBDPb2Ao\n5+ZY9mnhmX7gUjlkMlB25mpmRhp1BM2eoLMNB09V/iQqlwoG+0RmVLCxLLi5\nfePA\r\n=uJEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.fddd5ae93.0","@material/tab":"13.0.0-canary.fddd5ae93.0","@material/base":"13.0.0-canary.fddd5ae93.0","@material/animation":"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/tab-scroller_13.0.0-canary.fddd5ae93.0_1630654285398_0.05079755676619602","host":"s3://npm-registry-packages"}},"13.0.0-canary.117599a8b.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.117599a8b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3f8c1ddb4e05d6738f4216ed4f658ba7858cc085","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.117599a8b.0.tgz","fileCount":51,"integrity":"sha512-VMOR+jehuXDytROfstX+KiI9MbLs9MQoYOHo3OhIe+ZMWtVbYJ7SEI5t1M4YNyO4ImLOpNKTqjTuQkTh9bRDQQ==","signatures":[{"sig":"MEUCIQCLJ1We0EsXcYZttRYjXyA0DSx7B9moIrs6DhEcZNRzZwIgfCEJQPaAykSG94Kj6ENMHCie2esjqp3rgmhH6Hs+IFA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc+oCRA9TVsSAnZWagAAduYP/25U6mj212Tc363aV6CR\nocqfKbYZrK2A0oc3+gPMO8trGNmIWh1zY+RDuvkL6X91pbodaY2Bq8TxJYSC\nVyRCLEKn9mpiM+XOfIvqQ6NXel2w9zartWOF4V7Yovcui0YCa9vbQmEjNDKt\n06g1HyOzIkkMftoCoTaaurOqGJBD74uytp0SLzq/v/A/iW390H64OJo2EG4p\nAqOJE4pSv7N8sYGnVBX3vcmInga5JnaouvzwU5ee1yUOkrn45Acr76jHK9ob\n0KHO6uMsoumVJx/1oGiW3wPk625v37imJGS8Pwy+PEPZsrImCCNP3nRITeon\npsTXhSyV3NHsWWiS1QeD+4j+nZSieueJXdPByZTYBlBvwzI4ub6L9ntY0GhM\nMphki4S+NdOsXzlVMxt8HJpopv4v4KQVx3Bdoi77B39XQnNRzehvbXrI3PBf\nBL/QVpqgpcEHuUflAn+sHI0H44ZE099qlhOGJg9vFu4hpBNNZAtQwW0M2fXS\n4zBByDTmpuEtTsE3OZFO/KcTOPl3jtH7HwYNEcqY0f2HCaryPrBv35v/M7UE\nKYeHkfbc8ItEbWAgnWX2HzdOT/4dpNxMEJ6M6Jl+LO+SlcSojIxGKXh6pAtU\n1K7qTqWt6GBR6JVg5mXroXSmwox3QbVGodg0e9EyH6jMbwkJHA8lBFHrydSm\nLRAv\r\n=5ppx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.117599a8b.0","@material/tab":"13.0.0-canary.117599a8b.0","@material/base":"13.0.0-canary.117599a8b.0","@material/animation":"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/tab-scroller_13.0.0-canary.117599a8b.0_1630654375868_0.5518081206451175","host":"s3://npm-registry-packages"}},"13.0.0-canary.e4180d07b.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e4180d07b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"192ef539e6bb947b6a4a83927036a649b8311543","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e4180d07b.0.tgz","fileCount":51,"integrity":"sha512-bwe1j5oSpM8/AKmVtQGSc31KCet9PQUd6YARd6YaEKlbybYU/zsd2OmuYH4lLAMa6duF56idHSzDcniijqJCGw==","signatures":[{"sig":"MEUCIQCa2R7DwIb3IcChLq7wBMnBEgJtdgeaG9em66saoCQfUwIgOiejDfunqwqy/n2YQsfF+SLNldnygCfguOtokNKQAAQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMc/DCRA9TVsSAnZWagAAifIP/2VNw7pdyL8yonFAhxlV\n9YTkNEnSu95JC044HmBMl3f8WZtGofb5qO9ekJnSDYeC+hglQ/nUH3IK4Ut5\nRlZur3qNFD9ejHGuk62dROx91O55ZSAw11KxEgRmA0jrjEZw4lx/zUW3XyRJ\noFdq12Y0/d0Gmlfr664nFp+CuQx7u5Je7py9YCMrx8Y4knd3vXafhgjxez5T\nFuxksSa4BVxv0IBVShQ5xuNea6LSfoxwUFtM7t5D5dfV4W9FV62WRDU2hX/I\nn8VOPtFrO3KoypvpheawUv9kC7HVD41/utOOdAwP91k7yJrhTismQQdARxmL\nBkdtLRilJnf4zdu/xXoQ2H5d3CyPHfEonjbGgkGLHrxtMzR3DrVIPRGpYj6W\nTmHeOnCj8rflvI0P/DzhtIUNAF/0mBGPvZnSjusU8PcpwEPl/Q67kpB+2HFq\nj0e4gnJy7f0PSfeaoBXTgYZWHy7XGTL7Ah/qr9knOAE+8m1gwBAojhAsZmBb\nQl1pcst2/vulEWiJbr2ILAXv+J6Sykk4rwCyoziyjPiBx58ru9bR5m2X4KiY\nek1/+ivgewbCNvFlJATFjZAqxRsCq97ubkt5HmSfcE7tJLSWXpgAoun7yyWc\nmdko6Dz0feC6ByCi1GSTzREK7aE8AnL1nPS5cm4/UfR6LeMLLgthlqUpRHdn\nDuXx\r\n=w7Kx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e4180d07b.0","@material/tab":"13.0.0-canary.e4180d07b.0","@material/base":"13.0.0-canary.e4180d07b.0","@material/animation":"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/tab-scroller_13.0.0-canary.e4180d07b.0_1630654402805_0.3162345780941298","host":"s3://npm-registry-packages"}},"13.0.0-canary.42d175efc.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.42d175efc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e04fd6f0d47b8fa23060997a66912c0696d25be5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.42d175efc.0.tgz","fileCount":51,"integrity":"sha512-jwlpxZlwzjY7doJPh09qr8W1USKTSNb2/3mRUaTcpxqxpT+Zha8zWzslBLEg1T3PsfZHzslfuj+vN31Waj40vw==","signatures":[{"sig":"MEUCIQCXhIeLLWsG7PfbYtfYT2oAHcfg4Y/PeM2k7LpncEfUagIgP1Du45qUu+3YmUJ1QfL6w5k5YuzdDTFGJZiQnLoHC4A=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhMkLMCRA9TVsSAnZWagAAUIUP/Ri0DjVHKVfphW5RYCEG\nGdQ6Dzn3sxEk07Yfcaj7esA7wPGujavQ328s+zzeoTdJIrAkSR1px1sQhAvJ\nSthP3ll+T088gJZ4GIjhvwzPWt79JC+0xqK83dmvUrL8T5lh+gVm7E22JwS+\n5TXJoWl7mzkctrKGa+sWR0J3okRB5q3n9V/TEOnfY5A9HhoLJhXmBtPRXcKj\nJyVSHLbvVK/dhAztKLKT1ztt4NMIn2TbLebddRhK+dI5a1WLkPzcf2EjikJr\nXHD8IVN2vgMdWuzKov3Ps4WIPblJYiTGEVVqfGuwiMNTk5izZngdRIuVHrZs\nf8ygC172SaldH3++aXIC3FalWbhoWYaI9Nl/C8C9j63u1s8fRgBO0bnUs6Qu\nKE3wcEniAloglwwa98d6kA+exD02t+yZiOqI6CzNZNPHvpUYrsGLruJiCJ+r\nyfdMNaVCJEslW2zina1zhpt9g8qNkdfhyphRsP8jmij8i+EqVefj3+iJKAm6\nIVr0mtNBD+YYM+sC5KF/PBXH8ia1vJn7FYxA2O2BU7G2adMRvvn59RJV2jAf\nxs/ZZiljaRdp4tZlYI38I3XedkJFcu6MVKFrKECiiBaX35PYZ8aVleprKKO9\nNQ4ulv1+6ym+b4Jdd7vUUDpBks7U29lUgoQQmcKibA+yPJfKwPWI1O6Zux7b\nM9za\r\n=tdJH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.42d175efc.0","@material/tab":"13.0.0-canary.42d175efc.0","@material/base":"13.0.0-canary.42d175efc.0","@material/animation":"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/tab-scroller_13.0.0-canary.42d175efc.0_1630683852199_0.31697191619428544","host":"s3://npm-registry-packages"}},"13.0.0-canary.72464476c.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.72464476c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a1ddb502689a2119499b9e33d45df5e8b0a8f364","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.72464476c.0.tgz","fileCount":51,"integrity":"sha512-xKFg/riE6L5MkP7by31ERLN+RI7ZlR2j8wQMcT2owJd0R75EdWQUUibRmEAlqPinbSup+CLiIihbN9f+q0JvzA==","signatures":[{"sig":"MEUCIFRoSD2T7iUSVz9t3ZKZIvJcEk7GaibZNZzQtSJLOvVVAiEAoBVM52Gz4AIMjNxY7L5uTFrCTH9ZydLBTrptzunCv7s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhN4bACRA9TVsSAnZWagAAx7UP/jWQD8gNszq4bWoS8HmD\noBArrN54XLgkG1423XETU2TYmn8sHTzwF3f4siGuIFRA/SUvISnqJuZlyFCl\nRlwwh6GVniciQLo0ih+JHS49Bae2SjW5CDaMo/8AaVB85Sx4zREq0c9BLtl0\n2hnOj1/3GIiQtTw6z2U4P0jHw6VbggwZGM1FGwwQO8pcYnZEB/VP3tqZhOVW\nmJttgWwWmiQkXgCLkTgGKj/cgnHmgaLGXOdOcgLeLr+Lf8s1eyDBm9r5sLmW\nJ8EcfQYl0UElFD34K+4XAoIdu69RP43VhZnPpasd6c/t4AQOjr40UB3IO4EZ\n7zZuXmXJ/LnmOs+P56CKBBjpqhfNjN5qM9kz4iiQXnQqZxsbLvTv4mRDdePY\nCFAELvGO18clwE9NZfRJQ8A7RKMiAoJPYQ/he68OlVIA6E45sbclZ3rGHBw3\nIejQ+E0uMnceRsmY/WNqu5sNjoAaO/GJYngqizWeHMgDSdik2PSoMJnzn31a\nnuTfZKrTu197yOaRMkmSIQPJX7zvb8cpKXOoccKC5HUwf2GGdCtufm85laUp\nFv9He6UYvIZeVoVYTJRKcz6TOwIzwFnRc1bXmtbeQqKU+lFJX/gdonNIDSaF\ntlwbGIyHhL6fwTqwAel378wHB7hIzaq+/6HVBtM2WDDYDCBucAWGfINRcNBY\nEfqx\r\n=Ypd6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.72464476c.0","@material/tab":"13.0.0-canary.72464476c.0","@material/base":"13.0.0-canary.72464476c.0","@material/animation":"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/tab-scroller_13.0.0-canary.72464476c.0_1631028928475_0.5135042432975647","host":"s3://npm-registry-packages"}},"13.0.0-canary.37d4db866.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.37d4db866.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0df5f75916da13e47e0263916fa2e21ea68648d4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.37d4db866.0.tgz","fileCount":51,"integrity":"sha512-newT+VSFdqG1BZEnkdy3TufkgDGFNaHtLJZmRxTC31CqtAfnwuMJWhuDQDxtv2vX5Nk/C6MfsmYgJnA6540Mtg==","signatures":[{"sig":"MEQCIFH47IHutTHmanuhjk9I0H5T7JNje/9j1bowHkOhle3VAiAe/aT/4TXNjgCXgHtp3f2IgQgsF4yUlQ1xu3cJUGWCzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOhuGCRA9TVsSAnZWagAA0GIP/Rg2mcHWWS8sj6WBrp0H\nZ4bK3/mVXFApuJuzIEqKbXlpqpx987WI+iGCKKooVNUAY3aWu1/30CDh1uk/\nWo++gkwjNm675TIcotYiqetLGAOzvoAbz+T4IOi1gb7DQBLknwEU7vENTRCo\n4DEPcFXfU843iDwtxQFRT7To+O9GvJcjTDNczA5MwGIYC9SK6rj+10ZByVls\nOlEzi91pfr/wwa2SEC9wb44xvrjlmUhd00f+aauAxf2nkI8vAVfgJ9S3He9H\nOL3WxEhf7zxMK/zOjF6RjTNndfIvosOLzi33yoh6y62TNRSch/ibDN7K1vhs\nc2WcT9edcFHLeXekGktAponNuZU/XDtGx0XUyx2cT6oNPGqr9RfqPyZG4Nho\nOWvhr2J22EG60acj6rLs855j3O2QUNRCWT30pjUcery4Hdy5+ImTH5Eevogr\nZ8AMPkD60q/uLF4wAKUz0xn/BPLepw2nHWl9nj8K7jI3aAlNSI8BqnCWSVDd\nHTDbwfaAbFquMyDnL/FMSStZrzjnaj9nHsmscx6xJD2MoozgBNaz8bpvQuO0\ndKQxV6u14jUAfygn8yssnY4f40qVN6Ov4BZ7iuJATEZt8fbMHHhDuQnx6Cmv\nK/FsXEPaQTIc8+EABghFpbuAa5qJ7bJ66rH7ng2JfWfruTbfrcxcht9vholX\nbcu7\r\n=oA9h\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.37d4db866.0","@material/tab":"13.0.0-canary.37d4db866.0","@material/base":"13.0.0-canary.37d4db866.0","@material/animation":"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/tab-scroller_13.0.0-canary.37d4db866.0_1631198086335_0.8751358917076495","host":"s3://npm-registry-packages"}},"13.0.0-canary.6df682e74.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.6df682e74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"273aa58ca46fefd775e20b1ffcad1de5f628bc4e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.6df682e74.0.tgz","fileCount":51,"integrity":"sha512-IoRbo+5yqKTdMNUnqXWDsu2WApx8pShQswgrJlPtekPl2NBS4eeZssVBRE+mFIkLiXMJgiv3bLlILfHzde3M8Q==","signatures":[{"sig":"MEQCIA31MkzwplbMZm6TCHYlJwdDFQsdnyIJDm4G01WyAKVVAiB6/QQlpAcnVkEpDnstdveZn0j62UIsDQCl9PqkNh1tug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOivdCRA9TVsSAnZWagAAo28QAJA7Nuo5xhfZYKidyW2J\nv8UCt8B+XFlDcur/CWy1dRIiSQ36wBPo5RFwqma2CGTTuFKtiYKNYAOkCB5o\nc/288SGxGnhz7dlrKf7lz8TnoPyTs78Nd6ai/7W4CQzOdWzaXffuLnwESxZk\nl/0SMXX7HUNJCpvPYAe8S0PN3Evjo+ZejEJWIT7hM6fbS8/EMBi/8LgtHHy9\nS0pDKNYtBrMukSFL7zm5BFLCzwtoRSGGv83NKjhNaBedZ08EoeZ8rdbnrsKJ\ngDxvK3qvF0M5KbSouTCJ8XZB38+V3GbH2y7v+vXw+Z1VpPlHy3Nx/Y6vlApQ\nmdqdV/JZHfyfEuxrVJWKMf2c1TQAYMqqgwyyRsJabTQ2JRyUEbLn8kZjPTCT\n+lAvbCPb3E8KjxeDEDjNaxOl2cvuoCwTSzaeR/q34D5wjg11Q/aRVAvbqimK\nuWu2Ysnqtp1m8ZHglpxO5t4NWFfTBb22kotzW/gnYedN+wMx2oobdP2iAT/z\nV0Q0tj60YObYlV6RQzXfostEfqQ6WoQwfZH+dkW0p0OV8A0sneJ9B1mAt34N\njZXPYwd+29bha3RdW8snTGdSVJVVl6kMUpxNW/Z9dhpwkrVTpNYawAwyVlSH\nOoqvmHdv45l+ox2eEJo8DikrP3EvaTBRNSm1/gi1YQZihU6iXl8G7HzbvTl8\ndRD7\r\n=6KS9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.6df682e74.0","@material/tab":"13.0.0-canary.6df682e74.0","@material/base":"13.0.0-canary.6df682e74.0","@material/animation":"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/tab-scroller_13.0.0-canary.6df682e74.0_1631202269790_0.6709096765939304","host":"s3://npm-registry-packages"}},"13.0.0-canary.b49359c35.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.b49359c35.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"61371ac334113136febd1c20d3d78cef11760a13","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.b49359c35.0.tgz","fileCount":51,"integrity":"sha512-zEQuRFEgbcLrGUsDPePWjrl0eisl7MlHMk7nSPHqS4k3Rv37p3+ZapAEf5uM9j46WaZj+1ycCa6ToLb0ah8slA==","signatures":[{"sig":"MEUCIF4QWN14IwRD5Xe9v3kn0HJEDuBK7ZqrWEwZDvdXayLzAiEAi99MtXYpogcWl2eGLhbJ6GskU68HzaEJPEKnQT7M2kE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkYyCRA9TVsSAnZWagAA7z0P/Ro4DmE2rxvLv+R/c3HH\n6mPzG64Aciu3R52mAzkoL9HbEfGBw16y/XYH7bSwtIBDEjI1BOfSUKRVF+w9\nT0YfpzIQ6ehVKDswBwoXeWcI3RCFYC0dNYwu906+pH35ben68YWHN2ys8CWz\n8w5BukuqWidskpR2prBzkgi72azpHzqczTHXkUXgBGHsNFtX1kg56pEIOBTQ\nV0LlqQ0lurarNIyYq0MbO2FBJ7Gh+o+1DRit3gNIogYqk+7NkhYP7ySJwaP+\nRbyi6V3vAHnyVxdD3680D7ABmgNlnMTHj9GD3L4/eEOdDhbHf+bPuDkY/QIo\n4miAyJd8I/s+yp7JW2+LAlbA3MWr8PpJeANSKIJSt2Wh4/+Jewq7dMfK1kV4\nvgdX/1xYRv7U7Hmzb6mwAVViiP4hoMeX61zYuoooLPIplOyUVXgAInby0oUI\nBVFAA2YVxLe5tFdt1qRXE5yOIIaTMqBGD2QFIVvNU7GJJDYIIkpk1OB9Lah2\nBOAGc0oSKeIScIORA88x1Bbqu3Y5FnufhUY/uu4B9R10ai8z9NABiX1XRxVM\nIj52C1CtrZsnypFf09TrwFzYV9zhU9m5j91bfwlCFpGaBLwLcrrh2F+h33ec\nIFzsMg0zEP/ZTcRzYUGzrHo9lOQYOPcaV3w3DlYLHvALY0KGCzhxGc3TSjTJ\nlXF/\r\n=9iO/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.b49359c35.0","@material/tab":"13.0.0-canary.b49359c35.0","@material/base":"13.0.0-canary.b49359c35.0","@material/animation":"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/tab-scroller_13.0.0-canary.b49359c35.0_1631209010479_0.7145607189671834","host":"s3://npm-registry-packages"}},"13.0.0-canary.470bd34e8.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.470bd34e8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2a1f70a6e66c56c59ce2cccd3d17e2a8a54e8dcc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.470bd34e8.0.tgz","fileCount":51,"integrity":"sha512-lQ14MPEQ/rcKKX0XGU1GFAmOue9YUrtZl9azMzjTMP0ttcseAEwGWuo7qjX6iakLwmKjxFIW+K6yFpY5LZ8XeA==","signatures":[{"sig":"MEUCIDFonbMW/lFl8286NzPYwFI63NBbQtPcInfu/Q3GVSrkAiEAmKwuSlKIXT1UVLZ9F3XIL9GYBrzH9cIqYx7sOKpp6XQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOkxDCRA9TVsSAnZWagAApwwP/3eAvqUESr+X/9hSM5Py\n70sWEWcz9h8tNjnAsQe+lkmPi/2OjqcJjuuinmUNtFsnRCSzr80lDx2dQPSz\nMcRnXDehv5MackGjXOpPLfgTZn0PkuU0jNgWxI33rSLqvcoSsnNyuQlWArZF\nyA4jo8iDVzYibKqnm6ZCnTlXWIhtMThusitKaIadkG4D0jarhPsT1/yQPW3e\nj24+VlnmS42QiIHf2J2MVRd0Kx9EJHaxsawYF2qAZeAs9+CO8s2HxIqQA+xM\nxQm++Oi7sWnoMZVT+MGHx9xu90Z3L/YuGET+A0a01YbbV919d8N2PnzuZR1j\no9m07JqhVkNmCNR5h9wRMU7SU36uCv2iTSrlYBZu18iudtfP4WTOkKpLiJe0\nloMHn86/zu639iQ0bWlEwqC1MxeQirWvCyZCfT0BuDB1NNvQv46uvcHr3ird\nx1NIODlyhn7H00O5p6IvuoTtp5hPbehxuDrS+tTPVVTkopeXlkVl+UNIrb10\n391baNRKgXMfpQW9Emk0cKKbn9AjMgxxiilhNU8sd/vajPOPIaJWr6l34wM7\na2NdxWHQrbz100GLf95aZDaMsH/nv3uFsnxzO1kEhjCxLGjKdhg0kSs4BLoX\nHDfAiji/HAyDh/F8ciCw2zOxVrxBxfzzlTundPIQtt5GkZg7GP4Ho+dPQs89\nyOQQ\r\n=LAab\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.470bd34e8.0","@material/tab":"13.0.0-canary.470bd34e8.0","@material/base":"13.0.0-canary.470bd34e8.0","@material/animation":"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/tab-scroller_13.0.0-canary.470bd34e8.0_1631210563363_0.22047899634486412","host":"s3://npm-registry-packages"}},"13.0.0-canary.d48a01771.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d48a01771.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"69fce9cb9a3684af2a127d8b3634887506099c69","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d48a01771.0.tgz","fileCount":51,"integrity":"sha512-nnGnbN5FZp3gvb7JEVqVKFr98Vh8lsFMK8GH3Fro5L6xzn3mStP5tEwFdQ+tTsmWlnkBwP+iaXGdIvZJvV9xLw==","signatures":[{"sig":"MEUCIBAeikncp/S+pjWjq/eW0JTmsT/+znXkILnGsrivOsGNAiEA5n2SCy2V2ztgQstsrCpNg+UInnKFI2Qs7P7i6veWgIE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOk5aCRA9TVsSAnZWagAAh2QP/3PURwo52Vpk+YGKCmi3\nIgij1bOsdnfcOF8FdYp02/V1MKfralWAR0qIv8HZXYtUH8TqxT5ib4gCbSb3\n2xsmlibyFK9zazwdsYD3rjihuylb17iyu12GJAr3l9QaQa4UAnrnZlaz8zku\nW2qiOU8RDj+1QaJVyI35JZODXvXTA4wlPMKB1nl1r+3BDcMGeEyw/FweLZkI\n6Ja9Vu1Wun1AovLHJuM1c8GQnDf51pBQi5FkhKM5gbfn7ptmFisHjdNP0yBq\n0aWl4Evk5lIN0eU6RKibs0ZkaNSixaQHr8wkCbJpyH/tEhLbRR3lYI2hBbcC\n1Femx51Gns8Ui5eoGnBnP60tG+OeKxmIL2ULx4AkSK+0nmzRHm6UMGEFrfGz\n9Ub8MhSJagmu/prHS20RhIpufJ+ukb3rkuBPsLCpIWOQ7Gv0sFTpHDsKV2W4\n+tVbOkwKHbICDgYATV7OO4ICZEldUuiruFn8HKDsfLSs3LbOh9xkyVNloJV6\n8c60/y7sRU+DTaTCVEMzSGnAE5PIM/k6ee8EZCFLq5Lbyk/wU3AMdek0IkQq\nRpia1/lKTZjjrOgr/lxKjrtdq7WX94iTHI4KRiEqarA11eaSwdmQ9K+svj/4\n0FtuYnxHbBJDtPDcIbbXQxpWX9MFZuHDck1RMcZCx2hW/BHIYqh3SsNgYeg+\njPEe\r\n=4ikd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d48a01771.0","@material/tab":"13.0.0-canary.d48a01771.0","@material/base":"13.0.0-canary.d48a01771.0","@material/animation":"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/tab-scroller_13.0.0-canary.d48a01771.0_1631211098365_0.6550524364177259","host":"s3://npm-registry-packages"}},"13.0.0-canary.13db34b34.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.13db34b34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1205165d863d5cfc09b026da15cd0197541e5abc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.13db34b34.0.tgz","fileCount":51,"integrity":"sha512-u8IIp5wBcI7QeLHqQCikjdmTDtbqeFjttlWxXdyXNA8O2WryhodJRqlQefZGukXn+sRUsyB2j69l+sr6t2NH5g==","signatures":[{"sig":"MEUCIDkAAVB2T/XISlBjhRTqVlnMdc6XqRWZkOtomLuyN+NIAiEAgC7yhbwM4Ay89nwXzqk0SwwsFL/ucA5Swx75pP5+Uno=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlHgCRA9TVsSAnZWagAAHL4P/35uayJwoG1Z4HXTGmYW\nz87JyFes3Q9ZvpjwER+lO/tZdsNljL4Qgwe9szxGCbPyH++JU+XIyfOpjdaN\nwSl8vJJDpAUPx+0ZVjp3ZNoXGYWaSODEfZ0x1QHJC6+6E9qYXRso57swXLKY\nKETXCa1QhlV7ztKxE3MvBRiNNDy3rZnHObCPSA59aisR9QH6lQBd/mKY7nk9\nYfJYpibToXhd01X/btL88GjtGGVUpnGnAkChvTWQbLjRoX5bWdykT3gBr5f3\n3BVmENeEdx1TSE5DOpd0b47WnDc2y3yZqXqIiI4WJKZus0mTNRDRT7v5lWUh\n7MiWmyqzfMeg79WeIzlULfes+QvffC2FyU+mUgAlCFfi6/D27bO2GGiUH478\nBKKB5QB9BdhwfWvcsjw5JpKoq2iME29ZCg8dFM058T2vlLLBuvAZMzKwL0Xq\nRyxb/bnKSf0c/1Md/BtdzqHo2zfB9z93CnSDXe1Hcg9ODAe8RzP46WLE4ZHF\n8+j8GU1BV+0nmMgzchDVM0sEuJSrgLvZw+6V3FtxtjqylzdmH2sGP77x0sjn\nmd6VyUUbua2pilPlTwcWbLR6Vtb10dm2rZ5b7hvYo2pj0KKjywCEmfX/5lUv\nvB6CcC1X0Rtpf4w9ypXA4x3o6i8hfOqoHKAZMO7NcfJbIkNwTHAu5GfyWLFK\nEHJZ\r\n=J+S0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.13db34b34.0","@material/tab":"13.0.0-canary.13db34b34.0","@material/base":"13.0.0-canary.13db34b34.0","@material/animation":"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/tab-scroller_13.0.0-canary.13db34b34.0_1631212000094_0.5903559122651572","host":"s3://npm-registry-packages"}},"13.0.0-canary.864798678.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.864798678.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2b09196414c07cffdca98b034845f562a599efae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.864798678.0.tgz","fileCount":51,"integrity":"sha512-OKP11Ah+tkPuhbZzA61Z6wK05BH5fUPvh+FrDMcgqZfZ5fV0WtZd2+K0Pn5NHzvSInMQvMDtxYflORl0JiiA0A==","signatures":[{"sig":"MEYCIQCbBJgRKZk+1EjwmzXMyWBtECf8WQeCVrJe8ck5oI4qXwIhAJuxoEcw8XE9h3jLB5QF1Qc99qyu1tmwHEMBUKiHYnYG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhOlSNCRA9TVsSAnZWagAArRIP/jRQRbyK768O/atM8HMP\nDxgt5oWw7/vAhTQ5/pT+Tg4kI27DAHByH71qL6p1wx3bxoHg1qNyRosyuDfY\nQFABi6lg9CxJp4b1jlMVhR+HoX97FypdK9YTDbYX2oVSnTxu0ZZwo05v5NXg\n/3VJYusvOqcVcVMxvIfnvyBtsd+MRmpivsP3cuEuQ2JMIQm6P39O9zdUywFd\nRkThKHxU5xfsvdK/cqwhSKB2Q+2PYo3suvFA2HyIUpmyBfAgwnGxAGV59PH3\n5No0jVPGsoOHc+QvTeLjxnxaWuC6h3T0oSy2n/KU/XP730lBuy372TbrbCwB\n9eN0cjCvI6LqaaLKpQyymrRYxJTmd5YmOVC8kzy4XkyZ8pvLhvRpe6hvchsr\nHWY3siypSjghLKkLbVR2DkVdPS4+mEF3QJrKjlTVHexRqwGqVVZH/BmLLS1j\nWZNpjsa1WCoE0w+mbqZ1ljMMOjdqal4JOxr5NIbBdZ9ukEIRce9r+io3fa1T\nLwU4lTAiT9k8tH1xLrL48JT3MQFJK1zq95hmqg59fKT56FNuTcJCayW3AYYT\nxKZtDtcdTc/TIvG00x1w/gfp47kDfAa9Q3fR5zH6ECQdqvlYkispEfpfZzkI\nYm1i7zX8HbXeGRiqlxECmh5HfK2H15xrSRb3ULgOe7+Gv2MHeRGiylIOnlWC\nXukz\r\n=ylc3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.864798678.0","@material/tab":"13.0.0-canary.864798678.0","@material/base":"13.0.0-canary.864798678.0","@material/animation":"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/tab-scroller_13.0.0-canary.864798678.0_1631212685769_0.871118654875561","host":"s3://npm-registry-packages"}},"13.0.0-canary.d04bda3fb.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d04bda3fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4f8d3f5b7f31653987053148517d2831966e2a56","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d04bda3fb.0.tgz","fileCount":51,"integrity":"sha512-PIpyofuey47OklDdzgBKGT0A5AcU63PlcyIT7w82sl/RwwVbz8kd8u8Gi9hQVpmiPdcCFqJSn+/YzcJK8f41zQ==","signatures":[{"sig":"MEUCIQCDHyZb3kaVMN/dBV8WlBKzHreO6xj50OnmUzJ8SwbKjAIgRHWGB56nhjjyw6X/jeTfop3dEpKL8cJs1i6jyMp1F5Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhO3hZCRA9TVsSAnZWagAAXD8QAJe+rbQckLzJemSudp3l\nGS+gVP4Sck5OMnRxDrGohyXhu4FAJLtpGejY2UlwT8KlS+7xNBavVVcJLQ4u\nLE2Bb0uAo7KifcU2/Sx6B/bMMW+ipjGPrEUv8woJyTPjdp8LqbrEX7pPqedh\nqB8867JsKTRCYWgXenUr0oPsbIzT62FJFl3u78EVsnelg62eUJ8LhIOwfk1R\nt/aBPUIVwaoqwqerACJx+yaoaoUbgASkkN2f5doULv7OuXtZO8TMJ2VVHenp\nVQLG+5CmXLj9TAU+BoM80Z8IzqpZ8GZoZB0FV+t32j0Dj/gGss2lVso4plfK\nGTo2rwXrYPAByVSithe2W77zk4R32Q3B3JaPKHdl2qFnPslrlUnCECJrnCWY\nILxSvtME+4ELQmJiFaJV8wscVAIZrkUeqoxi+Vd8Yj+vNLETVtMVvdP8YMuc\n22adFRXBW2a9DMBoBpAo3XvxgX1D4qIL+svwMmkyLdBF/QDt7xzB7qauKcD6\nn8yP9PXwvVKYIIHKNXSJvvPiVTnHZvOG5Wz/4BqDrnIgiRUPKF3Bco8c1/vS\nHn6z9Hj2ZbOvyxiZdzgfPAXtkv2y7S+KQC3NOfwfa6rXgAHSUl3n28ysXnTc\n01qq7Hl0aaoZ83IBah8+8l5lbCdRsXqrxyQ543s2w+3nhqD6m7NzCmQ9f9D8\nK6CS\r\n=eTVq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d04bda3fb.0","@material/tab":"13.0.0-canary.d04bda3fb.0","@material/base":"13.0.0-canary.d04bda3fb.0","@material/animation":"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/tab-scroller_13.0.0-canary.d04bda3fb.0_1631287385511_0.5378612195578543","host":"s3://npm-registry-packages"}},"13.0.0-canary.5533f73d3.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.5533f73d3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"589e5a08091004d9ea380484c450585713512504","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.5533f73d3.0.tgz","fileCount":51,"integrity":"sha512-oqEwwffAUA12+AOZOQCDWcwBZ2IHSf8egGt3sOceiE/IZTataIX1opTUBeEHdFBGVNznvN9ZOpCPH8ty37dHkg==","signatures":[{"sig":"MEQCIAksjyuofXuLzwRBfgNd0bPqp5/m9dQsv5+UNP/tBypJAiBogcscx1wz8mcAb5Vk0XolPY0RMViIU9G7uacmfYYQig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP9kUCRA9TVsSAnZWagAAOtcP/0TiEiFG7S/vuwU+M+R+\noMKmhaefj/MQXVVE2xy1mSHXvBDUikpXKWUV+rBKKARonbzmTBIcFYSv/fRx\nSYO0T3Zyd0OgdEYTq4albp6zNo15uJT0xIi1znsJxXT+CbLvPtFkT8tT+WAE\nvkc+KqKKT4qOyaZZzUYjXluus9+L9U4JNUqiSSZY2BX0TnZd/2X28bxizy+T\nsvqvyL4U7RjgJG4/13djVglT1/ICNGEVZWHTCBRzaPqjerlXPLhEQgDgfNkb\nC7zhaTHnDLqdLZmaCLdlVPjd7uT9raUgKz3QgiCjt0XEXhPD42/uczKqIVsE\nir8474MVUPyJQH86tc9RqmMHuZisTGUvXp3f/PqSVcKWUL7W0fg4eeKNwqa+\n48Zl+gGzA8iWO6Gcl20/kvzblUtzATF3CsCp1nkCDqRtLhUGORCP+xj0151r\nK6VvjKXIFQEE26i1EqSNYr4yKdErJXnmVg1QX8KXVWlfqLL0nD+Jv7bjWISY\ngxE2JwrLKAyUbLR1H40ajcfkfpAAfMjHllRWdZgmRw3NKYJSONBKYZgdqycO\nlY2xijkvlbW8L2fW+scblQrDdnrrrYlIELviohYpQvq+JcKHg5Q4xFrANxny\n/3U96r/LVlnB6qq/xL+vV5vC4lTSRMxRlxzVM00h+kRD33tKp9rO+nsKr/B9\nFNM4\r\n=Ld6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.5533f73d3.0","@material/tab":"13.0.0-canary.5533f73d3.0","@material/base":"13.0.0-canary.5533f73d3.0","@material/animation":"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/tab-scroller_13.0.0-canary.5533f73d3.0_1631574292461_0.8675556523792469","host":"s3://npm-registry-packages"}},"13.0.0-canary.08398f880.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.08398f880.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"042ceec9befb3a48165047f6b5432e9e3e9da437","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.08398f880.0.tgz","fileCount":51,"integrity":"sha512-H2Cny3B6vgidbwAEaFSWyj4TZQ5CMrUQrXtDmssMUO5n40pO1w5Yrlo9+Uaeie+QlxxiyfQRXe7PFc0Y28CRCQ==","signatures":[{"sig":"MEQCIEO3njYFnAVddvuTtLl9uWpMvJ/KvqlpnjP3xfYy7nSPAiBdU/VOMGio0c9BlgPN8pYxyRAslGUaWeYr5YP6SEOUdA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhP+BFCRA9TVsSAnZWagAAg+4P/3V4ct5qcj/0Luqa3DpK\newChEhs4RHKLi9BXtBgE9vor2jqFm5GOZijqPetDEfglMC8AeuQYbiFOcSqy\n2XQd5vetfwL/vSz2v8oqXXmt7ao0oef180CruFk+BIgPVKG0AB3tt1RFNqV9\n84+d/Nka1wmOuXJATmAeVslocp9U1JDtXwmOdPSSEhBVmtARhEfzOtC8biQx\nrWb6LNmZilIFWTbWapuWMY42IEkAl3WGDNtwYfnILF/MTfxGX0WB62wTb4vu\nz57FoPPe4DrLspxTUyEiMIskwfS8WJ/2dkwfw+DPepjxIucVorItd5KZByFe\n7l5pxh02VRFMtFf3q75M2OYD26ZCCQYtgj9fSYzybw+KwAqjXwqJRl1fsz8J\nvKcykQvQpHEdu9qYkK+ztL+2tzg3c1pyVEOyhHM0v+U+mawyz8zIWf+q3Rk7\nQn/CRmaWMrMcPZhjLHfFf65SK7Pjo0w4X4zY6xlliWP1IhwIh8LkoT5MYK9+\noccY5dpkzHQAevco+fiSEHJbuxOEaQi2psIk59VRcrwJkTd/n8R3rKBfPSV3\nvYzqBHJwf+ziF4n278McGV5vWDOcIDCRphOR9RX3cqTzPNTxZ3Y8SXcM0ebW\naY6Ill9U3ZdveAs7KzT9JcftOqu5d8Y8eSEA4tg6Dfk5e60p9cMDYJVLl+hB\narLG\r\n=pPlV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.08398f880.0","@material/tab":"13.0.0-canary.08398f880.0","@material/base":"13.0.0-canary.08398f880.0","@material/animation":"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/tab-scroller_13.0.0-canary.08398f880.0_1631576133489_0.8299256347586752","host":"s3://npm-registry-packages"}},"13.0.0-canary.818f4ee93.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.818f4ee93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ea0a1db5a0f8a604c68085a8898704ff0a21e393","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.818f4ee93.0.tgz","fileCount":51,"integrity":"sha512-wVv7ZpOa0PRAEEGoOxxQl0UP53Dl7AIlHq2k4ZC02ZiZf/HYK/HSeUHyg1DFF3XvfuUVom/EuY1gdQoAz5J1Hw==","signatures":[{"sig":"MEYCIQDYBXD9lNLYt7zt+vRnZJT8us+qf6m+pqKSeicyehGplAIhAJ52ZcYbnAjUzc9PX0mxcj/NYwoLGQjiiPqt/b16duhE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQjKnCRA9TVsSAnZWagAA8XcP/AwCPrm/qhL4oUE2XiF+\nr8BqBu/7rXw6lstTMHHaLT8IIZ1ky4QVN77Lrl6LWFGU0cDzyXL0FiH99guW\n94Sh5J0mw/R7fqbj/98gHp+tG9FFl1AUUczyWZRet/saUDl2IFXxMwsOQsVN\nAfZ8OIC3ipl3a7kcjXpS8/GNp0q1lIzqVnXkcAPEBQaCuc6RJ4qaFElgmzki\nA8Z0G0pt9IAlkQ44XqzBhhJPg8vakmng1HbJ/QL1Ybq4rKtuQOEHhEd/Ibwa\nZXuvdbOyhybbR//hUIlH/vxVaPmu7Mr+ia+bpTXLSb9+0t4IL4YkBdZOxGXg\nZWZvPEqsIsH9MDLPABlMVpEeOgVOupjm7D3qyB6tbKOZ7D1pPxSUkW99CClI\nskT/6S1abLo/vtycDlbIWV8NJvnNeQiS/QfWQd+pLBVirwllb4Whxu77Kwhs\nw2BddW7WPBEMLEB4FrXqTcJasVxhNdFDx9fNUlCvLeg0usBkrn1vtGhLViGH\nElM9Wl5VblWf4IHbatdWxktTXhjGdQeBfeQ8+xYEJ5VZ6BMSnANSqnqTZe1N\nvqM4AQasIshpgTn59yP6xHSujXfFb6W/c3mCeH3tznJVzUEtcVg5iTTe89zS\nwExzajrDL2j4kT92gBMBlrsmXoIaGOTpPD32l6lJjU+OdHiESLh6FwB+eco2\nUaYA\r\n=jaW7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.818f4ee93.0","@material/tab":"13.0.0-canary.818f4ee93.0","@material/base":"13.0.0-canary.818f4ee93.0","@material/animation":"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/tab-scroller_13.0.0-canary.818f4ee93.0_1631728295265_0.26859320969126843","host":"s3://npm-registry-packages"}},"13.0.0-canary.8355e14dc.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.8355e14dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0507eaca1a8e04ddbc82a99f3ab4ea8b0a8de101","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.8355e14dc.0.tgz","fileCount":51,"integrity":"sha512-2SYhyLNaVU9zmmzP+KOzWK4iRoJFgyCNdN0fo6oziFBb0/3A8VarUUhPF/ifgJOUvS9tZJYxJ2Rp5hPo/RBsyA==","signatures":[{"sig":"MEQCIEnXSqtUOB5olrjzqyQaNnAMnwmuq4v+mWpMwccfvqeKAiAUDCQw9MM7c8qRAV0b6L7j0O1f+FJrcNkph00oh9rLrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQkXdCRA9TVsSAnZWagAAHU8P/jHALFX+skdJX3tk0D8a\nhyLqkZH3KD+D5W3+pwF8isvOmQcrJH2zGgOvoZGjtX+KnN1DbG3TmV9iNKhr\nfRnBk2Hh7AzoOLkFUHq+rxe5yzAMUnomz65FOXeHNr5BSO3T4+v9Tdo9oBoh\nmoIGxyQZSG8CQ3X8nCNrwFbL8OdEOx2z0UdMddki1wUO0PDONDnMRF0XsfFz\nggbxxzqTzSm8uMCQjHlBi9J5l8MB0LBcwiOIgADpneM3uesDN1UXz442i48u\nCvVpD1m606sX8NKmiYZYb9p0B6gvXatyU4bi6yVdgWZfoumN8qQQxx4Oh8EO\nk/5jQP+lEvb8NYZ1QaBhLfSSkThOSsZNNIXo7AizQzNbbU5SgFjs6a+f2lvc\nUKAlIhmQ7BsxBPW+DlXI8ECe24cdP/tx1BWp+4yT2aXWR1QawZaUNRmRJ0xs\nmPkrObvD+mEUnvVeK9y7LU6uBDEoM9ziAKtcc7pD9HKWl4nAxJdlFoVS8uOJ\nPdZYau+CshFruvTH0GfWrnAvpEfRwc3oofE28q18Xz5w9MXI5ko+pnm9+cya\nImnLaqPXV5cxOJOt/SLQKbwJZzfBVG26AH5u0tfoaW/ree0VF8lHVYDnkCso\n8n1g6rE4cCKkeG/jkUHwnCtxi5zXn7vZBot1/OZ9RKqzYrL+hk9iHIO7zWEu\nSBi8\r\n=45/B\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.8355e14dc.0","@material/tab":"13.0.0-canary.8355e14dc.0","@material/base":"13.0.0-canary.8355e14dc.0","@material/animation":"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/tab-scroller_13.0.0-canary.8355e14dc.0_1631733213694_0.7162494732869682","host":"s3://npm-registry-packages"}},"13.0.0-canary.d4e16a6c4.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.d4e16a6c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"149354736cead5f5e44f9a81fef16d7338906842","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.d4e16a6c4.0.tgz","fileCount":51,"integrity":"sha512-WvWKNy6YZwj2MmvDwC8uVwDnneV42nJEZpp01OF8gi18otxA0OTHarjk432DER91COg84zHejyphOulshihnMQ==","signatures":[{"sig":"MEYCIQCBb16BjkPKvZiqlZ2KYy0obabxu8o3809TEqxFOnH3GwIhAKP91DlpmY/3V/oNFMom1ZqbKbm1H0pYcyvShD+Mk7/R","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQmz0CRA9TVsSAnZWagAAX68P/2lLOZKApqci6rH55W/M\nFdjjuW6ltQG3RSeV8DNLrBtTmuyhy9gTjy8kXLTzdzXYg0s9HDb79AZaWiHb\nASeYDnmjtH6iOqeJDH2gvLQO7toEMWlEB2D03FVhZOCcLgJ24pUnlQNIKUiX\nztBJY29PTX+zKp2Gt8Y5jym/YAMoaRuqHVIPvWtm+WGkpQMFzLcVKrdoM0X/\nMtnQAPS3O2XfNDxZ0ka0GwBkI6V6NjHtV7McMm6JB/OiCxEvgRMJDZ1WcZk1\nizyLsV2yghqgM9upp819+mYRk0HOYLr2f7sCA/XibPeCRGqxtBKNhpVH76rY\ndphH6f+BS9b0Ts03/CoVaDPpky58aqzr661qIloaIYOmaFpXhAq7499C1ehF\nlaLaiWikaj2nprpTeor5PmW7ZtTNLw2F+GQHGkESRHT32aKddGhrYyX2xDmQ\nZzNNGK4OrcXYVgTzgKsruh3+7O4NRQO1IHh6FC3E8UI0+VXE3p0nTbPws4Lb\nXrm6kBcec11MRVbaCdGGfIgLBypCWRmpeH0NIype/j4nVr5ReAdiEXXOIVC7\nNXZ84ubl9ePfoG39ffb6/Cjk/+dPxSAE8yK3kawIzAbfsnmj0rPvzXno2Qzj\nnFV+iVJ1IHQ+Dr/aPw3STezF3VzgkYEFO5H4QX3NFGlinQ7pf9FnlpWIdkwY\n3Iuu\r\n=hxBX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.d4e16a6c4.0","@material/tab":"13.0.0-canary.d4e16a6c4.0","@material/base":"13.0.0-canary.d4e16a6c4.0","@material/animation":"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/tab-scroller_13.0.0-canary.d4e16a6c4.0_1631743219889_0.46399707192226414","host":"s3://npm-registry-packages"}},"13.0.0-canary.65125b3a6.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.65125b3a6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1cbe71f5a5686070ec63fe9a6d989d797a41d468","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.65125b3a6.0.tgz","fileCount":51,"integrity":"sha512-I0Ry8gW9w5F7wCqlms1phty2wp2+cGwWctncdLSfL6JO0bdGUrvL1n9MEaILXMSw/o0MEG1cNdp/gku500jirw==","signatures":[{"sig":"MEQCIHPXWfV8sWPZn7QvaANgxVpmzo+kxW3syxBwvzHLSpzGAiApQAvhOvZ/USDd0n+7RJdsxMHdiT407mE9toXy6Gu3xg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhQ7SpCRA9TVsSAnZWagAA6QkP/3qN20gfdodLzOKjst8Y\nnkMt1eZpYdiLpnMvoG3xAutYm6ctzPTxSJqXJ9vFTcjoCNf6E3QkAiuRPxfs\n5BhZTv7FdTJESUMMPQja7lrS82FZXjR959RJf7Nq7g0dEWThkMqOLdbeXBNI\nVXuvI47yfch6iVP4HSHUVsM5Lkwe2H4twzLamG3w/zB6bZOg1EYefIOt5VNb\nxGWNJ7qy3S1+Kt/yXu3GxCmnfp0C2pdlsnEygkshfJzc6gTLxtK6edJWJ/GP\nRz5QLXApp3Prr9faft6iM+QUcUNLXkumXk9WjEBYdDwSDM3o+m6lCafvEx/7\nInceSv+cUcPZaZdrLsreDuy3/BKliHUPp8fCGok0Q/W+KROvZ8Qgk0UfJMeW\nE0YykgrhhUp6KSkUc6pVDW/qYoKh2Js8Q3RwSYC1F51UrWQvagLHTvl4MtGr\nh+iA/4as8IEqufUpBGaByqNRHS1q1aSvz+CpetamWnRzx9QYeAJ/Ds2MtALl\n3DDptTevZL7Y+1ex55TAsyASrNj6BiLlrn8WoD2ZbzjSFDKjry7lXUKV8XH0\nZ2wpvnw4se2mn2S0sOnChlejhNoJcLybkF+krqkePBfAWmUwQq12NlaXhfpB\nVlZWa3om9qqfsma9mw624STbDbewTrDemIEsuqlaNAjyhkNQ2hhcLnnWnYlv\nOc8r\r\n=erZY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v10.24.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"10.24.1","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65125b3a6.0","@material/tab":"13.0.0-canary.65125b3a6.0","@material/base":"13.0.0-canary.65125b3a6.0","@material/animation":"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/tab-scroller_13.0.0-canary.65125b3a6.0_1631827113434_0.4580087305434344","host":"s3://npm-registry-packages"}},"13.0.0-canary.80a583365.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.80a583365.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9170be7556ad3dba8fe94c35d5993a4e3c87803c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.80a583365.0.tgz","fileCount":51,"integrity":"sha512-0tNNvp3kt8sNE8IT8M38VyMWxSgMhGNYpD2WRnOqSHtdLtdkWhCCSVbHggY/XLs/zHPGt7Elak+oUoi4EobeBg==","signatures":[{"sig":"MEQCIFz2keteS7IRqVQ1KDcnCzDfA+vDqO+H7/g1ZyiwtVRsAiB1LfpcAIszAHpyyEyZVKN5HpBZ/BWSbciEXAaAvWMl0g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.80a583365.0","@material/tab":"13.0.0-canary.80a583365.0","@material/base":"13.0.0-canary.80a583365.0","@material/animation":"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/tab-scroller_13.0.0-canary.80a583365.0_1631911000174_0.6657512475768022","host":"s3://npm-registry-packages"}},"13.0.0-canary.83900936a.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.83900936a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b239b0eedf4878b2edd5ba0c5a29b95eae4326f5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.83900936a.0.tgz","fileCount":51,"integrity":"sha512-UAi3SyhpZExMe0ZZYBk/88nMIj+9Qt/rGtYe3J2NZOaOb/HtQvToYXSZF5M8+R6QL6qyJiJxitJZ3oxweltN6A==","signatures":[{"sig":"MEUCIHUMlL0+UFVvEZYgVWoLCKb8DF6cbg+oeozqwv5hgG1JAiEAzWcTGIX12SmeoHd0BChQmzV963P2c9YMaO/G+lyH9gc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.83900936a.0","@material/tab":"13.0.0-canary.83900936a.0","@material/base":"13.0.0-canary.83900936a.0","@material/animation":"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/tab-scroller_13.0.0-canary.83900936a.0_1631921107947_0.4628034900938789","host":"s3://npm-registry-packages"}},"13.0.0-canary.860ad06a1.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.860ad06a1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6f9b7430c14d06d6a6db5947a3138921a2adc187","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.860ad06a1.0.tgz","fileCount":51,"integrity":"sha512-KhIbYviX+6Y4EjWDm17b9DDqudXVcPY9MSr/uRE0j5IBJ1Ksp8KbR80nin0QyfC1MuZBqX1EYVoOFG4ORVQlKw==","signatures":[{"sig":"MEQCIEDT3nvcNNYFIu3zCpD289ypEdMsX+gG7POoG6rwT65TAiBa7fec8EmN73pPnYpiO9ChIvvGm6YiAk5DT7zy2zcOnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.860ad06a1.0","@material/tab":"13.0.0-canary.860ad06a1.0","@material/base":"13.0.0-canary.860ad06a1.0","@material/animation":"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/tab-scroller_13.0.0-canary.860ad06a1.0_1631921814096_0.0461925489991315","host":"s3://npm-registry-packages"}},"13.0.0-canary.3b8d4429e.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.3b8d4429e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"84e210e2e4a28188dcc27f08386a70c220a08a5e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.3b8d4429e.0.tgz","fileCount":51,"integrity":"sha512-TJZrarm8J/gLuSFe5SDnWqsC1tqwSsRVSctehsYXuPPmeI9cuY4CRXIE4Suh+nRBdD10H/h/JWep8bHXh6U38w==","signatures":[{"sig":"MEUCIE5po0EDiptq7OJoRJgQc8eMajXkkXDdo2wAVSgX17ZlAiEAyL8rqkLozmXX0b7/6LxXUU7wU9UYJwHGp4QH1EOj7wY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.3b8d4429e.0","@material/tab":"13.0.0-canary.3b8d4429e.0","@material/base":"13.0.0-canary.3b8d4429e.0","@material/animation":"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/tab-scroller_13.0.0-canary.3b8d4429e.0_1632160102661_0.01900416654350434","host":"s3://npm-registry-packages"}},"13.0.0-canary.2da3606b9.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.2da3606b9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e6ca64cc688c401a5b2c4441796f71a778cdb711","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.2da3606b9.0.tgz","fileCount":51,"integrity":"sha512-gq8XsfwsEuNqFvhgMleKIGa0K17QsUSTvXbTChCw5Vn6Tsh42h6ZQkfQUmZYVG+Ru1yR9ipBKVpgXWLvqm8M/Q==","signatures":[{"sig":"MEUCIGueZ5uV+yA+Rg/K4LkJb3h5GvTeTCpoBDPAa/UduzJYAiEAwGMmr79dMnPKiOd5ACHZUXxFtJCRLNAqBA3NfCDoep4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.2da3606b9.0","@material/tab":"13.0.0-canary.2da3606b9.0","@material/base":"13.0.0-canary.2da3606b9.0","@material/animation":"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/tab-scroller_13.0.0-canary.2da3606b9.0_1632166709333_0.5550513443043601","host":"s3://npm-registry-packages"}},"13.0.0-canary.e8c598d1e.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.e8c598d1e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"42255b4599db109704ca2049998b41afc027379d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.e8c598d1e.0.tgz","fileCount":51,"integrity":"sha512-f3BXp5Qxd64uM6x5HdyTQ6Q0llQycEbvTL9VSb9hut/wjsdODWONEDq12Q6y3OjLaUF9pHRxBc3wySSjoUGgBw==","signatures":[{"sig":"MEUCIQDDYQywrrs2sHwuZObkGZsyEa2ZZgVRhobqJz+TFwh+AQIgB9pKiFlQCYDUyrDTrm+4nUIf2xyPxRyKohAQUjN7g4U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.e8c598d1e.0","@material/tab":"13.0.0-canary.e8c598d1e.0","@material/base":"13.0.0-canary.e8c598d1e.0","@material/animation":"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/tab-scroller_13.0.0-canary.e8c598d1e.0_1632172366729_0.6897463250643716","host":"s3://npm-registry-packages"}},"13.0.0-canary.1340ee9f7.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.1340ee9f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"76e705071110c100777e01320cf2f7083af20b08","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.1340ee9f7.0.tgz","fileCount":51,"integrity":"sha512-fFx1ylJ7oAPRiig6RNPQg1UvzFAMufM8MOkVm9oK6OrBuc/r9vwzUHug3MyALR2+CyrLzRliTnvEFITRpMvixA==","signatures":[{"sig":"MEYCIQDq4hkLke8tZjvLrIHwhXTeguVtG5OUChFqVmUOrmonbAIhAK5BEFdp7OQRjZ5e8YTbDu7lEDh2U6H4godVW1iV7QhK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.1340ee9f7.0","@material/tab":"13.0.0-canary.1340ee9f7.0","@material/base":"13.0.0-canary.1340ee9f7.0","@material/animation":"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/tab-scroller_13.0.0-canary.1340ee9f7.0_1632333530565_0.5478825044756905","host":"s3://npm-registry-packages"}},"13.0.0-canary.65084baff.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.65084baff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d45ee4617b7c6fd7c7678285074b4e75f3f51c14","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.65084baff.0.tgz","fileCount":51,"integrity":"sha512-UKCnY2Qy1vNNZ3hRHL8GM1x9QsRMPZ6FHSlwrlFxHT43dhDaKhwEle2U2yCeE+uEuC85DEiezpAt1bvN/GD1zQ==","signatures":[{"sig":"MEQCIFpxEXs5+frM0RVgGFoeluuNbVyIVb1uygo7jKCzZPZTAiBuzjiQMzppTw6PJES7N+6ttxqt3sdQF5yi2X3S9OaBPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.65084baff.0","@material/tab":"13.0.0-canary.65084baff.0","@material/base":"13.0.0-canary.65084baff.0","@material/animation":"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/tab-scroller_13.0.0-canary.65084baff.0_1632432386053_0.018684392973096653","host":"s3://npm-registry-packages"}},"13.0.0-canary.c79aa0cdd.0":{"name":"@material/tab-scroller","version":"13.0.0-canary.c79aa0cdd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"646fd37c50075b9114fddcfcf96033fe84758175","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0-canary.c79aa0cdd.0.tgz","fileCount":51,"integrity":"sha512-w+vKxZXC9Tt+u3k3xzeYadC4c6p719hTOtUomQuJtwkzRoh1Z+ANxjgJEIL5t/StzKLAUS6aSUjDNa3JwtSsmw==","signatures":[{"sig":"MEQCIHavrzZS3D78GenH1onYJTPRuD+5o2uwjpdlGsFTDRecAiAg2NrkNM3x/G4VhniXQYlX8UdxBM7exVrRR3FldAx41g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"13.0.0-canary.c79aa0cdd.0","@material/tab":"13.0.0-canary.c79aa0cdd.0","@material/base":"13.0.0-canary.c79aa0cdd.0","@material/animation":"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/tab-scroller_13.0.0-canary.c79aa0cdd.0_1632490975659_0.8486456473818731","host":"s3://npm-registry-packages"}},"13.0.0":{"name":"@material/tab-scroller","version":"13.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0bbe9e77cebb3a0d6607e86216de69df2e7fddc7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-13.0.0.tgz","fileCount":50,"integrity":"sha512-SHdNXTLrNA47RbTNOQa67DbQjw0qrf1h0OuoESXHMU/B7QQvhAOqnHpU32/LdCP+gvc7EdZjolVQgk3WphDcQA==","signatures":[{"sig":"MEYCIQDPOId59Sd0lILV7ifszS+iGN0zy8cNB48zZXCSUUXqgAIhAOlBtcTgvuAZ1xPaHv5Icg05VarNECMeP9TA4hAayrnZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":325698},"main":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"^13.0.0","@material/tab":"^13.0.0","@material/base":"^13.0.0","@material/animation":"^13.0.0","@material/feature-targeting":"^13.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_13.0.0_1632512801018_0.9395953119522069","host":"s3://npm-registry-packages"}},"14.0.0-canary.198431fcd.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.198431fcd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"15348d35b201b90295c2fe2fbc543e1e9f166791","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.198431fcd.0.tgz","fileCount":51,"integrity":"sha512-UpOUKuQqGnivrbZEfBQlX73Nq1L/8OdlfxaRSdiEbEsvAY459kTB5Sd+Mhm3RroyV534wkzdcoHFw6xbDssJ6Q==","signatures":[{"sig":"MEQCIFaDru4txg5dNlpRKkEH9pDRo0Suy0f+t8+Isj0aMhDdAiAekrXyrmxlIz91bSSvvGYnrPM23EcShGMMXGBl4LOuGw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326312},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.198431fcd.0","@material/tab":"14.0.0-canary.198431fcd.0","@material/base":"14.0.0-canary.198431fcd.0","@material/animation":"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/tab-scroller_14.0.0-canary.198431fcd.0_1632512845515_0.3612424044860769","host":"s3://npm-registry-packages"}},"14.0.0-canary.9a02b6ef8.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.9a02b6ef8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6cfbb5abbe3ccafca59d56c1aa9b0f753974ddb4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.9a02b6ef8.0.tgz","fileCount":51,"integrity":"sha512-nYsAK991sYCsIo+FAJIRYPC/dyXMwmyHRvjbZPPKwbmIzlbf1hEXEMiHxUrIIVpu9ZPtW0EkuSnbbHnCYPssog==","signatures":[{"sig":"MEYCIQCxeE4G+78trq4ABGASGAI8GH2+eTWw+m4g7qZUZYKwfwIhAN7Twa++LX4TKru4LrrL0WEg8etqpZQSsLUUa8p7rKF6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9a02b6ef8.0","@material/tab":"14.0.0-canary.9a02b6ef8.0","@material/base":"14.0.0-canary.9a02b6ef8.0","@material/animation":"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/tab-scroller_14.0.0-canary.9a02b6ef8.0_1632575518203_0.31597119598297807","host":"s3://npm-registry-packages"}},"14.0.0-canary.758ce31d9.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.758ce31d9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2ce11f2f355de323f4c78f0321c30d334f37883f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.758ce31d9.0.tgz","fileCount":51,"integrity":"sha512-aswNwW989hZkP/48GdOCG/2cZIWkWAHUqrPCA8TGqhlrhGjlX3znf/8nKThSjl43rqVPwldlU1cuCCxuy5ejWA==","signatures":[{"sig":"MEYCIQCdxWntz1cnuUZXEKln1anyyu5+v8+ikOy+uMwp6RmQ3QIhAOJDeqK8KlTOPdYXnvhceiSTgjBBqIFleqP+j0J9XF6H","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.758ce31d9.0","@material/tab":"14.0.0-canary.758ce31d9.0","@material/base":"14.0.0-canary.758ce31d9.0","@material/animation":"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/tab-scroller_14.0.0-canary.758ce31d9.0_1632763817547_0.6398141676883029","host":"s3://npm-registry-packages"}},"14.0.0-canary.86b50ef74.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.86b50ef74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ae23c52c2eaae2a13b0dceacf703b9e7a82de41a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.86b50ef74.0.tgz","fileCount":51,"integrity":"sha512-PbYUQm19CU9M6gx8WMHpHcoPzrVWRC+i+D5/02GlrAyNhZjbcyoWKzOcnOWt9KAW7mE1CG7k1jJf1R5cZ0hWcQ==","signatures":[{"sig":"MEUCIA/VSj/hsQJfxZPMliJqsI3yf0LP6kG+iZpYOVfGlV3JAiEAzsy0sO99gheLMF2tpbcOi+4HrIxqXbb4sUjSIuS8ezQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.86b50ef74.0","@material/tab":"14.0.0-canary.86b50ef74.0","@material/base":"14.0.0-canary.86b50ef74.0","@material/animation":"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/tab-scroller_14.0.0-canary.86b50ef74.0_1632851041313_0.3682089501760468","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2fe3528b.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.b2fe3528b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a7b8d96fcf9e359c09d100e4dd2f4b36a3efb335","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.b2fe3528b.0.tgz","fileCount":51,"integrity":"sha512-pluCuTrS8emA7ES3IxT2W0bJjan9tZw41t4TzLiPMWRIcuKc7whQ1H9kBjW3xKlBoFiSNsr6D6Za6xKP0K0f6w==","signatures":[{"sig":"MEUCIQDylCFzvxo232gGL+2aW3EYK0+pLVN7Km/NBgwc/GAAgAIgMPv5J42ZpuUPPfgRKy0USjH0PHNUJcW/ra8T8DwavXQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.17.6+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.17.6","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2fe3528b.0","@material/tab":"14.0.0-canary.b2fe3528b.0","@material/base":"14.0.0-canary.b2fe3528b.0","@material/animation":"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/tab-scroller_14.0.0-canary.b2fe3528b.0_1632956263282_0.49406870072982123","host":"s3://npm-registry-packages"}},"14.0.0-canary.586e740dd.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.586e740dd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"94c15d835f0a1233b5cdac9d1b146300b61283de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.586e740dd.0.tgz","fileCount":51,"integrity":"sha512-zMhd3ui5pfabbYuQrc3pRsNjbdysfSjCUIC/Ik9mAnqAY55mBkp7V40jvgotJRm0g0ngkybeiMJD3eCc8swzMw==","signatures":[{"sig":"MEQCIGlfzzzMfdKP7O7bt8iZvu6wg86erFaTUhYGW9I3wDSeAiAsubc7J48a1H6Db6DA0fMGCVFaxezmU17AHqBcO4zfbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.586e740dd.0","@material/tab":"14.0.0-canary.586e740dd.0","@material/base":"14.0.0-canary.586e740dd.0","@material/animation":"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/tab-scroller_14.0.0-canary.586e740dd.0_1633019527434_0.8540891877681278","host":"s3://npm-registry-packages"}},"14.0.0-canary.2ac92d766.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.2ac92d766.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7af68dee90a01892de61a2b3a5b85832b885a439","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.2ac92d766.0.tgz","fileCount":51,"integrity":"sha512-DVitDAkU6XrZ8WXsd8qY7TRSvJUhlo36XmDQHhiWBh592AbIK23MyTT+mGD2vLZY9FoB4FkGLMqBrfl/SxPYgA==","signatures":[{"sig":"MEQCIClsGXASgBj49g3VXa+1AhswRRQ0MDHV6UDBnxXoYXpyAiAiqHixlaxjXU7MhcV9EdUUA7N1rqzwAppg3lB7oCt9TQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.2ac92d766.0","@material/tab":"14.0.0-canary.2ac92d766.0","@material/base":"14.0.0-canary.2ac92d766.0","@material/animation":"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/tab-scroller_14.0.0-canary.2ac92d766.0_1633462168841_0.8583438921400086","host":"s3://npm-registry-packages"}},"14.0.0-canary.353ca7e9f.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.353ca7e9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"523720419000bb70eb5ff65eacd9f105debcdc7b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.353ca7e9f.0.tgz","fileCount":51,"integrity":"sha512-dyFMG5QGDJujQpps2li2rE61qhHzRbPURGWZs4bXwWwumAGcnR6bYz632LNTNPTW5NPZ83ePx9bSMQfdwZzAtg==","signatures":[{"sig":"MEUCIQD217hf98i854txrs4sQ8OhhQ94CPwD4+zVkneHx1uS5QIgCT9wjqJ2xo8mjbXY15XPe95wSfYdfgi0Av1u2OnRYhI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.353ca7e9f.0","@material/tab":"14.0.0-canary.353ca7e9f.0","@material/base":"14.0.0-canary.353ca7e9f.0","@material/animation":"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/tab-scroller_14.0.0-canary.353ca7e9f.0_1633718865593_0.5281080654096784","host":"s3://npm-registry-packages"}},"14.0.0-canary.c78ff0429.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.c78ff0429.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b650f6140eb335ce9f2494e95cbfe16525eb090","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.c78ff0429.0.tgz","fileCount":51,"integrity":"sha512-pu9SXllMJs30Xk+D+9jJEb84cWK0wXgoLfgQ5dqiljcXp3rmFF8DA0i4RnooKY1o6yXFXR7gctVuYZU3Y+VOAw==","signatures":[{"sig":"MEYCIQC7Kh6XJcaWouMh3p2sHLfX/z5l3GFK4SKRcY3kS0FmYQIhAM069EtgckQwXAFxYoYsU9V/ZRJvnD2J0ldA33YJNexZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c78ff0429.0","@material/tab":"14.0.0-canary.c78ff0429.0","@material/base":"14.0.0-canary.c78ff0429.0","@material/animation":"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/tab-scroller_14.0.0-canary.c78ff0429.0_1633972988689_0.4918924327224172","host":"s3://npm-registry-packages"}},"14.0.0-canary.261f2db59.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.261f2db59.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"eae508606ab59b2e35688443d225e9d86ed1a2b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.261f2db59.0.tgz","fileCount":51,"integrity":"sha512-1tk3BHpYK3Zh/SAvXITlkm2frNo8wjz2xnu/9UoTQnzKMRIzKRFvAvtPH8oM7kmEoZeNXZOm+WrTyJ0mJNfmwg==","signatures":[{"sig":"MEYCIQDFHyGnln6p8w5giovmh063Z+W0nOccCzlsHn1cdQqK2gIhANFIiaPiRYPWC8cG9AnRuzTildbTV50LFjAW/hxq2XUf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.261f2db59.0","@material/tab":"14.0.0-canary.261f2db59.0","@material/base":"14.0.0-canary.261f2db59.0","@material/animation":"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/tab-scroller_14.0.0-canary.261f2db59.0_1634749236387_0.807414195654919","host":"s3://npm-registry-packages"}},"14.0.0-canary.9803d2dc1.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.9803d2dc1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a709e9e00ced55a27a3f89fd69bf3f29c06d7aea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.9803d2dc1.0.tgz","fileCount":51,"integrity":"sha512-5VWWKWKp7PtfdKGGAyMNUoldLOwDjieNBibb0kzTYQ0ewbqh8VqQ0uP6fns5L/q7AxGJkYJS47NgbwGMXTUdRA==","signatures":[{"sig":"MEQCIEAZHHbB8cls5DM6q+QOcvsRd9qfE7owDNBYFEr1pxDUAiAmzxMDVfqDbQgrdK6el7hBx+7w+nzbH4kUbffEQm5LaQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9803d2dc1.0","@material/tab":"14.0.0-canary.9803d2dc1.0","@material/base":"14.0.0-canary.9803d2dc1.0","@material/animation":"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/tab-scroller_14.0.0-canary.9803d2dc1.0_1634757757008_0.045204937464399464","host":"s3://npm-registry-packages"}},"14.0.0-canary.348665978.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.348665978.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c367a3822f4f2613ae8d30c534928379120d0b17","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.348665978.0.tgz","fileCount":51,"integrity":"sha512-9ce42wsvsodpBNTw4tichfu6nb8242+qtPOJ9vWFPAa0oQfqpPt5t12R6Jr68nU4M1wK1M+HKTfUjPc7855plA==","signatures":[{"sig":"MEUCIFpckEGJpp14fiygpfKWssMBi8BR49/3rfa/BQTs863zAiEAqLMK2ZWVMHcM4C4fH3OcdEOxMq1O0+axFzQ+5YHK8fY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.348665978.0","@material/tab":"14.0.0-canary.348665978.0","@material/base":"14.0.0-canary.348665978.0","@material/animation":"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/tab-scroller_14.0.0-canary.348665978.0_1634827893005_0.6890957432123812","host":"s3://npm-registry-packages"}},"14.0.0-canary.b2b979a8a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.b2b979a8a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8ed6aec70bb18dc82a2d11a648ee18b7bb546e16","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.b2b979a8a.0.tgz","fileCount":51,"integrity":"sha512-AYE+ELQadHHwDJgX4jJfOHfwXMWxxpViuZtWVuwKLaPlLOo+I7DN8t/X5GOY6gzRkrZHU8AL48Fx3K9RXdsImw==","signatures":[{"sig":"MEUCIQDgj7DuNtLqeKujbifQZFmwcdrQS6dbvEZ9DNbPZ1bjsQIgUIAvCMig84QO2YV08VmY2j9AcN0YnLjbHO1BPwMdOdg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b2b979a8a.0","@material/tab":"14.0.0-canary.b2b979a8a.0","@material/base":"14.0.0-canary.b2b979a8a.0","@material/animation":"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/tab-scroller_14.0.0-canary.b2b979a8a.0_1635433991577_0.09344589547627735","host":"s3://npm-registry-packages"}},"14.0.0-canary.1af7c1c4a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.1af7c1c4a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7a020734e7da61119c8b9ea4711a7b22dc0444d7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.1af7c1c4a.0.tgz","fileCount":51,"integrity":"sha512-YtJ7d+AIDRsMvHvrKiLLyu3yZte98/IzSbg5Kxl/fmaqrZZn3VSEP0hsVPSjNuqa4RsWIqFB0PCUI/nodbtGGA==","signatures":[{"sig":"MEUCIQD7CKh7/27Yhl+acz9n/mrVZmWWC+CSJJAFbgs+/HMAVQIgdyCCIxDGR3eVFTBgDIGvbQu6x8e+WRdPLbQPdEmeifo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1af7c1c4a.0","@material/tab":"14.0.0-canary.1af7c1c4a.0","@material/base":"14.0.0-canary.1af7c1c4a.0","@material/animation":"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/tab-scroller_14.0.0-canary.1af7c1c4a.0_1635443628143_0.19403011897494649","host":"s3://npm-registry-packages"}},"14.0.0-canary.4afd353cd.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.4afd353cd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c12bb368667796cef93b834735183c68e41419ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.4afd353cd.0.tgz","fileCount":51,"integrity":"sha512-LgSCbwDEJdF4F5GM+SyrGy7K2GGzvqgM0g9qdC6FnEMygCYOeEgSrSe81/NWhpDpH4Q+bnohm01S94utcyyVpw==","signatures":[{"sig":"MEYCIQC5AbtqJVK5CcKHUiu70QouBBVNJ5Sy86FVzLqoyhsP8wIhAICrL790ybIDYQIJq9Kmuvooyeko9KfQkfTIc/9S/DkU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4afd353cd.0","@material/tab":"14.0.0-canary.4afd353cd.0","@material/base":"14.0.0-canary.4afd353cd.0","@material/animation":"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/tab-scroller_14.0.0-canary.4afd353cd.0_1635519751203_0.9343868574850331","host":"s3://npm-registry-packages"}},"14.0.0-canary.a986df922.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.a986df922.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"10c5243d762f46331c3143dc00c3db45c4a0eef5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.a986df922.0.tgz","fileCount":51,"integrity":"sha512-jImbZzcamzE2ptVjEhKuRnVYyTwu/thMx+M5NLD8DGmu9/V4CdtbqCCf3Sn6QzV64U9JnD83X6ZOPz+QucR2Xg==","signatures":[{"sig":"MEQCIC4qJixzjsBub65T4A4EgOxdqz+MobSka5OpO1OpG2g4AiA7k/x4cr2ZmOFVQatMK2KJBhQZp7+I7Upzwt6iuND/JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a986df922.0","@material/tab":"14.0.0-canary.a986df922.0","@material/base":"14.0.0-canary.a986df922.0","@material/animation":"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/tab-scroller_14.0.0-canary.a986df922.0_1635543357599_0.01814300101845956","host":"s3://npm-registry-packages"}},"14.0.0-canary.c3cdff07b.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.c3cdff07b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5e1e7b8f4c1aa68cd074fa4b3be04e823d5d2b60","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.c3cdff07b.0.tgz","fileCount":51,"integrity":"sha512-8ZWlYMJBTcSSJ6gcQm4yO2tqzc0pe6qYNHFfy2+gFBf8OJRnAVopvFtky2dGFLZrOCezvCLToXVMayIlV9WysQ==","signatures":[{"sig":"MEQCIGXvAtVU7N7aiNfuSb1VL4uu6NMV6Gl2fwNjKIUiWFfDAiB0XPng7LQ2tlj2hoGREUPvBztKQ/ozAxZAzPG7vCcaYw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c3cdff07b.0","@material/tab":"14.0.0-canary.c3cdff07b.0","@material/base":"14.0.0-canary.c3cdff07b.0","@material/animation":"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/tab-scroller_14.0.0-canary.c3cdff07b.0_1636484813065_0.8869622274625297","host":"s3://npm-registry-packages"}},"14.0.0-canary.468392606.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.468392606.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"af4179fd84b02999b96be202eb8e34692176ff8b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.468392606.0.tgz","fileCount":51,"integrity":"sha512-c4nJOptjFQ0o2i9DLnQfHezgm/QuGvK8LysK2u+A2q+6PGS4k38KW6arh8kwYkArf8nYhfSjRiAMj6TItblyPA==","signatures":[{"sig":"MEYCIQDPlCAk2g/69ND3YKHvaNct9AHr/1Tkqz288wmRgfFddQIhAOnxbqVggcG5r+L0dvotCQMpJunGE+nKFgS8eHL9esMg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.468392606.0","@material/tab":"14.0.0-canary.468392606.0","@material/base":"14.0.0-canary.468392606.0","@material/animation":"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/tab-scroller_14.0.0-canary.468392606.0_1636659654851_0.5183649990591883","host":"s3://npm-registry-packages"}},"14.0.0-canary.828f9803b.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.828f9803b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f054d981058896973092b504c3a55f8fb4e0076d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.828f9803b.0.tgz","fileCount":51,"integrity":"sha512-3Bf4oNX4o+W1G+JBXv+Fl31TW8geNvixmAi2ljk+hubL23oBELxUeZYxdEIz9/FLdxT40/p3vROA6JFmFiUAhQ==","signatures":[{"sig":"MEUCIQDJseP+v9eSuJtseSTDh0+ewh48Vv5mvCCtoTfOG2javwIgJOdqxscCo2l4hh9ulWwtZzdMiXjUTVM+TPXmPH1mrWQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.828f9803b.0","@material/tab":"14.0.0-canary.828f9803b.0","@material/base":"14.0.0-canary.828f9803b.0","@material/animation":"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/tab-scroller_14.0.0-canary.828f9803b.0_1636660297829_0.8736781248818186","host":"s3://npm-registry-packages"}},"14.0.0-canary.8795cba87.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.8795cba87.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b3755047b987ab819528702ecf5b6a358dc1130c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.8795cba87.0.tgz","fileCount":51,"integrity":"sha512-X3mXDmquNX5KXu2Je0g6NSMd6l/ZRL1lHc6mCdRa0JZ9wQpmqywVdsVYqOCDvyUt6Cc34bckXH0sD1X9+HPvBw==","signatures":[{"sig":"MEQCIG2LnwMpOJrrm2HatHVItiYY+myFDb3xnQHLWzRqGqsOAiB4QrKzHM4kVe+GmsV/U28U3Ur64nFJArmJk/g33HHrpQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8795cba87.0","@material/tab":"14.0.0-canary.8795cba87.0","@material/base":"14.0.0-canary.8795cba87.0","@material/animation":"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/tab-scroller_14.0.0-canary.8795cba87.0_1636660654730_0.1642720246428302","host":"s3://npm-registry-packages"}},"14.0.0-canary.cd7f8cace.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.cd7f8cace.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f8af1abc74e19551b388947585cdabbe43ce3f12","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.cd7f8cace.0.tgz","fileCount":51,"integrity":"sha512-2fAWhh2i0rX7dDHzH9GQgNLjWk582STT6VILGAvUQP9E5lm8cpBqvSg9+i/1vOS9laDOnbrnKouOTm+SHoNilw==","signatures":[{"sig":"MEUCIQCfZE7ok6XjhMQEjASfp2FlIZamQ8rjA4wNCWiEXHiDOQIgE+/0qDJ6MgmN5LqtONCdJnemYewNRjfeMN3j5ne5kWU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cd7f8cace.0","@material/tab":"14.0.0-canary.cd7f8cace.0","@material/base":"14.0.0-canary.cd7f8cace.0","@material/animation":"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/tab-scroller_14.0.0-canary.cd7f8cace.0_1636660759986_0.7077565140573865","host":"s3://npm-registry-packages"}},"14.0.0-canary.207230eb8.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.207230eb8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6ef9a075d1edc3512b1ec9ee23f94c0238c44fd4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.207230eb8.0.tgz","fileCount":51,"integrity":"sha512-JcZ/uNv6cyqn1hx6ec+Qi5s/1W496s7Fvrsw989Lkhe7Z9ThSiqXkytxZjcAzp+S8bRCvD9j2ETTs4FulOL3IQ==","signatures":[{"sig":"MEUCIGLWwJ+nxj90zrlo5ai/K0E/wfLM0nygFGy7+VJIJOFVAiEAwymxQ//i8JhqpiLGy4NqsiqKhCu/6mM/oGBS7M+CgUM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.207230eb8.0","@material/tab":"14.0.0-canary.207230eb8.0","@material/base":"14.0.0-canary.207230eb8.0","@material/animation":"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/tab-scroller_14.0.0-canary.207230eb8.0_1636669531506_0.43396311391012343","host":"s3://npm-registry-packages"}},"14.0.0-canary.991fb99f7.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.991fb99f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f8d185e0efeaaf6d1e53f48a9b892e78ed0f485e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.991fb99f7.0.tgz","fileCount":51,"integrity":"sha512-n1bzlUJVrU18ZaY6EI+h5mMbLID+2UVoVgSej6fw3EaosYylTtdpXmWqrD32iuyr6+ZGHQLvIDzsZxISu4dD6g==","signatures":[{"sig":"MEYCIQDUFwcDoFkk3nZ8MTSWZVYbV1sMuR3PBeelsvTwWzdWJwIhALB0CVw9u7yGF0KU3qxBE7bWwizZdLNqp8P1IQu2hgIF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.991fb99f7.0","@material/tab":"14.0.0-canary.991fb99f7.0","@material/base":"14.0.0-canary.991fb99f7.0","@material/animation":"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/tab-scroller_14.0.0-canary.991fb99f7.0_1636670235783_0.6893737988323552","host":"s3://npm-registry-packages"}},"14.0.0-canary.15db4f164.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.15db4f164.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"84f0eb8adfd0281fafca23ba57c82940b5c142a6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.15db4f164.0.tgz","fileCount":51,"integrity":"sha512-mFfWq1sGvvnVP6vJqKFcCLAlm6+sP3Y/BAGnM5+ZLMbeBurdaW3UU+vtrmxiwd0yuwFtqfhXWMHwr9UHaKWZwQ==","signatures":[{"sig":"MEQCIFz1g+lROc4wX5HQSNeQ3FrxGKGSGOMYUI0acjIEbenlAiAKFirAj+HHb5xsEHnh7YxjD4En6YqVvWYCDGbkebVtHg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.15db4f164.0","@material/tab":"14.0.0-canary.15db4f164.0","@material/base":"14.0.0-canary.15db4f164.0","@material/animation":"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/tab-scroller_14.0.0-canary.15db4f164.0_1636738233462_0.4108209729242893","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fcad5a3c.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.8fcad5a3c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"53ab0d5597cce8105716cad0ca7c58c6551a37c1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.8fcad5a3c.0.tgz","fileCount":51,"integrity":"sha512-8VDUjzF9A3wbz++lUYWYP4S4IOywISASg58opkECeBmWYTSqsZv9so/DRprBjt4LP1GArRNZLPgqTucC1bv8TQ==","signatures":[{"sig":"MEUCIQCQIKwwU54YmbmEcd7AirqLknhove/fVSCtSkQxxQAouwIgB3bbDwdjpWEP7s9d02soqFMCmVeMnIS9CRkqIUCSzQk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fcad5a3c.0","@material/tab":"14.0.0-canary.8fcad5a3c.0","@material/base":"14.0.0-canary.8fcad5a3c.0","@material/animation":"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/tab-scroller_14.0.0-canary.8fcad5a3c.0_1636744486714_0.15453292991762302","host":"s3://npm-registry-packages"}},"14.0.0-canary.f81fb1d23.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.f81fb1d23.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4a0443ebc9957ea5ca95487e4b4ef7130a719346","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.f81fb1d23.0.tgz","fileCount":51,"integrity":"sha512-c+WU+y/7RiqDcUC6hGNS6d1qluYpvtfFTeAiKdEUUg866J5Omu9oYN7o8xoUn4DG9kIMJYRiPq0lT81rXNPgDQ==","signatures":[{"sig":"MEYCIQCri5YK3MXQH40l16aJ0dVJHbbNdYRWgAGREeqyVSf0WgIhAM/aolBTQg9CJIsB+qj4zUNMnYu62XdKRlLg9OnHeCoD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f81fb1d23.0","@material/tab":"14.0.0-canary.f81fb1d23.0","@material/base":"14.0.0-canary.f81fb1d23.0","@material/animation":"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/tab-scroller_14.0.0-canary.f81fb1d23.0_1636756868873_0.12017227557153776","host":"s3://npm-registry-packages"}},"14.0.0-canary.783f6fd5a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.783f6fd5a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c82a04e1a00c2f084f28f42274af151fbe0cc85a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.783f6fd5a.0.tgz","fileCount":51,"integrity":"sha512-BjL56vG0yQ5TIE43vgxjk2zWxcHTRm/yiwTCXUwOryqVv1+z5yTI4a+4CCty9jVRxuzX8jv7IzBzW2CaApmFJA==","signatures":[{"sig":"MEYCIQD0tZGmVOPB/wpzsvnYRqx95i/atxFXHm1dXrLYdx84agIhANgXp2sXe6sWYj7do2OCXdzWNTtn5BpVwsN72qu/UXaX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk0bKCRA9TVsSAnZWagAANbAP/jd9Ss2XDtvWHWtUN2pG\nnWMA+CAVvlvXqObF2rmVauV4f+IMoBmsBs1l4BVYOn0IGCBX5x80y4/qOaCM\nPvWE0Eo7KuTTyUJuH9hqPs8Mxau2SooeJ2yWOjCTt5lKEOgRlJCn1t/5U7IT\nU34lrT0gy3iz3/QkukIJ9+fEVZltFXrXGmc8gOCg5XhR5L7a0BZhvVFE8e/0\noiBsPS8X8kVHIPrw6o8/X25RCiPmPJL38bV1MOOBIVkZbzr2QD2vRCLXQyWl\nWacUhs4cLhGAup1QiHW+JnfLL4vwR2sXYLuOV/yIxP3sEby7oD/71XjIqgcT\ndVVaGk2Ja9ef2T3onwj0fU7tLfJbHf5E+VOnC55mnSclEURknAtALsHWLHb4\nljhQm/Q9fel3kYp/713VBF/UFlKiztALAOcuc130r6P/gusGEAfOvpGkUWFB\ncSaaDc0sciGBkxf2typZIVfwO+g5+zfqBbA73p2J67VQkw7he33sTiPrKBIP\noRnLs2qtesMOy0LW/dMk1qarufBjaBFl7DjlWA8Ji2Sztdhnj5crSeWzbLAq\ntzWwmi1TJ4suhHthX/heHW/rx6Pzf/Vte2ZhsZtonmOpXHI3bnxu/YKlY5du\n7C38NfAiK5oXxdSNTCbLRUa0Y5kBzLd9ag/fijSjfelSVdx8rOVB0k+TB9eD\nuz3R\r\n=4jvF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.783f6fd5a.0","@material/tab":"14.0.0-canary.783f6fd5a.0","@material/base":"14.0.0-canary.783f6fd5a.0","@material/animation":"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/tab-scroller_14.0.0-canary.783f6fd5a.0_1637041866551_0.8993468574214165","host":"s3://npm-registry-packages"}},"14.0.0-canary.d57ec74c7.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.d57ec74c7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f5b4a14d4037e913783b30d3a0afa6fa77cd4ac5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.d57ec74c7.0.tgz","fileCount":51,"integrity":"sha512-Sbi22FeEQ3guEXWXWxkhFCOy7f3A0iFapUGFbBBqcs+dbtBiJ0FanHjd0COmdVYbBAYgFFrZdo333aBBm69o6g==","signatures":[{"sig":"MEYCIQDSvyp/yMZ5LddH5J1QzovYF9oImk7f3ofOIgpb3Od58QIhAO4a0UjYgeJlYoxG/b8aLT+L5RmHkw8DuG3MzNyFJzUf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9mzCRA9TVsSAnZWagAAMSQQAIGEGCkZGqFp3NlZK/np\nlTdbJs/5+m2y9M8Gkeyuoieq6R5ylNxnbeyww6Gyb1JTWSy13r/8o6bREer8\n/zk4akP0d3NLR6qdhpNy5ZstFb94x8ltfKPqct0om8YYrOVS/8b7rOu6Y/u2\ncMH0VmZGojCS50nQd7t5NI+60maCy31kbF6y1Q3zawOtFWS3zLrMfQWRwO28\nGkMP13aAMQHhHW1gkM2M+22+YSrh/ODRgKuL7k6+bN92/GI8dmj8qaJBaRZR\nwcx0dR46Gb021dpJ+sD29EjDOsjNiQj/RULR4kc115UHS+jy3+/TusfS06HR\n+RPDV/1sRPRkjkteZlv7r5PKoaQQKTD7sORk7Igu8CzkjCiL2uUS1Bkm6uDf\nGQjB28+AtwTCxf9zaGQoU9UElTWbgQxUqeSlvM+tph9+MYMNAT+UIreKeoSt\nONNexTy5l1lIweezN8mkdCizYHmzB93FtxyWBTd1i1fg07l3SgyavZSUifc7\n1MXq5WsvyY0WRhJKNktywQUFni/Kkp9d6JumrZkBwO4/8cYb2lPYRUOWqebe\nFwFxNzWYXVSmtcFRteucBoMER7DSfFaKuAYTpLCVjRy+H6vsiFqNdRIKZDsq\nJz0RYY88C/YvAyseSdIuf7YZ+/QW0Ot4nWH4PV1oPh6xoQnjaIiYKDKN3Haw\nSaI1\r\n=BNZk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.d57ec74c7.0","@material/tab":"14.0.0-canary.d57ec74c7.0","@material/base":"14.0.0-canary.d57ec74c7.0","@material/animation":"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/tab-scroller_14.0.0-canary.d57ec74c7.0_1637079475066_0.17124582587379344","host":"s3://npm-registry-packages"}},"14.0.0-canary.554c71829.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.554c71829.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"220664d9e9e647b0912270ba3cf6b659b946341c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.554c71829.0.tgz","fileCount":51,"integrity":"sha512-mZ4uV3zhdDbKwt0eubfjynamSEcCZY3C5cAmdMpi1GLj0Jg/Jaj1XnAerHHaxYI/6YwYgbcUZMFSo5ao6sWZBw==","signatures":[{"sig":"MEQCIBEeEAxeQwkEEa/HXkOvOE/Ok/Tk8lD/8aKWDET2MZyyAiAxC6c/VjEBbwSWgOaqGPQstREZPQoRa4oUPUGehZCdhA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9pQCRA9TVsSAnZWagAACtEQAIB+IOt/+Rq1PjhWVKrE\nhI1tlhvgm4+3Oe1CSfdqPuyldUBHzyGZ49U+6d2fHhfGhmt2hql6OEtxjLI0\nDpVFPkK54OEiv923s1Q7uBN+Icz54onx/lXU6nVssRb+xTMuOnOoHO8qPXNi\nI+oobJad7E2lFRvgwnHmGjPpIx/nLJ6ca9pwOQt6GnVNGhKsa3z1AxRcXCnx\nuK7NG/o3E1ekzfbpKKW1ONBkMnZk+UnHlqqVACBkD9a1FRXuTM6TLydVx5Ts\nKzVvSWeG4URNNMfGYx+I+oRE8HqF0HU6Mx6+GcTlT3Tnida/5JsLXFKYlnqF\nKtgKS064poPhtR0d1/uabe0IT8iKbIr76ACt/nxuD89N000vdEP+MMsc4Vtb\n9OnLaOJPBzifD8oX8T9C3nBvqLjoUortqD9SszWP5xQzRtwudtaTuABMgINo\nr7Us4CHFpx+IBvd4TfWIbW+HRx8vQqMBnp75eDb/avptAxNORj87E2bGGH7Y\njafoTHNFp45XMkh1pJlEvn7S9tgHPzrm1fIIKqqZVhzOm+DJVMYxejIQbOzP\nrQaVF3dAv9cz20gI507qP2BeAC9l9CkcwmVPK49McSSgfmtFalPZMoseVeqR\n+R7c/fvmHogv9xr401RP2Y8WkHU3jPwbfYlbQrE1bGbn8Na0vtg3vYlwQOKQ\nAm5v\r\n=cCWF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.554c71829.0","@material/tab":"14.0.0-canary.554c71829.0","@material/base":"14.0.0-canary.554c71829.0","@material/animation":"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/tab-scroller_14.0.0-canary.554c71829.0_1637079632009_0.7014950336160364","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ef470efe.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3ef470efe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d53073d605fc89525fa19fb83967cd0b6827524a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3ef470efe.0.tgz","fileCount":51,"integrity":"sha512-d2GkoY3XVnsAzEsA7Pxnf0RNovTsi28ufL9dOmrCCoAVISiubyjgb6cJ2RH+agBYi1YSyK4qsGrDsr+WcN9tew==","signatures":[{"sig":"MEUCIQCgaXIAjVl5NnpejgxeEzjpkSEm7FJmEeGIer6NEjnCZgIgIWQP/v+C33vIbRgpqKwUIct+bjbzEUpRam/la/Ch3cQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhk9txCRA9TVsSAnZWagAAbs8P/0cJuVWKhTsACbwUkpNS\nyaimCUaDlw51vYOCBW7BnW7f6MwpcNXIb0Hr//56VmFv0CvtWTbsyU7QLmOf\n3gBknz7HOW4l4j2Af+7T9kQwQ0prQtKa3KniuyLlN6sRQL4mN6puREU/aD2x\nyHJq+2ckWwfL1wvnc8249CubXBKFYhpjQJRpThwtHfrKvrp2t5a/MRk9iikM\n3q5clETvx5rvVbGgPVP5LhYMb3/Wwp/A/j9MKXEu/tOjH5cyM0gBhh/5RRON\ne0W3XblRy5gjflgAyH1BE/XkMv6oCSFesG6dT7N+WCNracjOKba80KliELOr\nN8Cb2PxCpP1TuUBRKriaQ/YvTHWaIVZk1XxIlDIr3RATIruICxWyrsCaw+U7\n+B0s9OfM1aQ9ZMV0ozH1oALjD7faHNUe4kAltDp+pCB7UPQpDbRUUDTGqCzr\nWxoaMRIZhAAUMeT9TmOOLqtKpiv5R8TSzbR2OR2YWX34aGGLSa10sJpI14jw\nonwwvz+yqeY0jYiBAXNucmI+CzD2Nm7rRFEC9iDRajPMKYnLukSQ9cMc0YPW\niFitpe7+rAoauAIbLt3dgP8SEok5u2o5MzeQvOJ/qs4LcNtjmrAbh/NJy6mM\nNX/kOvO+sPedrjOc7zNSfuLSIG7zF30jXfnJn5m7FoFCMHSZU+GQI6ohEI9L\nJokd\r\n=jtDa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ef470efe.0","@material/tab":"14.0.0-canary.3ef470efe.0","@material/base":"14.0.0-canary.3ef470efe.0","@material/animation":"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/tab-scroller_14.0.0-canary.3ef470efe.0_1637079921304_0.16230119869520787","host":"s3://npm-registry-packages"}},"14.0.0-canary.61a28b2b5.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.61a28b2b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f6090a79b1ecdf3d765f55e46d6045a7db9f2d10","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.61a28b2b5.0.tgz","fileCount":51,"integrity":"sha512-4vRFYK8BLWf/1zwwgO8RuDRQRN/yoTvW1FNBaeSR6nMbOyx2UW0oa2fgpQIpGjzoNMzeLjLMUB1AXk/lGQrugA==","signatures":[{"sig":"MEQCICIQaSNAINY2xXPyMSuocNzDEprR+zpumgeg9bF9JZGqAiByjDHITpHH0BsO4o0os55pucnIxJ33l8zQUQQsK0C05w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhlVFMCRA9TVsSAnZWagAA7KoP/A/slDSXKa0Huj9fnOe0\njicmfnlfimKI9Ajji0oX4fQnqPoNb/cqrvucI/iB+M6ayfQDbEBDP3w2YY18\nwvAmZZfOjzTCECnzy1zJcgJFBtXzsLeg6RoETePKYFrScLQibvWpJytNAAt1\nUwiEH3GDfUwCUfSfOM0wqtSPt1zohKAvhV8DaJQnLHBrkPl9rac6VjEjhlhW\nWiVkBu8ZlE81jmPK4LEXOOyi8d1l68LAth5FOz1MIJgBk9AjcXawh6fuEmyX\nmJeMqzPMcEFpQpZ2UD2WsYcpfHiSzjbn6ZmEF51OFQYG+ubZK0Sk4zfhawYe\nk3sych6fXp3lRMHfJB5s7WIzHzSOLRBt0q8FgtS434C0o3onYJxx489uPgjW\nS2nadG4JXTwI3iP6qH+XAzC7MkJ6BP6LuQrlh9aIrJoCaCc1ROEdt3mFVLiF\nbHD3Quewcn3mhIkcLN5H7AEDU8AydzelU0/gRi0TdpX0cx9HqwEwhqloK/3i\nIBrildSvZYK2AZKKCs5LBJrxrQyxhepqCqxvfiY0g6QpYSBsAzbsTwLxUmjd\nSWVU3WlPY4kXE/f6XB/uYsfyLK1l6hTaGRPMpsc4H8TZYnMpZEAaECrgaLS8\nTIo4zsi8JgztoWvF3n1p/XPv5gMNcc1gVZNvn01juFh3xMLyjM1wG8IFGgIl\noYlu\r\n=phz/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.61a28b2b5.0","@material/tab":"14.0.0-canary.61a28b2b5.0","@material/base":"14.0.0-canary.61a28b2b5.0","@material/animation":"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/tab-scroller_14.0.0-canary.61a28b2b5.0_1637175628823_0.8665997660654974","host":"s3://npm-registry-packages"}},"14.0.0-canary.fae6c652d.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.fae6c652d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bc7f7e8d13c1f19de2516e0b0077b71e8300bfad","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.fae6c652d.0.tgz","fileCount":51,"integrity":"sha512-5lEwoHzRu/x4kzUWBoyVkqT3fyKXxldhi2I3zuC4qrhgIFflfRownxHL4g3/6OPC44YhX4rHm23jxH4iJO1vGA==","signatures":[{"sig":"MEYCIQCSW6Jno/7uRx5tjXdre3TMobFnvx6HXxKiVSDYtykQfwIhAJMKLriB6O20/FXf4qfwIvfu4y479eHwemrsgRQMzRtZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":326190,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhln6fCRA9TVsSAnZWagAAtzQQAJveYqLq0QGQqYxcrqtP\n+WC9IzB40jl+88lZJdXnMgaWVUkr8S0x+UbDuVPWfSZOxDz32SOoGdLYOW9d\nsF4hpT0QjmBkP5M/BkwVEC4e2DgQNoDLZBbhRlpvcg6pexXSiq9uMVlAP6rO\noyZi4FX5k1tTSLT8PR0X4Mz2GTJmlFUaVG5L/2Z6MSyC32zBQulZAYKiiVsr\nSoH3NkGQtY15Idh9d2efzUI7QAbvOsaDyOY9HGGh3LYVffgn7PAMq8GlCyMZ\nDGsxuLOQDv2EYWlXMD1gtAyhl5tNipvgzNcgHoxC4MYMmAW3x9+LXfM4ZiIG\nqF+FQp7Z1DIhYa39iOuFgm1OoBRPaFF0n6kjtIAZUN+UvV+98P8eSO96Rpou\nYf1e+mQxQGqtO7fOmBSO4P+fwbjyJg/dwjJOZpDlhhN2xO7ecaNB26pfNgkV\nhLqGx9m+OalA+O0PvV4zZZ4e+dM8Mbj7EumQ5mLXdSI/VVl5xoL7WrEhhr5m\nwmyYP2loS9sSy2NayI7nq/hv/aPDYCJuPxzdkRJzheFzGZZe62vRZWtl26em\ngSWvwoBPGH1xdZop+Z3nvut5uOFkbWXd0bcoxJWnTG/NHAx9u7euxEECQU9O\ndxT/vx0M06s0E6r1Qtd1TCY/PD9SoFI4yz2DyJfc5kEXH7ByqVOTZgiaat80\n/+ex\r\n=Xtb3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fae6c652d.0","@material/tab":"14.0.0-canary.fae6c652d.0","@material/base":"14.0.0-canary.fae6c652d.0","@material/animation":"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/tab-scroller_14.0.0-canary.fae6c652d.0_1637252766875_0.7279720413237882","host":"s3://npm-registry-packages"}},"14.0.0-canary.978a3b5bb.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.978a3b5bb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b1899dcf0b40bb1fbcaf28088f86342d59eab93e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.978a3b5bb.0.tgz","fileCount":51,"integrity":"sha512-SWfJmDSs026Bnmxx2t0qoMAyKEs83kMRJutwZ4VvN9Yj5JW6B+KMil5FwImVYzfoqtocFH+R38S1b3JKA/FNoQ==","signatures":[{"sig":"MEQCIDYDTeZbE0pXSeX7w+tPF+W5v59PzcaZCGl72CWAlgR3AiAvWbSHulxBjDu25TniZZzrKXt/y9mCfcEV1gIJSEQ5wA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhl/2tCRA9TVsSAnZWagAAdXMP/0wzit3yxCfkfkpZA20t\nSRUcGA4eyhXQGYbJmzZTph0f97D1oSnhkqDsW68F/fl6DGTAOYRDaWVrj2Pw\nQck/5EciEZ43me5/4at4ECc4JXn5HhwRkQKIdqms2MXqLfhakgNW3cbIxsw/\nh7iMnzetdiJvzGU0hL3JYIWrmOLCukTzENZuJgIEajF7QzkAEFo7JL/0T1CU\nk8BPB0SAc8y33Z/tFqMiWFJNo432FWw8fGgLbQmZYdej24MRVlZqwD58pGJy\njjBC88jWwHgXCa40R81DkfOSVScWzdJzF8uUN35vVr3ErkIT4gj74Y1KR2AQ\nonP8wdj8zh/txWx2GDmD61uuOqMgCsWA3IKcvXieYtJSINwRs3M9XTP8MLRt\nWx7rwWEBv+YIh1TzISHYkVM88j7a34WqzH3EYikk/7qiKtfw5PI33ga0SrKe\nznPVL/zi3NSsRFUfLqK9FFs/cDarKrCHzc7xkyk9UX3KrU8f3olgRyXug7PJ\nAY+o97X3N0tpGmcI0EshatBPuZ6rYLBVe1OmxwWSBmZIJtmW3ev6+xhcIrEF\nIvJEY6OKeWHBxTAfjkUgfezpIUwjbA9eIbD1jLT95F5r06EAGXk0PdEAq/hg\nhsSEtMBfECivg13HtFHUkGjP2Ca8LEmLMzaagl0ZbnhNaU5pD7Ulq+8yPMzl\nXw5i\r\n=6756\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.978a3b5bb.0","@material/tab":"14.0.0-canary.978a3b5bb.0","@material/base":"14.0.0-canary.978a3b5bb.0","@material/animation":"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/tab-scroller_14.0.0-canary.978a3b5bb.0_1637350828999_0.9025901316728493","host":"s3://npm-registry-packages"}},"14.0.0-canary.e6f43cf44.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e6f43cf44.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"638f9a3187cca460c6f3db3acc764b80085401a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e6f43cf44.0.tgz","fileCount":51,"integrity":"sha512-5uGD2WmF1J7SWYcmh6Y0Sw5iiPQPl+PLic9Ng/R3r3g6XqfNUjob8raVAnTvzvX+QRwwRtUQwMTzmhVAfp/n/A==","signatures":[{"sig":"MEUCIQDTlOTwVxdbIkalcJvFP7rb8ssi9OLWF98g91eRU1GtXQIgWStdmx3vA7SWPPC32CX3nZRFwyjDL97ueDAT/IDjous=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhm9USCRA9TVsSAnZWagAAhrYP/jP2QLyo7ul7wSSwiJ+Y\ngi4V+zoSBRcyCRWFwrQWdCNN2/kANK+kZb4ST8olclPl39rEus9+lzr4XB9F\n5CSMCa4GiMnmGsvq7f9QtCVuo4ZZO79D/3yXo/IgNQyNLt6W8Uugrou5Tzo+\nQi335Sm7MpytIjPan0RkgLZw/99iniz0FDhgI2X4mxX+lOE+Xmw0ChEq6khl\n69Ntht4dNj57t27lyLkCYEFrz1wKE3OuOSxL5YafLSV2ANEzDC+/QHaVzb1j\nDbTfcJHYiP14gvTgrlfSAGMZaLyxrpcwMlqwNXkWrpSWrSHcK4F2yC+KpaE9\nbCZO+O+WkM1BKRQMIh45UGDraDKHMCZ1aG4AefkWy5eLGZWVssNELpzcV6jN\nuyva1sgX1S4eqV0427d5tbC7G6Uz0ZGeTvGr9Lt2wxo4W0U0XCYlrIu+pFZ+\nUbSnZgHAD0htrZNg8nDZv+bPcSqwvlOYbcx6guUjiQaVjnYqqh2bcgAm9IdH\ntOhm+1WlHuOfb89ssWwKKWbkVY0u5F7DLaKY1cE881bPVz9UUYI/c/7jkQM5\n2wZ2pdxLu3dZFu6weC0exPqmfsgxHK0mF2l0slyIYryJMhPNCEeZLUuUwS/K\ngRXnae7AX6L2WmM4y+D6MHyhdIi43+EbDxtUxC1MSBaQiYO22KQ2ZP/v5Lg0\nB03p\r\n=rT5g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e6f43cf44.0","@material/tab":"14.0.0-canary.e6f43cf44.0","@material/base":"14.0.0-canary.e6f43cf44.0","@material/animation":"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/tab-scroller_14.0.0-canary.e6f43cf44.0_1637602577892_0.9723954109836526","host":"s3://npm-registry-packages"}},"14.0.0-canary.39cf14bc3.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.39cf14bc3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0c8d524bfac1bdfd25b9f5362e60c4b2cf24b7c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.39cf14bc3.0.tgz","fileCount":51,"integrity":"sha512-KWcn74gSeSeVz55JTqQhd0DTzm/yqnb+Vlg37XcRvX0w5I8BLjgQVBY4Sx1CNAhZG4vvu5n9XZg+x5Rnwr4e8Q==","signatures":[{"sig":"MEYCIQCF9+3v8CbSvB/njwknJj05s+YWIWgXnv2SDYOnxVc5pwIhAOsIP1e+EN8dbTAM3IR3PZ+bHRup2LK8uYU8oOuyEQVb","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnCJHCRA9TVsSAnZWagAAV8gP/0JGBt3ioIoMi1Z6HQGI\nckU0Kt8tEH2WPk098JakBPkArvghPL3Yc5LaIYB/KteHtlENi94Z2qp1NfQQ\n/vADAB5S7oZJLaziaFvySBhU/Fug67QYR220JI56PmrwybmPki4zxchf305b\n+CWLOB3RPVLRaHy4dZ43v/eOqKUkQrNiA7nABTMWL7q+UxLkBG0KTH01w8bB\ni7xg7TltxAJzVQHsL5UyYjwQNQyGb994Kjt1DEhFDJ+iJTYhUdH4RqHZ6+Ex\nzM2gtWb9cEgEEvKxQqgUIpm1J09mhG3lPfDWtApams/HkLQcmWqy4AHx8TxK\nAckFHcI4uQyfG1e629H6z+ff9YB7VurPFiWSkPFmI4SuoyhLzKxoj5TWhKTH\nYUOnCmkUvJLD5RMaHjp03pMl+wzSp6a2v52s+ptIqyHSh7NhZpqAwnrVjXAv\ngY6jtIfCQrDaYEoEGE0NxPCaxdAGuXQrMz0MA7ndiEt8Qdh0paGkKkWPE+S+\nFmHg3Xm1AWn/UFn7FcrdqqoIpN5/8eUb+mE4Ps9I8+UDjYAtW+Ww87HG8Yjy\n2uZCJxrFNlkHXqgU+LrV3dk9OAaV3OqgcfHy7KJCPFH0RhaZmHSQQqub2ixc\nGr7yOIOvaIySOo/H+07lotDwHZIfshWJY8GQN+nf+xtE/59mE5ZHm7v8RaCK\n3+mH\r\n=uuFd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.39cf14bc3.0","@material/tab":"14.0.0-canary.39cf14bc3.0","@material/base":"14.0.0-canary.39cf14bc3.0","@material/animation":"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/tab-scroller_14.0.0-canary.39cf14bc3.0_1637622343353_0.8160478017806188","host":"s3://npm-registry-packages"}},"14.0.0-canary.93134d453.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.93134d453.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c99bb93341bcd9dcfa7507fe40f068caa6e3c47c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.93134d453.0.tgz","fileCount":51,"integrity":"sha512-r0fP5Yw6C1Q1qZHxoHj/mgvi7n0vPDv6JNKNdWNMUVaaZA2XB4eWynAXPUhut73BaCRbwO6pmBDeuGxIqZdjVw==","signatures":[{"sig":"MEQCIGGw+GB4Ellmt5xvqIpRpC1lLXZNP7RqThO83FIOMM4kAiBXIVdvyogfCAuTdyWQjomXa7GWhKYqztd1NuddKuPfFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnQtxCRA9TVsSAnZWagAAGZMQAJVZoT/9uIftaZ9RtCaF\ncJdybeoOi3QGeZ3EaXAYW/6GCW6giVe/qzuP+Tr2ozNougSjxm1pBiQ2WLYP\nyPzJ9Z/MiWgpSARFOuyQ1YirC0ZMtbWq1MvEnm8QSucrWHYASXOnBLLqpkWw\nZw4mS1DHQAo0Zw4ZQKgIRgCw/ddkrqmzkWuWF4t2Tk6F5CeWGeBhQwhBTwoj\nRXeOKVtQqd16EnZoeMEJrRaF5geGFuuaXsvEHlQpVHUOzfZJT7n8ZXuncWan\n9ItCYkdoRI7iYzJx+T7vXS29Fu/r3jnj00Z24nNl86qqHWnrmkok2hwODrTP\nrevFiKgzH2QQuAQdOL4eKe1TyVEpmVbzvjdFzm0XGWuW2W0ByQVltzwtVdC1\nvdW747b2gEZ28QoDropjYE9kgKuXXEzVbORoZF1jn11fwsBpXCg/mQHJ5dKT\n7705pU4QElVryOQqrGJBFQbH1e49/c+bL6G4eJogR7FMuhxyrUNXA/f0iih3\neH6b4G1AEI8Pg2ZNNK/NB0OOf3oVB/ku286/dDkSE6RUClnkNzPMoPgVCD0O\nZN/HZpkvKjmshqD8L+nWdMQJSOaQ6TGhQOyH7FlhsjnxBeaDJYZLIxDdd64L\naCCmlatnG0ou/dg5iFDRAFxX9ecmjha6WCw78SQyBmJotS10nXiqf4pnV2wA\nOCWA\r\n=0GF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.93134d453.0","@material/tab":"14.0.0-canary.93134d453.0","@material/base":"14.0.0-canary.93134d453.0","@material/animation":"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/tab-scroller_14.0.0-canary.93134d453.0_1637682033610_0.9036962288517181","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd11268f.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.bbd11268f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"de999ecec7046572814fe8744aad2575e59be112","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.bbd11268f.0.tgz","fileCount":51,"integrity":"sha512-3EbjqpUMySsAmw+0Z7TseZ19Tymh69+CKsM65Yd0xdtGkSgLb5B38mSdDPqSUr5CKnRKciZSGAZ2e52rhPVAiw==","signatures":[{"sig":"MEUCIAmChXLf1rPG82y2/T/fRjuiKWv6hJXkpfyeWc4lE2guAiEA8Eom08bvDvj33/zkS+XOMWY1oijfH7WPKjAVp4NVSKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnWw5CRA9TVsSAnZWagAATCYP/0zMw78+s3AND2rtUhwl\nxoMSVvMNaZ9Bm1TFTQaBlsoe8XMm++oyu+vsanEgSv83810Cw+84wVejgAC0\nhYR98Ri0MkMwqDvoR9cWb5A1AznBg/QIoxbgDt/mX8Qkgka9dbrR+CF5IgXw\nSkSq5HCXKasTJxwATpatPz4ga9wynl9KfKVr4PCAakgM0AK3B/qkxuVzERoq\nszUyIsPjYGZ3mSFBMQWU1UM7mewCwbW3xx7cN4KF5Pt9eVd+o8p2taEKQQp/\nn2vvYzeGjQGMcWmI7iWTd5Ab/lMK7yg3eCzULs4qMQxuIjDArCfaX5ZA/6oe\n4VhgtiyC39ZqTje27I6FMDp7sVTLviT1Y8PhhEbU5Nsg3u68MKqaFa6PHfLh\nlQBF3YuNRe1Y2W9CDiBpCgJ/2bBIJh+zPVXHesM1qKy1UYKB8y7IyM0oFe/B\nwjKrMGygIJkcOSRB6wJClEfxz0cDik/hrJ2i+XY8wvcBZ6GuklZdjucx1T+N\nbjstneKH3/fMHv3zXCyDS0zYUE8gjd5Q6SJvjz5SUXCh1mNhKAjXT3/wTKoh\nKaZaSyvwV8rtajAPrhuptVfubEJ16kGF1l6nbJavzmmgKK4xlpLBqfbBlOe0\n9YfoSd1vGL+rpc+aK7FQobW6G+Tu2gXGnJ9Sw6BH+ymNQqD4uyNeh5H3EEwy\n4zP9\r\n=7joD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd11268f.0","@material/tab":"14.0.0-canary.bbd11268f.0","@material/base":"14.0.0-canary.bbd11268f.0","@material/animation":"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/tab-scroller_14.0.0-canary.bbd11268f.0_1637706808650_0.2546962029217059","host":"s3://npm-registry-packages"}},"14.0.0-canary.3db9c4d3d.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3db9c4d3d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"814fe839fc611f611e881d24132bd0b7710471d5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3db9c4d3d.0.tgz","fileCount":51,"integrity":"sha512-wRuInSZeJFyVliB5cOczoCx++ii6NP4SZeAuGmFkvD4tOEAmdVmYVk47+DkPeroTj+WHjSaYcUosMoyVoohAzQ==","signatures":[{"sig":"MEYCIQDVKybMxQSiqRUY9HJaHUtjHW9nKi6V69RN8gHkyaEbLgIhAPpSNOuHS0xGjhQoPSm8V+EFhtV3Pc/Hna3bi3W/Nkvc","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnlx6CRA9TVsSAnZWagAA+xQP/AzdN0/XrZyY4sdzSe7c\nD9msRe+RiC8xuelqiuOKXCxd8HAQkDwGJp3mnfKv2uyXepjYovQ0R1DKlckx\nCT/JN8HpIwSKR5d2fQYbNTwx+av1HehObrHJolFVkD//PyGw+em0wVHXIrjN\nQHXJCwtMBHdKzDBjOCA6xP0ctNB+I7P6WJWkbyZwRAfefAyAmChA0Ag6tKKn\nK513wBQAmIHNpFassJD+fZeDoj7/WoiYS1rX0qjgVWuJlj3dBWA33kvywMdr\npgVNe++9Daw4viGhHdiufkyZz+Srsq3hIQKLmMpJty/mb1B4WcUcfFTO1roa\nF3PYLYNZ7WdGxtUo2NWxPloX6aqR+yfwZOyABXeNAX7AaCmRwLlrp+9UuHtZ\nOzt/n6B/vXxWVczypS4ESYigH+jotY0x85xsNdvExxaP4Zi/+DnVS1y1+kdy\nFaibXqVnkZqezpVuhHP/1h106LVpV8RFulhyuIZvCarYpYS8Ryr0es0Elzxj\ns8ksXqfBwGUdZ1OnGDnY4ZpD6FfnPqZ6r6aX5u6rtj/tLpVQ3dev9q5TZZj2\n/+TO4sR4PNzWtoqPzv03LOHP1189vlHWcL6xfZ92+NEA7btnT6CqdyvPhTo5\nBk2cuhoo8LkCu4Qfcj0Ph+fbKU7B+vyP8tTYI7sB/zqm2ctnyL0C8/mM6Bok\nEJFE\r\n=/jWa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3db9c4d3d.0","@material/tab":"14.0.0-canary.3db9c4d3d.0","@material/base":"14.0.0-canary.3db9c4d3d.0","@material/animation":"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/tab-scroller_14.0.0-canary.3db9c4d3d.0_1637768314165_0.6139400892980398","host":"s3://npm-registry-packages"}},"14.0.0-canary.78305b6d5.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.78305b6d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fd53ff4c50307eb823a90f11237f28115ca285de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.78305b6d5.0.tgz","fileCount":51,"integrity":"sha512-WeQNjHQURMfA3POjyCQPlWBnW8L8nwWnOnN9azJ2BZjubAkGJj2RFQrfPYV4TM2uaUKaj5mFFf4O2q3ggCVytQ==","signatures":[{"sig":"MEUCIQC0IOuu10yBvZ1ZobgEW2duvVuxIyHtDyI+dRSNQmCrMwIgLOTCaVIRORovOxd7pIJhbrSZ+DMzY/t+IwgeK3wq/0o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhnpfXCRA9TVsSAnZWagAAO3EQAIQujHequE/ehFjSlA+e\ncWhOPYNEDnPOtHC3AI9hyXBE1GhsdTYemJyD808h4tNVN0TfQk/0ryUtnvaI\nrQuaIgGq9XWUZqhxBYEwfF8VSssrR4XN7libhmekkLR/jx0Tjm+hyjNC0KaV\n7Yg0sm4/djGWLW78rWzr38pdQtfxP15FapnzNZlw0oshTPgg8a6mFOn3LTYY\nomfUT0VyjPsGP+9Yct1eweNj12mpoD98buT61slnmMa5Utk3ScR+maSwfDQJ\nnjMc95a3x5DkQkTrnp89lHzH050Rt+IRtN+gePk8cGcgfatYuWiEKGfvgEAO\nTvRHea6SZcAke462hgIp+UjCxf6GZlsxZYM4XdgP/T0oP9yqhO2AnxNjsk5i\nIazwy+ScIanSKg9seOkzASrsdkJvK07gQWc3OruafPweJiE/Lq8mL1+8C1Mo\n8b8e4oTVP1qWHPE38cpuGVQN3cH6/+Vb2vmRO4+PW5B4QPBXc6FnNi3Mdnuw\n8cxq11Ug1TCVvodDx+x50mfBAfHd2E8M+15nnFwrWpbKefIqO+ufskwgnnHs\no9pKiUdl/BMJC/z/Our8qDdGq+Ue6O6UoKnbFYA3XO2x8mmdGB/gd+pDTsh7\ntODpJjvX4z7JqD6bX77dnnHfNHmWgPVEDabdNt+Aom7AEQ0MmhF5Vc7fD7ZQ\n3E6L\r\n=O720\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.78305b6d5.0","@material/tab":"14.0.0-canary.78305b6d5.0","@material/base":"14.0.0-canary.78305b6d5.0","@material/animation":"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/tab-scroller_14.0.0-canary.78305b6d5.0_1637783511571_0.018054921355568965","host":"s3://npm-registry-packages"}},"14.0.0-canary.43d08ba77.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.43d08ba77.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d313fcd967f1926291dfef3b6888202aadc9ab80","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.43d08ba77.0.tgz","fileCount":51,"integrity":"sha512-ETVLPGcKjKQjiofErIsxQswONkEQk01+PDVNIa/Ztrgo3ztktXlIOkieb25xPpJzOA9ytSt/s21dOecLyGzoeg==","signatures":[{"sig":"MEUCIBJyiv0HIgSqvq3ziBj+qtDomwqJHa59x9kGhDrXGGfkAiEA5WAjG1BFPJuG/i9182C0u358NZoKrl884IqnFLPkIM0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhpqxMCRA9TVsSAnZWagAA1+EQAJ7NilOiqZlnO+/Qe31L\nGohTPk4i8VfyH0jAex8O+ImyVgLedPbGC5hU75VLERTb+F3A0NRk3Bzz6cZX\nW7AkTod148y8ecBmH5crxK16VlI70x8wkh70hbZilG1SFSzMTVKMCZ8Ygy4z\ney8DuSkbsUXFkwZJ3li1mfU4NDThH0py3lSi/1BR0xrCJ/YvS68A9ijarw6K\n1GFxPhJwdjf1vsogEAlORI43z7GtotwS36v7hwgB0s39IjchfF195S7DsANa\nvzDE/kn2A9XFNxRSHOiLcIrH7IrIgprnf8wakYvi1wxr+FlMGsBzqyo5zKaF\n97wnFE4VHqZS7TxUz4lGjz7tBBAPIRp3n9jt0ujSEHfNf/oBQZA73SFJumjE\niowlSVEmxnuwGKn+438JdbN2wTQksVYclpeFgU7pFDw34tizFY142upzFsN3\nY4A4d0DM7yVePmx47V9nV6F5BUTqvI4MhGnejKmxAhasvsMdS6lR2vVUzwMQ\nsYHpHND5sGx7LOfSXx81nt+jQ/4D9YyCCuiRDlDLgPb6I41/Oj1IsqY/epeU\nHBLVsPgLb18bmqEXgHv1FDgpxMZ8Mon+j/8yUV/jfDJlMVCd3ofiS/iFq9Mv\nh0eoSFDbZM8oFdJvhX4Meg+X/gjfQ1iUsxCu4nhtFE38EINvwqNuZVTZtS4t\nd3ao\r\n=iKnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43d08ba77.0","@material/tab":"14.0.0-canary.43d08ba77.0","@material/base":"14.0.0-canary.43d08ba77.0","@material/animation":"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/tab-scroller_14.0.0-canary.43d08ba77.0_1638313036272_0.7013417381487861","host":"s3://npm-registry-packages"}},"14.0.0-canary.17a072535.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.17a072535.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39184f414860ea57c6c9e10f2583859e137b34b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.17a072535.0.tgz","fileCount":51,"integrity":"sha512-RxvUtjFgut8nWxr0ZtppuXW2+KeQfLxcs046lOO7XPA+kV+TrjUR4Mad3RpvpwLSXsuyGqtDpE2xdzM6f/1Frw==","signatures":[{"sig":"MEQCIDGBbxzGvBqCkylo4bSiXTJkcYsug/UM4mxXMtUFnTb4AiAEsHjhbyglIhzZYh5VqEZ0B38JPxqyNj1y3a99PUc8HQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhqQsjCRA9TVsSAnZWagAA9ZsP/jadAy/Yj6z1oYFGShZM\n7AVbEcts/QyJdwA1mGbTVyl8afqEf2dEL6cZ/C5aJA+zpS0hvCFnH3K77Lcw\nSnnEpUagBu5TiOUXou4dUR0HG6gkmuD/2LiI73UOVj49cqpzUAJImzTA3SoD\nFtuxkFUktoNbMnxNy1+yMYz43tT76enj+RvaSm+eMKhnEQpeov9OujFXty/B\n+j5tkdhgL2DPl+C6m6Mv+tmTPyfhAmV3Ild4Xd4aiWUGMkjRxMl9l/fpNaxC\nOXBD6vz9RIHjhdDFGFn289V+rRC1hpEzRGVL3MYL3yRgZcZxeVJaLokFwxIB\n3Iqfml2C5zK01+wLjTDlEacFNDPsPzuAfmfMUhPPs0oMSxE3Bq09PPPYwLug\nUkRXiH05Iy9rdaqwkv1yOjJUJFy4W2l/68jTLu229Tk5CLiaiSDdUBarEqua\nTyGbqlyGlUiC4ralN37Vqkjio1WHCpSODMDsmyoNUG69h42zs1r09DUYEt1j\n949fBH4Ltqg9Ly4tTyOOtg7PXy2KmOCjIf29P6d03d6ehXUaMjdRJA5RbisQ\nhIRjIhzJUYr2uau25Qlmn6S/fgxaEzC8eYbr/xium9s4cBX1bqTbBS/G7tyd\ngXu9DN+kFU9ODWzJynMD5NBAwYm9+agRYjTdcIIqbbS40upP58G4TS4bUNoJ\n67hO\r\n=GSYH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.17a072535.0","@material/tab":"14.0.0-canary.17a072535.0","@material/base":"14.0.0-canary.17a072535.0","@material/animation":"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/tab-scroller_14.0.0-canary.17a072535.0_1638468387448_0.5065524282205249","host":"s3://npm-registry-packages"}},"14.0.0-canary.5d809696c.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.5d809696c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e02a785b3f72e37d89ca5a0ce625ed1f30d3e97b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.5d809696c.0.tgz","fileCount":51,"integrity":"sha512-EDJ7xJqjGMdGGNkylxPyGtw+SggaIIOIujvhnhhL8ypAYAA21bEdXkpACqxHp9DqQPiaXP9G9s3l+aJnC/jNlQ==","signatures":[{"sig":"MEUCIQChM8ID/CKSYGqCntHUJ3hl0yqoei5LV63V66KB1LnXJgIgP9tKjtKKYM1AS0stvgP4xwVXOTo1FR+g/K9Ta3WCsm0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsO9ACRA9TVsSAnZWagAATXwP/jCdcHZdImxjz5WFq0d6\nvjlfrFZ4+bSDNvr+0QY8Q8zFo+pV3mtmCkElTSwhPD+miCTS9PCpe3R65ajd\nwuC0FGHJw7MJWqm7hnWDHqtSDB2Ytx1+5Odr8quBNZXaeTgmjMkyNqBGValg\nMaC5uG+G8ZM5q1/eAReQ6cEEc2LkYD7l92A23bn1kX890gMo0SqcLxNfA22o\ncboUAsrQ7mCbxRkJ8Nr+1Isdx6C0KwB/ELDONh2q8IkBdYdsn2lgJ7rmqDkt\nJ6XucjVfJ9Wpfi8DZsK8XJHyWbBHFaxSKuO2XCnBwAfxLgCjnMBiqdd4093m\n4wbz0vfAwcAoHvTJrwgt/HgKcyYnTng/J64c3e9LtD234xJ4Yq/h0TAPcA4L\n6GQm7XI0LEf13WU1Hd/ikuQYS/qs40YmYij+HN6lMY2gwmuPw3MRD42DrMmq\nBlJVIy2lseXdumv/o9lJveyQLI863sOrvbyZGsVBm9qGuT2/bFX+BV5xU3P5\nqhlw7NabYTtwgq+X8UlG+AZjPMm2ds5iDjD+oAtQ9R25NOmGArCgMBejLnD1\nqaG0uTSdxoGu0NPTGRjtgiDX/elx+URGQ4beJIEiKJp6WoElfx58qSJTvSb9\nLPg1msQ/VlmAhJrPWjYWETpEoQOdQkFG3yHK8vD0GOsfq1zcnUhuQVkRmBIA\nxGCt\r\n=jUph\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.5d809696c.0","@material/tab":"14.0.0-canary.5d809696c.0","@material/base":"14.0.0-canary.5d809696c.0","@material/animation":"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/tab-scroller_14.0.0-canary.5d809696c.0_1638985536237_0.16643229766455425","host":"s3://npm-registry-packages"}},"14.0.0-canary.b6510c8c1.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.b6510c8c1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e3dd1ced03c3663eff997a8cce00eed5eae9076","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.b6510c8c1.0.tgz","fileCount":51,"integrity":"sha512-ZTuVPsixFkefSXVwu0fujahRh7UM0GR5ts9TtQJhbvVJFJAtAwBt51mjUvJH7Mk+oeGOfBj3sh75YKVVu5zU5g==","signatures":[{"sig":"MEYCIQCQFkd/SvOXSe47AeIdbU9fMLBj7OWuRX4y7nybPH2HDgIhAO4vHJrWJr1dTtW/6ndvOXSVMGg62YXiH+HtJ12gyGZl","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhsPR0CRA9TVsSAnZWagAAHq4P/0fPHYgVI7cn+P7xHeq3\nZiEQI1LxYE1ZjYXPrD4EZn9j0fIb7Xd7MIfygTJgGpadZwvEvBdbPDRYLnLB\nGDohKpp0nPWYOGCD4DFawqQYGtUFS18JhjkcOk+OYw3BiJl/+nKekceJuEZV\nUNof0x/0n9GqMDbvmk3ZcfQ3nHsQNxBhzoOwya0tg2A2GkIxiBNimEbmKfhk\nX9CZ1nc1YuV9JI/NcKYZupXGiMHDslsK6Ze/4XNzIDiH2mfjLIwr7GOg8ULF\n6KKmUvrsmFS6+XEvXjkekiFWIth1wNQp/FQ6cdcmY9jyVWM/1DL8VqF/ScKA\nceR+8chldl2T5dNtWnS+qWLw0vS1gGqqHUeGHGNyozVeAds2hLdHDxPYHluz\n92+mTn03pprnO1FC4rnOonjVGPmgB5MQUDt8j46/NhP45tc1oOMyR8JmVxco\nxYao+ujQPWh4WUUF2PfkoQK3eJk4r+4xIZyBmb/5VTzq63UADbrVN1BlZIKa\n2kU+9zVfIfZ6OHLCupqSXZ0zkQ6i5xXFJkq+lRkK3JPfSrtHxH19CqfAJJ9g\n4f29VGD7KRySxX5CMjiVTVj21n+A0G+zLoV0eTuq+AtApVVIhsqcuvDI48VY\nbVJAY1VFkQ49yUud0V9GkE06ICZrP/SNMnskOBtIOGBESHd2mrY4dGzSKVko\nwwna\r\n=dT8n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b6510c8c1.0","@material/tab":"14.0.0-canary.b6510c8c1.0","@material/base":"14.0.0-canary.b6510c8c1.0","@material/animation":"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/tab-scroller_14.0.0-canary.b6510c8c1.0_1638986868006_0.8516542541592684","host":"s3://npm-registry-packages"}},"14.0.0-canary.f460e23da.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.f460e23da.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e271abc80cf6750f5b53c8698d4061efbc5ccbd3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.f460e23da.0.tgz","fileCount":51,"integrity":"sha512-rP0Tx4D2BpyfB1LUp7qgjQtfIfuqij1KIEq+h3TtMP6CovX1r4AmCXT1hds8/s0ZLTEaJgExbAVZqjUtWi+afQ==","signatures":[{"sig":"MEUCIQDtcueyxjQTPvFuRZGF7a5+r6rIhsBt03cBoJWtzpO8xgIgGR53JPiIx1w0RNl5ifguRuqDh9nf2haUZ+8FxexW+tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs3GuCRA9TVsSAnZWagAAumYP/0sSGbgrHpioCt9z0y1e\nGI0UdY+MOW75aMHidqogk+7yzMDJRUUv+FlQFgVh5pLvhv1lqEwPw887d3/K\ni8sMx40/WpcFgWpiLtHH+ElYXjHpvM1br4uRPIrRxe5h+AHnwPaJWzAb3u/b\nDUEaI1qZAWUExj/wD2WvhEKvOJcZZcNcWkbtESjoHA/gp4ELgXxyOIwQ2btQ\n4tIKAz9GE7a8w7LXRseLJNCKjQqwuastlamqXudAXEIhsszFONnc8HpRym1i\n1sDEAdDqVTJ+75nTCv3LuFhXbYdbCpgbo2lq3NxaI86GrzWFNMSMyJmmgYqj\ndd4mYWNQ6IiQeiXPLF/VcHluIxSnbXPzWQnFPV/+xlJKCbceBUuUOYlvAy1k\nmtk4h2nFb7rIY2YGnJi6mQ28oS52EuAxsuQ4ZuEjIIJ55TNuKMewxDld7ol6\n4qlnUYs7/9k1dhT4muwn0rMgquaoQguwqmdRloHVgwp0/lsYXvCpjRf6FdqQ\nmSNSpUdwf6wwPyE3Z5ChZRkeuxHkj0oWVJCgsEFzx3t78Mp8OnkITN1mwT5b\nMb2yvgCp9gwD5UFDscfbbE20A2ccpsrdE5W6k4i4BRSftt5LUtKo3/r0Imwx\nKoEG9+2cmWzUZd62pRU1g6PCm0b2Rl8wvPxVbBeCIKqiJEjKgCMQbaq3dVo5\np03S\r\n=jQty\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f460e23da.0","@material/tab":"14.0.0-canary.f460e23da.0","@material/base":"14.0.0-canary.f460e23da.0","@material/animation":"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/tab-scroller_14.0.0-canary.f460e23da.0_1639149998416_0.025006614312110598","host":"s3://npm-registry-packages"}},"14.0.0-canary.7d8ea4624.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.7d8ea4624.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4c06e6e1f8254f369ab3c3c3006876697a88502d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.7d8ea4624.0.tgz","fileCount":51,"integrity":"sha512-Y8M8M7NKxSjm75o2eVWF9l1z3KWbhJ4VBer5bte3d+/G5QL8wIjcTFf2eN5GKFkEUziUvTEG/bAInExB8zoo+g==","signatures":[{"sig":"MEQCIAUDnfgfGCbm4lyS3S9iIj3nSYHeZi7Sa55ESzs7r89oAiBHRCadi+T67j+Ytk2hQ4fKdCqw1dTzZt1W4I/Z15FHNw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhs6rcCRA9TVsSAnZWagAAatEP/0aS7TAplm0iJBCmmKG3\nB1uCwhz64Nmn3zLa94VBDA6S8eODBcS0v0Rhl3C5thC6f4rwSd5FgdAI7GhM\n2QgNEZFcJIYLoLcfL9bR2IvLgUBeXR0Jw6j0nwTJYa2Ud3Z2zPH9+FUtVQV+\nst2FXY5WPC7JbkaiVuJel4f2Um5aOSSmNGCN0A9j6JsxJ6olYv2BtbpfjNOB\noUskqNfei2slM3nlAPD4fhfQjrcJwdgRQP64lK7FI69GVdfXre425AyeRDgR\n34m9a5VpDmcgTjWhAHw7xe535Rdzc0HxG55YDI7jsHymMipDvXDb5YZRLj7F\nRYIIwPVwro2mK1bqQW6IiIRhmH4lUCgnAb/VYT1+XOoMC8wxObWoUFiSrAYb\n503p1Wg9UmBh9ybj+8hxbf76xhqDVAHn1dpz95h2veXE+fAf02py5+DSHANs\n0Mlncfx4NL0+Fhm3ChCMCtfKvnDck2rHlNwo508dmZ6Sk6HQK5P3danZurgP\nPbwtT03SwAxuiaAU/ATmFoMQO4LXOVlSVYcdDJsPKskz7uCMXDxf/0ZCr9x6\nOWbgZPZ4vYbBBRA7ntxi5bDY5rPyFrMxnQ3IUrj/zmUnCG4VklxIe8wGfbxi\nyuurBmKlwxpqPbTy2vB6pk3uCpq1Th60OTw2uYnv6B7cUwV50jGJLQRdAKOJ\nUKqk\r\n=X4Aj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7d8ea4624.0","@material/tab":"14.0.0-canary.7d8ea4624.0","@material/base":"14.0.0-canary.7d8ea4624.0","@material/animation":"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/tab-scroller_14.0.0-canary.7d8ea4624.0_1639164636149_0.5955312274817195","host":"s3://npm-registry-packages"}},"14.0.0-canary.8fffcb5dd.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.8fffcb5dd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3676a7d928b2b12cc5a22043aa4d02e85ca4d041","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.8fffcb5dd.0.tgz","fileCount":51,"integrity":"sha512-7OlDVx/DjEJ28jjeL/6f3kaS710lr0HRU2mXElbPV/Js4KFe1MP06pIUmwLkPWyqOR35+jhOHp1a6J8GlF9+6Q==","signatures":[{"sig":"MEUCIQDn9DwJRmHaBySX2Nyb3aMYt8sheB09Vy2JnkFP0FpeQQIgck2hHqLV2OSocMRP/nVK9yRuiz6gXPgmC4a/mHzm4lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuFw2CRA9TVsSAnZWagAAdngQAIQnNL1TUX56g16VraTz\noskdzvdDUq2IUkYHr9Hf/dbasJGRuEZ5gJLUlkMkuJlUkcc1eC6/ik8pPspY\nhEU75E48o/vWvyZsA/U5NHjnQaKQA1V9b3hhxKxjm2EMOw3x0Q6EcVM6Q1wb\ndHOc6jkUKGc4+iKMQ6eGgHPRf5dvmUg4LuvyfTJsvdJnBceCb7XdQ2WOec+t\nvRMbqtIXYd9y3xQWbfzVUQ3qfXW1AWdKO58F571FBOfeT37t0JVTzTlubbe2\nq50fYALAfxZ5hUAjHQGJm9DuukqijEF2tfD0B5OVTqkHGlUuxJsfqDLUlkRH\n7k9HkfxPoAbbn51HegtvB5PgqiCcsGL1frQwfHmIuoy2Eb+XlTEi7FdVbTCr\nnz/aP+rdquHaefWkpWARckusBPQ9fBmfidJND06Dzo5OPT0HCJc+/hnRqn1T\n/Y4Go2C8j0PdaYg17uIsAdE0isMZaKRANRTUunPpBD6ZzQH1rBJGISLpcGAy\nMkcWgyHoEhz0e/A2TLgGA71MniPnTAJf9p13g13l51YHbNgWaCQeQuXsm7xc\ncTTQ1uS2FRnDNGU/120JuVq8C2r5gDXKJZLycMs3WF30JuKJF9kHdH26OTpr\n5esVHFiHj92yUagVFWAzie48pgSi5QCfHYcU7ldQr3dAdQpNFQPrZpc3hNDI\n45dS\r\n=Go/M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8fffcb5dd.0","@material/tab":"14.0.0-canary.8fffcb5dd.0","@material/base":"14.0.0-canary.8fffcb5dd.0","@material/animation":"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/tab-scroller_14.0.0-canary.8fffcb5dd.0_1639472182764_0.41218769315163306","host":"s3://npm-registry-packages"}},"14.0.0-canary.21e1cb9be.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.21e1cb9be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"820b87a1f04707c1c65fc22adf8f22ec9061b130","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.21e1cb9be.0.tgz","fileCount":51,"integrity":"sha512-/1jr2utpSGXVcoLuosZrpfsPvYEGNUmPZzYLZ08qqWoz2w9FVXZ+m+cj1ohUpZCI7QZjSLbqgyxFr4QekjyVxA==","signatures":[{"sig":"MEYCIQCoLC5lM3mpw3DthjFI+BOESd8xQhBf0cCwwnJ63zaFAwIhAJjqQrx01U/yRM4oDTflqZITou+mQRrDyrxmI9wrv/Nt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhuPNMCRA9TVsSAnZWagAAWisP/AgIZ8OdI/GwXs91KCGB\nFeKshJ9imbAQ9J8qZfJLbzrJcLxbnq4PO6VtOFnWX6XBbr6BYpaOWaNZmNeD\nSe0tc5uZYTk7VlqVFYU8uE1SBJ3wirdQjEWmlZnEASYA9PDX8ULcZLofmGjL\nI+qWkGuNM3sD0HQZ51AM3LwOOJJPusZ8m9yVoXWcK/kRvnjXumFnw+MRDh5q\naxYuZZmmtK7aYGtOqJbjgWQDHd90CUIWTbs5Aw+1QaBlMXpeCB93SsqmWwqC\nX7qOiKjdXWKNVChDOz/MNa1TPOf7Kh+NHtr2fnDiX/HpxRp5u1xqe4yfxPVz\nFT/ntNrO3BhChXjstd+nU702WHhDuZuJ7Xnf7idm3KwKKykj0O65f7TENs1o\no2l3AAt6xYF9xHLBpX6A1eY2KoIsb2sfs6crSh9s+HscPgx2EoZ1ZsCGN8b2\nH0pfEpexYybl9hRgG619fSkD0VRYcDPIGaVpJw5KNI3qMr5N1+qwD7hfIhQD\nN8xT6emLF6CD/V+fEPaZg68y81I1ZLvzvyGx1kM1Qq6+hPOQ8Bn4g58XxQ0m\n6Rc4zcyufHf9FgeYVFquxyT4ugZghkPjMpLJzT774XmDlWEX4d++X1ei+9hQ\nlqw40GTv1Zat5BW/Kpq4gXhpu+Q5qIh+HRtPZ/eHyTlT/ZvHtdC1nD6RLA+a\n6sTc\r\n=o+rT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.21e1cb9be.0","@material/tab":"14.0.0-canary.21e1cb9be.0","@material/base":"14.0.0-canary.21e1cb9be.0","@material/animation":"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/tab-scroller_14.0.0-canary.21e1cb9be.0_1639510860187_0.3347987617286885","host":"s3://npm-registry-packages"}},"14.0.0-canary.ba78e8724.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.ba78e8724.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2790f5944efb1ad63846ea52417ea6d3c74050ed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.ba78e8724.0.tgz","fileCount":51,"integrity":"sha512-HGBqG4LdeqCJEw/2wKnd4de49y8J9GfE1XAQxFpagzSj0R+YMRTm1b9mK7Do4c9bzBHJ6p7AEO0MveCRgVa9WQ==","signatures":[{"sig":"MEUCIHL4Lh91uC/81jUdpGdjZhEeKDrcO2uGRNV9TejyxM8kAiEA8ce0/7Eza4jpF5iuO6U/IrCV0QoRoD3jhrADYzZGA9c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhumi0CRA9TVsSAnZWagAAc3oP/11A0x349yLBiikhPI24\n18jCkIJq4Jucncn+Of1vZPCK9z8BII6FQmgNtV8tGOgwsaDJMlbA2bZOZKAB\ntxOHPd0LCHDz0IEhjXFzEITEDeH02qv/j7XBE+YUqGjn8PGtGzdv9WSU8gkT\nrPWd5ONoux0Rqg6FVf7/6AnYhnP5ucFISYrTYyF5ad0StCMW7I3lgLVojRy9\nTBWgojsoW/hC1EOjb4So1g5pZfHcfFhLtMm42+QjPGB9yxpfDOb4mZ7KomSh\nkko9GXZN5bgnHnT3eEsXUTVPdAIqPVL/mpp4BuYv1z76hgh8AeNjSe8xbQ9t\nS+2+bpQooR+VKXJbymGG0p2Yk8NYzpQo4fhHjh/CdxF8WbW80ZY5xE2DTJeq\n1uaXjTvUfP9PQjrSYzC2iwEgWZKPgcdtlzEuZC+OAwgH6wx2OReINFXsL8ak\nYlRJRoTnPpQsAhCIBlq27XZs7KTUIGxJnM5i9+nnozjYVlqm394stTDkOl+x\n6Cy/eGhxKmpIlNtKEF2RehShoQs0p7EHVFMhNsX20RjERTbDfmVcQwYltyfI\nLN+oOYUMAbvuqMZX90ddERCdlmt/OojfWpePHDG/0OK9Xry0aFdq7Ky3+0Ln\nJvcGVImIL0E88gluxmNKqBCpQNpfO3UpbeHCaeGB7uSrlTuP40Hi0FTWtiEr\nQ32Y\r\n=2j2y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ba78e8724.0","@material/tab":"14.0.0-canary.ba78e8724.0","@material/base":"14.0.0-canary.ba78e8724.0","@material/animation":"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/tab-scroller_14.0.0-canary.ba78e8724.0_1639606452232_0.3735449879087258","host":"s3://npm-registry-packages"}},"14.0.0-canary.e3e073c00.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e3e073c00.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9bc828b6b54f49f79f2f2090deacc49e4a92a0ec","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e3e073c00.0.tgz","fileCount":51,"integrity":"sha512-Yc3X9dYJuRssbYMmhCBV/rOxafnthsXdEZWFpyYbVg5kjcxca38I1XSp0O9892BMK2zTOwVBIcuNr0zRaqx8sw==","signatures":[{"sig":"MEUCIQDGpShdA6Bocg7z876zMpZNrPZr1BxlO+wfkHE85Bqq9AIgTrNaO+t5CI2z92a+Zegytsd4+uXe5hGG13BqDTihRn4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwPFdCRA9TVsSAnZWagAAaUsP+wWo0VHyKS3FZgvslHgr\nzH3c+S1JGJ+zo83JeZNv9qbmGwXc7o/GltTBSa3ipn0aQTDQ0ToAZYRBxWbg\nMkYCPB6G1hDNEjAD59R18DYDumfnts5efxAmzmwjXqGHF17nQStFQRHTxnbi\nftk2Bqx+6AN3Lkv8W34IAcSBHLubPa/yeDIKnlhjyoTYg71TBJDdy8J7CKVX\nyliNtIEBwC7EazyBnWmViBqm4PhxuZHkqqWvDX+gAxur58gp71tDXq69fSJU\nf9KZDklcuDzJcuP+wNP2MahaHVsaEp7smsRpy1jMuvUTBtnyyrARCCDZxRus\nmVAwbx+zZsKvMgAsizKwCYWBRxu/RkX2fqzh6+Pfp3oHb5j9NdmFsrQNd0Id\n6bTNIF3VJKw776Wf1LGFwimaBJ+iV5aHvCgwe2cbr2b6yEKCxTgzVKD0CHr+\nMPoILd/AP8FAvqMY/vdM6Bih6OyMtl2bka107ugrbYhsoKsdI25M5QjCgsYT\nUn1OxOkt9PmdDcLEHxdPlHiBUbDc7SNZbK+mG6cRQYrmjfJiKarX6vZP5osZ\nDm9H9JGhWFxG2aqUK3Td2z4oGApYl4rMQaaOk78HgkrI8z7t6ksFKoLPYlmo\nLHd1QCJAGxdODSv02gGc9fuI0XAsZdujScom0SaMwFa6Uay0NJbo606bpMZ/\numP7\r\n=+Isg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e3e073c00.0","@material/tab":"14.0.0-canary.e3e073c00.0","@material/base":"14.0.0-canary.e3e073c00.0","@material/animation":"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/tab-scroller_14.0.0-canary.e3e073c00.0_1640034652825_0.04220239234714951","host":"s3://npm-registry-packages"}},"14.0.0-canary.3366a71d7.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3366a71d7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"694304ccd793aab239562d318df579f26c07a11e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3366a71d7.0.tgz","fileCount":51,"integrity":"sha512-TdYnj5y/Sc/lGLA6DfqUsfupmlP6pl7pEAsTPocoT/LKcH+A5rmqmMJBnJZMh+rddYkJKxYlxRRdKnU9SZ287g==","signatures":[{"sig":"MEQCIEkPXBzn9M7n5HfFVpScAFMVjvUOIdSpz0cRxN6QHS4uAiAtHhTFzGyQwyPgTRBaauDDlaH3nnU8sUAKnpWQIUXzWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJhwxssCRA9TVsSAnZWagAAoGMP/Ry2FRk++B7VUWBt12GE\nPY0h8SqfFC37DB6okFSJUvyoamRrbpwE44BTrR/yQLLfKpaLpSwrgxGwQKeN\n4vdiPqCGnzVShNvG7A/S1GijczfeT4FdMDil8iWEh0ua+HvdlhCxy+LDfyFL\nTTqLwTue7EfYU3N8FG8a/zegLIf8CVNIVaDZeOs+Kto55KrrCSMmE9AVgi4B\nyubk6x6KuKKy+F9LPHioXptgTA6cRyNyWU5zwawwdglcmNe6eOvQIWtU+iJg\nLm0+hBJ2CZ/WOKbpgJRY2LP1swOW+euDpPGw7iFWw9gcPfDSQ5KWGG3xLlqB\nqHh2p8T9k4cRLhlae7Ws3xyG+C0mXsSQTT5amGB0mT103Xah/5y8+0HPGmcK\nfVwuhQlW7e3sUM1mXcciwuAL1/u+8Tms1rNROVRcxDVBKjXQbvUn5f/ebxuh\nWUdNrSNkOCM0wAJD48u5kFboMo1hm7IIpgD9Mbr9ANcKngjZZll9ay2iKO9k\nj5LKZMytLWlVVvGKjErM4BGXInTDkuL6iZoYYuIcnahrCdJiGjsY//Qj8YX6\nG5TuUVuspnqEdoUNdtM8EJvqagE+xAbIYwdFj+OkuM/yljbNKH6p/PhXd8lk\nwqGBZG2MSWmGldCi1Yt+JyswygrewQwvrSJ8QByYhFLwF2QBhehRHsmL/yqX\ny+tC\r\n=YJr6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3366a71d7.0","@material/tab":"14.0.0-canary.3366a71d7.0","@material/base":"14.0.0-canary.3366a71d7.0","@material/animation":"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/tab-scroller_14.0.0-canary.3366a71d7.0_1640176427942_0.6119572153634023","host":"s3://npm-registry-packages"}},"14.0.0-canary.c047f7c19.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.c047f7c19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"74aacb7714920ce8d07a29e3e93230ce3cead63d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.c047f7c19.0.tgz","fileCount":51,"integrity":"sha512-LThMEYC9r6xClrkJrw4dAty5JDUDechiTvwXZBqlkbQBUwlfz+UMZV53p5z0LjwLFHgE23Y0wZmkW8RIcc7Z4w==","signatures":[{"sig":"MEUCICTgFVEvZI7kfrzuxtfRaD5Q3HckBXGKdxV7qhvxD1f9AiEAz7AJXJLMYutLHQbQuD/C+uDd+rDNQerBQy5Y2stNc4w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1cuNCRA9TVsSAnZWagAA/xMP/2ER33Ym+Cstz9TWT7cu\nRbCPt9jKchnmdhVxq9bBR3z6X1T6VWf/xFpReTXt8mQSv8caOHzMWLSTWFLh\nSovuhA4faNtBZio9T5OGmz79mzff9Xto6kdf69Cobgntjb3NDaVupjLtw39g\nq9j5dxEi40jkDyjiZl1YALtoqQZ4MZM9Q13F1Kk6ei0WLU5+yA1+O9xLKrUo\nU8WHvkFjSga+CpKOqloihBAE97tXe5WdhwLA4l7Qwrz6hkxmV2Bin+KLkSUQ\negRKUvkiP4zexcGwdl1YffDnzqxgfOpFueUeUvcuqL85EUvpuGMe/+pDDtPo\nYU8hRbTWTDOEYggXodIiFF7u3/0VBGx5THg5orlGl4INMwemVJpu7zuVdwz4\nq3KO/X+FBipHvwVLBMRIzxgfXOPCl7Ua13C39Iv+oBDGnx+S0LG/WQVj68U9\nUT+kyNm1thiIurOdoz7hKszc9JztIxvXMz96eMdb+OAwlZ8EKiuNC/WsC/02\nXXzjKF2y6YPSFIM41oNeYS0GLP347roqaSFtqTusFlReJ5e9MkVe2a9+FXce\n3DY//DL1lZYyKc36jnKGJtoqydanaY+nj++0NCvG8bA1MKKubp6wWzkxH6it\nEFt7ElGxpixVo7aE9y6IRFQV0jcGe12OjNuldatKpxR6UtcCgQCErWDRe1rB\nO5oI\r\n=24ic\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c047f7c19.0","@material/tab":"14.0.0-canary.c047f7c19.0","@material/base":"14.0.0-canary.c047f7c19.0","@material/animation":"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/tab-scroller_14.0.0-canary.c047f7c19.0_1641401229388_0.6354082053599104","host":"s3://npm-registry-packages"}},"14.0.0-canary.05db65ec0.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.05db65ec0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"95326e71c1dab4137992e089a8a01608c6b1233d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.05db65ec0.0.tgz","fileCount":51,"integrity":"sha512-pC8uNPITaUzZOb0df3ziVuYi2I3H0dg+q2zduqrULs7sIC09+8vX82wkXosGqKe43aqKeZa/X0svuQ1L4YwqrA==","signatures":[{"sig":"MEYCIQD1q3nOvry2Ez/duOhOM9dXbXjhofnU5WOsd/5GlstoAAIhAN+LpGyYMA+sJ+b/mfpzjMB1wYa849mF7dHz2b/9V7SI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh1yOuCRA9TVsSAnZWagAAByEQAJArWHR2Ktv/wa0kpsTt\nbYw/3d4h4MZlcDUlS0tVO4Fyk3rWhJ/amqlJWUTU0BiFVwUSVbPecYgDUwEi\nQv2l0wfu5YSUHRezpM2UZZIj0Psed40VlbGM9j5/fwk8+gEFqo6Y5z4StKf3\nNSOE26sRp+JWo4EfCZpnsfcWZL665lBZRET9Sjf8m5luYBqPCMuQA0Z/Sb+z\nmOLgJDFe1pcLtqjgGztGJLkdWQbWO8OvSc+5tx+nP7zEI7JVnoc5g48+av/4\nDbeCZQkorHCg8+olH0jN4OQaeKenXyoDgnBfCuxeiGZ/6KceyvNP7dfRGPOC\ncejFVk1sC1oVwAfPAFwxjYnIVA1lWR4JpzLzEMfDg2AniSI+6+Vz3ANpTRHZ\nK8yKzvdUtDuD8cuNFl4gDpT4m/4BDxIoj+z+3unHE+iIE+XeAQ4nnTOWWUmL\nZDK3F3nE6P62vyswyVEgjRRmOsY2OfDdPShT4mzfW1p/TkLjiGQOt0r2/KOb\nvJir+pUou1uPRva/SDRS5o9D+pMan5VBGiMlQ39ElXfpO2SGYgQ7g3nVgxPa\nbPrKaqq/RbYn1qKvsloRbiiWamF63xcmBXMMcnoU7JWt3veG48GgXDkBCd3l\n0hN9GjjzHbgKIFOiStmICqQIH3l/gf+Uh44ya8+cx4tui4lMkzAw7YZVj3Qk\nO/pZ\r\n=rGH1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.05db65ec0.0","@material/tab":"14.0.0-canary.05db65ec0.0","@material/base":"14.0.0-canary.05db65ec0.0","@material/animation":"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/tab-scroller_14.0.0-canary.05db65ec0.0_1641489325948_0.15908595104349987","host":"s3://npm-registry-packages"}},"14.0.0-canary.6ca8b8f85.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.6ca8b8f85.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a969b2fb7e2ca26a11a0a89b38f6e721f6c6bbec","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.6ca8b8f85.0.tgz","fileCount":51,"integrity":"sha512-GQxcbpewZ5/jgVkYC709EqxP0EM3YxNYo2NZ974jD9y/+qKfwKfM6q+yGNpDcTh79zxzdolenOaTqarB7Lk0GA==","signatures":[{"sig":"MEUCIENFr1lqEuLC1zgFUsD9ilkkaFJwhPBtSLIzRtngUv8RAiEArC8KlY9DL6wqGRbolUV5u7vxHHIisc3i2rcZgo07nQw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh2GQmCRA9TVsSAnZWagAA6UAP/jI/bUTyuOL4xYZ1kLVM\nTwdmIpo4sCWfS7+ZUqhNjNlxMWcPcDoICJS/izRfhaHeJwq5+lJAXI4J7YyH\n+zrKwK0IuEkJc4sqlwL6jQEED/Uxp1ADY39P5xoT2AyPerniiWvK9pjRYpny\n5SCh6TwfqmAFHScQLb6AF8coGk6c0S5bkvEyrFfacWbdihLRXB4MNcU0sXNA\nxwe+TYnAVAw8iGPFEsnd01a0gfH8Y/74mgSnNqeRf25WZTry3yZYeQ0g41OV\nXh+TJFpLmoNloEsGQeN1HCh9iWdCjTiQOXwEgha6BQOeEw3GVphuuv9HejJl\nHZVJPXVxJO52yCO0XGsDJesopb+PzaAn7ES+g6ifxYGKXDJzvGGyutB6/OMM\nZEYWb72djqLNmqXn2cy5LhkwALwC0oeFz8viB+OIwiB90Ss167Qa8rst28EI\nFO1ESikGryG71DX3zW7+AsQEvAjef5k/hMa+5lNyb0MhC45ckL5IbvdYrhUx\nE891GKNrcTuDcy+pgCSX96td+/UgLKq1R/a08j46VXHxD6C79ct42WR/64KY\nZKnWef0+fAdPUPv65tn3LOuoJ8UKlDntXqOMeEBFXYrwwyFb2YBEIH4j1ZIp\nqaPkdcWBhyXYHpUf4jbI5ia7AerisDUp5T5DyP20DE/I2pMXI5jOBQ6TpNSf\ng8u5\r\n=/Br/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6ca8b8f85.0","@material/tab":"14.0.0-canary.6ca8b8f85.0","@material/base":"14.0.0-canary.6ca8b8f85.0","@material/animation":"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/tab-scroller_14.0.0-canary.6ca8b8f85.0_1641571365949_0.48036686811425855","host":"s3://npm-registry-packages"}},"14.0.0-canary.173ee7a7a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.173ee7a7a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fb584c2ff7f0e0cf8517c789dbb83d653bbae059","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.173ee7a7a.0.tgz","fileCount":51,"integrity":"sha512-7uLcr8Zhb7d8nn3+crrC3NxgbC8DBVRRrAkug7TGZD+/JNLxqgpwxFs8WMPMGEtPdgBZYzaY3OW8cFksBbT/BQ==","signatures":[{"sig":"MEUCIQDajjF4XqbmJuQ6DlgV6+/MeDx8hsJcvurFO5QTG2tIZgIgEXTEbMSwElEnxmOQeP1IzmGa9JAbyUoaYyKX8B2Txj0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3GUDCRA9TVsSAnZWagAAcR8P/1v3fAT3Ffb8kkmpdrqw\nGyUjac9RTphoYNVu11Tspn8J2Z7lnievxueLhzjqT1QdhWlzsZjD9uMf/Ixx\nnlFOy8E2tOYPwUgEsqpnAfVhhW0sb15Mvtw5EN7Sd31UWI+y1KmmeC1o+Aa1\n+UHgBFP8HX15nG9w0HNZ0S5pOzzb5gtKnPD/WJINbmBU0YkrlFKPH73QM14m\n4iUPJV8sz2RRT3bPYBlXVLSGj75heAwQQt9o76NNExc59O9XXd+BVxVbjX0T\ngyBJCoKfJE0JroaRIQLJxCZxYFVUk04zYVdMqnjg5b1tXpvmlVXclr18LLFs\nvAyOv1wehoojaxNjd5XPN+boc0bihm7vfGsOAlqsNEyJMhnzem/wfA6tlCc5\n7SgjpHwhaAEAFBuWBIeN8cc8+8pqmZwZBF4jLMKq2cf8zfRmIa1m/T2urqIq\nlLZmBpZCyFBmrKMTn10ilOYriHAKkdrsVlf9W2MaVhwEqj699DXDx8q2NZJh\nwnHc+nryOQ1FuNuK0T2hMdpWWXzroO1V4zy156yTkz+6UAMWjuXNcEHOcD5i\nC8AmocOL8C4c1mo6pukcP9HJFRZ009Nr7aZl38XtMPYb9UInrENyPp8DWrg3\nd+9Bjo0+9/qq3J4uu8zNgyuZTBGh4xi0XG6YFJAtMRnMtD26SKsJkwoH8hpm\nFQ4q\r\n=TUTq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.173ee7a7a.0","@material/tab":"14.0.0-canary.173ee7a7a.0","@material/base":"14.0.0-canary.173ee7a7a.0","@material/animation":"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/tab-scroller_14.0.0-canary.173ee7a7a.0_1641833731400_0.5618962937052625","host":"s3://npm-registry-packages"}},"14.0.0-canary.b704e4dfc.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.b704e4dfc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9bec10b24583fe0019305830c01a58ad93204aab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.b704e4dfc.0.tgz","fileCount":51,"integrity":"sha512-Z/Oc7m+LVcoilJHCB1JL/NnoVW9Vht+Gc8zuv/Mt0PYRLIWc+cC/n+++Np6bTVbqOEpNJFAiVSCCrj21FEQk2w==","signatures":[{"sig":"MEQCIFnyso7vYhzBFgP2Sv3SaBGZeAFT0Xny9LLBpk/Zg5FZAiBQ2WSZwVbRnvsBYuHjw/qy+8Bs+f8Mc2qVuOY2SSZEnw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3HwlCRA9TVsSAnZWagAAEjsP/jAYWuwKYcQS6/8AaghF\n5acp5bWDmJw7YIJCQ3IFiajWJh/GcQdasFgH3GzjbcJCTHMQrntwUqjRMm+A\nwB1ilgjcE6O82fRnJFcfpqIrqrzelN7/yPLvF+TgpaLHra0tSyh2TEHvtbuf\ntPRgSRMJwsUJkWmrVdmPH5acycycM/lEo3J89utqjjVx/pmkBeBfHN9Z3h1t\nQKnXj5SxpVogfqa1RAuTHZd50/9QYtoGrDgGXINCeikUINDfy6t2qAjGqkTT\n8CgHyOGn19ENo857ABObYHHCYSDgpLOK3hrx+AQyYEqD0cb9I7W1cYoO4K9i\ntm7I4G9gxiVisnZXAnMxQZBGohKXF8wW2jZFSAlSvGkG7mqFgyPnCmaDhtBa\nYJkxT/jrXbH+uCKN3OzPVa1v0TnW0HXfb0FiIXLggm2uDLCy4c2KMtd4hvte\nasc4eBB9iZ/vW35LtieSB60oXjKzwXO1gOD616iL+HvTsxpvlvDFCrP7RQis\nA9ouJRJvyL97L64LEnTJ/XlTqeD8+3ArX106ZW0YRdUigrGHjJ23h8vjXsEP\n12IjzLfEuvmvl7cg35xScZt5bNfRPfe26wvVJXd3iEbaNIhK35KfBXf1JvAo\n+xMAF1+GymrFIsZluh0WtCHUJ1ZHxYwWBFtpy8HVFS0h4hPnnebjGIzEE712\nCYv+\r\n=vcoZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b704e4dfc.0","@material/tab":"14.0.0-canary.b704e4dfc.0","@material/base":"14.0.0-canary.b704e4dfc.0","@material/animation":"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/tab-scroller_14.0.0-canary.b704e4dfc.0_1641839653378_0.7686805228712223","host":"s3://npm-registry-packages"}},"14.0.0-canary.c14e977ee.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.c14e977ee.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9009aadaccfabd4434c4dc518be15ca4fc77ae17","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.c14e977ee.0.tgz","fileCount":51,"integrity":"sha512-Yw7+kdX/HzIubzPZQ4yKLhjQpOGTyQKFXyNJ0ChG4DFzdIY1fqHvjspaXc273Go7Q5UsHfSDHsTWe8ToYNV5Zw==","signatures":[{"sig":"MEYCIQCfvTCLLdphSCRAfE3XJNaQ7PFDQ6Ht95RAlFbpbaG/tAIhAIt8lYYK3AhJMxc6vTK7bZquKDTDz2qgxpcKWdRMDHN8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh3adaCRA9TVsSAnZWagAA/4EP/00V4Hzr/eF3u0uVDma6\nvuPhhXKEkdGhySu5L0tnuDyM1ML4xjZSX61Oq4RdqPScl8rXamVASa5Qn8UB\nU0eMlsGVCPM9osOgvlzCLID0lOmDmRM8vkX4t60GbZKtQ+HddGkKUdXesOjY\nFT5j97ebJ6QOgqtr2mu4LXSGd4eqeZT0DN8zdwufgFD0G0tywgvSpAalcuxb\nwWDEU8duUCS5peVo3K6cK2lxVcXGta3HJd4LZVi9eBeAon1AfXpkc451qKb5\n5D4UMo3HNN8rUTeLYJihIDIjOIfvppvElayQT8mMOBZpYO7J5Ypuy1K2jPLv\nnbj7pyDBZ2uyFF/7wq20xB7eKd7oxcFLQ+GxVshkuvuncM7TgYi6aQM5xpg+\nBSElqKEI+xjtiLysMD31u4nf9nQ8/9yDrv0KsN83lf5nOZABLu8jpk6ut3+q\nnfL5d6F9AkzBI2Xyqfl0aYPBTR+bAvqNAi/b1yuHO3G9HhQioxxqBwUZX8Fy\nm8TEkO7D9zG1PqJ7ItzNRtKz8vgpQHJJ6J+EEsbNe3hAjaJqeyLaRX296LlC\nHM2/AMqZRaXTxjKc4KqLU5TpCiuP6jth4BlEE/beL/OlKPrShJpxGKST2hID\nsDOh8dSBQ7aP4X1jbxgaKmOhGTXCcEV6eh6Wc3kRA58lBQDGFo0uz89s85u8\nd8ZU\r\n=/9j2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.2","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.c14e977ee.0","@material/tab":"14.0.0-canary.c14e977ee.0","@material/base":"14.0.0-canary.c14e977ee.0","@material/animation":"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/tab-scroller_14.0.0-canary.c14e977ee.0_1641916250554_0.18299486026853162","host":"s3://npm-registry-packages"}},"14.0.0-canary.b094eaa4e.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.b094eaa4e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5491cdf7c8c033f3fdf5a4b30acfa5ad9320b346","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.b094eaa4e.0.tgz","fileCount":51,"integrity":"sha512-ttOnexgMQOT7frpvaVN/x2DuCfK3dKpNb7iOM6b+eg4Bbn2fuwZWcEqx1HYyXjsh5CnbTCPDW2aVW2Zt32OS8w==","signatures":[{"sig":"MEQCICBkNVLJL+VShgGDJ6KFOfuVhYM/vzfO7GPpbW6sWUcvAiA3j/T5+cmUdsqf9wxdsia8onsZK2gKzqZrqBmMLElPtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh4cRYCRA9TVsSAnZWagAA3uUP/R4zWamIRdHLP0pLhwK0\nsAcU9BXYxJTeCsQLuSI7o8Yy1Y2DZz7/mr+QlQYdxr2OYehEQload2oBLnZw\nvNS1nq/Eq9jlkAx3yygCJ72m52Ly2Cmon0fRLl63KwdaD30Ko4R8qFVFWabD\ndIHrlLAECvGQFaveYvpHa5VAcOhWhUOkf7QKcmPU5zAahs80iWq4Bx/Bozbw\nDFZthYaP21cEyULf85DVMubWw/R39II2OpqpuzpBvqWsGMweRXL9SIgk65a5\nsfXJu7UKBVD5puwHkKD8gYTXAYJvDoR+dGQjUVz5tnZsfKfyqq+USvKossTN\nRQJhKZdNPKX7Ro8UWBrau8EcysULKo2cYi5yWJm1KgUSmePL45dK/yi4bGux\nWFXFOx09ItBvjGLq0FuwA12tn2OwobObv1HDiCiGJFHzfROBse2bUXrc5rYt\nGzRfyP1kf5vPiw2tCsz665uujwUccCs4XNO5EJwwBlzOnwSUYHXu6sb91agR\njtAB9dbs1q8Na5W7OjWnrIG4i/kSt6APDyAmCVp6vvFjzwOKnwvK5tFfL3NF\nd/r18Bqu/sHj5y6L6hWDXx2ang7YALKG/+KcR7/cVrvmZFQuFys1I78mWdK7\nvCrD6ETBqDjxjMmtX1PAocs3UwVyip7bzzEQzauZ+xs+lftceNAAXZRNOF+7\nkhqC\r\n=a2mX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.b094eaa4e.0","@material/tab":"14.0.0-canary.b094eaa4e.0","@material/base":"14.0.0-canary.b094eaa4e.0","@material/animation":"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/tab-scroller_14.0.0-canary.b094eaa4e.0_1642185816366_0.42580473211486236","host":"s3://npm-registry-packages"}},"14.0.0-canary.390220e42.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.390220e42.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fdc13f0710dd52a0f876080a4c5eee2352648212","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.390220e42.0.tgz","fileCount":51,"integrity":"sha512-uTZIfw2bCOcuGn3EKGqJg9op9sgEvK0s2IfvL1RU8LTMOTIWLMr+7d2BOfCLEiwb6UnZflAktaZ9UCIG2vaQ5g==","signatures":[{"sig":"MEQCIF2dc0kSTJOYIrq02zb0Xb6Ka5nsIuU5Q4ujv3l9YI63AiB7f8ytuzKJyUudC3BQrDPZImcv8Xz5XBJAYn1UHfqbFw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh5Z2aCRA9TVsSAnZWagAACw8P/1S4vdSbR6ocvieTItWe\nuxdY+FnEuK5BTcysGIrGeNW6xDOAf3VfaJFy66F2se2jigmWWAWE9NO/V0vM\nyNq+T3eul1xAPWxtSewspU6Ra0+iB5A9iHLLFY54nriZNAusOvsrar6qohVn\nUf5uQLPgQEkFsBC5qJGIxSAeFIsUKSaWqO1P6iuIxYzCkqMWk7XGOoYb/6PL\n5c5bRZZ1jWrS2jrdMb3qwSsx//AClS9ZDne8JbO7lv3ypfAuXaoSdSHbC+8V\nWGkU1S1ZWO1RcGI+KHlLcP1kOThw76avjLG8yNUsVU7rQTmU5m23SaMWcjUN\nScRIxRJTCLH0JGBW50bwKPD+IVc2m5MwgoJoY25qXzK0vh8loVY3LsdYEdMI\nHsWjEAmxED0U/ZZLPLX6NjsdnUQnIyIBGUocDBRJPvdkIes+Qxn0qC38lAnt\nKSK+7KhtxWs0K/c80+z3QEPzLPpfFPdXYWEscGgjG6vaCdfdHxTYxdoFmKbe\nqUFCqa85VM5hQroyijW5+vo07ZINHdgtEzbq/suXpjf15A/qw9HXyfKPEhO9\ntglOOXsr2vwvgeuE8YIMYi0E1IQJXbI1uzVYUJXGh8oiqn9f6ZbJ2RrF0Et+\nyN0JU5+TXrXOr+2oxSHSO5nnovwBeS/4l0US0zAPavNDHjoepMQ3fnUKySb9\n8eyr\r\n=w09v\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.390220e42.0","@material/tab":"14.0.0-canary.390220e42.0","@material/base":"14.0.0-canary.390220e42.0","@material/animation":"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/tab-scroller_14.0.0-canary.390220e42.0_1642438042513_0.797863962825069","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b5391f8b.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.4b5391f8b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d664a79b4a4ee234514086b18fb6b6c3a8ec796f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.4b5391f8b.0.tgz","fileCount":51,"integrity":"sha512-KyYlYLw2nK08hh3kwx+FVI5bYTbcdBwNzbVK44E9PL8cXFgacD/cnmjuLB39ncCOHcZvOZWlQN+a3jaZvVM0Lg==","signatures":[{"sig":"MEUCIBWWaKA0aTJa+Y/vGbfCJMc2RkOKCholyOgyp0WhnbRMAiEAzQMrhjboJRKtS/YwKBquxXzzBsJdixvMTa+ZdbS2A8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KSVCRA9TVsSAnZWagAAHaEP/0QgsbdIRfbnxzAv2SGT\nYsa00fJ64GhF8j9Mnjy6IMNro7WABdLInPy6T1Xva1NYndUvmTNkU0REIiY1\nNicicGUlzKrfMSoyRPbdH8FZYG5XztU4Ozrh5rJSrDOfUoKC0wrlaUIr6R9p\nBfpdo9rs47CIHxXKexN5LbQZHIjtqOv2R4BcnM1TKWzjm0k5LgIAGQdDe1CX\niRxJFGicjp/VrzV0VR7LZsTd1Y7hpn4In/HVEOieHT8rfuSQkGLv7Fgc6FWk\nOKqODENHyFemo/o+nFwYQoGq5rUWs2Kl0FKNbCvsgFzZmfXWZ9Myxu5fPQWi\n7pQFwoJbVsFlaQjzF1odhvS7rFv+nVQaHhIODctWIUKq/dOAXypJKEt30Vcr\nvNLSyHkq5lo5BwWctqZqFy7SzjtOi7JE/lZvwkdU7vXRDB+Qk5xfiMgJYxRz\nX8wA27kMMQxKNq1KyJPIgnyvvoEE9Y4+TK1o9ow+4us6aCm4NyY9Ac8nyoeU\n5KITjiKP3H3qReoLGnDWnydS8IyurRtzlHqG8qPWW4M2is/pvVGs4yzNihq2\nLiQDLNORH3HKrLk32afJ3cc+GfsTypPAbyUykGt0EkVbjTb72zQPRYfTyr/3\n30YXgqt0Nx7K9rTDxYbozGNYI3BXPCKCC5jV31SphASjeCS7+BuQrqX8aEXu\nNIXC\r\n=7HOl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b5391f8b.0","@material/tab":"14.0.0-canary.4b5391f8b.0","@material/base":"14.0.0-canary.4b5391f8b.0","@material/animation":"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/tab-scroller_14.0.0-canary.4b5391f8b.0_1642636437700_0.23963607004382115","host":"s3://npm-registry-packages"}},"14.0.0-canary.cef6bc623.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.cef6bc623.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"568a50e247217119298849094ad0f5027e19a3c9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.cef6bc623.0.tgz","fileCount":51,"integrity":"sha512-SVfAIkUciSps1IYhADuh+t8Lpi9bAeGb/4cj/O9Le93SzK2etZB/HBWYSbegqXCBLg5llvNz1n2BtMFGc6tOJQ==","signatures":[{"sig":"MEQCIBPGmkFpUsBTpB2lHTSmwh6+4pa3TbptMvG0btJnMmjUAiBn/6QW9de6POMRFEkttFaAD7IvoSd85NCHkbEI1IQmzA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328134,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6KpnCRA9TVsSAnZWagAA+iUQAKIklOC2qbGsiRyJXhW+\nOLljv3ALXQcrSlASFsrA7e0I/WfQ3/WRDYnw5FBkp51atjNxVtmvU5zJoK8t\nz8ZQOCchLYsdOuxST/cWTDLKQWccpp5VoQpsq3CNeEencQe7U0FIlM0ELnUT\n+r4C+BdJp9FttjGXlUopS27R+lPai+C9biz2NChEHPyeNdu1InMkjxc6nd+L\n1rIEshVOHrbJWO088jFn0KVRsY0Yrz5BtWBB1ASNWBxm3BDzfIeb5fO8qGlc\nuHHmv1XmQynmEzQQJ+5KGXX5yELVN4+liTaFAx6mZHkEfmRGi31Pam8ZK1j7\nUGxAC0PV1qbOaYWa3l1Z4Nyoq2XNugoAMjCxtW/xRp0Y0s36kZbR2nGPl7dy\n5OJkV1Hak/YuHzUSbEEhoIEk2v/86Zmd5LMAqdADjcfYuT1lUTO2Hk6lEDYX\nXzoRYLsB57QX0oBm+HE7NjWGuNjz9mHCydaGAb0Ykxupm0uNjouF95pTwcOD\n1UfT+FNfoVktlz+UnPwQXvsKslt3Y147452mPS9vyq/+6Aw48BdmmEM6+B+k\nF2hljVwCmdLyIS6sRarF5VUOAhlP2RflJT3cOceomkrfI91Tx1ALSfYTuEPz\nQlCTdi40B8kWptFHDmBgDlrhodX98dfWbQg5fvBxw6xHcTva6Nyjwt23urld\nu5Cr\r\n=BeKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cef6bc623.0","@material/tab":"14.0.0-canary.cef6bc623.0","@material/base":"14.0.0-canary.cef6bc623.0","@material/animation":"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/tab-scroller_14.0.0-canary.cef6bc623.0_1642637927472_0.7045273550186166","host":"s3://npm-registry-packages"}},"14.0.0-canary.0379179c4.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.0379179c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"002367585e06d4ec95809c2aa4ff16da081be0ba","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.0379179c4.0.tgz","fileCount":51,"integrity":"sha512-MPu37KuH0Ts2Ggmgdu/U5Wc5A2reqD8Tdrr83lzMxMxuUa4Oa34kvmpYXY/zllyM43XhY/Y9hoSTLNmBysqNdg==","signatures":[{"sig":"MEUCIQCg1Zx2RzihrSxasXICjJOXqFkpHo2XaIPEoLebvHU+owIgQIu5YK+oh9TmPkyplWZnAovblWSfV2yyftHRgh3+S8M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6bAnCRA9TVsSAnZWagAAqigP/R6S9Vjw/7Vg3tZf5NeS\nnKFkkudvBqtRN9gD4F5XCCB9p/R23nGEJFRRUebjEcRIyUuCGyhufHjHWtq7\nx8q3f8nLUvgwZ+ps8G7hw8xe4/wmygDxxA+7BFjZdefyj+uYBuqv0xbZBt4J\nJKr8IEIX6Mkov/FKckFrENBfCVWuJUBFA2/37Fdr5GsBcaEpSSMT4ueGVQp1\nvhN676d3HfTBM9dQiuX5niQRn32O5W2qarLJiN4XNC0vn+SBavd+3ctKddNC\nBi3mPBGwJDGmAOaie7H+jEBdlZ+niB+8jeh+Gb1RiA75zCA5uxCZN9jIpY7A\n31vDGUA/oH8NGiLF3r7M8UVbrBm2Jf1QLpWFZmvXWKSdpWyEZN7ZU/iFFoda\nieDDb7P/dNDo5CCp7T4w6R4m9xAbPHIeDAoOkOuglr922HHkenNdUKSyKkUI\nY7eDDwgI7L1o/+MGTG7rQYTmmsEa/nAQgDdiNrxg0TiYdkxIFZMPNcGQ/NJc\nA3tBRja63O5K8IIY69bzfKCg01Ap7PHvAqyiM/MAmIG/g6OltNkbwEsORfWi\nFe0i3zMQofrHD/02XhAB1uNJn1QDoibribPxLhQeb69akV8hyEURmO9ynG7n\n9+UrTeihNXNYhr4L9O7uoQzEFctofiCg29uUIcl8JSrv6+rUMa/Evu6sx6HE\nafux\r\n=8nr9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.0379179c4.0","@material/tab":"14.0.0-canary.0379179c4.0","@material/base":"14.0.0-canary.0379179c4.0","@material/animation":"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/tab-scroller_14.0.0-canary.0379179c4.0_1642704935490_0.5237916922665133","host":"s3://npm-registry-packages"}},"14.0.0-canary.e62f3dabf.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e62f3dabf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cbbc85040df8fb4a10dd31a7014092b31bef3c43","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e62f3dabf.0.tgz","fileCount":51,"integrity":"sha512-FBmMhn5xrSgDLkgnuxvSnaXbZ/ABuoTg2jcTYjd7e+MYwvchtTRBxuGtNx8SBM8P33gALSuRDlqoFFbdTrX0Gw==","signatures":[{"sig":"MEQCIBvr448V7oDdM+bwm2yr3fpTgUlh0ZyYuyHz9B8t4jkRAiAsFachYxcdk7luA+xyfiuzOBxbJtEC72nMeeb6vf3dsg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh6zwGCRA9TVsSAnZWagAA9PUP/icx6dnkE49Re3Npy6TO\n50auO/UOzmFrYhY2J6WPxFx0V1ORYQqynNjVVXm88sPzKvy8Esi32WPEninm\n0Ii+yKygndz9dx2GENbfNxYnECVKLQw46J5fpJMeh8z9hvC2jnSaH6d7wYXt\nRiGzTyxhrmzK+oOFIHgPneHfUlIdq58piG5AM5aEptp4VWH6F9E7hhMKrPiX\n/aykt5/p4RAaqgo4yaJZGTT0Ovqmohs8KBbHgxSN29/+B7tS+d/CJNFhbShI\nvBTYjXr6moZ6UbTb3i0IM493CIrnY2nGdS80nYsFuolTACkGxesKdNUcEwjW\nEGJjh0AvtvuwgRMqYteLnbZS3fIH2m/CXOjfR6vlBY3cpWBC/59Ikgg7V4ri\n951j6UMt7WNPzqNTwxr0Hgfp/zRCH4z5KwRx8q6mO5XTnWrfAPwT1HaMJlzC\nMgM8I1Q6wthrBX7AZYQv6ovvZSZ/VPo1LM8aJeygzCynnsmpBIFyfats0Xes\nz+9zapC4fcM4blV32/PTgQcW3bISWpfOEMpEDxb5WvWwC8rRVUjmYs1ITfub\nDqQwaoFPYYX+NjlzUuQ2Dg5kLBbkFIeBdRLUkaPRQGaURnnnEFstOStodi0e\nlCKkXW0Erh/+4qfxA4S3hGYwNJcGRgsU/qc9iys0pLahMCWpAvY4Opyx1nZy\nLI0Q\r\n=dRmn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e62f3dabf.0","@material/tab":"14.0.0-canary.e62f3dabf.0","@material/base":"14.0.0-canary.e62f3dabf.0","@material/animation":"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/tab-scroller_14.0.0-canary.e62f3dabf.0_1642806278325_0.9318027556052415","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e20c1de8.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3e20c1de8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2418efed4feffb3e2f6614ad4cf170c8086b463e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3e20c1de8.0.tgz","fileCount":51,"integrity":"sha512-F/CEh65s3pjA7PKxAKipyvTpk9bSdnZ54CzFQXhrbNNvMMGW7ByN56qqQY1DRZrwoqkTAl0InAVpJK8XdCtV7A==","signatures":[{"sig":"MEQCIDH6OqK0RZMEuETwfBlnhSKP94nUpC7Y+jNuNAMhsmfXAiAKpLrDAMwroU5gZohcr1fX98Qb3W9EQKxdGM+lQnrwsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8Bg2CRA9TVsSAnZWagAATn4P/3aVRBM9JHbT6PMk5MUe\nAaQ9yVbQsO5sD08b/UUEpispDg78tTqJUoxtsNC3cvU7UxsfVlobeUHAo8xN\n5SXDgV9g+wsHdMJEi53dFy0+dXvOcAcl6WsW7mIfVPdNf37vs8wQmMsKwVQJ\njdnVJtPK8JjSl80kS9pXAsW6fr1U6kdfGpPrvhmGAE1XbIPMVYgSbJ3N0Q6n\nMmYBKm/yX43Xt74iFHR5oDzG7bk2mQEoLtN/1/BisJwFeWWEze2FxNDLnT51\nyi+IRJvlk+7oSvYv4j7Ja0sAZQffheIwMeNW7UY8pancpesn5fr0jVehsUGM\n/UePJvsut9ZRNQiQpd3cD+c7ViOK28j4q8dXi8s381COn5WeGHAbUZJXMEHK\nEAN9AHtLvUjQzNjyMMDcTj35mrjUeKIErC1+x/zdsHSk95L7WXTftw5nH7my\n4QbwyoFbD9utBWvqPGtaIxkciSRw0/c5IRX0JvT7Kgwbk08WS3lAU6aci76l\nvqRGQALY/9fRGPiyTUJsmMvP9+FgQQ+ClfXnnPfEnafjPFKI72JWvmTQVyms\ndvZ3WvVhjNP2Z2lLoFKF+1KGR5LFHx696iA43TWwpeoinL9FwPxVrBLes4xH\nc/qnIdChdHve1c9h53S3OwTz6Rrb28tTKyMp+FBll0ENbs1HTYEfYb73Yrai\nZ2s3\r\n=G7ZI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e20c1de8.0","@material/tab":"14.0.0-canary.3e20c1de8.0","@material/base":"14.0.0-canary.3e20c1de8.0","@material/animation":"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/tab-scroller_14.0.0-canary.3e20c1de8.0_1643124790429_0.6593163002740936","host":"s3://npm-registry-packages"}},"14.0.0-canary.9f9d928b2.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.9f9d928b2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bddfac4c56ff7d90789c1dfebc86a2e0dc04f0d2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.9f9d928b2.0.tgz","fileCount":51,"integrity":"sha512-r5+9M+IEZ76IDD9IgmsoLGVYVdqNV0e7yTBKNfk7qYVuUgAq4ttGonrBIFHouXjk7ZSdbhZ6mSKBvLP9Duqo7A==","signatures":[{"sig":"MEYCIQDWW88KVqASB9tKH0EUyHcbAJQADak3LdHCTC+TV/TGdAIhANr1Fx8Y0L2laCIRKT1TS4f1oFr5Q2zAqBNmUJoWBtr3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh8uEACRA9TVsSAnZWagAAQaIP/juF2G7HCIcxO3Vpk5ny\nuKiMIDMRyTIa8s/sY4w5iqULq2EIH5lrjtc4tvcvXdv4+2urt9KihGWytfls\nRVyN5Q0GaYIKLERuSdyhujt6wattJLm1wCKofeeugnyhpU7GmuEa1qJR2A1e\nkSyLMPHRF441CmTOu+0PJclZSan4LBDlEZT900Q6doM4vfzBW9MNJZuOvebD\nI17g3DHOFvkNmu5bkTuSUWl0/FJQyijdblaM0dU9hx8bHh5oPc0u71LTiPq0\n5bDuPFh2gw9B0qHrpdTFMao259JdqDz7rClkBvrE+sGicRocRvwnTvn3Tkuf\n7Vyx3xIyBDEqwLhBgeIQCWEUiXsMtOdz6DUY7zqjRszs0sfiaDZOSStcP7Ig\ni7XKrZ7aJ8YfINEp3ALUMrGlPht1DrUYMs2CcyumT1rj92zZ1qIjiAO2rnsh\nVVolm5CrwKUN95BCQyxY+PwgYmDSWK7cltJERhLmi+sc44moGTVZ4iUT8+bk\nr0gfc++L7gghRJ7WLzu704rxmQh5HbzJOYWIBoNhm/laaubhoOTHmm/UtzEe\nBa5MQNBehdlcIBOGA0c7mNWEXjM+UDuzqsQHpzKrvrtOL92kmj9hWa+Zx1i+\n40u2tfJmDgBI6D2R+1ON3GkKK/G7wUHOvDoIMNu9o/xmF7iTRCFAWtA6pK6h\nV9Ug\r\n=ol5l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9f9d928b2.0","@material/tab":"14.0.0-canary.9f9d928b2.0","@material/base":"14.0.0-canary.9f9d928b2.0","@material/animation":"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/tab-scroller_14.0.0-canary.9f9d928b2.0_1643307264387_0.6418216041365965","host":"s3://npm-registry-packages"}},"14.0.0-canary.a2bcb065c.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.a2bcb065c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"56ab3a6e72b3501abca56a450796db22315d8af5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.a2bcb065c.0.tgz","fileCount":51,"integrity":"sha512-6oeuJCSuKeBlIFGbMrIi9auY3+F7aUifhzqKtdMfGADNuZsnTIBYNDnkWg+hU7zBRMkxSsxTYfFPIO09OkTU2A==","signatures":[{"sig":"MEUCICJpGRJQ8bqTE61T385yLTq6GhOlcC/lfcDD3fmy6O0NAiEAt5Om65ykMzaUqyPtzpnMb7EVCxGxdf4gqGgUfVqYkqg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EYsCRA9TVsSAnZWagAA+RQQAJk2FH+aXBztMk/X6fzm\nql6sqv835pQ1CTBBkIRpc8Dy1c2GyFCtyQsQGkz8Abx8d+aTmKW6upoRLfaS\nJYKh8FCJqY+Na5Jl0d2UwyAmoRYxbuF5yEkYADFSViS6SBBgHTN3lnW8zIEN\ncKVo+y+Nx+llv9V3wMaDB/TT33C2XR1Qy3RXv9WonlA5dl765KfmPA2BhbvJ\njq07q08pDhSR+kjPhjfIztT4z8pkawlSfqvdTRvzA0pZcvEIclDwomtO5ndy\ndcuzmrTLMY9aXWeDc2QtBvsgcXr8d3dz4P/2aL/1iq/Y2LqrT0/b1995MCWF\nlTV9fz5YS8VYZqyPRWPo51P5oBV6iw5W/TcpcK0c2o8Km8qci+uutHpFyT4S\n+3lQKNcGziHnWNfVkgu9iWFF51GEg21sM9I/HtFj+xIrXbLtIoU/tOO0QVfy\nfjKtTIn+2oztRYYl5v2NpKsvrmVqg2EF/2VtYELKqWM+qkm51HLAFqu8p+hc\nN8M3awJ4/HdYUTvGcIHVKUaU6UFJdYaaEkLOHiQ+8qri26Qk37jITHdTkvpE\n/FL1ouh8LkcNeOssku0juwwDNjGUChvZAp3kpG8Y3S7AOJSq8Rbf/HwDWL/1\naWL8w8dP2T5QPgJakHd1O2LKQtBW9CzjzxPgfl2GogPtCWBuP7nz8k5zpwTa\nH8h2\r\n=1isC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a2bcb065c.0","@material/tab":"14.0.0-canary.a2bcb065c.0","@material/base":"14.0.0-canary.a2bcb065c.0","@material/animation":"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/tab-scroller_14.0.0-canary.a2bcb065c.0_1643398700307_0.6705991228047785","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e66fb2e1.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.4e66fb2e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e0aa030f07618710fd9122bc9b11650e0983b143","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.4e66fb2e1.0.tgz","fileCount":51,"integrity":"sha512-LfeyRRRaX10BFudFINzHicsnsvgo8Ys+qLIaqddVkKMP0HBRmzV3lit+JFUhETWPqIvgb2f8y10o/W7knB/U8Q==","signatures":[{"sig":"MEQCIEv5gmKX8bJgMkyIeiDB0uYptqBJU6jvXwljHABv7hUHAiAUdkSJKIeJqqKcUiXOUqjZui5BZfcBex7RRUYu61qrqQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9EcwCRA9TVsSAnZWagAAyeIP/RQNrt3iNTZFsJL7sqdp\n841npo4DHmtRn9BtSnjP0Vxrnzr+d6SM2TSRyYuf1KSdPc77MHlGixMdSBX3\nluK5kHuh3mLh/xJn6hWsYGjWw982DmrnVrmCzj7sP/WFnG5ngLQs3Cr8Z4CF\n6ce68ehKUdeCgFdHO/AInvXQYlreHfm/kfmbaTkx1zYKy7n4ld+jnSXrktdb\nH3qjw+OEaLp/JQJyF/OTDIYkuZfHjEA5Uz0g+50HDtQ+1qPg9vxGas7PCQhs\nPRG3Bh6dzIdQF1x6ToRyS1Jp7pN/zI+tm0/XOdbU+a755VUvSUyRf5d8tcoV\nxZ0lYH9zOl+sdEB4xJGf+lkMxo+UWhRYpz6cZKa6B/9BL4/LbKfIhatNVL4q\ncVhMqz6r9ig3KUWNgpR13CPKfAnYtQiEXKu21cefC95fvuuglCCTJGIW39kF\nNwK9NS8gfI/qcCu25J5C8C0CuMaOtzVNsvc/a6IDsHETZThWvbb2fliOWKT1\nqWDmcgEBax/9JGLdA4LHMvbVPzwR4161AJQWcdvp/CEy6LGlcuZTjstmG46N\nP0rxdnfARJ/dCHRAsi70nKXDoHfCkTlewqtlgcnYE+E/eEnhutouZpmc07pA\nIrbk9BwLqdMypU1qbc61r2ejaoJS5O2crlG1C59C21amck5rhhzBHLtZS/4C\nfGyD\r\n=C2+n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e66fb2e1.0","@material/tab":"14.0.0-canary.4e66fb2e1.0","@material/base":"14.0.0-canary.4e66fb2e1.0","@material/animation":"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/tab-scroller_14.0.0-canary.4e66fb2e1.0_1643398960131_0.29006203011708775","host":"s3://npm-registry-packages"}},"14.0.0-canary.9736ddce9.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.9736ddce9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6adc3af6bc7f3e1cb3310020571fc4181b6b7478","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.9736ddce9.0.tgz","fileCount":51,"integrity":"sha512-LglNwm/oBq0PHo18UHceOXtDE7eswJlNLJiy/W3+ku+I6C0q2ftku1bo2k5m3hJDjGz0dR+fOXi9uE2HDIwpXg==","signatures":[{"sig":"MEQCIBbg2JorenT/HrnT2ZqVGpfJL8nhTGbkgD90r6F4gFzSAiBm3GewgrlF/wne8As7KOxqbcefCUD70YyMotpAx4ZBPQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh9Q4FCRA9TVsSAnZWagAAnH8QAJERfWpxL4esCwfW6NHr\nKFV0u5URvhSLd/fWKdd+9h2wnFs0klWA42icPLihxcQJyveFMSyiAbqYpx1O\nknw0QZOwDxD4Sd6HL/e1MYJ2xGr7mND22gql61cRH1s77udvhTuH49wtgy/p\nT5a/kiVPsuQblYo2M2ttUGjrFRfcxAspz2wzv69tIP6ROV6ohOerg0ZUmtVu\nWr1KkRcBLQXjqW2s+VbJfLYzfucTSSLw9YRsle4Lts4QG+i0j/BuwxPiSAb4\nJ1Mb+gkcu38jOk9fcqyeX722HTggtsbT+elFBUxs3J/+MgoR/mW6MED/qC5y\nxugrEoNkKX1ZienRcLqFuR848EzBgqqm1cBYs5KlZp8FqmSDJulcoWBUjb+Y\ntrePR1NJjnYQdZS5uc+ybaKux7rcBg6WeZAre1pn5oCEEa78P2furWY8QXUy\n2VGrqzfDKm+vVhrieAXjxR2UNmLk1ZG4m8o+dgfcPvMXB/5tfe4jSbi5np4P\nb14CUAGLpvVSbaVrkPWsoBDZa/NOhQ4zS6O+7LOJnxRD/UXqns62v/mSu4Yr\nWd7/RrUC60CcFJ2pH3t7WS5K4bldOXe8KjMHjeZXz17tTP16ZLkFPoasY/ip\nPzTuqlO3sqLUWjySEl36np5rj/ZWMeYeqLovI9Ni2RlmiDKzc5h2gDpT+Q7e\nKmFw\r\n=wYki\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.9736ddce9.0","@material/tab":"14.0.0-canary.9736ddce9.0","@material/base":"14.0.0-canary.9736ddce9.0","@material/animation":"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/tab-scroller_14.0.0-canary.9736ddce9.0_1643449860936_0.5867602684721029","host":"s3://npm-registry-packages"}},"14.0.0-canary.cc4ed13cc.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.cc4ed13cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ad56df92cbeec266c7bdcd99e9afd9645dd761be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.cc4ed13cc.0.tgz","fileCount":51,"integrity":"sha512-zInptm66EMV0e4ktWDk95SUlzv6j2JtfdZqRl+07rthwjxvVn+eA0dMonsi1mG5Ic9jdDWY+OowQSqgHUw8xrw==","signatures":[{"sig":"MEYCIQC5+c6kFjW75wRU503wR6snwJzdP/vPlZPDG1dCN/GllwIhANYXstYmMMw0dOhh9MgD2Pnk40sABh/gx6av0P+AXREv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/W9DCRA9TVsSAnZWagAAlYAP/32R4maEI9xvM+wTlauo\nOEbkPSeLkm8ARv9F6nOiVSJ6XDLTs0CmIWaSKwql5Wkvo7ZHoixR/AdP9fnf\nvj2whqX5dY9ucEuI3WRSdlmq3qBlYW04h+w1OchZK/tkBzFT1wMBPEQibaGy\nq7Au5VjHjqVPwjmUn3gvcpL79fM/1YOYGgcxuFIETAvmtHm5myJthkA7XiCV\nr6fh010YK4AzMTSEUdPlDGn25NE8I1lF3WIil7wWdiGbuEL8x3Bli24oEK5J\nWfQ7taN7zeO201wKpC8sumyZkmHk4U1OJeiSFca0eiWjLi3ZlwmUwKN3V5tX\nBaqe7itpQ0mRUxWYytA5EioiIo0JRdUWeXTjC2H36+6lEYpmjJFEHntHXoNr\nFy7dD6bKfkn/NfzagCWirqd+PqzdYObIrOlJGK+OyUsLRhG/jl3IXgXtT6Di\n2ndQ0nlURmpjQw8/O9hje4VPh15q16OAdkFMECGRYDNcBv772SFp7sw/jIo9\nwjTDX2hNnnLkOASbFjPseMbnACVj0yi9e2JDjtkB6UiO/euFnENHgWwe0Wcl\nmCesm7nXTPl/sGvwNBK0qH/0LCrueb9+Uncm+Be3EkGfbqbP/q9vU2Z+UR8G\nIp5f13yPa/7eW3EnJWeziURzy1TZnMF/SymVVBRVMi8uk5RxjU/Yf/RVdxs+\n1zTX\r\n=BYkT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cc4ed13cc.0","@material/tab":"14.0.0-canary.cc4ed13cc.0","@material/base":"14.0.0-canary.cc4ed13cc.0","@material/animation":"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/tab-scroller_14.0.0-canary.cc4ed13cc.0_1643999043321_0.9282239563077366","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcba26fe1.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.dcba26fe1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4141aab9e28a8c91229fd80f6fec10a8205e094f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.dcba26fe1.0.tgz","fileCount":51,"integrity":"sha512-t38OkWltw7j8L0NOAVzm/PRzoJG8X74ziXA26/T03U/6fVlkXeFVLCOcYYfiiZNX2W8p4L2Gb1Bvc4tdpMm8KA==","signatures":[{"sig":"MEUCIQD6SW03peZYhHIOXsq8v7H7gmPIVSwTcUgp69qYApwgBQIgTsXE9ipF93uLiv44dHtj3xWQgb+fKZnab/whj+n4ssI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJh/aGACRA9TVsSAnZWagAARE4P/iR9M6FbmyWTnmXBfvvO\n8YoSCHaTfqoUJo90ae5HLZalQykp39jZmrp8uZ2BRdc5p+t+VRwRcVg2/gzi\nBcSVB9vdEmHd+ZK5+T1+VMdsOvDdeBKt2BQKDjY3lxMuRpyckry+5Mi78/eu\nU5+ljkqLponKeQPOjMTnXGQqQS8mBfMXxqdhtYk3PNEOSYGjrHJqdEw904vu\nz28c5hoNOYhsshBSasGYciehUqahbmbduHuxMMYn59dse/wmyiGTBASWmTS4\ngKx26+32KQ54pA3xkCAR64h80i05vfXgfYwx5IeOVIEN4qgvmAMIpMv5VtV5\nn0apyte4L203y2I/tqniFGoAazp9b65V5sLe/gI/oLlyF7l+uF6EZn4FwLM5\nIZIUn3MwGiY8DPxuybdphSwXz4qTyj2KI/dyPde6gyRomGvmv3W/B/rInKCy\n36kN0uyVhfMaDtIk1q9L89qZBfRL5AoKpvyr/WZ+CaH5V2Of44sVuoGbuTcJ\nCbVuTC1snrQFslSXoywUd7rRfg/GL5ewEqOp1Zc23byb7E3wyDtn5CmKVyiG\n9llEq63u6vKB6XZUzsXSJT21jTsXkyfA2K4NChUiSXaUyIk097Gc//epDGHJ\n3nVbcZ1yi+BL/1AL+0L71CQZtUD6CwWRQegUB2qB+wza9faLabc/wHgH77wV\nDp22\r\n=2mgK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcba26fe1.0","@material/tab":"14.0.0-canary.dcba26fe1.0","@material/base":"14.0.0-canary.dcba26fe1.0","@material/animation":"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/tab-scroller_14.0.0-canary.dcba26fe1.0_1644011904657_0.77604443971456","host":"s3://npm-registry-packages"}},"14.0.0-canary.ec54d9046.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.ec54d9046.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f209361420b6b894e11443830492094e88db098e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.ec54d9046.0.tgz","fileCount":51,"integrity":"sha512-xIAOWk4sqjka/IRo0EoJtkIkvW9WSUK+IW3lNT5+GU08l1yEl6xKGfd76Al0oDcZciXE/X+/eTG3jk5qKn+dJQ==","signatures":[{"sig":"MEQCIF1bUsrhd0bzDHCQ98J/lamW8uVnVmvrmt+1TrEldHHPAiBz3/yqFtl21xefWaeP6OkjP19nrWa1LtCubXEdHE/QBg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiAT8sCRA9TVsSAnZWagAAOZ4QAI+rCY7HCypvs1GLGxJE\nJq5+a+neh1/NW+Wb5IsMx7f7Omir2jIWn+yAJM4TGHbDTcpvG/2NgszEmJPS\nVvlcNiWyC+KJvl0YmuMtKIxaOWxW6BFlvL/HrCPrizj7u3uIelEIHwbLCcd4\no4gAHggfMLIryKgGUaqeXso+eN+DWI/RKSsRCJmL3n11fGNM5fauNMV5PJt8\nUP/tlmuYXsC1/aUJyy9fJWCaljSCwSY6eUxFtMRJEjcrZgbyDZqCLAzLRjZb\nvT6GN5wQFMYfCwIgUN8iKQd+keu1geTtL7KjgwIc7QOlVHP3I8BIxVwU4HFn\nEhRKm0FbXeDLWSlrPvOG0hotMPvXKox5wazUQHR9DFnFHQsoudpZB8JoKLp3\nNv1IipIUiqUgtkKnrX8irlMdJJwPVMrAo+U82nTrPrb8n7XV5RqGMtsR1GqJ\nluIyA9xkmSN/bBVl2kmwY++m66CgIpdO6P4ohIr1zHF+o4S055axVTnWVRVq\nqe/OIbZrSRuGIGybT9YsvnO/FNUq/TB85D/1+w04I+cbbRI08haIRk78jtpt\nHOb2vG0WXC3cPO32azQsTv+2Ll9OoG7rMvV2rkvm0kiyS6omt0p76Au+vUyL\nS698Gzwf4sWR7nsUyF7SETCidcnqLYptHp1gNVdKLP8s0sGSIaqHrzWEar/u\nz6uW\r\n=4A32\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ec54d9046.0","@material/tab":"14.0.0-canary.ec54d9046.0","@material/base":"14.0.0-canary.ec54d9046.0","@material/animation":"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/tab-scroller_14.0.0-canary.ec54d9046.0_1644248876035_0.6475056699347133","host":"s3://npm-registry-packages"}},"14.0.0-canary.ea9b5b463.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.ea9b5b463.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b958feaa04a329d07bb74c4291599cb110260bc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.ea9b5b463.0.tgz","fileCount":51,"integrity":"sha512-lwlLwZ/k5tACh6yalNOMFIBeFe4knpp6AoDsmMR6O8tJmY2wwbLummfqgp2wNZebq1rsW9BU0B63I2doasMCig==","signatures":[{"sig":"MEYCIQDJIoy6jJjbDWdyvnmNphDZQ0WFmgVp4f5IqekO1XyE4wIhAJJsPlJRfb7g4qTSpYIy0iumPB7XlvIRaXmMKwOiTfbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiA//tCRA9TVsSAnZWagAA2zQP/jS0U+DzvoutGdyNnzAY\nl0QDLwtQq5+A5XK6MDKDxS7qILXrZe20gKkjQU3izfTc1YbExfAEA0cvJR6T\nJQVk9yb1cx9FzyrEc/tCFW6oIRrVhtKYqsBXCL93F5P5VZoLV8zb8InHhxRj\ntqK+k1GprGrFu+lHHc+jzhotcBIH19/3F6lcfRVzDjwxnns7LMwl55kIGU+z\nwPHUy/v25LO6IYJWxdCZ3P0VuXqs7C/9Nhj9Qcgv93nBpf1XbseDbiD82a7y\nJ3IToVpq7m7m5V8cFAjYpFUiUDG/HQZ8KDk8nzuTFG29MFZYIl67IRjW1qMC\nao+ybPIbdU9805vVPTaP1T+SwdfVS49qGeubEeBIO7UKIyli2SXm81c7hEGx\nd0cw49Rn3r+6yEIIMwnAogzUn6lKQEXOLKPvNq95oPKc49/vBUbgPyCR1ceh\nWJWm96LSBzJn64q7Cin+y1Uc1oF2S/n+pIvdJXjBIvLRh+35j5yxNe/fikXH\nL7cJv/1D1DMAGrcB6eSQpvNGc3skAnCa3b4CgmyWKMIzS+XctFQRy2fqak5y\neKulPfoOOaBgK7CiVcU2riCfofO/NVVClfA0oaGEPeBCxCO+kQIfFICRAPAs\nLIoOfE60rjOsa+fACwwFiXMcmryhPPlu+Vq3HsfYWsRKTbrXx3myJ95CqiQO\n+XMO\r\n=raKh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ea9b5b463.0","@material/tab":"14.0.0-canary.ea9b5b463.0","@material/base":"14.0.0-canary.ea9b5b463.0","@material/animation":"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/tab-scroller_14.0.0-canary.ea9b5b463.0_1644429293608_0.6738926995870489","host":"s3://npm-registry-packages"}},"14.0.0-canary.96ea061c1.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.96ea061c1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"25830b51a20885d0b86753d4e3736c968383896d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.96ea061c1.0.tgz","fileCount":51,"integrity":"sha512-G9l55zp5wyJoHFDb2gUbuPB4OLP4PLqljpbTiO0Z3pWsbcpQei6ueOSekXMlhtMucxpr5ZH013rTLZuP/bhhVQ==","signatures":[{"sig":"MEYCIQCUSwArO7F7zNNHWrc9nP7MTskVYOhx4mSTdO4sSdmxSgIhANasYYcJcxMRh/tEHTfXRHjjLywfyp9W2Ya8l/wvPP9y","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBA9cCRA9TVsSAnZWagAAs8gQAIqFgpDHvehgc9In0mBX\nAm6f4cqW5ffkVkJ+g8W5JinmHb5kR79fnysGN9Z8bnCF5ug2ZaD2YdLFHlhd\nKcCPUxwCkAk3VcRDFPlxYY0HBOUtLS+J624PTXfUrcncoLlegyiFnkMiuhhl\nSJyC3vvfhRg/sb5/md5QY53yr8dfUzZitozO+Uz5RHJkSJWwxMlc8zlmd700\nRSn5eLZPuozsT0/5Rv3Vyw53i6ImDKdqo6N2tCYV0pxWJjjVlCo0bp4qtirt\nm8NYx6LTksf08i406EiLAPEfP9FzOBCeluQLbgK3PHcU32DoFdBnbzXkqePM\nz7KzDmEYty4iJA7Qnr3X5XTSVgsPwN2nOSGSNYdOO8YN1faCSYPDD1hoWPkM\n0aJogjEJYrhGqeGE0FvtrPUV2mQmTRwuSUH+OEbdlmtLDP4T6YEYmwndZdSB\nGztkzCTRak98jEaOIOS9DBvoMEvwIteHAxIzFZn2bimrFfodUI6dc8/zpg/A\naGHk0o1v8o/CRwEluStt7Un+PQ4IxSnUcafKEuG1S18wPPOmJQfpXHiWoe6c\nrnEIjiyT9uA7zi7XzZKskNTyt6x1uIoRa4hsBBCj7e0CHut83Xv0LIphENP/\nAjKRass1Ksx+SxrTHmBiTTzWAoUZSEHniaxOp0hoLGt32ML7TnaAVJnqMTm/\nKTNK\r\n=5abF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.18.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.18.3","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.96ea061c1.0","@material/tab":"14.0.0-canary.96ea061c1.0","@material/base":"14.0.0-canary.96ea061c1.0","@material/animation":"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/tab-scroller_14.0.0-canary.96ea061c1.0_1644433244728_0.5623342941418301","host":"s3://npm-registry-packages"}},"14.0.0-canary.e00181e59.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e00181e59.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"843065c134521f10c7c0655ac4b9851301119656","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e00181e59.0.tgz","fileCount":51,"integrity":"sha512-QPlzF4tRz0in5LGJ5kOdD1IbF2CSxeV7bbnmUQIyENrOLYG7tpyuWquA+50p7pfBKU+LMCAio9rDx8hjPfb6iQ==","signatures":[{"sig":"MEYCIQDvxyx/kaDugajxRX+YYmqRHFCQ0ZXLRJ28S9fKKXNzJAIhAJNPkXqFzB/1duzGWEv/8RAYvngtN/jr4lHP4HKhdBPD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBXCRCRA9TVsSAnZWagAAAH8P/3X+dKyPCknc2RQ9E6Nx\n0qJgH6yhxFHTcIM67myWibifWOm0easpeBSbMe//+gnImnpNYrKH1CyJOB6a\ncxE+kSskItsiMqvFvk7TBefE5iAjcFDq+o7ZDADjooMrBc6y1Uih2B+3YxrU\nlGm0+V+LdUTjhlsbSR4b9P0xq1xochk5AyL1tIcAInHE0vx7fgy/jtpg37Pf\nkeYNaZRTaVqNSKsm+toBEB2T7DB50OSR25mePwl//TokeULyyVyVafHgnLCE\neCPVLNJM9956V+3XSVuZeRB9vOp3hGtDzzINDOhxQjPOdD69IX6EejAM6Ci0\n+a3Y0+FN0PwpsNtXY4M6p5lid8/1h51Fj4A4xhg91pL9dguPPyeipSmfLEpZ\nqi4cfoXoRsPvVlMBfN+Pbf28AgXkbDkJBW+sUR5ScpDTOYTnveNtrJjbcwn5\nNkHT3a9cC0WhI+wDcw0pAohqUhpm9jTTn9SyQoU6qw90QlvXFUL9ffjiXH2t\nDpo7bC3YBlBH7tHdlJMC7y0jW6I0KtQH+NtLSaORjLX4nrskmOP7qMwPhsYf\nCXU2rY03+Srqx7W7XUeGXmGTnrshdC9Vu9kCZac6PjMD9JANJPPA4hYxftoD\nfVMJARPHbPNk9jG0vxsPDGLcfOUqfGhTIw78781F45Ff/ej2WyHNh3aBFBEk\nMfUJ\r\n=6EO1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e00181e59.0","@material/tab":"14.0.0-canary.e00181e59.0","@material/base":"14.0.0-canary.e00181e59.0","@material/animation":"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/tab-scroller_14.0.0-canary.e00181e59.0_1644523665293_0.7388282800204","host":"s3://npm-registry-packages"}},"14.0.0-canary.037285f9b.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.037285f9b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5bf9db3be1920eaeb0bc4e5a7ebbfa31f07dc066","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.037285f9b.0.tgz","fileCount":51,"integrity":"sha512-zZXttoSIfsMNfFuckPs2S0r0Y7qZK8Gy884fkFm1lum/8EKeWiWiink0h8A7sSw+J7NmWXAqQQgDmJ6EpyeG5w==","signatures":[{"sig":"MEYCIQCZxyg2AlBLwbENRGHkvyGq8rYfYHvzmqvdPhQH2eUFYQIhAPYl2a7FmL9nVQ5DQLYlUFbjO/3EVXnTlqOKObP/ZSTh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiBqtUCRA9TVsSAnZWagAAp/kP/1u4YfanROFlxFz9lxoy\nIRXnE8641lodpH75T+9MR62Q+w3hUQebSFDwfjZvEpIg3uset4WNxTVJVjy9\ncPl5IK6Eiakg7oMRbA1Q8xWZjRYDHB+0O6EHSTHoH4CGQ0tcnqn5iUz2377u\nj13Uifq/JASeefU2X049ExaTDgVttsgXAGUXEKPbVVhwjULuqeSLEwGCgQ6w\nTjyV5ydTEiIHHa5TsQhJUW9jUfkY/GbDzgPFOprYKzpnk/R29bkisLItr6oU\noAvJ8+iV+pisCJ6fINGLT+qKoqx52yp+CJ/auLBxeWNvBGI7bcQwwLB0fpxI\nPbZLX2VRhw38g2bErxYvB4oBfY1DCD7kusAPoGpMX+/9QITrE3ATiR55/MP/\nWXNRHLX1VH0aAhyNys7hWIHbad3EQZ+ISOazxkEAeAvy0bFTvkQQU+iR8syh\nxe3Bqr6imIccFnGgIJRK5kVzlX5Ft69r0+W3JD2q4TDTILvy8HssQVd3H+AE\nFMlpXaLg8BpsWNc+6mXt/qw4bT7aV/KfpiM4qcLCtSb7+caqKFGpeO33KSsM\nch77l6dEKBKo+tyHjTAY99gUehsvuoBVcQvE3dnqSZbiONLp+/tV0FtzIRC8\nA3st3auogEXMAqA3zdZw4Lbvlnq5pTMuLtSxRMYbKrFbH0/dozf9KrM4OJKL\n0gYe\r\n=cfbw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.037285f9b.0","@material/tab":"14.0.0-canary.037285f9b.0","@material/base":"14.0.0-canary.037285f9b.0","@material/animation":"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/tab-scroller_14.0.0-canary.037285f9b.0_1644604244335_0.653777161771617","host":"s3://npm-registry-packages"}},"14.0.0-canary.1aaa68dda.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.1aaa68dda.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7b4eb4028f5e58120c633d327137587d583ec3c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.1aaa68dda.0.tgz","fileCount":51,"integrity":"sha512-/wVIWCDcAE0bdVJvZR7THZYIVXeYYMJR5fAJyMyNjE/lIpebHzjME8toXKXa0DOfkY9GoWBBW+UuD/w7yEBB1g==","signatures":[{"sig":"MEUCIQDEzJNsEwxys8rcOh7V8t7A6UfFMCIH/Ryw6bMPj1cvWwIgPUT8ua2qn9ziuG5Yof7/z6xAcehd0VCQOn16mbQ4jGo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.13\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJiDVV1CRA9TVsSAnZWagAAWK0QAJcILVNDBkF8ebtlE9Ut\nZDjE84tre4dK1r1dk4qqye9ut93jA06wrbXt2QdiVRpFxSgvlcgY6u4x9HiK\n9nMKjvBayb0GwPvpu9W1rqY7fEhE73iI+pSblipdieXCKuLSRIE+L0uliBqL\na31Gr6z/7978ybgIx7ALSx9/kPv+0mbmRAmWS0hqZO5zkW7PVYaFSBAwp38d\nDLZKB5Gu/jw1lzT5Lsw1V3gmHhwl6sZKWFQkGl6sglzrW/f8EUcLzoaQjK9U\nLcJWxgiT3u26ng/REctWEk9tGud4HcXiLg2KccbKg7jtIL/mqz7RCJFkwd2V\n14Y2A5Ov2799YrUQFCmb5JOFGw3xp58flPitaImhkvDTVBjUsJiXkDCS0s9n\nMKPhnB1oi/uCuPw1ckFw8hIPBvu7FCGkPZZaxwsdR7Gjm1QkW22a1U2wZYpo\nOJGXTsZT3E2CfhMO3vl3BXzLA7z+x3hmzvKzrJFonCX8WYr3Bv36txSEEN5W\n+Kywlt8YU/hhIn8iYLqlBcu9x9jdgPqKVnOg0KS7g9ohFGO03C9LgFwcGPO8\noBi2R0Gj2xjDZhIO+45J+b93v2QSUqOXtfUt6hQGYNGMyiId+zbbxhJ8HpXf\nB6PLd4Sva46/h2oaXie/6zWHTM4sfGShl1pWpoK+bvmKg5yfDVWCPp0TRL0n\n6O59\r\n=AkK1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1aaa68dda.0","@material/tab":"14.0.0-canary.1aaa68dda.0","@material/base":"14.0.0-canary.1aaa68dda.0","@material/animation":"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/tab-scroller_14.0.0-canary.1aaa68dda.0_1645041013428_0.10002128009450173","host":"s3://npm-registry-packages"}},"14.0.0-canary.ab4aba1af.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.ab4aba1af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"02701b3b288d410849584e84989156735606d861","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.ab4aba1af.0.tgz","fileCount":51,"integrity":"sha512-1274AtfVBmGRWlpDWZB5313J/cP/02iVal7wBHf2VNiEmnaPKEUiV/DNe3dzbzO11/rv9DkDh6VBy4xNZzYBRg==","signatures":[{"sig":"MEQCIDV0gzpxUK1Z4rYSLhGumba1rZu1DIZBLnsAgrhzeAb2AiBveOMqiEz8BF77OPUVPabvYcz9DUH+ldGZAflOO5U4MA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiDpEwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWQQ//bvrDIj+w2e45lD4Jc2aM/ZaRtsq/mEjUzTFH7ztJH2H6gxWt\r\nCfSOvIWMfb4l0iqzPPxHoxwB0XXkdrvz2nnhq7Y3Dn1XndPGpRUveANPOY1f\r\nHcnl23vhxu2rqnfvH+8ecPJp6Shx8tD/5YpfcrEi+2u8EdX5BdO4OD2n/pxO\r\nhI5VVtLuIJ+V1VbBt81T6A7ooHr+ANfeE2rElyA50WQ+c/nbszkFPrIeDk3+\r\nW2zLu/B8lvz7tuQTiIfIaDOQNelGQa8niFLWOXE2ZdnSBPrEfFjN4OyiiJZs\r\nc7aW4z+CTUjIfM6j0hUPPhHYjcnMjOcW30IfDk0d29hrMUEBXx67/of9rNgw\r\nKcG/Q5UFdtHpdPu7ngCKiJsciGz0YCpA2w39BrRzLP1MbdWPCg5DH29lFUk6\r\n6mHdD2QYqf7W+Za8lCT6Tm3unu1SpCe4+Bb2FsntBWHZcTwAlYCabwaTq+Sb\r\nCH/YtsrGCH642ZLL3FGgHxNFP0RG2pv96cR9bKK7VMirUpxluhrYUnQ74ZBq\r\nnFq9SCI60GMBFMl7zsnzyDXzQbxfnBh4GcZ7dmmFOi7bT+jVmQTISOeOquWD\r\n2t1mA5L7PbHacYhcRlZgGLjXW3h0ctKH2sJumHWMOmbVykDdCsNLJ4ONxfAE\r\nImTlrr6pUe4kM/oznzL5q0G9RD58aiOnX4A=\r\n=jVNp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ab4aba1af.0","@material/tab":"14.0.0-canary.ab4aba1af.0","@material/base":"14.0.0-canary.ab4aba1af.0","@material/animation":"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/tab-scroller_14.0.0-canary.ab4aba1af.0_1645121840072_0.0624650418537418","host":"s3://npm-registry-packages"}},"14.0.0-canary.e58552c6e.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e58552c6e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"541b1f81f8d0c8c42a10fea7de632b427b83b6fc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e58552c6e.0.tgz","fileCount":51,"integrity":"sha512-g8vhYPp+rkK0mgtHfAlfj2yj/TXtYoTSB5O/NA1/iFr5Qc0KYxCzM+gTnCVWrkL9TjXU+Jz+bp47xTZsynWzfQ==","signatures":[{"sig":"MEUCID9bW3PADEH4Sc6u6xL5WhLNt5Eg7XMpF/G9yiNXDBuxAiEA/q9mlidf6w6dldp06DKh8wPAqeZI+2EHSbnFLSWjK28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiD9/SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpSKg//aif540XbIQC/bvibDbadsf/J1oxBAjlhey2biwI0akURjFv+\r\nzawYUlJNkNQRfFn6gj9CLNbsnAbUWB4mFTdEpbuDmAMrDak/VqB4dzlRgmaS\r\nBZWAceitA0AHF3C4TLCJt8yb4ppra9O3hTFJmuG3xqpsKfhxuElqoY9Hr4lY\r\nFwGctEQrVYvoZTMb5h/UftTEHlaSKGAe3hucraZ/JkC5u0QE317HIqRjqVap\r\nHsLp4kIhNqI0/b/HXzkOruryzYqrwyX7LB/gbSM7AzWUdBeMlp7pjzvWXTHi\r\nHP4l5hrdp01x5kkqUMm1hmVM+yxYGKtXTv8h4bLWXT7ShemLXDivC5W9DaDM\r\nU409h2o4PEL4dwyPowhY4E17YTf3dLrdgcnGKA4xouQjE7Rruxp6PDZ+mzW1\r\nYxsq8nOq9RGN7g5xgaf9m3FV5oxHvAC6zx5ZtEf+1eXCFdwIH2X7MYQPT18q\r\n+80ImBy/SMogbDB0IAjv3byPm8eNGgZwNiPFBtYP5rR/Z0BeZGsTKKZujZVg\r\ntcwrSIXOi32nt152f9d83nFrZzKA3/pljo9fHvHYb8/dLnBUV3O7R4DL0rtV\r\n+zcLHsIhrLWpAUSDesYfJD6xeXoVsJHGRhiH7Q8kHjc+Ih0Pgc+gbZ/TX8kZ\r\nEdy8sFcqlAM27dAIRG0VYb8KxsMWkW+e6Ec=\r\n=CW3l\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e58552c6e.0","@material/tab":"14.0.0-canary.e58552c6e.0","@material/base":"14.0.0-canary.e58552c6e.0","@material/animation":"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/tab-scroller_14.0.0-canary.e58552c6e.0_1645207506311_0.10063884763701636","host":"s3://npm-registry-packages"}},"14.0.0-canary.868793776.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.868793776.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"88570d2df49b8ae0b7c52b396a5a0596278d4f4e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.868793776.0.tgz","fileCount":51,"integrity":"sha512-cDNmX3SbsExv/VcaUzl0GpbrXaUyEYsXrNZauQU7WRFqDZW4uOEcOnP2+uaKjM5iuh/Vit7OK1q83wqnf21cqg==","signatures":[{"sig":"MEUCIH82FKMtJx15U+RSYvUpl+Jix7I7XD2/1K1jXJ3J1la0AiEAzYg2IacSJt1x5x+7wZgl3jVocdn7BjsI7381T2Yr2tc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiFTtaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrylxAAmCTuykV3cJDpE6cNQBjoWyawQiMAbRYoY4NDqaH7m26g2BVg\r\no1u70hTzrrDu1SCmoaN5RrHnLqb4nloEe0vqOwj3qTmwzgF9T2C+tbc4tr5X\r\nPbrX3oX0rLe8u04cpgPunGZtr8X61GeVb1rMmze7+dbqOs60BANBOpwn0WgQ\r\nStblRYgsqDNXsvafdcH6qMsPzMkUIcP+tPjt/mNn11mb/TCzN5dt8887WqLt\r\nnVHWwMnGbZSHOuZs2pLg+ahyITCseryZcKkuN5FG05YJjsNC3HZw968Yuxrf\r\nMYcZVP2dscBBhjZz8PEy1GFE62Knc9fD77DMxGJKMcjAZb26+fq90T84BycZ\r\nHe7hIrUqZuw+J296u6sNhWBX6M6nakTbERAi054dChoZESXvVZ6J7XQT543n\r\nm8GDp6UdkiwBpIj16dAiCuP/L9O9e018UhnouoC7qHxMywy3ra+RZjsf31iZ\r\nHwx1BrPGKCYxHMb386xt8MvE1wXyaBlgMBq2ksSih27xHdI+FfTwfW6r6kVm\r\n2/8EB3k29MGbc6MKGQlfjLacXDyY/V7FH0rNECFpmXRpIq7nc0VyLYxc4dBF\r\nD1YbapN/66tEf5odulTwzccz6JmSySWNATyggRhJVrP0wIGpzKES0w+NwDS8\r\n9G3k5jyXeVorLbIsa7KlpTuIs1jALxt+5cs=\r\n=WQvm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.868793776.0","@material/tab":"14.0.0-canary.868793776.0","@material/base":"14.0.0-canary.868793776.0","@material/animation":"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/tab-scroller_14.0.0-canary.868793776.0_1645558618610_0.45712643776437734","host":"s3://npm-registry-packages"}},"14.0.0-canary.fdc37a445.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.fdc37a445.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"782e97891ba1d5011b1983eac46fdf38ab3ec67e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.fdc37a445.0.tgz","fileCount":51,"integrity":"sha512-v7sZK4fzyG78fe5Y60i+MwCuLg62TpsdswNzPG385uQETLdFyKGqZFNfBX8WMnKpOFt1c5LZ27xDVFp4j//yAA==","signatures":[{"sig":"MEQCIH93h1cL/2paulLTWToZnwycAjiK39DSc+abbM8oiLFAAiA9Ey8wHna0JC8kJWlywaip3ntKb6V81dMFiEurSanRsQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHRiqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqtgBAAmnseOEqtv4w09sM9vpBJlLoRGTCrtwOPt3cwDHDOKuURbl0V\r\nOBSQt+b6ZcE6lAGklBysC8H3ko5gsmtoGQOCvEydheh28jxLFe6n3gh3FmVP\r\npfb7rN/SqHI5E4XEcpRF0mT7ViDXC4K1KZRTyLwGJiB1U78qY20AU1py//8H\r\n8zi4D2nC+O/aPhn77EbUOATTv1xYgR8rErtKYhdC6s5fyffJEXG+fpXQwzBI\r\nx9LIj9IulgKAXEYEGVLWMIQNuc/xDeQ5oebG9ZJ6m/yfJNyxGd8WS19eMHeW\r\nBh5cCJ9RVIcm5Pm1FQLh12DkGDXdr5nZDqAyDD7bw5r2385IihQ+Eax8PVJr\r\nTrIfs+ITOd7oC4OlnGzU2Dx3kfENOQPJDc7vIdm4UQCfGbfZRJfhhr/NmWhu\r\n2svowVJz+ItPKNMQh/VvhWdwVHnYPfTVybK80rc7ZopxwwdpbCtF7g/4Mh4g\r\no7Ua8YZKj8HqpHvjj3GesSQgoKH4vOW+lBkMY/MuJJ7j6/ahUUqY6aEJPG6j\r\nl5PeTVpdaDuhE9KneivtNFzq525QgQlkKFmwVo+TittdrCTrQn9QxZq3xwKy\r\nDPHbwYqWRnRaqFz7iitFuBQ4CdCktKKVMWzTypdOcGUTKtKWdS6E0TpqNhfD\r\nXF1tU/Du1haSo1qK9L3DLAgvfwnV6APWTFQ=\r\n=YP19\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.fdc37a445.0","@material/tab":"14.0.0-canary.fdc37a445.0","@material/base":"14.0.0-canary.fdc37a445.0","@material/animation":"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/tab-scroller_14.0.0-canary.fdc37a445.0_1646074025921_0.9711519563696975","host":"s3://npm-registry-packages"}},"14.0.0-canary.43c7d87dc.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.43c7d87dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c6db4a12d9104a2a369f123a0101a3973d57543b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.43c7d87dc.0.tgz","fileCount":51,"integrity":"sha512-b+DZtlHgd/X4mXurJhUROL/CDvHT9T00GEZws36x41itUmyBwSMlQpw9AsnhL9YclzHYEerF0eq/GHjyfX8JFQ==","signatures":[{"sig":"MEUCIQCylpEuqzkrTMgE+iEkJVVq11TsQ2SB4IoEd7x8jwWmOgIgco+dGm92RivPDjijmVhHn2ALFKkSBSYT58rBZXSpLM4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiHjzwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmroJA//d/fInrdSAGFIpsiYfJ1VgASZCeOjPezAyu735YrTRcp56X7i\r\n5ceMQhRREq6QluBC9HQa8PFuzjZoFrSPmnbfXmBLdGhi4829Rr1KZoMvh4cN\r\ntZO4tqoVs1RUxGgm+XcerKjoEa316FV0HfELPfFSPtDeyK2ACSeAbz/RFEOv\r\nnUCAR/vMRm8k2p72fjaqtgLelrbMhK1rCKW8fN6bRXVAI7dlof5a1MFk1VdD\r\nw0oVUwn9SKfByL5tUohAAjm6Hl2kYuGY6EkeydZ1U1Qwd7sfkTC5+mMJeHRC\r\nrlLsREDw3XDBtEqqZHw5sRJmXyBelrWrKzePpYSWhkwj8oPZTpuVRU8fK+y+\r\nL4t+n30f8B5ool7tULf3z5YEJ5FcLg9Q8EwdTm+Bj4KKfr3+bZj+cfLRp8NY\r\ndohpdUS1i7YH78IcjbRaqehzkv1n08MM+WYLwfXGiiB0DGuwK81E5GbNBHtI\r\nBDyawFM0YCjGZiWHA0fpXYdhqxNdPwFAzr2Ol+2iFvwSmGaz7TR6RBtNhbog\r\nP0+PxeNZaMyp8UK46GvpH0WDUiiuJr3cIjhBLiAMf5Lkkp7zEZzQBVreaJIC\r\nHlW3aE5z/CSw2i01JsYwSExHja4BFWAZOPCe0FWasD3zrPRdj2+o157VWRCJ\r\noZkmbbUwl8Qzczy9vuxKzPQhxO0k21tt8xE=\r\n=pvzf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.43c7d87dc.0","@material/tab":"14.0.0-canary.43c7d87dc.0","@material/base":"14.0.0-canary.43c7d87dc.0","@material/animation":"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/tab-scroller_14.0.0-canary.43c7d87dc.0_1646148848545_0.673270471038427","host":"s3://npm-registry-packages"}},"14.0.0-canary.23043acd0.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.23043acd0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7a1456b4941d91088b179791cd6223ced1d7f74a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.23043acd0.0.tgz","fileCount":51,"integrity":"sha512-4Dgx26TXOYalHDgf+46p3qYj3bYns+GJhewEizB+gZklY36QMQyfXyLPPgeynFdUzLELqF1ta7wiL9VrAa1GBQ==","signatures":[{"sig":"MEUCIF84VULG1Nk+m1SxEl9lLMb+7/yqXFtmvGOW4cRskZr8AiEAhYanlF4vy+MdVDN7hojo5lmBso3JHbiUt8B+1heZ5W4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiH9NkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2cg//fsv0+fESY9jMh6sW3n+KJORWi1W3yAmtpmi5YqsBamriB3HQ\r\nToXWnMnSbnPbMbR84e+PLZlj+jmSZe4oFAX2MV+LjGza8xBWKxSjI5T7kp+w\r\nQjrlfVyXYg/YwEG+CMqer7KUARcS5dsomQIKgbIa07E/OZRNWqHvomKlcBBu\r\nVpXczpAzHu+46H+KEHr8glR6WtyTaJzDFpv6GyTZLD0SZa0Bc9/IX9szpg9x\r\nrr/enYfstamyZ9wSCwleXOTbvod1GYk+QDG07tjSSAkmlf6YfSfzutQAgG9n\r\n1NIrNWHeo9pcHMF4MWbZVXHF8clq3w8h5CnbfDG/Gj2CP+1khLf+qlm7YQMF\r\nJnQJjBspsUQv4V2JXfUV9ZKG9rCC2tK+1TiyRWGyz/jdtcdvo+Lyg8S7xw0Z\r\nT6hSGR+X52C4fayVOZiuSHb08LAZuxe99t7HOXxm/JUH2IbzSn1GQ99V1cWk\r\nhPBao9xDy2nC8GAFdyiEHYfkel47u7TPLVrewtaTH2fAZzhfQ6IC11ar5Iqr\r\nhhwJDDY8Y/nFp0l0Wt4hEiyBe8K5cR3ku1B5Nu5JwdLbMui/5WVR7ffsye8b\r\nTAWmENQmOOHFWRt7mhJurZyt4LMaCWpNlX8qhC9Wcf0TWAAtMHpHaJLuNmk+\r\nC5PgHQv7ZEGsoJi/ePE/kPUyzGejy/HYrW4=\r\n=1P1Z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.23043acd0.0","@material/tab":"14.0.0-canary.23043acd0.0","@material/base":"14.0.0-canary.23043acd0.0","@material/animation":"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/tab-scroller_14.0.0-canary.23043acd0.0_1646252900447_0.16549802039258465","host":"s3://npm-registry-packages"}},"14.0.0-canary.6505e61c5.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.6505e61c5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4446d5d62121ff9c77020418cbe66539bc347eed","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.6505e61c5.0.tgz","fileCount":51,"integrity":"sha512-hUXBsPJ6RMUpHn9WE+avmfIqBIl9l877NsFqi2z4KDiIN96jQ+19oRlRRIR0ViYIYo+Ood8uihqBdgkiOJ2X6A==","signatures":[{"sig":"MEUCIGVpuB/jYbrWCS2XLMvz1pEcf39jfAX2boSfz88SSzMsAiEAzjRc83Su8teiZOhE4+bLKz+8USo0eNotXJL70cwMe88=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328122,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiIR6mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHCA/9FzyEA31B5GF8x4ahcB6+gXK6PoGCy+zFf7prDRu3+0vpmFWG\r\nQ1OizELHPGi3lKb5mCtQo9+7FFrVJxtmhOaB6ZAUR/3m4Prgi1Me3T+P7B6e\r\nU7/2V60EfO0vUPkErbWDl0/ieXuqggee1X/X9cwxlRPUl/0fOfBkPDyUVMSf\r\nuyPQSoM92omv0xVOLm2d47NH6JV91hXrV+65ujW7qvi5PriUJbJ+XX8AbPIP\r\nK8GSBVtK3TTlg+K0omhMVPlZ3e5Pv/OfSKySdoV2RFIZ3KqRwdCCn8+JD+6Z\r\ngx2ywWgbeLWNyLtDeTAzlYeGE/fujMjb0yGh6Y7AmancmiuBhW6dzoRudl71\r\n6ewkitMcamHInfU1J4HWIqTKB5igBaxLN2vzPTUkV1lUKzOMgV1TCCTnmcno\r\nrdcAimAs/UToJkvp4C4evLJ3FoPiSbB2ynIu+sIg251OXaSWyK4FRLZ5Jtnm\r\n8yoeU3KkitBPlxCzzOXcNAwZcvvn3eDoE7VuBUuYEeg7cCumG0LHVGN8AqLe\r\nykRhpBH7j9dTLtr0gbce5wFG7csCeF2s+as0dLsrzvpHpfw3Y3z5EGCWGQQV\r\nViJvLsD6iWRv8nmh1ZnvJV9AnscErSu8+9fl3Wl17QS/KFVk4f+Cr5LpEpEf\r\nrsrSMQxxeo9h3341iFMYcmwOFUKcmoOR9fo=\r\n=AtGX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.6505e61c5.0","@material/tab":"14.0.0-canary.6505e61c5.0","@material/base":"14.0.0-canary.6505e61c5.0","@material/animation":"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/tab-scroller_14.0.0-canary.6505e61c5.0_1646337702654_0.8142850499324248","host":"s3://npm-registry-packages"}},"14.0.0-canary.16c166154.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.16c166154.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b3e6d9dda04fc4f8343c2934eeef67f730ead39","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.16c166154.0.tgz","fileCount":51,"integrity":"sha512-R+mWTWlP5bsd8pSenY3VOoqULS8HZ8GpxxhPPLCn1OCKi7RPHAqSfC9Od8mVPByXHML2ZYvr/27IdW6k/71mqw==","signatures":[{"sig":"MEYCIQDaVmThKdWgFEUUnEqy/Idn2hOAOhjx2vklRWJ3tbKjowIhANSJlis6EVmtUhcKBUdecleWWIfowj4pPEgwe85H80/r","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiJ+VlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+XA//a333NbmKFazX6ee2HeViK99dgSx+XABWnsD0wMkZ58uQIfhv\r\nCGnLel2pY63b0pGxKw5vGH/zJUPipHYKQP3CV3fFmmKy+SJOd18XzdEUjV0+\r\n82ZQEtL4/P1+YACOBBpe8N+/+i1YS7N2K7Zibuef79T+wEacFPKFDR3I+NjO\r\nKSfbIKavuyKGfN69EVt9MhuOr75hGVpiUEFdxi6W3mtmdPA5aja50loPzOLH\r\nFO8Oh2fJ+ydqZGLYjg5JEUdDVu+rFluVuqNdD5uTO4WnLz5xzjW0IiXp5umV\r\n1yO6VgcwhRsIn7abSK/FMRRKunAq9037QwwlDnW0m7eQ2pFshQcGryCvz85Z\r\nJYy174oakbZUtGQovIpRLOnjt+dmDmlQXJIni/DNdahDZebIb5nLKIE/gBZr\r\noyG7v3n0D/MlaybxHgmsIOFDN2exQ8nypgzOTRLt6e1i+i2lIwAhxOrtIjsg\r\nssawCEr6l0PZfw7HEWT8WbNAKHRbuHQZvJiDQG5K8S1M7rpm2EGlubzjJTbM\r\nC1bHlHIFuRMAqaI2GTusy7jjj2bVWzjeB/ztK+nEO0huUkntzeE36NWBoCup\r\nsRawr9Oc0EM4SVAZ8gADDv/HHYeI/HaGqDAlWM+GPIDE/BXyFiRcY1FVdaqZ\r\n5Qq2NpNC+UDkVHPP4GHhAHTeuQT0b0FHrac=\r\n=WLdG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.16c166154.0","@material/tab":"14.0.0-canary.16c166154.0","@material/base":"14.0.0-canary.16c166154.0","@material/animation":"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/tab-scroller_14.0.0-canary.16c166154.0_1646781796934_0.9568530670857318","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf1d3771.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.bdf1d3771.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b54645c61cf21d7abeb934869f4f9285015d1c40","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.bdf1d3771.0.tgz","fileCount":51,"integrity":"sha512-QeYWZzl7iwU+yU5Z2d9AffnjNx6ZX+kWAmkqv7jlGzyRNezApU9jFjHNYe4Zd7HdCNqHrIsUFhYzSFPqKydhkA==","signatures":[{"sig":"MEUCIF4rmw1VvM2yJKJip+syBmt9mm5AoKTL2u5wUvvKJjPcAiEAgeDglRDU6WpmuIKQevo1EulEGE1Jc8KVTewaKWhZPVY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL1FMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrObA/+IEMd3s6DS6/15yM7Wmk/uHbNjFiXkSjlaCadfcg1rWo6Xgqo\r\n7UCw/8epn01PJJdCIlPhnY+SPoyD4UwLVOd0Kf3yxzvc77E1j7PO0NnF5yZ/\r\nvBNhvu0jHmeFuxXChaQ47hptNBuYm7tbaeUsIrAimxcq5AF114KKRUxPPrUV\r\nCNDJnPU+P/V3pnOhDd3cZdmtjUNX9ikkAOgIEbHSftgxyMlVWvmaqTNzWNJt\r\nCKGx6GdtSy6ke7g0wO3rocNo835+D2sZhB5a4XndVeK6cdRZgTjmM39AMZh6\r\n2Sq5egx1wcDns2OXGN+egZ6/74hfepJFulOr2LDY78ggICYS0J7JQEjhjTBb\r\nTJcAgPpu5Iu1c1EZkDlTqiYOpFfZ+H3VP5fjkxIpoBqwMp0EYGUvz+9a3q9r\r\ns2GqveW4BQQFZT1F9ho0PKDO0+t9EeQOi05GTq5118RDkccY6HuwB6WeA9YE\r\nv5FWCtp333cryC/ud5egC6ZuyGg53EXII5R32vznQ1ARsRUvp1lzd1sAdLnb\r\nIeTE4u8FyAFjYQmeOx79Z/iGKy15FirnLH8rjq6MVcvRgF07kFeouUM+ItNb\r\nQ/GTLCOkt3z4hZrrEx41qqXU6gHD1D9cuXfL1TjtVJDZWcEtdDt6j2QxWa2Z\r\neR0bAXQxLB+5Zkl9ptMmJXCsi31GtpSnzO8=\r\n=wtkl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf1d3771.0","@material/tab":"14.0.0-canary.bdf1d3771.0","@material/base":"14.0.0-canary.bdf1d3771.0","@material/animation":"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/tab-scroller_14.0.0-canary.bdf1d3771.0_1647268171862_0.892251516258667","host":"s3://npm-registry-packages"}},"14.0.0-canary.cf4292778.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.cf4292778.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fa3780fd9815f3c2dd1e5363153df9f553049f27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.cf4292778.0.tgz","fileCount":51,"integrity":"sha512-tdqDGn0o1U2TPspHD0G4RzCoNrCYx9MpxEtwxbxLTutWdpSCnO4AX6XeVIngToGz/baNfm5VJwqxcDEoTJeGKw==","signatures":[{"sig":"MEYCIQCgwJ7HgmX8oEPzRNdI3dc+DrUCzvV8sd3MkU7zw9jfggIhANjEsbdwPvuSF3kg72lJLVMetmx9MWbcv8G2F0omi23u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328137,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiL94pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpP7hAAkwH/A+CBxUb6DhhwNUqEvHCIF3iKPhdHQm1rkZjDMB2A1+pb\r\nakFSo9G7Oxy95ld9myP4zv4AWDYQdHxdxFajcmpP4Tt5IEieBWcBnqf1gHzV\r\nLFL+8qJZUEp3+4apfP1bqZc2gtixgZeFLiFYBJYSiT2+FWzsYOwdK+1kI0Ur\r\nN5rzimHSmk+FYVc0h99VsWhkPKQ+F9dgQAHkr9TnEVKYn7oCBZWFDDIg0gbw\r\ngv9l8mnYEyYB+lsQ6K0wn4Z8icydeRKHM1Q4HaXe5uqJIZ3bcfx+Q/Tc7cAI\r\nkbFNONGrHVXlPE7teapNSmIaDJ4AOalHpmcB1LFayCg/Y0R51hyQB8Pz0VYR\r\nz2pId2YH7uxoC6SD7nqBr3wIFgYQJVuQftKskXT4iusYfINfANr+B96S+pd3\r\no/FPKlxwAcqV7HXIMaJLbwQ/+mliNZwdbnNax7sLi9snQUMrWnJELkzTwCVI\r\nGoPFcITGyknJt8jWQlRPfUMheqnV5rhdP6taX3FTemuubegGpwnd5v1N3CHl\r\n4OsUnaHivg3u/f6RKNZ77qy9XCqJeiOydTsOhAs0y+uG70Ei7G4X7Qv0q/Zh\r\nYbZN2iPSshaS6lnNGIo6xF28PxnIMFAYJCGC7YRYlGKvjywAfAYeG4KNuJVc\r\naqLNL8pLRE+m6F0dCftBZy8C7fdNu/Eter0=\r\n=5mbZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cf4292778.0","@material/tab":"14.0.0-canary.cf4292778.0","@material/base":"14.0.0-canary.cf4292778.0","@material/animation":"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/tab-scroller_14.0.0-canary.cf4292778.0_1647304233040_0.9457092539812748","host":"s3://npm-registry-packages"}},"14.0.0-canary.bbd43e0e0.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.bbd43e0e0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8625c00a2b6bf6d99d8cbed94b90148c9d5dcfaf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.bbd43e0e0.0.tgz","fileCount":51,"integrity":"sha512-z55D02+5ii4xD1+XICQU56Haw2IkjsavhRmHSjvTJ3nXtQxUq5w0TKSh05B9p8zlI/8Zpgh4F7GDbNk3gG+Tmw==","signatures":[{"sig":"MEYCIQD3+S/yDJm0ae7Kaf5ySAVEfodo+98yPyLhm+EW4C2P3QIhANqNsNbBGRdrRAoKdbegdEKR+quaQ4eT+DIPUKPw8gmm","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMk2zACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHzQ/9H57bZyewR2pKJLC2Nehg9+xKk998gSt8atrJBEWZyMrwT7TP\r\naZotkvTD19P8oCARm4LWGWyNIDqPDUVrsOim1WCJ6y7pbqljsyM06N6NYcMR\r\nH/R0VkpIcJd6V5+eKolXYBUnXlrzr6bEMpnqqHPUVIC0FLAgLu6jUVMbLYiF\r\nJoUuR2P9dQyJmzhUfZNoPPuTTbf2Pf5XjVWYqzYqcBiLXYNTo4XdkWEZKz/e\r\n+/crz20In617bWuZSZFq3wp6Yl41jLwMsvrtQ9TkRyc6pURzSHy1hsBOMWpx\r\nNyEai7Tfie66Kjr2WvyB1EbBwA/7qH1b9FPH7VZDpiioURSDNCxdLB8Or1nD\r\nw1dptrc77nIMXsF//hdk2CXAqeaHWm7BFFNlLDZEPp40/PbyPItiNhkAYZbP\r\nipSalc2dRAa926bZLzpZxxjuEALOSDCQRnLghU66V/Vbq0XvZ5gHajN2Ycew\r\nvriimM7c52UghyenMacY/C6CwijYQirTRwpjnsyhPX9w+mr/dDqK7tYDeJUN\r\nUsES6j4HplVretfBe0sWnVDDDXhU0DzMnpQOz2i1CSNmit2HtLb7IrLuacEX\r\nvbdgbQMT2FPtH9l7jXxxX1BK1e0emk4dTjaDtg3rf1FuZAS3vo1WbmifqkKi\r\no0EouOS4bydNC5IKfhsdhsioAwgnlrcghCk=\r\n=usKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bbd43e0e0.0","@material/tab":"14.0.0-canary.bbd43e0e0.0","@material/base":"14.0.0-canary.bbd43e0e0.0","@material/animation":"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/tab-scroller_14.0.0-canary.bbd43e0e0.0_1647463858897_0.1403728149188601","host":"s3://npm-registry-packages"}},"14.0.0-canary.1b6afad86.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.1b6afad86.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a8f072ac6d32aa4e7d6a94c553c823b0ac112bc9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.1b6afad86.0.tgz","fileCount":51,"integrity":"sha512-/i2TknknANSi4tbbfEUsnijL5l3EN86TCzmdAAzH/liaXEznzB98qgN5h1wVfM6daQkr++2UJwr/e4hUqyGXNA==","signatures":[{"sig":"MEUCIFTZ9nGHpuqDSmkJxIuPZCdcD/xdL7PcPsx55zQRehORAiEAioAtH2HiVnINNhfQPP4JrNMQVNT/uoiqSout67/Pofg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlDfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXFBAAkARLQeuAqI7HDsZ+PGT9D7imgUm35YDvAGm5C3LR/GwNtKSR\r\nS3lcSbLVb+nK1Pkx5FFOoRGT66xRpqO8n0YsyMzwPNu7JLEKu3LkIAExWYnz\r\n9M2TbmXII6wQtBPvXxsv/UuFwveDryOgOUXu0kLoWErXOZgl3zEgZMdlWZlt\r\no9jY/WnjA4xuJLG4m9BdY7PEKxv/DEtiZpCTulBj/sIV4c/o6FNqyhhmxpne\r\nVjv9GjejgROKkzfpcqJfhecxm1Nf6cAVPx7evHdVNthRIc8LQTFmjzX+zx60\r\nU3fmdZlHkFTU1yp54DZnZYsThl4UN1t2JBG9npFtodnP5oKh5oOY6DrCJirG\r\nj4YWqJ/uiIKAljlRD5tGyNwpx7tEYOBuADiYbBVRPCChDr/FvlwZCIExAOfb\r\nL1OE8ph2fIFWvac2KDY3IygINQuewBXWWy10LmNydwIyit9n5NnakrHE2/D8\r\n9EPxCtTTpee1QIizG3lVjsOJ8x7kpdmtgLqyQN+kkDXUQ+HFvs9jLFjor/5N\r\nTGPaq0SlnDnWKb9NmiQSwIa910xKB/X09+tE4wqnqpmuSHav9w+z3ieOc3Hs\r\nOGGjkRmBx+MlbGm6oErUADKtr8qN2Un8fJy2J/SzqEQYmCOC2ZKtxCgXiCE3\r\nVAIuMca+pe+vXpPTL1LPfKyZjVa+Lnqo4/E=\r\n=/vCh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.1b6afad86.0","@material/tab":"14.0.0-canary.1b6afad86.0","@material/base":"14.0.0-canary.1b6afad86.0","@material/animation":"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/tab-scroller_14.0.0-canary.1b6afad86.0_1647464671233_0.04027789646868096","host":"s3://npm-registry-packages"}},"14.0.0-canary.bdf9d4af9.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.bdf9d4af9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7f7bf9202c22bb1f13a71416e3c3aee62bf253c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.bdf9d4af9.0.tgz","fileCount":51,"integrity":"sha512-OLpYBtXrb732x6K/fhh6TecE3wfEtSqmZTlRfAbHX62/+Wfxpp4m5ut9MKRgZoyvL88uYeyF4qqIDQmAtQw3DQ==","signatures":[{"sig":"MEUCIQDn4X50D5WlY4ImT5QjzN/MYYuUuQXOeut9CMuAskQoKQIgerwAfiEjn9FbA0uboeeNlV08rpyfyrrQTs5I7IV+2+g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiMlQ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQoQ//TdWAflRQr88K3E6lk5qQ8EBYu1YXEYr5z9/kvsVSphFAZTuF\r\nFEdsPpXUY+kAl7RLI6GuyAWv0/xtQJfKqAbGtqlGBIFnNAtYi/cgkpA5fRgC\r\npG5CMh1rAiov3T8afdk0IlXOPjy2iLnyKnKGAV3sishI/6H5/0aN4TRX6DzC\r\nlVCg00go5iqs3N6LGg9xeud1/rVMmcLyRlutgKvbe8BFEZaVwuzkazXH5ji+\r\nmzahNBNQy6VdDwf4DEbPbg4KweT4o3Qmu2eyImZU8fgegW7r19+9zk5SfxAh\r\niWqLB3+gTem9iF4xvN1iGxa7wnDZQ0Yfa3YVJFG+xesH7Uz4+DFoxQcpxeqk\r\nZMmfLwTrSbhcOobrCctNbYI0pghHguMko7d9C3v5ssOMYKkYUdIwZNEB/JiZ\r\nmG8cSom6ivNZ0pntUOkAIXE5xAUeq8+3q9YvUWfnc14T8RYogmEh9A85AUYY\r\nRaPBvYZDsEeL8UNeCOpZ+aI+MGSC8IE6iA17NxDi1UhN6CJz5utRX/po5Fpf\r\nfAkbvEcX6+vyT5cBKJfvuVZteK9pOZDmObFzJNVp3nylTuBhrDsRzBus/Qfj\r\ng8hnFrHkaiTY9ePXW4izoE8OZ9oLw7rTRgFrPB3nyaajVczdUQ39NtrKQOR0\r\nQ1giDGS0kaNWiVoBVyFk4AAw6knpZvB1h0k=\r\n=vdnp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.bdf9d4af9.0","@material/tab":"14.0.0-canary.bdf9d4af9.0","@material/base":"14.0.0-canary.bdf9d4af9.0","@material/animation":"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/tab-scroller_14.0.0-canary.bdf9d4af9.0_1647465527476_0.4631972265273261","host":"s3://npm-registry-packages"}},"14.0.0-canary.32b391398.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.32b391398.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9cc0bcb6f3d511cb1e0869849fc0822f77039481","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.32b391398.0.tgz","fileCount":51,"integrity":"sha512-hoxXW0XPD2qUHad0KY26E6L4yo0o5ZBQ/Bxl4hjxoWBCUXmGKS1EOjeaIOm7c/iEiMV8NqtFz+LalkIX6FPPvg==","signatures":[{"sig":"MEYCIQCMhfP34s6MRhmJPbJHcHbjNrpNJLGGZhXG3RtklfpSsAIhAM3hVmDWdxYIqa2iVL93kiNkLGT2mwRdWlmGwuQ8WAso","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiM3cqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxwQ/+J1yHVL5GPGt4DdoYZHVyoruW+GxMGaTcJq0qWtSSTWgAcJuD\r\nkEgPd/6DDVvW9B8VBeBB5Z33KXZ9M46kK7+0fqLvzyyVSDmijFN2Z2XGR37r\r\n0HIFbCuakxFZSW61+xWz+ad6Xa2p1q/HKE/ACy2hrAnlbaYWZTDWF29Op4KJ\r\ng/n8rrtSx+GREZtgE/Spj2x4fM7yMuAy3Gh6NNaQlYof9/Ez9K5KEdPe8wya\r\nB8tkdYn7aGKUwYxHDxut0Y/cmbMIRtClj9fi1vWlRWv7m9tv13fd/ZWH1RAF\r\nsIVeweZYiR1bMsM8rXSx4Xj3hXr6xwBvbCV/1mDnGiroVQa4lIHJJ7Vfypdp\r\nxdDK/8qoyQ14i4aJSoI2dvX1i2boIXE8iFMpVkpnxK9jVGfEyWsEol/cbpL3\r\nqVxN2yvtg1b0UqPA5hQicjMWJ1AjcFVohCve3hhMzjqx3s84zcR8WnS3CVvx\r\nR/QllNTh4JdKGhASY0MO1mzjuiYJsqJg0GiDLgN4aNrUzkuIug1j2Y7WeUFt\r\nRT6WirUTZpMndU1KA2RJFcrg4mFDyZIxOQ9Ntelwaxy+zrH5TI84IfXbT9XD\r\nstXMBjiHsQU9o7TBPPlf9/EWDpBGEfotIGd/LGznAqUipaGlnvwKZNk8aM/a\r\nFlssCjcUko6q5b/ov6GusO+GOkm/tKX0f60=\r\n=fgRa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.32b391398.0","@material/tab":"14.0.0-canary.32b391398.0","@material/base":"14.0.0-canary.32b391398.0","@material/animation":"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/tab-scroller_14.0.0-canary.32b391398.0_1647540010539_0.9926834819348731","host":"s3://npm-registry-packages"}},"14.0.0-canary.ae8a6a3a3.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.ae8a6a3a3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"569bea938a0361b0cc77848de1052a372f66c513","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.ae8a6a3a3.0.tgz","fileCount":51,"integrity":"sha512-K1N7jjL06yXegR2+aEkfGexcnJ89ID5EcwxhCzaHEP0H7nRILWHDOkJLruAje51JOlFE5BkuV9OMwqc9Jq5/7g==","signatures":[{"sig":"MEYCIQDfNm+V6ZkPEqbl9DhV2FO0R2IhbOL1vKRelpRRBbsB2AIhAOqr3PiRtyX7qwEP9Ts6gNt3P+THimuhRTHmuLmT3ecT","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNLXrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjHQ/+NlKf1kNIMxrdFeX9ggWhuUqv7be9mi5qocUX8/VK2PpArUEq\r\nYYp+7G3FjYBkx1til+7Dhj4NeprI0Vtp0tEJRbH9YPnZaFdrclBeIW72DgfJ\r\nEIEU31bqT+dQ5eXEJcamF9Q26qGn6CG95jUqxFsnzS4n0Wlu9bBIWtHAOP8j\r\nKFZmeKb/w7VAeTKgPGvQ7qpga+3Ae/oB2quCAJwlEQCNMMrwxpVTf49g2whB\r\neNVcijXsLoWKUkxELZzcTdMN1FwI2u77hveZuwnhz1FdNiubdkczpaTXy5eL\r\nuuPL9xYM+PeYtu+ZkjVhak1TOsdd+z71yIaBlSMwhT6rKROzuD8tkKc9fAw0\r\nmKNNRZk06PJ7FuOJHW0GGjBhrGms4AQCpFMYMyIKYE1Zh/fVeFphGqnIE70W\r\nIUBZjxDjg7QEqVzM2hHuVLQJa6nXFZ/UfiIZadzvGy5NvzNadm4MptHE19zX\r\nbmPWnctErYAUCZdkXPFHSDKeYX5O17Aq6i8EK6E2EmyXI20SqMSm/qG3i50I\r\njqob7Bk1YYmuSWvrUXDcskKw30dDc0RBr1rxorfixgWHVhgFy4rZ6a3eFgVc\r\nYIKCs3MEjKP2MurVOuvzpq1iOZd7VOyN0xJMmXqmyruS7qcDnbaqyw09mE3r\r\nISq8+bi+HesiSbkpw4cs7vs1zkHzDQYZ/XQ=\r\n=zekx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.ae8a6a3a3.0","@material/tab":"14.0.0-canary.ae8a6a3a3.0","@material/base":"14.0.0-canary.ae8a6a3a3.0","@material/animation":"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/tab-scroller_14.0.0-canary.ae8a6a3a3.0_1647621611066_0.22568017669285867","host":"s3://npm-registry-packages"}},"14.0.0-canary.cbd9358a6.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.cbd9358a6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b3eacc8fe130ff0f515efbae2eb483d7727a3eac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.cbd9358a6.0.tgz","fileCount":51,"integrity":"sha512-FR3NjK0W+omPV23vZXC+cqjbuJpQ//Tzzy5lNauwj4xQ8ye+s0y4dZ7lyaUR7tWjNZbvvHecG9leNYBPOnkuDg==","signatures":[{"sig":"MEYCIQCDQ7432YOstsxyfhPOKrhvwo7gNzxzySr+HyBMlQO8vAIhAPVpK00swSAO6pmmIZejwu4PWc+pXYzwmUW8UeDiRK5a","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiNQ1NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrsLhAAoVH9+BWWx+aPtDX5u/P3svfHXIotkxWBJ2F4PGPtTt4l4CkR\r\nTw75Ad/6GrqHx9+t1GNQy7ojm0ZF98aYRnJKVWJeRYPz8/QvsduzY78/7Ji1\r\ndR71mQeTme4T6yZvZ4Ep2Bgwk1dsrekhkmAboLQ9hY4JkAggruJpmi+EvrCA\r\nsMZeSgs4aFJTzNk6cWYu3QnpR6UCBfN+Qr6PuuoL6P1yTj+SoRUNRz14AqtF\r\nGraQ1h2ud21FE7ZWBCkmWY4CItqCeOCAi7wKWm7JtF98Eq8J0eVqkItbXDGT\r\nIX8Ce+gzwhFNwPIJnWSrYAQLz+st9ysyPiPINO/qxDinklE8AEHb99iAjYvJ\r\nRLSSy35zlFS47vcR+I0iIWaBQTefw/TxMT7GQTqu7ojG2TZPNHyYo3Odw9As\r\nqt4N02S8R8fQFTf7n4ktM75x6okLbRhDil/qF9VS04TMhF9uCLivrmnAkPab\r\n3ZiOliEqQ52XW+w2oJMl+T3Vht+k+2LtQ6QE/yUtM4lSAG9Niv+enFXWNqIS\r\nvYiSIgLl2JQdpiWIuo7gLi+JdCBEGzehKjothxtZtRJhaLTtRnxuQ3cvm9VX\r\nnuYeig0OGMlbtixDVA3uHGnUcPJN2N8FnkAQU7RdoW/NmoMKcAOrWYj+51wv\r\nfUkKGqRVHR2GpTwe+yd+Q2CdNHSRurY+p/M=\r\n=Hpsf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.cbd9358a6.0","@material/tab":"14.0.0-canary.cbd9358a6.0","@material/base":"14.0.0-canary.cbd9358a6.0","@material/animation":"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/tab-scroller_14.0.0-canary.cbd9358a6.0_1647643981756_0.6699627408088937","host":"s3://npm-registry-packages"}},"14.0.0-canary.dcfe49c98.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.dcfe49c98.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3906eee521172fbc34379bb50e362568380705a5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.dcfe49c98.0.tgz","fileCount":51,"integrity":"sha512-AGDHBDBBPfD99HSGvIvg0Aw8xKPVvfppRnPkG2CN7NWO9AeV700t9uSS98nnb391D+8Bo4t847VRJF4g41bEVQ==","signatures":[{"sig":"MEUCIB/N/Sav9BwX/aBRpQiTN9D5Z3V1WYQiaYgpm/SJQixLAiEAh9m0Kv947CY7Ndy+IwwJPI2CoiNBR6mCLMyrvTcpZJY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOMeuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrFzQ/7B3p6RP4ZiXmNe2SbbZFjIjeTdsAggT/UL6xFSWxSVgHtQHyV\r\neM3LEUK0HInijhwrO9ff6Ny0eaeXtbQd4cpajXHkA1QS+sYjRym2z5m0uUX3\r\ncBdzUpSf3GjikbKafR7P2o8O2KQvQqWibSHXFG1plUrd/jgjQZStkOS9RtDX\r\nb+fHb1iYbv+gXFZM70kpYQtjQ42K9epn0xRY5XINQfF3llQ53Lq7tLTcCIbE\r\nzWsKWGzxHU2PNMo2cCs0pT6wfZb0bZOOOGQiUJd0LoY3eR8SuFKyjT7LRDAH\r\n3Xwm7bQMswNpEsd5Bi90WptS/5vN6TrzaoOqFVN8MP1bu+Loo67IYNEENhXm\r\npqzMvrIQ4Pd2aGDPr79OTiDenuJPA0IYwlGHWo87QgNLb/r37BJuxh8jQzDw\r\ncEmVjM4aOXSWiiTEuj/3cA6ZKqIecfU/DwushRNvBelhRC47a3/nPTBerkO3\r\nOoAsxRCMbUs0JGqyi7jI1DTZGPlaGxfI/E8BhePm0Fhez5XNI6Bp+jD781we\r\nc7++z8Ox0/vS9hgvcSbvfnAPrGrIHLjVDAJoVzBTHOB8O+MfN91Bho3J1bVE\r\nso9eKRwh2T9PjOPJpAUfefWwWVj2Mk0Q/cC1kjNr4IqxMU5bdkHpcvuhLgvG\r\nIUeru55NHV2NijnXrfP9lDd5VPoDxNbJ4jg=\r\n=nXod\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.dcfe49c98.0","@material/tab":"14.0.0-canary.dcfe49c98.0","@material/base":"14.0.0-canary.dcfe49c98.0","@material/animation":"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/tab-scroller_14.0.0-canary.dcfe49c98.0_1647888302068_0.7271421508565616","host":"s3://npm-registry-packages"}},"14.0.0-canary.f31a833fa.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.f31a833fa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1381b3158e267594361f4d321c1277eeb59764f2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.f31a833fa.0.tgz","fileCount":51,"integrity":"sha512-t1i4+c8kX2p3AMWfIRRmIKpVf9T+XQ8EGRiKhQc/i1pecjgPu4J9UTHGMUuXOry0KihBh9N6+f4mJaBFoPEYnw==","signatures":[{"sig":"MEUCIEqA8gvI1riDbtk3b/jZ+UdgH7ISb2Y+lJPJ39V9Ld61AiEAsx28Ynycc7Nh0S2SCLAvrh4Nwp9zmaNGfs2LPZZvPic=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiOm8eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1Dg//Y/p3KBkITDVynBNzeRAMST3pRKTujff1kGkztqmltv4EIZo5\r\nnrV06JOSQoxH57UqnwL6RTPrP2R74DizGX6hl+K7GE3SzqH7O9nn83XDZUXB\r\nnmhPsEH5dt+UIGXSwaDJ7hoAnfAl6Xm2iOnawTa1K40Ufh/82W2q6M9sBfHF\r\nkJFk6NcygX3a+Du436GBToIINos4Fxn7YBD33WuoCW3u4g6ZJHO83YoHVZOS\r\nabd7f5kU2hs1/+znzR51GEiwqjZMihV1lONA3Zwl4QrbV6c1MJnSS84K0TBd\r\nsxEaG5B9qkLihl92yX3WgijG8UV/Oz2PZJ/gtLe/COG/Y4xN9sVayp3Cjuub\r\nm5YgJohscwTvv1ESpVJrNpguUeFM0/wcD95dDrB1qj1IoQdl39GyNEwJcbHp\r\nhJ3lHnS7WMMT/FqgVvwhqzpsmKnnTrNKIGw7kjnzFvuu0auzDZtcarKTYPCU\r\noBHsyXTZy2Du9XTyUtUdqBbHKyaErYMIpbt++QgZOgAkUXIh4VzPqCOpmrBT\r\nInhheKyyPMtAzBCuaFTg/fXtAlfQFab/fxxOoFMu++9Z35doDIuKAqHHgXU3\r\nMtwhGTHBxC3Q//mjRGAkrICEF49VgS+tdtmjgdSlRFhsN1gTHKRZUBisR336\r\n7CcGWFCwpAwje3oRb0qb3DAV2dqJGmt4QoI=\r\n=tWDS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.f31a833fa.0","@material/tab":"14.0.0-canary.f31a833fa.0","@material/base":"14.0.0-canary.f31a833fa.0","@material/animation":"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/tab-scroller_14.0.0-canary.f31a833fa.0_1647996702049_0.6252113894125897","host":"s3://npm-registry-packages"}},"14.0.0-canary.4b92e210a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.4b92e210a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e55c01e1259bb44647634784e22f40f5ad0acd3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.4b92e210a.0.tgz","fileCount":51,"integrity":"sha512-1KxI0yngaKIUpBl5HIWsc9JwLuZ9O9LCfAP6Ge9BV5J/rnrUI4rSOTOE2IZ+A+SXgYQkBw5TUzpy5K7NBfbd3g==","signatures":[{"sig":"MEUCIQCaSsoJHzFmz2r612wvK6YibEnHUjrsqMI5bCSkJnUHgAIgUFYfzNq8qKOKqSVe0MWha5REuhEiyaCm6k5AoYXEGQg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNJQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfCA/+OaBs+UwjpHhbazh7jUDxpLqg01AoQOQvqZpXLgt8kDhyGaKY\r\n+E6Ka+woHGTdyoCE3uri892HCXNQhL0E4s7TMpvnte9QJ//BUwC+Lf/WrDR9\r\nnJ5shXr2DKMqIpHXy9vLYkxq3+jDTX+CwoiPUL+18ocWohRlim05MzINb73n\r\nl7ANxaPaPLMug3vKSRSIAohfGF8d763mUghdCokn0wVC7omeT26Pp2xeSHWJ\r\nAx6ls9F4+euDN0SBbkBDe+13LsHc5rI99ZgVdsrF2tyXga6BSjJiT5Pp5O4B\r\n1qk8wryLTsngtIg4VBf/aSxUM3qaxPFSP/XGA4WSNBMXOgCho6cjtshnl+pz\r\n5zpCBvUH8p3qwHveOoknPOT6hvsKJSjF2phbSqHETHgVX9LK62WsDRWswPqI\r\niRRBXEu8dnZEXlTNK2+eVsPiDpOL6W5KGIIw9LN4R9R52lI0iUSyurJwEyzc\r\num0FJY5j5lOgovCy+IVyYf9XZFVjnEWbydYzE/KjVG8AbScCu6TetYec2XAR\r\nmXFith7Ofg/WMtbbEauvFIA7mZ3z87ow4WpDQ1+x/UlOscbGfiAUI7MvufLo\r\n11z/8Y6RFi+piUfL7ySLywsBb603M2iVu3Zy8b8QW3k8UVYW0lpjoqNCsWi9\r\nO65762QzuZzgxzc5S1tG2YVb7NMkpcdjQLM=\r\n=f+eg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4b92e210a.0","@material/tab":"14.0.0-canary.4b92e210a.0","@material/base":"14.0.0-canary.4b92e210a.0","@material/animation":"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/tab-scroller_14.0.0-canary.4b92e210a.0_1648153168717_0.10306756349146995","host":"s3://npm-registry-packages"}},"14.0.0-canary.a657abb61.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.a657abb61.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"28cb2b92a3ee6103cebf58f4b3ccf8ae5937ce82","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.a657abb61.0.tgz","fileCount":51,"integrity":"sha512-BKyUhBAWLw2d+L3yZMyIKHeZX+0lvx+2fLJ1aND6iX9AluLPAv52G+DNWteUSFq0kRSnS2Vwh86zuZkqW86VoQ==","signatures":[{"sig":"MEYCIQDh5sLFVGLLHBvyIIHIQd+x+RAE6OwtV8jQhxAG6l1OhQIhAOQGv/tHYn2LtPlWLLv8DoklMsYQzMmeZoIcEW5wmuP+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPNdWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpztA//dhLhkw7zWh0OmBgSnd4zzD56zcoxw+BbtIrXjPAhUmn1XLHB\r\nEo2azwlg/XGEl090wncrRKsyDkHo+As6hYhFT2BvccbV3vGhG+GgWgW3YGV9\r\nLo4pJdzHw1lxSdbkn5UmUBASp1IgEhoUuyTLtxEQXoANZAfw3o3MaJwpms6R\r\nCrKcbVVShlAPDNLv3vdJ5cMy5WjVYl5IjVi88w1fuL02aTyJXyMc69XVVprD\r\nxPpyPJz0SQorzrV3XkjMV5tt0bxICzqP/KmRHSRl3Q4H3i0bNhSrAiFR3ojM\r\nJIB0kdkvwBEJNc1IL70Z5/H9qjwLYk2jeMOl9jtyUismUheHHS+IYacf6MBN\r\nc4dA7AX0mhOePGQcBfWi2GSdBgJ9KEl02050n9X4hXZKLOZe13t//GE9rsdi\r\nseel1C6wjtAZvCgJRuvZB6+BOphRoCdsA8G/JgCOyuCrwfYBV73bx3o6IGS0\r\nzp25VS+LcD3IColsN0ecNZjfYNxwAB/6tREWtfOCDn5f7x7LT7lD++rNmd42\r\nw+k5MZ2G7q8tihFv4gD4mqhPXeHWMJKQJumttAcZXNj9gCPNwO3beK9vbDOt\r\n08qyszw5aXZM8Pq1QogvJ5iBlzkhleE42KApInbBKJQ6QkBcg97bS2PHNvb9\r\nnduhyArOwS/qvWrhh+nrkcv7m1rNrfbx0Xw=\r\n=yLVv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.a657abb61.0","@material/tab":"14.0.0-canary.a657abb61.0","@material/base":"14.0.0-canary.a657abb61.0","@material/animation":"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/tab-scroller_14.0.0-canary.a657abb61.0_1648154453883_0.9035916901578769","host":"s3://npm-registry-packages"}},"14.0.0-canary.443f63f50.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.443f63f50.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"65c147cc5d690a21fea200e5a65dbfc2a926f8d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.443f63f50.0.tgz","fileCount":51,"integrity":"sha512-+mhvLRSmkQWZTi0qSNSGiO4e0rrsMBdx2o8y6993hu5xNNKDan34w5WRNmFkZf7jWz4ofKNcZvE+NPZWaA30kA==","signatures":[{"sig":"MEYCIQDqEliujIwmb4XM8ChYIQfcrlE6ok54GTPbGvGMQSUU7AIhANXUzl+VNe3GGPluBGMx6ioTyORECDRfX5eH2rKKyzNO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiPkq7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoOtw//Xf0N9M5b+CNJDOLW81678PmEw2me2EK+gjwTHuf740F2w2/A\r\nzU70HnQpSsm2Z2zdbCJ08hhwYc7ZEGjjp2RvyIl5tovh7qEJoa9Qb1Rd1jbv\r\nazCbXD3lRjHBSkj2rCcp5rEhx6a5LMjzBHE8y0/8PxjhB99YeCIgk0aEmDyG\r\nM9TCWR9JjlC706cvkEUkciLy0ln81WjGvhS0Wm4Q4+xp2RP4DfoUkymxR50Z\r\nafbDzaFyM1rw6dnWXf1OODjigixaUKX1/VTVE4FHFv0pnW6RW0EFQn4S6pdQ\r\n2jhdFK64Iw+Zj7UAFOhgNnqxYiFKf9ab33t3GiTCDrcIllav2+b7GzKuohXJ\r\nXq+sAjh3zUCuXWvKeN76WHzu80WB3IyooLAps6Wg3uv4N/sHQR/U+AwbFEgb\r\nK9IlLlRr7tge3jM+ARoMCksp1WxCUCccfEowEcCXZkve+C/8ytmcZViVWmQl\r\nSwM7gm/KhvoW1PH24j58UOGXkXHxUOSeHN1FfVnMuGUO200eyuAoGhuZ+1GL\r\nV9ZP2pXE5bQF4f7c+T8nQCyhR28BYM9gOJmD1vEY1IvDhvTzR/q/yxijWXQ7\r\nt7394uGmKdb2fmMLPvWG7PQpgsMwk7gD/0XUTZgOK9PON4sr5cDU2USH5DTg\r\nzsM0t9p9uEtltv/6ieU/fwHgGEEq1/niDD8=\r\n=PAjn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.443f63f50.0","@material/tab":"14.0.0-canary.443f63f50.0","@material/base":"14.0.0-canary.443f63f50.0","@material/animation":"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/tab-scroller_14.0.0-canary.443f63f50.0_1648249530943_0.7579749065021724","host":"s3://npm-registry-packages"}},"14.0.0-canary.eb382f318.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.eb382f318.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3fec828102199239a172b77f039b1f569de73500","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.eb382f318.0.tgz","fileCount":51,"integrity":"sha512-pJ/1ApYXNTZXTl2MCVfBDFm28olDwJveiX91wQjD7M/R03d4EaAG4hMFIXTVftiLKa/uyPK3QSdkHsYwszMF4A==","signatures":[{"sig":"MEYCIQCfAS4HIPXQ6SMJCV6wCDjqxrZtoe6Cbrol8JT/1HmPhwIhANUmT/m73Z3XnO2qNFkDNdsI8R3d42cixtk+SgEXzAOt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ0N5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrs7Q//QB9LDBWliv6D+Oq/rtAmo/X5jYeEgs96T2sng7moOXFy+LxO\r\nFtu8cWLilQs1IDk6kavRudD2+NkualPO+qQXF87f3QtE4j+IPUsfnCLU7lmp\r\nvkQpiElTDyaNEoeudFf6XQWCgWY8bjkZjM7upDMTcf4ZpmcxWDdY43ruNayo\r\nI1PZL5o8+Kbs3mRg7q2FzsWl23TCZGqWxkSgkY4Lar4at1eNYJsH3fX9cmdf\r\nGu1EH3VNmgPTDgGTgA1hm27fiMtwH4fO72oR1eT9roRPoYsKSbpoeEj7OtAx\r\n6VtTCD4JoxsksECoHW6UQFq/GymUUXxMASomh9UO0fH2dSyTMYxXkU0eF3pz\r\nOpWfDQ9g/LS6r7KeZtRkoNg7nOeULyAqyxxoGQCZSBiLLDZIPyhCx7wtcv+e\r\n8gjamfi+nzypAJx2EILEiKhPDZZnQkGGpvgeFU43GNhoFk1DZIbNg5eUcN3c\r\nfsc0iAgB9Z88MuuJW1dkayv2n8XkloRjCLriuJhCAOzWxbTcWpc462Bsk94Q\r\nwR8yUjPdzZBohegbnY/1D/jRhF+0tCBEJO9Wy0SdvA99CjUblN5dfultqOkO\r\nHov2e2zvUjIwvDQeXAwrDBvbb45mJTNZsl7oOCtXJnZntFyQJ304N3QH7kW+\r\nHoE475U5gClvsAYNDSla8t5TJkdYfQTtgck=\r\n=l0As\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.eb382f318.0","@material/tab":"14.0.0-canary.eb382f318.0","@material/base":"14.0.0-canary.eb382f318.0","@material/animation":"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/tab-scroller_14.0.0-canary.eb382f318.0_1648575353795_0.06302676041387412","host":"s3://npm-registry-packages"}},"14.0.0-canary.344d52823.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.344d52823.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d77cbb81965ca4acce0ede0bb9b66e1d66e49ab8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.344d52823.0.tgz","fileCount":51,"integrity":"sha512-nTmkvGLf8395hHk0/l9ymlMNM5ZRyXRWhvQKwuCZPrjky8qw/1K6g4xr79ngDzzeLh4dtR3fljETJB9OFaVcyw==","signatures":[{"sig":"MEQCIFQe0R7mE6CJX+sG0GnzPGl7xqmIxM/aSNLQi1lnZkS7AiArZ2XZ4tHj7wsgOof8VhHsmNuPMxrFhTyNy5lK9oL4jw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiQ1N+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJURAAkxIkeDL/EUj/wLHOl/KGpxjZJ4+9gBdfa9eKei7zbu3l8g1H\r\nmQDFYTmIVIIGg1JAS0/jX5N8bivf/Llt/Rk99ggAuKaN/r82Ynb/U2dPHeP4\r\nVUWA0fblMgJTV+zwprh4HXjLfowvVwUG6m5kp0lXyX5nYUiMCjGA/N22EPLM\r\nVN8aCM38DQCsBfRbGSVU6fFUS4+GoCIoHv257hWrV5hxnG2e8dwPKUDbZ9h+\r\nTcRsiREz3ZZo2HRdfMkSeaRe+9IFMCKgWEaXX7prc0tkMZEH3h1MXqWccc7W\r\no5uMuxJ3TjrQ/gG/nSHJ/6jXlMA98USBFOXvvb6wokCCBuMu/LU3E5IfWTwJ\r\nXH5t/yWdxe/r6bweSxV2iR6Dg+p0hFFA5PVvZ6nB4xgN89EqyGIPbOzSQXzH\r\n5mqM6Xsbx0+qqGIczTW1gF5i1LRb7Fdw54ZsynHKJ+wl2bYj8wN6On5WMtxh\r\nwWtCH7UPePr7eg+OTIUgCZWlceGMAFUalSjj4a3U0uNz3TvnlO4Y/iiCCVk9\r\nD8UB0ZDXXHhZ/nQxDCawDxVdXJz5MKbplmPy0uBdC8GTvzJ48FzefZoYbO6S\r\n8XIJIyUw28bXsbB9uGSlnWtV0tAFP7non/1SxQUcGDNpprS0bWVeFkOiV7dO\r\nWvbIiJUEVGMfR6v4xz6zOlWmt4deDl6nDnU=\r\n=EFJ3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.0","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.344d52823.0","@material/tab":"14.0.0-canary.344d52823.0","@material/base":"14.0.0-canary.344d52823.0","@material/animation":"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/tab-scroller_14.0.0-canary.344d52823.0_1648579454286_0.710500712978803","host":"s3://npm-registry-packages"}},"14.0.0-canary.4e372fb49.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.4e372fb49.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"98e488b84c76272bd6398b4dbd6b0cc04b8214f8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.4e372fb49.0.tgz","fileCount":51,"integrity":"sha512-SPNThL+BUPzSUURzmIJHO90FQaHrVOL0ciHPOxNMi3D9Rf3MagBhNflvqbAa9r08Y9bLZgyoiVVWz/ZA4hrV6Q==","signatures":[{"sig":"MEYCIQDAaPf4Pc0+DCbEt0rr/nU8F8VGDXAxsXGRnqWeD2I+BQIhAMoy4+TqPsVDQ/W+L1tJmU+jYzReFF4gXIFLZUwY7RRA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiT0qyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSyA/+JSixVB4PTTgoNbValIlcR8BDJBmnwlPD7SpV+AVnOwmjKd3Y\r\nmgAFLiyVnlHNC2Yp51pRGts9Pyipl3Xs96l90fQBdRn3uhXIoVza8GucVxFp\r\nK0uFoeLjx9uDdaIaJJWnjB5Ht6sC5IiyGOXr6c7XDBvrJnAOcnVXI21edVWn\r\nFrsGgG+ZeBwhYpf0eKNBqtDWHw04VbmXzcuMX0s6xtS/TdUBPhsU4vTn1+BT\r\n367wyjjxo6zRgViKR478Ime26jUpjdDU3wqJDKfvN/QFO2l46T1Cq39PkIS9\r\nkTLwsUR7PeJQe2GUbygEYZWJxxcUfvd8oBtPiO7ttFf1HD+/qbvNXekapLnP\r\nU9Qk5A+Qs+5QA5ILnlmgQdDFBaoMKd3GjlODbMNc0fmNsulViIo0iUUbXivT\r\ntVv2qGsfw82NGtmrdV6Wb0lu/H/0GCGeG1ZGbVfeXgUmTqj6EC8VdosrvWCL\r\nT75d1nC9XRN6+3uCq206j8umnyf+K0irJ8C7MIbJxY+jZ7YzB9JppghQWi3d\r\nakn5KYbIMIoFtRiILi5ykpnyNSE1CFYQyNfM9AKACy+0nKBuXgXN5dwOf6Vy\r\nY2lGji6j2j9Rwk4OHamI2lp4LaeZWKvcu2hZokTY7oe/7VHDOolD6hHfEc6X\r\n3I2fE76Z8NzvY7qYSZJHwW0PbKWUYRL62cA=\r\n=6yhu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.4e372fb49.0","@material/tab":"14.0.0-canary.4e372fb49.0","@material/base":"14.0.0-canary.4e372fb49.0","@material/animation":"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/tab-scroller_14.0.0-canary.4e372fb49.0_1649363634027_0.5375862452439577","host":"s3://npm-registry-packages"}},"14.0.0-canary.3e30054fb.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3e30054fb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63f76203d5acc91a7058c74f847bef6ebabd7156","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3e30054fb.0.tgz","fileCount":51,"integrity":"sha512-CTyrxt86yPlA/7OhXPQ+EwHdi39m9fHI1Dm99U58oEIJcIB+wefvNy5ThrKZXYeSK7qS3FR0toHrJcyCrIsJug==","signatures":[{"sig":"MEYCIQD3kmaHvrHmrbXbsFvuUG/sW71C6eYfz2RkgG8Sz3onBgIhAPInd1lc193nxyZMec7n7CbAvVpvyTlwGScrCzWksZij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiV0twACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCvQ/+O/qjKKp5yUywLf03yePFp741ahmVLai83luqwjScymnIJEP1\r\n+F/Ej1Gp7uJyIh/9o8jzOIvtTuilUQFDRbpSDbdweu9/WmLaK1uSCLnU/ZyH\r\ntknxvThEi/MIqiHo3XssZfXu2amd/2fqBmzlo/rKmTZpmy6X5xKS06fFpob6\r\nl6CfxtcKiVSFnoQnysV59PJujH9Ffkl1Q3ewXsdKKqAfCdfcthysxFwsUopp\r\nyARv5zW2PiQ70fgbA5E8kReHz3Ke6wJKG8YMHKVEc937d9/pZRVdkfJjMe6m\r\nCG6BnJw41vOb7EWwCw/eczr3atkouqsS8QfFM4RPvENXix2+rICd0UiHo+rz\r\nvt5rHtdq+awaoJoJlOVv1y2+DkxBY/h3brmXG8N2q358q4gMFHBh6W7vLBWT\r\nFKaXXd4MGpzJmDJ5DnjcQ4MEtLoG+Z7WY8igNlk9zhwePfOrKAJN55+Wc0wf\r\nF08D7C5iN7gybhFCoqfm46m6jT+NkdA3Aj6v8BiQNuxbbQlMg7nCVB+iPS5F\r\nZfGjW/qqmDZUArZQCU+mwSYN7LJ2tmgT62+k+wDxfvCN86HO0cFKN0qshZSI\r\ndUdPGHr/93aYXlu3/Sn3eGAZW8lRdCIHRl99PWEe0IydlaFfwGOQ1K8ccK46\r\nDqGixluqw+9OD6/d9PpmsX250Zu9pIWe4lk=\r\n=pEmZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3e30054fb.0","@material/tab":"14.0.0-canary.3e30054fb.0","@material/base":"14.0.0-canary.3e30054fb.0","@material/animation":"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/tab-scroller_14.0.0-canary.3e30054fb.0_1649888112571_0.18667823509383563","host":"s3://npm-registry-packages"}},"14.0.0-canary.8c4da223a.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.8c4da223a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"07b93a17ee11fc17c5f5971513093cb9f0511a50","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.8c4da223a.0.tgz","fileCount":51,"integrity":"sha512-tz1RNnfEg9EFYyb8lDgVqpoDC25LiCPEovTNczPeP+ggRpQgieUOcWUqrQpJOrtNq5r6CXOIa+eEPbxXytPOWg==","signatures":[{"sig":"MEYCIQDjzDbiFAP8cXp8kQ+pYruk32FSPbXOC9CHhpYc4iZpmgIhAMAtQjrl1J8zLIrYYoG/yDch4tTeksJubV/OYK6maa+E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXtRWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf2w/9Ef3H07zv6RmccoSSnTlcjTKabctFl1WNCDSgax+dUPqGGIy0\r\nAwFNAS2R2QZfzuF4ncTLvFQFqVeEzUAxzspdk7QqMenWVvGr4FqG6vexDL4c\r\na4bWB6e49nUwMR0hA8aoWPDye95SAwje1hexShxJwB3BQ411+Q4ZuGSs+OJf\r\npFBx/ecYJULtR16sGlVXhb2CjJbjQPTT7ImXbls4cYwRn89OiAJ2JTT/R6cY\r\nlWLgh4dtDwxrPNky/YCctsRwOKG16/WqeL2ADAK22zy5nOUyZFj3mpKJFECp\r\nrtlz2DJVHBpSOHNxrjaP3OG7cNDqU27oHW8jAptr55Q63L6/Y0dh5SajFgVK\r\nA0PURxjl4F6hyHkGdayuHH4lSZVPxQ/IQLLiEL0IFqAsco3T0hwMfj3VDUve\r\n/AVGv+uEb1MR99oLcKLdkluxtyH4KWak4XMoj2chCDTlG2CaReEHcNCu/eue\r\ndp75Gm3PS1SXFv1mu+t73DFFl1DvtCnx9VVX4HZkMTdV01qGR2IHTrXNp0bB\r\nAMUH00+tzYJJkRTHETF7abB3yky5tfWqQHk+LLFyaNmQd5P9g8SdOx7riuN4\r\nwPiTiRGPS5JsZbpHtLyhFN3Egm+e2l9Cphcv6+JsV1sDPtsVcrt5FSU05/bD\r\n7OraIZ1rySc05x8tvWRmyCYukEWPO0NCAJg=\r\n=+2Af\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.8c4da223a.0","@material/tab":"14.0.0-canary.8c4da223a.0","@material/base":"14.0.0-canary.8c4da223a.0","@material/animation":"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/tab-scroller_14.0.0-canary.8c4da223a.0_1650381909964_0.31240351349721096","host":"s3://npm-registry-packages"}},"14.0.0-canary.7de8965cc.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.7de8965cc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8def3d5167769ef611a844bdfe5dce712b5b9305","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.7de8965cc.0.tgz","fileCount":51,"integrity":"sha512-VxBhi82FSObMlFOvQs4A4HcJRIZstdV+VyWdSuZXvmf6hK03afxVcuIS31+MhAnvCUQFjFZhEGxsm6rKxmkdpA==","signatures":[{"sig":"MEQCIBB5U/HB15beclSNrEov+CpeuN83G6XpaUBssXjSzWT0AiAk1X5XrtQLL9iZtzHqTG4MGL7uX75iew1SSmHvr1GdjA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiXxpyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZZQ//YPyAsxROIupCnishZr37HchfWjb1aVBd8GafmoW/Og8nrB/W\r\npEYBORvfpPtZeDZb0+3616YuPod+G8zC/0LzU5n++srtqkdujyoEkQlMLiN8\r\nMn1rqD10U29tb/iy/rSA4Y9efVaKTqvfbCpPDMe7nldoglb4h3ah/Nwacm2S\r\nwsnAL3wszn91xlpA1T+lSf/QqBCQQMYEVgDpq/kYRs2vW5u0QWHCtn/7sPA5\r\nC69yQswDu0BagvUCGShuG8IFeP9A4mo3KKhwC/pgcnoy+Ew5fJMAabooDWRu\r\nvZAt19v/89Hc31NiqKypMXmBUdMwe54fY5kyXwvI2RKNNZuavIEi7VBDSc3w\r\nGeY+ZGorP7IMs1PSvoI9SvBop4pTIQYN0uGcIT3aM16xx8HDqLAh0RKO+M7+\r\nD6WOJ+4GCe1SDa5eNL0T2GKtNOCKXOzRQDQFdEDXMG4LWTfmAEXi6ixLTIQC\r\najlVavuUan06jKkiyFJn6zxpJ83cno4/6ZLBWCSfV1neZfsAQ1nhXo6IfPoB\r\nVbV8+PhUClXV/7NkGJ09X5UMR7YzMPO+q6wPL8iVE7sXp/5b0ZFku9Eh22jI\r\nGubaOv6sc+aaaUwIDZl1rDJ24rTNwezdVFBoza2rCLZeCFpQKITpe2BM0vy4\r\nK/CwNkpxsNUaU2xxuCVpVLCcjfswZVELdXc=\r\n=lTa/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7de8965cc.0","@material/tab":"14.0.0-canary.7de8965cc.0","@material/base":"14.0.0-canary.7de8965cc.0","@material/animation":"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/tab-scroller_14.0.0-canary.7de8965cc.0_1650399857984_0.7077309622068855","host":"s3://npm-registry-packages"}},"14.0.0-canary.641ed0851.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.641ed0851.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"62c4722d5f9576fa40739c8a57636c7807a67b55","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.641ed0851.0.tgz","fileCount":51,"integrity":"sha512-ZO+eTMMOS6YNOeKBZDqmE9OXrPDi8ztqi5DnBrYdJZ2GiIvHbbn6He0CnzSjOGip3bxZ7Xz+UYKuPoSax8t0Ew==","signatures":[{"sig":"MEUCIB0rxCO8mVYZtuCB/eHJmIKbTVqH1tHh1M0yKcb+5Kl4AiEAjkv6NXRysHu3m+IuAAV9/Qy1mjegiJrzOWK0mO3WCp4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYC+RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcDA/+IBoWqwSOaUSkoTTIxkL4guL1QaAR28/4aQpybVjPLfQCDKn/\r\npwJRtpuUgJuOUwDTOPvALZY1AzTJm2/DJt793HMOMEqsZ7QXBGD7xLDDY5fc\r\n++zeZByqaBy0JxIcA6CItZ8Y5mU8z7LIZynPzXBlRVWjWDIoiUbExVQq2LDc\r\n8RxBPmhZUwdH+hz8Cz+MZi9lxEb7HTiF/7dyVsKgzuywi3Eo2dF0Xvgf+crn\r\npDe5HWUw8gMO85LWSjGIRMJ0yL9B9C2KUzMJVE5viLQZVGcXxT+fFdM74LSD\r\nFvca0xRZpeKR53JWOGfpyvZvDLVn341OHE1ejGg7ZFZJu3l3hulfi6Hoj/EV\r\nAx++/okOYYdxHw131kKPu0rtwc1O8kfY1Iqf25F1RXYc1bs6l5c2FERCPf4e\r\nFHgXrEmX9H6a7CxBr/nJGMJzbX/kPyRPLWh+gycr5+j/1jOZnnJ+/Axnh5cA\r\nsBnwIbXsVe0mDcE1S6PvJgzd86F5gfs9J62v/0EsjBoz3lmxCCeWPCVR9WuH\r\nOG/H8HG75TNs9okUpkZgMCIj6IcJbZQiwGK9Yj62H3tzdyMSCunBWo+swUV/\r\n06+usQwln5XO4Vp87HIq4I/i38zAO9zjog3hibjfxnIpJX/YOBKRh5L+9XxP\r\nniJapuBjBkPTV3n93TfajEfY9lbjElygIHs=\r\n=J3M+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.641ed0851.0","@material/tab":"14.0.0-canary.641ed0851.0","@material/base":"14.0.0-canary.641ed0851.0","@material/animation":"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/tab-scroller_14.0.0-canary.641ed0851.0_1650470801645_0.14487839408916137","host":"s3://npm-registry-packages"}},"14.0.0-canary.e88f83024.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.e88f83024.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3ee307af90cd8a74f719e59caa1c5e1988616b74","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.e88f83024.0.tgz","fileCount":51,"integrity":"sha512-RqOsEVVLr5MCEMD1MyHxxoe1AuljOvQ26SCREvQl8v0NcE/e74GU0weHnyaU6SPCyqBDEApywd0aS9c6d45v9A==","signatures":[{"sig":"MEYCIQDWvBiaHx+fCt9Vhhpt2DZNgLYR0luLxUVD+rSCQRSfWgIhAOGldl9f6QRJjr0OtEwQg3+Y7e8azuV1jagXNbir+fbD","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYEd6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrcbRAAkMZHCuW/HYp+lREQkLAMtZtmLVTfk9qLluTWaabGf2QmUaim\r\nvGWELybuCkKV6QufbdjMlC/MK2oWMjZZApBcV/aiGd9pAaRucrHAvGlZs2T+\r\nEAC8E89k+3MQUP7eFogrWTM59dARcL3qOvtCZSvVGInU+W40RMxe5lZ+hax7\r\ngMxXXwB7r323klUbFeK71N6GId6+534FqU0IgLwsZNyVBUtaPA8kR3gJTEbL\r\nc7MvUTRvqKY2EGtROkg4JI2d1IPf1+qx2Ly3EVaasnxO4NoR8jtXB3cugjb1\r\n9TmnLMKOh/Sg5n0M10KE9oE1tSx4v0Kk/nnnr/3iEItPd0CwSeSCtGWM/lu9\r\nC58lO/YJv9NV/aTfk5Tw2/1Bvln+JvdK3sc/oCPiPssfNxTnjMip6P8g+8Ow\r\ntHpTgp42nOEsZL6VgQaZhWRZeiK0TKGB18xfZebKvLukCkHz7rEq5NIIitX4\r\nNh5xoNMDK8ujRGkKFcbeYftiYb6/5aLtWUn/lV5Qf9gxlFoyer6mD/spNVPr\r\nCTL8D7ta37cDMFsFmT5/8hnW3Z9odRfMS49ifA6n+b65DEwLeevAXM0CqSfK\r\nI4o0GDWnGhd0HVM+vE/iZwSKhxmzAzRMHSPmpV9AJnrmPmc09xvziqmqk0y2\r\n7JkfiHlECXTnQ2Gv6FAYplL964Xt95P4T9A=\r\n=KpV6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.e88f83024.0","@material/tab":"14.0.0-canary.e88f83024.0","@material/base":"14.0.0-canary.e88f83024.0","@material/animation":"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/tab-scroller_14.0.0-canary.e88f83024.0_1650476922641_0.28916119420023034","host":"s3://npm-registry-packages"}},"14.0.0-canary.7321d6254.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.7321d6254.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1d1905846ae3fd8ec6791c7dd9b8605e16fdb151","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.7321d6254.0.tgz","fileCount":51,"integrity":"sha512-CkgmLr9aOAEawQ1KigzQ80pWCgL7kIWNvbf7IDS4hHfXKuAaJ1ucpUWLCjZ5VTqjDTExbUdteVJqWF2rXd7d0w==","signatures":[{"sig":"MEYCIQD491gJpVpFgOpMh/TUSz37s3ZJP1Jd2vJe8gMyR6C5PAIhAJV7/1fPwqvOy0QbkHLyumC5+yE8UZV+vQtP0lpz5W9K","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiYGkhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp7BQ/+NeJTU4FswbajBjqV2TjxYyOz47QDPSO4/HIYCi1SPpowdwA+\r\nMl+J1eXuR3SS+NznEMidb7ovWucY++LsJwtluUXl+PBQdnxI5spOP4EQEFiR\r\nCE5q8ypM1TgFPB01EQ074nKRdVOyT3IMBiQEPq3enBhFIWaLeAFAWnAG875e\r\nPe4sIy/LjBOgM6PFirhl3iR3JahERAdVZPKpGAisaA5/iZ6NEaoXT0aCzTlJ\r\n9yWwOBf1cpSJNe95fqtUpalo44DDEZCGMhyzbL3w3IPZ4FeL5w6ojMPoZoVK\r\nGpxE5reaiJYYOunCNbaO3yixFyM5mUGBrsl2PqPNaKWN5Wk4dT5W7kvCXJws\r\nJDrjeJRkHeERuPgiyu0MHHUm+3rWTMHYFIaGSrcrdR9xqLjTO4LtkA4HsMDD\r\n/fU5EolqWad6IUwmg453e0USY3kMO6LOD1wK8nsCaJByiQuKNnmStsnnSsN8\r\nvU09YsMh6DsX06KZbECom1m9YKFEWs7Oy7NcKzdHoTs0keit5SG3FZbAneVH\r\nQU6a6DOSpWwULWyX1wH7lVi+LGR5pJqGTHocqEE15HBTZJQM0S5iMmc1B+if\r\nImNl5ZL4JNYIRdQMoEDURK3d5rBqNwML1NgBBqEgELC+NuguLIo6Q+adJcwB\r\npkEjKUzHWiO0nTRHDUAUZCKwRKn/67e8Vr8=\r\n=UZ8e\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.7321d6254.0","@material/tab":"14.0.0-canary.7321d6254.0","@material/base":"14.0.0-canary.7321d6254.0","@material/animation":"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/tab-scroller_14.0.0-canary.7321d6254.0_1650485537006_0.21785770476745459","host":"s3://npm-registry-packages"}},"14.0.0-canary.3ab956515.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.3ab956515.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7a14658bc9be27cbd5028efe2fb400bf8f1237ea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.3ab956515.0.tgz","fileCount":51,"integrity":"sha512-aE1cfOtoL5S/0A/ZAHAEVTkLr4p/GT/T76HWg3LoeHzXhG7HA8Ir5AT1tZ+arw6+MWMGZ1wiAsu0H8mclihXRA==","signatures":[{"sig":"MEUCIQDYej/jUInwsbNPzGPnfCU5r12syhnJQUDHYd9EueNGpQIgW6Pr3oxYtTgbhvH2ubS2pXlGzxyCIkxspBP64stYVyY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiZrgcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQtg/+K5gN4fochz6GcjauhGyjSvZD86SWozzTAAM2zXLy1UlrdEKO\r\nO2LVVwZCpSsFMf+KViBMmNVhuLiv0uUIyQZQiIIfKZUnkcfdn5HxU6XEDQZL\r\nRP4Yved1m060HFkgM9ih8ceFj3mprwH6xmJFgsTLiso/4rDxcucUGnC8CDG5\r\nunvbfFTIgi5K0Zamu4Lu3Uu7Qot/Qd7Hhd5nw+8ysWhH/1H56HS2tHSLJpNl\r\n1lKd6pZ3QnP9RPsZ40SmGusqKapB60EPE8uDQwMbTRCNORbR5/OhhpMu0E6p\r\nH95iUypdQX424Q85lGxoQTx04vOQn5XnXaH/jwyHgs9GGwwO8rKmhL+wMvuc\r\nq/YngxHKKBajJQDYV855YpZfk041PvN0Hab83Ynn40aaNhvRJsh2nXyHbJ09\r\nytSNXLUoGClec3ijjnaZGS1N/1CRGv4hoq4GQlpGUmfjyYiZiO37coj/tgyO\r\nNQyTuFpU0IAXqzKcxMWFVUJ/4zEt0Lfl5ECaCuNyz2zj6UZVK/y991S2xM5L\r\nj1rGQijA2/vO8t5+PGB0Z+VHCgfxcmVMBTqfArGcuqWlBzz9nlmzAPNUbc3r\r\n/SbSPlg+Y7v/v2W0Ovj709p/ug1cVtI9ZNCmNsvciVEv0mrJfSE8sjjqqs1q\r\nvo9qyZwPvCDWZ1oe7//VJrnPo2YNZSKFxFI=\r\n=meH7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.3ab956515.0","@material/tab":"14.0.0-canary.3ab956515.0","@material/base":"14.0.0-canary.3ab956515.0","@material/animation":"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/tab-scroller_14.0.0-canary.3ab956515.0_1650898972232_0.18689738376081588","host":"s3://npm-registry-packages"}},"14.0.0-canary.53b3cad2f.0":{"name":"@material/tab-scroller","version":"14.0.0-canary.53b3cad2f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a46f77be1c358853f59b32f58642aa8aa03bf1c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0-canary.53b3cad2f.0.tgz","fileCount":51,"integrity":"sha512-eJJWfNDSdjrRVNHkSecblN26PtM8rTeK2FqcZh3iCYRZ74ywhKmHF+elrM2KRH8ez+u/YcZoQacgS8rX3v6ygw==","signatures":[{"sig":"MEUCIBUOjuiXtPZTiKOqnwk4hhG8g6YhTBgYF3fXc1WOGDCyAiEAkq0D956DHVgJkR/XvzV9aNoyXS6n0gwznU/aKzHsbOo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaTsZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBuxAAl1rbWsTK1Kk6IInZ1UcpeCZqPIP78foA4/+29GQi3q/FP/pG\r\ngti12tgiGeYDEEQ/RZ8D8jRE6XlGrV8mCfVLwVud5jinYYSxzs1EsbYZ80K5\r\niih4db85ehH3tjEKuZVYOIwItun93Kj9LWogcvhLCDksGDU4GQPiTU1gNjzz\r\nAFp1ZUFizFqJMHUa/oOObDDRvvPjVxQRtFvKyEtEh/OmwkQL0WEAsDXI85mi\r\nO25/nysCuB1D94VNlfAEEndWg3uQKJqn6Ki+yKK/anCdxaYf2hSXPK3v7LVP\r\nFWkMRh1la9uis5Y/dg+CRtDuVIe5681gjl/TREmESPQPMUkgj0QQoTX236Y6\r\nnkiapuVBqOdhMitvQ6pskoX7xkLGoG5bz6lQkKxw3yy0w3vDmD2NJyrmUyvN\r\nvGZzn7YwGaAmMjLrZ2SyBQMNVOOypwoSB0oDWY5EY4AHOm4vz4apHW19FbH5\r\nJ+Tzr+Tpyr9g3cjOp46DrDvYYHwdzou/RPgo0pGTfnrkiO/2n/Jc5tngkNOM\r\nndf8HCxLU4LkaDhPgWm/+89YRsqLZVmk9NSZ36OfY+9oC6Qd2KvI79SY+PHe\r\nT1Xg1H6r9kRUgSXC4lYLqMEkeLOKZJVoKbnVs9R06y0zgM5oBee4juw0gKXs\r\nc/aS5y2LDetxowAPUqIX9TMfQ/e5ww2ruTM=\r\n=IWQF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"14.0.0-canary.53b3cad2f.0","@material/tab":"14.0.0-canary.53b3cad2f.0","@material/base":"14.0.0-canary.53b3cad2f.0","@material/animation":"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/tab-scroller_14.0.0-canary.53b3cad2f.0_1651063577795_0.7873757156626686","host":"s3://npm-registry-packages"}},"14.0.0":{"name":"@material/tab-scroller","version":"14.0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7f23de03de5449f4d54c0f1ed00950c6682e1c4a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-14.0.0.tgz","fileCount":50,"integrity":"sha512-wadETsRM7vT4mRjXedaPXxI/WFSSgqHRNI//dORJ6627hoiJfLb5ixwUKTYk9zTz6gNwAlRTrKh98Dr9T7n7Kw==","signatures":[{"sig":"MEUCIQDrNkAc/zufetjCXOztZAMYQhM+K7usH+m7sWJ4alMHxgIgWaAGI26UrobVqZ4lx+h2xEvm7Le3Rfiol5VHV89nFSk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327485,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiasdZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfNRAAmjPjpSC93MQw13C1iHiJ5HzEvegL7H1642llwrkByLUceAK/\r\nQcW1lcOvvef6cyeJfDAjF2udyrpDZ6DL95QWwrv6UmEm2MIRDWaC7bBXzjAl\r\n5nKjGYtZ+knoWsX0wXSvV33i906KsGQUk82LFW4JA62NOQRz/TsYxeQsDK/P\r\nJ8dFZjkYoWd89+O3xvzl2OY6nCTZDvFx682tCtzAc4oIqk5bnPsAPIMoyR8d\r\nzXbEqXp8i07gXF52yLTLUwSbBewjkLl/Z5reU+cBA+A9QBRi1R2E+7qO/IA0\r\n8+/CIfouEiDrRSPMou47prqml+Mt3JIu0RQeqWsBEfk28mCckRwDYFRZQ0Mf\r\nD84BWa/WKj93t87yHu/Vie7huKpAylWKYBpub8yDBXPeuYRDzF/bRtBK1igE\r\nWVtH+nilDXqPrKeOvz9QJ8B/oICLqTXTNNP4tPhYeilS55pGi51vj84nU3oa\r\n862aU0Qgjpf9/2ZggryRieU0cOXsakLh1GmA469neIVr3mdMCONk3/q/bcNp\r\ns1k/pPB/Q3PKYy69lOZyDMZJaYk/Zl4JFwfhAiURdS738wGqlWM+EC4hu2Ca\r\npLY2pYKXNgWl6z0LsGCUJFPF10HVka7b9K2vFEMQAliTmi5ALqeJpztmYfgT\r\nvlwTwJTZzBoxQ8WcnB3Qt5UG6saBbIRvNvc=\r\n=BNKW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"^14.0.0","@material/tab":"^14.0.0","@material/base":"^14.0.0","@material/animation":"^14.0.0","@material/feature-targeting":"^14.0.0"},"publishConfig":{"access":"public"},"_hasShrinkwrap":false,"_npmOperationalInternal":{"tmp":"tmp/tab-scroller_14.0.0_1651165017368_0.3753867011159939","host":"s3://npm-registry-packages"}},"15.0.0-canary.432c815e5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.432c815e5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5fba16b72c94f4fccbd74442c8f08ffcbdedfc6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.432c815e5.0.tgz","fileCount":51,"integrity":"sha512-QHEYqMvXjDNxyOGky5he5C1Hoc6ieM9qs7R9eDXHxkZOY8hj2EbfbdgvBxQQzWgP7a+YflMGCZjCPjXbfQdBMA==","signatures":[{"sig":"MEUCIQDTsyABmAOwKuc0tZIoL2gRujlWVoYWr47PGof0fWVApQIgHqrv5z2NVJpNET9ldM+JP3Fr18d3nKKR1LjYtthtn/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiaseZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0Og//SGhdrX2+sm26VI2WtvSNPo55SNYuInTwnIxUYiGtJ+lB9iDa\r\nc2fsKsHjN0B0xgP8rsvPBy0YRxBIUUfl3Oztt60lfOB2MEeLLsooW0KZgyG+\r\nmG1Kqek2I0dphCB1iBmE5rZWm4Q9DMAUkVEnWOqiUCZc3GZTLiVUhZcJP8xV\r\nCwpIBLcCRUNpZHUGv8nOtdE/OfeXMHauTS5gq2pTRf3hMWcMsEC1r12FXBvV\r\nExFKZMPGHGMOvMhieMxwwu/LMCkgKnIIbAi8S4fSeVAtrOCGgV+cuV/4kbHo\r\nVJvsukX4sAm3uRiH8nLQu2kvg/CqMuof9xN+jqJuQCVZLVFLoHTgm2QU8j/S\r\nv7IARW5g9x8jd6b4kaBaYfUc3SWGA0la9h+RFjIugJZaQsnOqmGfyz506RO6\r\nPLvq2Nm8a9rWgu0o4TkAfwFLY0NtX9wKyLZRWxm8Rcx1nz/DXMgvm0QMprCl\r\nJx2+mTcyUaW2iAEteZZAU3hsFCyGr5cG9LUtgt9YGpvUc/jfaoovTnU0WeXM\r\nDawF7LlhvZ6U/PvZ/WqSqykzRVRb2Ev0vIDtoq7WFhj7M4m/95HWs+TojNDT\r\nTH+GPfDtvis6hnaH2hK865N7upAZuHUZenqN9ZUXrv/H/wqn/3GMgjNc3IgR\r\nxc52OCNY9uNNH4hYh6OrVQJmwnhJ+BUoPVY=\r\n=Aqux\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.432c815e5.0","@material/tab":"15.0.0-canary.432c815e5.0","@material/base":"15.0.0-canary.432c815e5.0","@material/animation":"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/tab-scroller_15.0.0-canary.432c815e5.0_1651165080919_0.6119643362314582","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0f01f669.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a0f01f669.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f23e8566e7d1e4a96d8fcae7ccbb5442d050248e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a0f01f669.0.tgz","fileCount":51,"integrity":"sha512-j9QsEteTJ5IroWBEWEe5PIv+DT+r0e5jVzIAkTRu2+F9oI1+54KtgIhRFzgXu/NgSLQYfxs87oM7+P91B3Y+eQ==","signatures":[{"sig":"MEUCIQDeEhxc9YVFDV+wX6Qz4w8G760BcLjLZG0vZ4eiuQt5zgIgCXhd7o+9daSEJYoiYjBZBdTgUocgVfS5A1u/ZdBt/f8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidYHrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrGKA/9Htb7AJ9HcRTd6+w65UpVfNhpdmxszxgRGC+HY6v0aiq9XroQ\r\nGIDrPCmA/T/D8Ssd1L9Ti3NjVLo+BbatDJvjkh0UN/Q5QL3+KXxv5HrRVu/h\r\n+M0jcO40IPn7S9GhaKhyZh5dNQ/9bvfJAGfaBiAF26QoQtjix1R1CYdhf4AO\r\nUodGexTxOjW9KVlugWbDvvH+7WPoX7e2biBpwArlzVZ0hqvJZdvKnoDCptuH\r\nuyPJouV4w8YpGy4x0EFlvCA7Vqe1wLkOBlLSe41Y5FGsToUUWYSZ6Fo7aZn5\r\nQcoW2xgOvuJ3xbQXm1huy1wwlr5YibA8xqIaooY/6FkK/iU4dDbF6jnEmOjg\r\n/PZpE+9JprWicZvEqoZAY8Z5g5kqDxRKgnpbn28x6cpgyl5ADV6mFYx4Jed0\r\n2IKv7hmzh2bsOxZ+cBsJZ1yAdo7zE9ce6ioRBc35zAlrbdw/3SgL62Qjx3Wb\r\nIBj2f5pIgOCmAVDDCeTSsd6RYWv/UsPQrjnGGywsBYz4LcQGXOZVRVu9PAag\r\nQTeIerMb5uaY/kgByKKhmqAO6fEiRGAcjAl9Hb6LKLf9dm0q2rhyqnSDrFDm\r\nIxEA7+i14wORans88vUknTSxN6OmxE666qk2JmwiwNkrtKs5E9RFW/lRPbmy\r\nUJzqA9GyDmO/0r9312aId2ZdspPhLT2XEE8=\r\n=rY3i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0f01f669.0","@material/tab":"15.0.0-canary.a0f01f669.0","@material/base":"15.0.0-canary.a0f01f669.0","@material/animation":"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/tab-scroller_15.0.0-canary.a0f01f669.0_1651868139370_0.6837801378593464","host":"s3://npm-registry-packages"}},"15.0.0-canary.276cb39a4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.276cb39a4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c37d5dd484be1e9cbf1c2ba36c176ed62f7d82bb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.276cb39a4.0.tgz","fileCount":51,"integrity":"sha512-q6MpzFQBK1Ug53h+CodJGEJtSzF3hlwB733FX0UKb22KU+0zP2KBmqV321oiLGHyXrKYOx8aWUhun41oHALouA==","signatures":[{"sig":"MEUCIQDOAKaz3piLZEE6yXkAUPUTYHArOK5u+Xlm0nEjS2ojVQIgWyOPLdP4k1+4tlGZ81tbtBljc+/EBWPTtqHYjyaboj8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZPtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo8Dg/+ITjNIUqSmVZ7ZrWbLpInJ14BShbVXeBG9x34Qzvvv4pUt7Bp\r\nzzmvP3w48XHsgD5hR0lMRclAnNllBZZa14oxRVof32rQpko6z20/aQmsTqaL\r\nW7ZtE9ph/PK9E9LuEA9qu0u1jUV0e4f5OuUuNbvWe9/RfkLsHXdeQX2sNjaF\r\nm/aMdQuDPZU1j+zTaMj0VsVaMhT+r5g1tkZ5V01mI3p1X8aIw4m8O3K0CLD7\r\nbj7ie+ChGgSiz+cOCdQCPiee2OtRptDLghjUv+bEiFoPr2NBY9PjyuZoMsrh\r\nEgWa54Wo2bo+Mk7MRpuGg8/ZmMaPi2BpEtIKT5LR/PncGiU7+a2XVawUjSHc\r\nmoTZIErhshRHpJ8IWmSxYgPN8CljCsN6BYesiTrefyUeTSIdpRTylQVfQ4Wp\r\nUYLrBTKCJB8bnPk4L/TuyadvNoQPnnBEi0xTm9cieRAqzaDMhtfS7SRg8BED\r\ntbyc6JJiYBCDgWpZrkt20l+GLI5BH74ra2YlwO0sW9ujJME7grKtOUJdydtQ\r\nRCutAb4R+FiI8Ip1xlydH1i4DM28RTsqMgdB8s9sFbPmARRQOgCDwPDW8jID\r\n4GQsFMs5rtfa7H9VRFjalnCEDAxBJj7E7fp8DVrJIAAoJK4U2gZ+amek7AQC\r\nRHbX4rU/AHEck9EWTMvPdEMGLhKBLsIZx/A=\r\n=+5p2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.276cb39a4.0","@material/tab":"15.0.0-canary.276cb39a4.0","@material/base":"15.0.0-canary.276cb39a4.0","@material/animation":"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/tab-scroller_15.0.0-canary.276cb39a4.0_1651872749620_0.12406078405756937","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe98ed70.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4fe98ed70.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a1d847b313b0bd1ee9191536b0d34b3ca168f407","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4fe98ed70.0.tgz","fileCount":51,"integrity":"sha512-d2ER64qDccIrWV63V7SLxtthF7J3e0zzxlsPUQcj77eTfuIn5wylbUi1Fma5HNitPKjJzL2nS90kRVjB37PnLQ==","signatures":[{"sig":"MEUCIQDObDKfOQjrsj8S4h2PETOdzK/wMSR+gux8QvJMia3eHQIgb6hT9EwlU5lNnik8jj0lylbgDbYv4wS2DHhmp3RFK1w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZmsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7Vg//WW3yyIVbxWtT6wtQiQGnWhwMOLzDEALSNMca/k/3LCR3RZ0Z\r\nh9xOAefO4Q6sbeA/JrgBvH3yHaD/mxQAPbgTpZrKMu0HVhV9KJaLXqRpu1VK\r\njfb27+DSjHo+dtRZrFXqEaf6c7uYVWXFr8VmLyn1Hrn+QmIHbecJbvWp44wG\r\n1Q/AZ/qThc98mc+bh/d86sMdYoXA9ZRlWcXh6s8LqXAc/trdeVO0qfWlkzVj\r\n4PmvIoCc0vmnWuQxZHfaPw4s+MGw4PdXflekNGCuyqEnIn84f03SFsguJ5ID\r\nQmpWnEY1/AX0qCtQbtgA7ZpCJszUzS1XeZLQN305ly4icUIODE2u5gQQOn0r\r\ncHvsSbIIRAFEt/Xs50BuwmEzq+rZpdSOWAGsvPFpVSUz3J6xI9P1z0GHlU1V\r\nMucr6KcjgRaN7BA69aQ+RztIZZb5NMRSOp29zw5E+GLJspznJIevofw4DyLK\r\neR4fVDCLap6fM5rLEqxyWbzTSnJDEIuaQlPvPsy0d39TZeg/Jn6XGeUIBAiv\r\nJlOAydnsp7Gn9YAXYTyeP3SHv2kwHt1sV8sVzUUhbWYqfuJAu2bID0C6v54Q\r\n3WzvH+geU/kaEWIj/E70DL4EQUJHQec/j2kp1CbNExmchLO1ax2Z0bvtWfNT\r\n0vKp/ehs71PVnnOSxFZUKWgPKBhFf3y3CQw=\r\n=DnyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe98ed70.0","@material/tab":"15.0.0-canary.4fe98ed70.0","@material/base":"15.0.0-canary.4fe98ed70.0","@material/animation":"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/tab-scroller_15.0.0-canary.4fe98ed70.0_1651874220070_0.495719344230386","host":"s3://npm-registry-packages"}},"15.0.0-canary.58b130a3d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.58b130a3d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"457c047920d34b5fc2a57c95ab2620a1518a8ece","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.58b130a3d.0.tgz","fileCount":51,"integrity":"sha512-hugxyplhQbKE+hsF8W33WSHqE7plRJNs4D40ppDEB37r8o9PjLoiOM5j6j8eEJmtkilb3G0xNvJRWyQnKagKvA==","signatures":[{"sig":"MEUCIQCV9+Yvts2eLAdTPVJxySPmKxbodGe3iDsiAE6UcjRHvwIgRvBHJzSLtWA96MGNfqD+aeg96QnIkUcjkF4813xXZzk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJidZo3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmofBxAAmKZpSp5tukzDHPykGAHulP3XMMazWfuZcGPTN+xfcL0TTKfu\r\nUewDhZdX9j1M2gLo9i2RfM5j1chp+kqrax8/Qaa3N/M9+YJwZl0W7QrH/dvU\r\nu6jReR65gKGfjFlpIzfraOph/+CF3O8uufKFlQAEmlcbQ2doThT7A0ATS7Y8\r\nSs43xGa+BGhPTaDY4leq9Ye0CU5SnrcXnAiuAnCIdxU5ae3iI0yeMVnssIsO\r\n9mHJooqI3z6waOxqn3n8RyL7klP0+0kWkNPbJb3fVRmwE1gHkJfwokK61Fby\r\nP3jE73PCZtvCT9eGPpo4rjVDEb2BS+8pFLCDLVScUd4ahsjUGgUtvE+6xfFf\r\nveAF1fE95rnotsa+VybjowVEjqH4D5BjbKz/1xOSXSbLDYRRmvn2Oo370G8x\r\nPXwfqcRX6EkuJdc+fl1Xmfc9aMBP3CrLhYq7lAu9y26tBC61swczJlH9kan1\r\nd5smJt9u1xx9Cq4lCFxVc2BGaoZVyLBWcer1+SBgR2kI6uoB1JCT1WxwWQIN\r\nS+xQ6EA77fXJg7yoeq/+T0qyxZYKXEVjeMx9HUNZn1zjDmJssY+H6ZTsT6oj\r\nSVh4AerRlHXX+mR/4jZL2YBP1FhyhGQzwCBGDsRBIM2q1Bh9MV0bsfuHNTUn\r\n7w4Bj3/imjsXLjBFjvnOe71dsVXAfE/GsAc=\r\n=ESk4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58b130a3d.0","@material/tab":"15.0.0-canary.58b130a3d.0","@material/base":"15.0.0-canary.58b130a3d.0","@material/animation":"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/tab-scroller_15.0.0-canary.58b130a3d.0_1651874359011_0.9303816242510528","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae278a2fe.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ae278a2fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2a2cef38aec766d630e9db2ed08d3301a922de3c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ae278a2fe.0.tgz","fileCount":51,"integrity":"sha512-v7GLJ4On2+UhFXzHaEfq4LJCKZLsH3u0b1N5wJyLHVrJONiuGG8pzbqlkXq2DNJnI7zb0G2FOPH1NKRqbZTusg==","signatures":[{"sig":"MEYCIQCRLgLUH04XFw05FIyycnSZxSghP51DNCv2tQe6izyIJgIhAIbbvkxpSIDZ2aQYlzfv8Ok+LpJ8o4YAVKPCwre2u9Eh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieTKSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMeg//VtvCkffDcpWolk/hln4hL3kbFpN1bnA/9lPVASnNIh/g0gjS\r\nps9DjS+Fe5cOvdKxWcWHZ83e4KuGfnp6lM08EbhNbchmVZyTSFtggFECNAzl\r\ndNIq1qyL4i68ZchWXGFInII+nEcVjufqrgMkwf+eEQXfrhKcHJH5X5QEKRdb\r\nNmmqk7yvUrJzAUMKH3Axt+TT40az+LFTLzU57m8u7wlT2JGs2lMfURe2AYru\r\nn8aGhMW/whRpQwvrAVikl47bISZnpu0hHCg7nNX2S+i0b4nzcOkcNBtNiX+b\r\nL7+F+E2NbzARIaC+SKQvdCvfgyKTVkoxczu8SlLVqIH6azYkVHm/yrW8RoQg\r\nhAIBTHCVfpQsNwpNP1z0pfWr6DFL1TfwgSpUho9WiNz2vfzdEjB6b3KTKRX+\r\nNlmZjj8Z2NonOcKe6ugNLb6Piknvn0ZB+Bvh01ROhlwSJ+GMe/iP+0y6Nc4e\r\nRNI1wnkTWCCnQFglNlXe+LCW6sZ40KGXYNOpSj0ijT0l53ul73oLTJcffH9e\r\nKQF7dqAOCiKJea395tZ17a/pSJAhb0wil8CWhPxqWk01Mim6vBQ8DsCBctCx\r\n1voz1axh7oUl7gq4FNBbmwSQXo/ObJHvYnJ4qtoUGHbAtq96nwuqkz9FmMtO\r\nlc6h9QW5XxboDW5e4ZIRZ2xpSyA1b1sS7mU=\r\n=LCI4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae278a2fe.0","@material/tab":"15.0.0-canary.ae278a2fe.0","@material/base":"15.0.0-canary.ae278a2fe.0","@material/animation":"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/tab-scroller_15.0.0-canary.ae278a2fe.0_1652109969928_0.7539274265696048","host":"s3://npm-registry-packages"}},"15.0.0-canary.bebf5bfdf.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bebf5bfdf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"791320f2df29f6757858c467f03db0d551952e64","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bebf5bfdf.0.tgz","fileCount":51,"integrity":"sha512-RaUa1XOy/SLLazEJDNtALqiKhmgkwWWblak+ti/CYQN8h478C6wHDJnjOCcBLCdieP9avCOPIQMS3quMBAc7wg==","signatures":[{"sig":"MEUCIQCu0JESoF2bZTAbbuTJUcC7jzctv7xswwBvnJiyKcf+4wIgCxRRUPSy5GfwZCZcw07F7ctNOHBdUJhlNpz6ORtTQgM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJieyJQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpkHQ/9FGHEzXbjZTmt2gn4FSmdIAljgmTFufRGs99YP/aKve50QjKX\r\nive04xSvkB4X+SkPEnEunCGqpoJeXpYuSLhGox6IYCTmvGYQXJXPDY4p/o2w\r\n+d6C7Ff1iWOQCG615RBTJsVnv3yLQBfDD8xYofOG7kGaBw7+6lxlKsXNyPoL\r\nj7XS1sXmar3MtlmS1N69UOr1Y+VVOb/uC59F8PjA+g6Voeez6MTDeKE6yxRn\r\nCYePe2XAWTINjtbYpn08367ZLXP9/Q2UvIQbBVa1jfY/paZbVn4mrnrglyVe\r\nDB4iNQA93riw0RAaOHO706ZBYNKWuLkLjN8WSBCp/WP1E2uRGxgqdkn+xId3\r\naEoIlVqKod/z4aOijECJHX8ZAleRF0GGPXI0EGVe5wYf4RuU1fxCtuGugEut\r\nc0Mc4c63GDkK7GNzlR1T64MsxqOoVN8mnS5oMhicKUsg0AsBAZ7FNAQmq+V9\r\n4s/1XJeRLhciTSquhu15phT6q67FkbMS/QG/52uRE4flhkCn7zAbFcalWt9S\r\nSmQn+ttgGHt1Nrok8UxrjTeE7rbTEH1lxsyr/yjWdNvGP6YAB1OVE+AXay/5\r\nCt+KbE6eU2gaRkBOPlZkkVVqMMxAbq0TrTByo2tNNp+pFbwUj7iKvTENuKEO\r\nJgRZnuDcofTiDfRJXeKpufQ7rdfI065MR60=\r\n=FC7g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bebf5bfdf.0","@material/tab":"15.0.0-canary.bebf5bfdf.0","@material/base":"15.0.0-canary.bebf5bfdf.0","@material/animation":"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/tab-scroller_15.0.0-canary.bebf5bfdf.0_1652236880407_0.10873140899342504","host":"s3://npm-registry-packages"}},"15.0.0-canary.e6072cd6a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e6072cd6a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bd1c53b4f1378f0877e1f748d2377ab1eb384fc6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e6072cd6a.0.tgz","fileCount":51,"integrity":"sha512-DVE79/e7FxlqDffIt4G/GglZOVyEJQhAUC7BMbjyv8BgIG0syewJhzeQrN6Om6t7mA7w4Ds06ri3UMzxp4ko4A==","signatures":[{"sig":"MEMCHx+3sQ/YyPGFlI2Uaov8MDSPIeq2CQfF2+s6IDvH2gYCIGIIwx+1ea26Fn5S6jJ7bdBdTMvulTrUD6pbZE3+ELMZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifBpOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow4BAAjVNnCM23nfWMFBK9muZpEy2Be//m0N+SgSXtUF4MlZLCErrg\r\nB4AKah/raLCjGkYjRurGW4Vb9kZuim0S6ZOq1N168m5DHacW/LLVEv3vaOki\r\ni+KQ+Ou6btGggcKNmgsOiuntJrsv+u7W4duSIXia2UttogPIBpYvT0WuQxsO\r\nnqyzDWh4Wa3ExuZ/glCvMrLFSHxrP2sXC+BRiW2T9Ov4rCeebcULL8/LJcLO\r\nb3HEaHubTnAbLsh56LSSGOnf7NdWVCHz3RvZzU2KZMU8LdrbLE/KDbGmPByf\r\n849kAS+Ud6Sh4mooPzVuVICW1ep/HciVKGPoDXVoIxu9bSr5Pb2F5VtX6JQG\r\n+TGplvbXYxvr9YJiAwXkVu3jQyHrAduXlYvsdG5GRtuObRpezy9LcKvRj9WJ\r\nNzv2Q6pDkjDYO6BRf8G5FB5DP8L19y/D9revzH7e8gFhf8DWXKCX0WiY1Enz\r\nmpeeW3MfYMMm2hRTUzEwDlJ/O2Kk7ZIwT4TVb6/miyMQqmfrSsEU/ue+dRXW\r\nfVfdL3BvkGsUZrcFyetYtQUluG3Lsbdd8knFT60CnlioDYlEAGGT5iVwZi0a\r\n34J7/ypycSyJZj/vwdQ8U9dhtyzcIMiPQCakfctvPOC/7hOHCQRh8zofFd3+\r\n+S1JitM4Y9ZKeb5rFoKd+u2k2heQh8lqku8=\r\n=GTNI\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e6072cd6a.0","@material/tab":"15.0.0-canary.e6072cd6a.0","@material/base":"15.0.0-canary.e6072cd6a.0","@material/animation":"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/tab-scroller_15.0.0-canary.e6072cd6a.0_1652300366081_0.28646419007502044","host":"s3://npm-registry-packages"}},"15.0.0-canary.5b40eb988.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5b40eb988.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"76ad51111d7167114251070559fc562eb17edcf9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5b40eb988.0.tgz","fileCount":51,"integrity":"sha512-GoWfOirbIRZORK7ZMUfYRDCSyiazI3Mwk4lVHMEt2hgeUryPP4CNuz8E3CqqY2ElaQFnC2mg0d8k6weeTZ6yjQ==","signatures":[{"sig":"MEUCIQC5apKMfNqXvJcz7ZCKCz55md2jMTGqpSLexAnktrgPIgIgficjvGwMZxn4Lrd4W++LDF0z3UB0ilJcox4S8EtkUHI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifHS7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4Tg/9FXHph4UIGXGTjnr4AVgQ71NVwp4UAdpDUmyWYd/ZNuIOve8O\r\nRntzn3PJaEYylmmnDD4DWWEhKH8QSvTTogwced1cdohemBZBoghzXCdZ2fkh\r\n7AKXjJ4KXvUsN2MWtaFMWQPszVaAttaBPP+WxWU0+5JnJIDsuTbncYzgxezS\r\nrbYZOag80fnLOwtzayYU8Ij+bw0R8IIg+MFn/7faIV4BMH0ULuJErkCIBxNM\r\nAgNC+c/8Meu0pX5XhJBsftEqmopV8CS2g/KsoKoROnW23K1WtMkqy9owIO0Y\r\ni22qAdV4M57GWtKzxzb7twH6RnwaybsYm6WgKeD0F6KPsVSwhfC5UAyJeF5u\r\nkAzTF/WecqGKbz5y1TaAxv9f+hn618E+poMGFirHANOSTS5lhNL5uBNmRomL\r\nmhRkwhXQMx9tZ3aYVZhonhdvgxQNuh4OrCcvms21XXst4RkFhXJR+LgOVOvF\r\nv4+90W/83SJ5AP3R4EIS/V+sNhbrpqVcv85U7DN6ju3Q3h9T+437IuGoFmmY\r\nvESvcgL46nanJTC6uER/cIEd+fgdqETKTCnGnUOnrIGclnJUNnympGXTpub7\r\nplN++KeDILb5dD9WnmXi1/0Nl8izi2r4OWyu9pg0Z9e1pAkevloLN4axJkKw\r\nvEx1btO5aMvwwsC9vJLcoslvMjHSjNbltaI=\r\n=rEwa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5b40eb988.0","@material/tab":"15.0.0-canary.5b40eb988.0","@material/base":"15.0.0-canary.5b40eb988.0","@material/animation":"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/tab-scroller_15.0.0-canary.5b40eb988.0_1652323515273_0.7105914793994932","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a61d62f6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6a61d62f6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0f3ed1efcf856d147ee4f2d960de402b3d0fd02a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6a61d62f6.0.tgz","fileCount":51,"integrity":"sha512-z450ssXghz5O/sorsZMy8Rh7MsJwdUF6UoOF1WjL0D6ONf3wXZEbbRVcPv8RXDyYdfYbi3dFvlLSDs0w1cHD1Q==","signatures":[{"sig":"MEYCIQCSZ39g+g1tvEbX2cGk5KSbTa4nqiCzi2uysZX8gZ3RAQIhAPyuC7tfO+SxNOMk7+/enFGEh3cjqhApRC1ySK2Aa6si","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifW3KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoaBg//chBRew67vOBfYti1ft/VKgKq/VSvMD3SV6WDiJSrftyVmEl7\r\ni0cXASjQ/fknIkxq3qgWuQe8I8xSiin4SRqqWL2ZHBxMBbIfamf4weXLMO//\r\nKvL9Psge1BBlgrtd/OCn/zd2cCx4lP/gONG2uuCtw6+u2q7UUL3EfOdsGoIK\r\nBEy1QsTtA+YEgzOIZZCG+bejf167HTVQ2hn25gb5afFPsqNNRjcgnt/6hMNA\r\n62ckfByzBQLiTftg9iy3iz03rKT4NRi3/KQ2zsNpJV+EMidvNK3b6jzbVVPW\r\nCApqA66ySdkctNMxEEabZ/04phIJD+ghXY9u0d5deL3E6Dpb2ng0SVt9dT5i\r\ntCfoHoWwZ1cUgMF5jpQGmOdnySp4Z5sHp7zhGEDziJh2HxqZU+MbrJR+c65j\r\nqflps1Ybe6yMsS/UKOUACfnJGPoyzoPu7N/JIdjTwnD7fHoRxSKLh7PRKnJR\r\nGRjS2K46941ZUykmg1QyW0sAepppica1YrhKPOGXOW4esqnHIPFE6GRS+LSF\r\n8vxumYKhj9Vot/opFmYuRitc/IFTxzIlwJia461F9ZBuTGvPZbxEmtlbSl+l\r\nsZvbySSzHUXdpqh8+1I7ZI2qoewF1sqKa8/xvB9FzAAq2ShrFAPFPssOzAIB\r\nKV6g1Cf+jYAqAnPQC+eyI7FP9fytJisx/hg=\r\n=hify\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a61d62f6.0","@material/tab":"15.0.0-canary.6a61d62f6.0","@material/base":"15.0.0-canary.6a61d62f6.0","@material/animation":"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/tab-scroller_15.0.0-canary.6a61d62f6.0_1652387274192_0.29734966193281553","host":"s3://npm-registry-packages"}},"15.0.0-canary.05930a453.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.05930a453.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"63be58a84afd57ae488b0fcc956a91d230eb5045","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.05930a453.0.tgz","fileCount":51,"integrity":"sha512-gG1/cFQR2UgGORkQ4F+OBSdE1nkjenUMXxkXZWpTkaQFt3exKjiGTsABKs3ysYVXMFJOQ0w08MkilbBOMtgnlQ==","signatures":[{"sig":"MEQCIHNy6HQNFOiucbzPIk73w24+gTA2UXGjuEP69twomM58AiB71mRc86q1C+28cMgyHfRmp/n3AhBciuAO65PtThSpCg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJifqf8ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqnEQ//UdTYBR9ufMS6ziBdg4Ld3/dj/lQR1Ild36guPFPmcVuX0GvC\r\nE+O6ddhP/y+7XhEIMwb8JO965xfkhozshp0WF+OfA+ESC3LNVt96rZ0Kl+WJ\r\nAOhVZrL6jugMAsU+4CJmlwn0mPlFQQwqsMzQEqapH+tZ3tNYxiYi9dmTlKxk\r\n79VdDIpKwhGay1Xr6qQdwwH4nFTvp0CxR6K0mKj6uYwDm5RgnriBb/CeY3zh\r\nt+PjQMVC/wzyZBfFiN21amOmcAdeQnBbqRcW2d89FMttgXqHdEyByLN95gFL\r\nh1+/LBoSDP0GPDPUm/EnsXBTimnV4LM8Npfh0vTP4kpZHU3E7qDXaJGslzWS\r\n/O5hRnfywi4LZN1WYtuy4F09xi+ES+bIb6G+rhJUQ39I2ZECXmxcMcVvhVDV\r\nKoUI9jBZiDltTpSbcrr3nzIXvJATkoun9CrYWvLOmyFMyvQSpAIdE4q/5sZf\r\nqPhnd/m7GQNk44C1OilpvplU0CcKqt8ugkpEOy8CapvFiRn58/Fsr0RIJem5\r\nt6Kzx2dJ+hstKgt5K9zStm/PQah3vgDMkOEqMA9CSQkEe8K/sGLynoY3ohHp\r\nfYz/U8zFO1EvGyNT/lZls7rsBG37NmNJjAVYKsda4PSkpWzye6uQnoLs8F19\r\n+pYAXX8e/7fyCty7zZm25tPhVqTQwUXqAuk=\r\n=wFv9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05930a453.0","@material/tab":"15.0.0-canary.05930a453.0","@material/base":"15.0.0-canary.05930a453.0","@material/animation":"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/tab-scroller_15.0.0-canary.05930a453.0_1652467708363_0.29789435172572465","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0a11ef0d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c0a11ef0d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"873d4abffb374c64ccc2d8a38f0dd19d032dfff1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c0a11ef0d.0.tgz","fileCount":51,"integrity":"sha512-QAmRB7tWatnDmhSN9wO7CLL/7fqBAjOpEy1aw3VH8IF9yGhDNKJcgINiwymPRHKL6leKpSvvxD22yZoPp48law==","signatures":[{"sig":"MEQCIHs3v65gFaG4eHNusIxnjSvdr7wRbBVfI9E02IuXgK/xAiBLJgUzXw0JQTCbZmgnQadhkVyeyJ1nFKJQCYEvEFUG9A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJihWzXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGIBAAgrptOcAzbWjufbFuMp8cOey0Ycv89uWK71bMkkYEJm0plJaM\r\nXoEBY14PojymkZ0SDY64r2yA6tALtq69FE/Sas+ABWNQbdqpbrblmM/u9Ubq\r\niAsq7QXbcCKo9J6moG0LKIOUG07o6d1k/TZKaIy5dqBkPZ9rQvT7GLWRBp9D\r\n7DZzHvcnXml9j+bYmTFzrT7/T9+/zs/JgX8CJJ2XB/Ebuuvp/7XxgkmuYXZP\r\nTyoGSiu+nVQe6M3DrVtuqUqJjGHS8jTftIxaK2i6WK/+WsYVvbzWDqSJmvPp\r\n6zT9Z+2GngAPgs8LWis+BTbpWlhaO4NAfSR38wWczcNWasTXX0xaijxiOShU\r\nMLyfs7Yj6p9dRB9zuq+DefHJFxGnAUUoulu5r4KL0qZCUf2DRLp0aiWBJ8Ay\r\nMm30LqFE/oWvCTyQgO8r55EF3gR2PMuLLxM7zHKhfWJLKyt4UUINVFOFHPkc\r\ni/fSFNORvZlZJYcTYW37XPuQ8Rd3XFpOcdFF0eZCBYWqM2JJvRCo10PHSP3g\r\nXssgwS31PJwbiVhUVDstkNnxGnzMadT724eScLHL3Su+XpmKOOwGIux3Wj5K\r\nMeAUwCvZ7bPSTbVIdHmr06WmC7QaKBucxgRDrBdebHzKRR+0sGog9UX1clB1\r\nQJzpVssGfu43LJ+EjSWnlCvnhRP17QBdOLA=\r\n=y7kr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0a11ef0d.0","@material/tab":"15.0.0-canary.c0a11ef0d.0","@material/base":"15.0.0-canary.c0a11ef0d.0","@material/animation":"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/tab-scroller_15.0.0-canary.c0a11ef0d.0_1652911319326_0.1941588060303765","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f9b268c0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2f9b268c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"48bbfcc7f38140127a5a0c698b7da0ec512cf51f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2f9b268c0.0.tgz","fileCount":51,"integrity":"sha512-P8S8Z5ZtOMG5pkYLbz2MynDmGTMDd6P9ruEIHWSuGaccFqvLD0lbtFG9rmMBeVB3RUHEwMR9DbPzycPkZ1E3ww==","signatures":[{"sig":"MEQCIAIGDIXRVVRmUHb09JxsLnmAKtdRUKunAOdVFjsfPreVAiAQuG+RCe9Em2B6vaRSKIx3kCgzknm9GdpgzxchGKUT7A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih+0UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4Qw/+LBuI5eQQajJwU/K9NqrePjjzdku5PJr+DNb3Wat97Ye5C/V0\r\n9/VjLEjF6kU6Jv7GKUHM31pCuGb2oNXe3DpcWrTN7ZfqXFowcwWNN+4AQJUY\r\ncvZM4IYq4vkgIL2MDRk2hsjOVgl4+sofEXWmjuA3dRolSQyQBTycih0+s0oT\r\nNlebSLVca8YBF51QbaiWAjIFaSb3inukk/hneE4bgeArQlrdq8KiMumVSL2Q\r\n3EN0FGEk7vOSk0UNeRmn+jg8a5JWy8X1GnWl76B/zEzMiCdg382yXOU/x4LF\r\nkZXZHzDS1p/PdHYLhzRt74O7JYc83TZXMAmouSq/OO4ZO14YQF991wn8ggyo\r\n1XF0oEvS6ukCorf3eivhsMwF72WG7dvkr4cOhPfo2dA+41vYVV2YVqyDiyde\r\nhEQAkNqQg+6omqynZ6cPfq2M1Z9eZ56otJwr5pURC31296sLm7LiolqC8ObK\r\nbqXAFiMIyqCHLk8jS8MwvC1rfOALiW3JyKKO1nPC1hMoRWOk5l7a5y+T/4qQ\r\n1+WRx1RFQA0zli4Jrhyt3fMbNH/5oT+q+1HJp+lBuaOHaWT0K52lONa4yYi/\r\n1c82Lh/IeuhEYz88d4M0u7s6DO+BrnnHxGsHxV4MEQT7GL5wY7We8sY0FHrn\r\naVdeQDnwfZrnUIr8tlXtD9SwyHsmqyUzc34=\r\n=xng+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f9b268c0.0","@material/tab":"15.0.0-canary.2f9b268c0.0","@material/base":"15.0.0-canary.2f9b268c0.0","@material/animation":"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/tab-scroller_15.0.0-canary.2f9b268c0.0_1653075220701_0.20081463998252813","host":"s3://npm-registry-packages"}},"15.0.0-canary.7741345b8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7741345b8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"daa364844d7e2e20fb97f6e7a166a05e0bad2e28","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7741345b8.0.tgz","fileCount":51,"integrity":"sha512-0Zjha9LUsZIycqSiofwpk9IxO5vRKnwE9v9Kewh0wGxiVLwuCd3jYoq/h1oO05gPJaqlLYcr02jT6/Lm1SMu/A==","signatures":[{"sig":"MEUCIC1VqO1XKJeoCpSlbDMJwPK1T/D63A6nWlIvSkRjQScsAiEA2sez1y3AW9LYFAPgq6aSFPMneP4v93HmqIMqHbXBqvc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJih/QgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpgBxAAhj74HZrvBHqXaffIYdb3WMXCLHkNaR1xpDwW9vl1uuq7++5y\r\n1Cy6DV471Ws1DfK6JWNaHR0l2gE/iLMVRqqQ9aq1cfqKCTeeUcAG7FQDi5Cx\r\npPZVrNw/C7OSejYEVeAlYWiIBFloXodmD2Aun/URLbnpQldUHSJd476fP8tv\r\nhwtHxr8BvD0oWKwHYFADaNz2m9znFNFJ6z0c/qNnVQUCju8J1YYs0T0Z6BO1\r\nGBcPhXv3Y5e9gwLK4CzBKmVvyh6Ouf8ZFd0ZEEqkawuT+aJCgEOlB/xdlycj\r\nLZLobfOSFPkvjAAFuDWfymXNcbDpjAERXEWcspy0Lt1WQ2ftbki7evkPL8iT\r\n9F+qphEOvtNxnFxQPG35a1lp7KYU7U9r1G/dFdkaG0lHegp5BBwYTjH5LnrW\r\nGD66JzLvZB1RTLeo6xhbktEuQ6gPMsft4iAiRTaNOQPjjC6o366CmhJwNgq5\r\niESf9tn3D/t1ve3/Z+CLq3Xc+NQoHWOnJ3dfK813oajvXKOTsdcqlI2Ne1T4\r\nDJwDkisVtvO86cvcjXi+sqSG2ixW5xIV5f3Sg3XPnN7O552Gmoq4XFuQ0zsX\r\nTzE3zxZSPql63l+EAh6ROYnJ1JHpIQuHX44kWY8AkjaSrOCLoWCsxOF+ll5P\r\nAJd6pwxpqGUQKAduC2DBAj+xnnY1OMfGfTM=\r\n=2Yhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7741345b8.0","@material/tab":"15.0.0-canary.7741345b8.0","@material/base":"15.0.0-canary.7741345b8.0","@material/animation":"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/tab-scroller_15.0.0-canary.7741345b8.0_1653077024682_0.2863092388343378","host":"s3://npm-registry-packages"}},"15.0.0-canary.f807e793f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f807e793f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fcf092b945a0ab41302b0d08d6a0699f1606af7b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f807e793f.0.tgz","fileCount":51,"integrity":"sha512-FV0dqUA/AWJHyIBJgJAfWORVS38V/27iAEXmw1tADQ8O8pjkiTf3U1qQNjefZU4B5gTWXdMIWilATYMatA2fJQ==","signatures":[{"sig":"MEYCIQCd0gQUAUjXAY7TaClxzMcySMg/S9WD0Il192cOK0YH9QIhAJ/uitJqNTWielYhu0KJIPn/KkJ4fKWiSDoKf2r6h29X","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiiBTBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRHg/+MypRj+Q4eaIle5qKszhNvu+r98AH9KVUKPLbtF94sXmOXNxJ\r\n67f5DGaYCbN4YBqp70joDWJzK9l36ILajmrSZRWbZ2kFUAKkaEMoJTpac6CM\r\nhwQSmyAFmQTIxlWufl7OLPDAGARyQ/J9PxK1CUoLbNJZHCQZHLYjt9Wy4RMC\r\nSCVEYKkPgPP9OgVayAjYDzckPp4SqmCo77np0A/Ri2bjfHNiTmiUrh77irmA\r\nOqdfCj3dSqK8WFQ0pOp1c5v2hTFoCrAx9ah0zIsaAeBUwFnqUuf4tMZ5I0/d\r\npDCOFOEBKHwAmlYVZkEbXqRNYRBoa+A4qsKia+ennq5TVwmTAQcHz9skQZ67\r\neGue7jugtpL6OU//aJ9Vgl/8bxYvhVfiH4EdeSwcUuM0GwZEMxSwH0+0Pd8r\r\n66zlcnAeMlrq/kp0DliNC/qKNQhQFQJfsSCs1x3hgB/MYUs1SVjkMp+M7gvN\r\nYejyVumxVEvGJMCsykg6/OnMBw1hOJTgY8houaPc9v8OLRKhothE9HFanq91\r\n26rwXIb8hOXnmyfJTQsQYon4aWGBEnrZ8mGCnf+st2BieAilDdn1T4IjremI\r\nz7ji1NIAuTSiA7UDAmZ0dvxsOFwmoTpE/LX2Sk0a51/n2yDInaGW9xdOIAJB\r\n5Wk9xUAbzRtnBQ6cX5HYUSgmS9cTo8qpaLk=\r\n=YOn6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f807e793f.0","@material/tab":"15.0.0-canary.f807e793f.0","@material/base":"15.0.0-canary.f807e793f.0","@material/animation":"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/tab-scroller_15.0.0-canary.f807e793f.0_1653085377291_0.6302363772335136","host":"s3://npm-registry-packages"}},"15.0.0-canary.9f53d4a8a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9f53d4a8a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f96db3ff56530a75af6477bbd8f8d4d9123cdb2a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9f53d4a8a.0.tgz","fileCount":51,"integrity":"sha512-dAyzzhr2tFhUlVD4p8GcEBRhSLHWpxgONtmeUTKP8Q1ZsITVCIdUnV9CpSzx9Gt6nCBwx/1q2kAU2h65QGRN3A==","signatures":[{"sig":"MEQCIANvENwYsHIy0zZR25C8KRdV5jpZZqJzMHT7JMqLLF/xAiBWJaP8+7Q6t5mpR58J0ilhxebsCj+Hnff4nehGVaz//w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJii6EpACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqklQ//SYWQ2RIdQ0Vh7VNH6bmgELkhpd9bW+NMcmlDRXSroEnf1DrV\r\nhGKgJVDVuXbgdaZsc15dXIPS6Db4h1TtUnJMQyql2x3VZEnGxCU44gRBKTme\r\nz5/ibmpFEoyDiKSHvlEMenbjLLDtkY6xpXZj8xJJsL/u8x/3miSsEqszL50j\r\nKbZ9sNDtVtd5AR6rlrPmciKnrwEhBri65q+gyVepdZFbCFFRA+S0IYHsRrAn\r\nGBvD53QoRvl97KfQxsVTdmS5RRalJqXpxSCfIztIlf5W31N3jQ6yad3Plgss\r\nGT7WiaeF6hg0PjDj3c6JU0Ri5roW5hf+7ORd3QQVK6B4Vfn2n3b5ejLUDtC/\r\noafRwEs7JrEj2jP1sUf5UQgVMt+42GoXGX4rA8u+46ZcbPFp3IyfqS7U336C\r\nWYBYYLTxUz0NRxNRdvcRoJ1rqIfiAXmroH7TgvcCy4B7KAJb54Uj7UmSTykH\r\nKuMzfwjzeRdJZlBwXP8dN4lfGKx8hH+SYhZaVI/HewW1ClEqINXw3zuDAUK/\r\nc/Lkd7ySUWwBzws4i+j3ju/9TC6GgKEUd/6xsiWdPsm3ZWRcCU+hYXscbSgU\r\nmO/n2xovET2Zc3MxQhlVjpbwSOxKVdkAZ4iHoSAB0RZTRsj6TkTMBujFJBj3\r\nXRbOh7ARqRYw79CMAQXQSeWucbNrb2wVU/k=\r\n=UXUV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9f53d4a8a.0","@material/tab":"15.0.0-canary.9f53d4a8a.0","@material/base":"15.0.0-canary.9f53d4a8a.0","@material/animation":"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/tab-scroller_15.0.0-canary.9f53d4a8a.0_1653317929378_0.7568799137160693","host":"s3://npm-registry-packages"}},"15.0.0-canary.77cf00e37.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.77cf00e37.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b3adcd6e1b4cf3fdf06e77ad45ad92fbe2706484","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.77cf00e37.0.tgz","fileCount":51,"integrity":"sha512-TxMROCatk3BxDtr2LCaoox0gVA1tH+0j2g89X7WbhSQM/Eg7JWneyY3HGfZf/xlTC0zpmRo5A1h4MrMFgRbXSg==","signatures":[{"sig":"MEUCIDpUVRwDpbNfsMRpxcMDpDX6IgRKxZfZgH5582sBunnfAiEA76TTHvhl0ma1gbozxy9X8NyG4Ke0ewckxIYrZ6ZSFqs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJillM2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoN1hAAiOSmeglO2j4M1WmLHmhFVcGQnofX8w35UHB8Y3lRc+TPnnNH\r\nhbEDMSS1OhauDGCan1ATHwcDaxeC7DUyTx7F1lqhKMJ3m/YzcINWOfHYvboZ\r\nfSBwFxOXY9p6vNw+PEDpq8G0vw6H51KngRhbgNoZazKfuWp2ogfWZZcRG4YH\r\nkG/2NWRsGtOl1qmPocM0cjQRM4bWlJsG4T21jhhpGwzsoxI6zqbYyUGE15Gj\r\n3cG/ApwX+RNZqvc2tzpG9SlgG4CsuUwyql+5iVhPuO0A6VGOyt2HK6hjoNel\r\nH0fNxPHpCtx7Ds5UseP0V3VP4Xu1s3bdiU/9KbhH9hPUBiF7R+KcJAiUYPU+\r\n0dqDQwGCB7EqT+vvuc4zepbMyl9mvieqxtYFahwyMCuOJtQLKwDVg9H/lOHL\r\ndeHD6C9cRfQakARjlPWMZccP2sZnWf1hFlZtMgm8Ocg7wNSAC/iMn9nPLV0v\r\nvxZqp9uW22USHrmleaBpLjz358YEo9rzwpi/S/oDiDh4lfwMSCD7VVnlNJo2\r\nzMT7hxytaqP7T9CHJdNMPyo94wH+ddCd2eyu72txQxWMgq0vcW7IyeNqmoaa\r\nJP+oQEYScFJB7Nh0OV+Iy83e+lCJQuBGQIjk7uuEfWh/ib8GsdpzzuywKUQf\r\nnjcSPnKOwSBxRe5twoVHH2hHf3FbcHwhIQ4=\r\n=qUSl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.77cf00e37.0","@material/tab":"15.0.0-canary.77cf00e37.0","@material/base":"15.0.0-canary.77cf00e37.0","@material/animation":"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/tab-scroller_15.0.0-canary.77cf00e37.0_1654018870091_0.6710681520901824","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c7b844c2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3c7b844c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aca8e5b329a0e4504ba030a502df541d5702eeca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3c7b844c2.0.tgz","fileCount":51,"integrity":"sha512-wTKc4mGVeUrpFULyc8fKbSh1SA7MCnJPUG2mpB+nElAjeQ3ezhYH3Ksot7VODNYFZoAVVnQ7353C5OrnV86i+w==","signatures":[{"sig":"MEUCIQCvrOLej5WFLWt/y5ZBS4NcTsdH2iffL3HWibEilHlDxwIgKxaeRrzdxNG4eGPY7zAgD9ishlj5+3MzGYiJeA5CZkg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJin8+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoY1g/9H8+9R09eN6H326hD75i8yhAZRS3ZBMqFPW21PgPut/ZlRdgb\r\nM+codo8EwvLJGw/iRqhsjZZ1Zu3ND4slxxSdN3Tz4oEKAg6v6Ayg6Nv1yHSy\r\nzeSrR7HJVNGTZ/U4hXeRWj/d1vKw7l43F1rml024Aqq1h/kMrHuxH/E13Lun\r\nctuuIfLGUUPvNSC0vahY2AzZnf+OH79x1qdF6zqhlrYinsJ7+yel3z88KBYi\r\n3aaN6l9O/eCsXSdjKfxn04448Atw42H0Db1ufl/sg/pOfp91cJkNWpoCdm/E\r\n7YakvHwKvwIVRaL57aJO29QeIW0xhewbtWXcOPKA5NDxsF/TmUTokPgolOsy\r\nPjEm9h8xvQ779LLfhBf3v+4R+a6U4Kosnf0Xqhl4wD45Mgx0Bu5BqhmtSLvy\r\nYW6e1FdL4tmQzWbr4iWogoflLcKz8BquMQFMiDMQ40eX2UU2n4yX58QyXEHp\r\n1cvddhRzVQ5ch8b5fhgufLLqBEyPPvcjyQ5+a/I4dMhYysWRJhTyPsVpvvvE\r\nYS6HT7abCxm5d4VNrcLEyIEX/fVHRZm36ghvnTIL4pvx48td5JvS78Wi/Z1P\r\nBJyLSYKNvpsBRE9hqOCgLvJ1T9aT/6C+IgnB17olHyBvsYm9m55XatdxIXSs\r\nqwK5fUCgsZtFr6LwLcQGbMsvNVxkJT2Dhzk=\r\n=XAP2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c7b844c2.0","@material/tab":"15.0.0-canary.3c7b844c2.0","@material/base":"15.0.0-canary.3c7b844c2.0","@material/animation":"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/tab-scroller_15.0.0-canary.3c7b844c2.0_1654640537455_0.3518121816038797","host":"s3://npm-registry-packages"}},"15.0.0-canary.df47894db.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.df47894db.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e000eff55316bbf1de1f9aef7d206498fa94dca9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.df47894db.0.tgz","fileCount":51,"integrity":"sha512-b6tBZLYqmjjoJ0ulxc2ukppK5vHXM/xWmdSPt2pwE0KZFpV+ww6wSYNNaP/AEfwhPhXw3iUoZhjTM94e0Jv+aQ==","signatures":[{"sig":"MEUCIB8ZpVA2r38XKJ+HJoDsw794m4P4N0vnXKH0qC8UxH74AiEA7MBBkBIh9JkfivZrA+RUdvHE8y9xpd1uDBPEbIrWbPs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJip29VACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT5BAAh8IniNsCbsywwE/Y72XnNPPWiXvri0K99doQnrFZQGo2YbZe\r\n3PKYAFEgYzg1YADp2IxX4IypKAp0t8iQkiItmRGqFO46yg++Vrxj5ZUhf8ib\r\nJ6eV4nfSz30AuZJ+YuoFWne9rr8vfZ9ruIt97kkWVWlN0N80bT4BlObbpoAi\r\n7zdZgsNBwOsXH0czs+OjkyQN6yHu9UDT1D+FzIgt1Ww5sCZnpE65k5TcWAAv\r\nCgPG/66sNFSIYxVRuquka4EkdSfjObkjo3ng6xzz0cv+fHdPIdB0bSBmrQMw\r\niMzr2kDRsYCn7cAfT2vK5/YdfeUOn6sWFaxmO8i5ZH1KXlKFsdVdRLew+hEI\r\nsoDbGU120mTz76zfoMw3REUJ36D/xA6YCwzFxw3lMnjJ5ggX5TtyED3KABZB\r\nUArJzt+jjyTvycy/f5X8NCXdO2CTfwHPARmx9axyS7VyK+fwlorhpXoeLdc3\r\nBY2FU7pw1iDUUUyIDFyS6hpy/fcwlT/PMUvAoSOHN7FYQMllol5Q7gJrZ5HV\r\naXYy7RIVfPajzLrjuqnR9zj6JKv4S5RzCJEkjyJml2nCm6eZiIc8JrpxMxQi\r\nYxoFn+4jRjwv6SBRnG0LRCSzTFV4Pb2i74VScodnrSprcS3zWzlB/HvhMf/F\r\nGAEfw+2n1Th3con+h7PI61v9J0XTbc/qQKY=\r\n=kcNX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.df47894db.0","@material/tab":"15.0.0-canary.df47894db.0","@material/base":"15.0.0-canary.df47894db.0","@material/animation":"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/tab-scroller_15.0.0-canary.df47894db.0_1655140181225_0.254678990253723","host":"s3://npm-registry-packages"}},"15.0.0-canary.b18a873dc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b18a873dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"834d4d97a1e9e055064a95e9c68e1d3de3e5060f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b18a873dc.0.tgz","fileCount":51,"integrity":"sha512-Nq7BCibLrU6UQFJixbBoFngbbwHYpLTavGFRnPtN0cly3PXvSomptITG73LuYtBE7RTX0Qxm4r2FgPfSqZX6TQ==","signatures":[{"sig":"MEUCIFQ4KSu/BMJKVgB6Nd/G/TY4B0RsxMoQFUKIYzxJeh0gAiEAxGkAr+tvPPLZpugG+f9Mxsz7MiWMFzT9kJog/bAbTYo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqCsgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbhxAAlJ9Uv2NLDMaVqJYm6rtBSseUr45AvSixGXjsDqhzl20dtwxa\r\n/ZZuUdWoSrYGI+2fzCR1K39a/RDdhiawYsfpwmckw9ZewiWFUl2rfl3k5wSh\r\niAFqQ4n+cq3jz4Cp5ORcVN8XJ1eG8XnDo5w7pQkWwWRePSL9NRUp8Ko55to8\r\nidFaMOfSCpG0yWOiXI947lQjTtVW8vnBBX14o6myA6K5QZWYMwB6IsnYmrw4\r\nrlfFoggNPYv4IqpCqI6X2lZOVK7ijgUjWOGhhlAJcrAwhtlUkbxk0QA3ZX69\r\nO246ITX1zTpBE+QgA1BtHVhXD8k/OE4A+i4GY6cv0GZe5UWPgXi2UKxsbi4V\r\n8oqMHXO8Dl4+k2umGoNorMdsLKadpPU2V/a7RiQXjoOuz2YwfHpYy2uCCKMc\r\n2stYMUoqcSieh7ZlkyzqmRKTP3vcW1inFg5PME0uQSP4yG2m03pM/JSygpX7\r\nqxwxDM6mOVfe77VNVdXRiQB18aWDwsUPMfIAR7IfBFhrFEUNghUxXpEy2fkt\r\nBN2u1zf/mi5LTCVlJJrpP1dyX9XG2/rGPdr4g7bkt1kMUScCGMU4aWeEXxys\r\nFnhLucEnM8iMJXiNlIiPXusyq/LBJ8IZA0CMOl1XtwdNQRlHISnUPaEJ49jA\r\nQWAUZptkJ5GtTXE6jSQ/sL8rcOv6XTzegB0=\r\n=b/lz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b18a873dc.0","@material/tab":"15.0.0-canary.b18a873dc.0","@material/base":"15.0.0-canary.b18a873dc.0","@material/animation":"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/tab-scroller_15.0.0-canary.b18a873dc.0_1655188255810_0.42255456144412906","host":"s3://npm-registry-packages"}},"15.0.0-canary.ba9c29637.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ba9c29637.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"399432b5c9942efe6781c9b634915cd0af1ffa15","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ba9c29637.0.tgz","fileCount":51,"integrity":"sha512-xuqlcTuQCwqe8PQnufEgby2zlrKeoydlpAexVJPfvmOOeXTbYQlYgE6jKqlPqUoiO/8JNAzH9mkelnohxBRthw==","signatures":[{"sig":"MEUCIE38oo1vimcS4d1GgtyE5rbo7RluRYneDvj2NhDaydrPAiEA3yf8/IBs5de9gPc9Pvf9F3wwRaQdLRf3czig8X9RL/w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiqNpUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpzTw/8D4CEvlD243x9y8XFPuX7IfZg5JVhdo9JjGlSirseOVkb4u2u\r\n3t5mAYksbH/uisxIz8mQl9+tqrsmH4xHzOAs+bpZYrPJg/nGp4xDXMjWIziW\r\nExoaGtEIfkucXg4fp33giAl4DEQxqCjclUNLuX3A0seZzAHLpT/39gqygWrz\r\nzqmIlrMpB2ls+bIlyLq4rVemuFOZ0makGrHYg1je6WMTHPUiXUzc6lMctfvY\r\nToZa1v8XxUs0wxiKVFdvCtN+2kkXl3YpIkuSVIt6XRhJh4dxXe5iNSXALM6D\r\nDCvFL2htMXZTS4wEsAy3bGspa811mna8Q4OhI7xDm3sLWPsnDqKf8k3cmUGR\r\ngHPFcZ9S5TfFLgWzQ90RlbAKOorclWbvgFB4o+dTygkmA+4tjzJmT6QqGvEf\r\nsygz++m0jTTIHfSDBC2klB89bn5pPrg8vx2lWzM+e2teLABL0UIrZHGM3U4K\r\nSeCZgtgFJ/kr6jG/JHl7ajMP5xrnJykeeuPK6CAEZfZrshlUMhdHt9os7bi9\r\ngrffIZpEh/hnAtSYyptGKNYVd6tViQJjiJRALI5g3X+38yGwHRJ+uf84W9RL\r\nB6gdppDcF6OVRk9rsgJszBdeGmbHpURDQTF+4zNuKuKfQFQcH9K5u4e8z36z\r\nrc2qtBXuzseyCKEymazyNN0cDKvXRaWkmhk=\r\n=rai/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ba9c29637.0","@material/tab":"15.0.0-canary.ba9c29637.0","@material/base":"15.0.0-canary.ba9c29637.0","@material/animation":"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/tab-scroller_15.0.0-canary.ba9c29637.0_1655233108390_0.7517400208454761","host":"s3://npm-registry-packages"}},"15.0.0-canary.9bfd12f01.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9bfd12f01.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"33413e7bd336b5ca6a0ba2b47216fd913c26613e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9bfd12f01.0.tgz","fileCount":51,"integrity":"sha512-cC8rELi0nCk0JLKWl/sbMyzeIdl5qkHbtwpwJRvBB+KY90i8ZnKuoYll0pYn5azeksTM7GA3nLX+IJspjTxFvg==","signatures":[{"sig":"MEYCIQCtTvvrEhKkzjuFXB06nGbsJRhsyoB2VKqpH9HTJiuwIgIhAMW5NLknQdlkv1Db4Qg2BjyHdnTFN9QZQyK7CEz/tpZF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJis2w6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7WhAAlPRyOm+qW0plHqtiNIvFGDjXCD6GXTq/gRw9uqC6SiF8Cm2Q\r\n3b3ceKITdY5Egh2+1rfMZCHAJMH3Xp6Lxvj21WAgPG67RsJHxZShX/KxzUVO\r\nZPx8uBqqr09VeEF/7qUTjrc3HRMEQOwVmhekssgGJ/ObnFkxh0mva6T8fiPW\r\nCv5Tdbw0nSrC1yrp/Q0kZWxJO5LvErI6Jh5SuOEtHDaF01f2OIdm0T+iCxE3\r\nRYtdPQSldhmnDLyopCNxrkAX3uKIyOyXhjW08fhbBV/31GW/gWwu+e4qJyQl\r\nT1U6WCkWI5e05elYWqrnZGB8DNZ6V4NKIJvLezko7wKmSIVEoMJq/6K/tIK2\r\n58bWD4BFlb2h1vd2+PFx02geUE+L807n73uemq/q+8OUGpJcUGjucSwmE6fv\r\nPFqiPUKusoUAo/sohvBAqx1dV7u6ksSWia0Sl+x0qZnsP+ewc99weIkzQjMR\r\n8mFQIS8p/4BCNMY635QEOMuGYsoiVZxmndGWeFVgvExXR7pKCb3bWOWuar3G\r\nFeVjUFdDCz+C/AH0YgkpJI/o1U8LX0+2GGjAOcfPsVbc90nNUVvJ566BMhxO\r\n2C8K/D21y2WN/J2twzAPQJkqU+v2AHsyg7KU1jvnCUa38MZ7TNzGhSYSuOHC\r\nG3atHuhMOeS9Md9lod+JfcycB4qATmtJUNc=\r\n=EbYm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9bfd12f01.0","@material/tab":"15.0.0-canary.9bfd12f01.0","@material/base":"15.0.0-canary.9bfd12f01.0","@material/animation":"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/tab-scroller_15.0.0-canary.9bfd12f01.0_1655925818262_0.27051491716291265","host":"s3://npm-registry-packages"}},"15.0.0-canary.764de225d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.764de225d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ac0a893d6adddcb638419eee912b94fdd8f545e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.764de225d.0.tgz","fileCount":51,"integrity":"sha512-mgXYADOE4U/zKjs9wdEgMZlXMoCG4w+9NtbRauynNXw0W60vbluzsiXqm/yzAoSSibHqA5n3JBe8+28IyLX0+A==","signatures":[{"sig":"MEYCIQCJ2xFr47sQXGLP9gxJGp9OHK+s6QBYbwcYvSV+sfxmpAIhAOtURns5HVXjDQRZ7nLaVBr9KlhQcIQx6BrlVQNK+4Qg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivH2YACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9Uw//VznE71nH6ULBDA385WPjVLA6XXzUtQH6265UVXTQRef4ysbR\r\nd7yhDj/uJS0Ejl2iZdBgyjg3P5ERmBJ8qDBRwd/1vSUxwtg5nac65fKXzzTL\r\n/yG9qunM1drFWHRFLtZFT4C/Rp7BrrprN7dzgP7lHldotJz/sfM5qp91xM1A\r\nv4PoKAXvjs/q7Z8by2n9S88Exa+Ue0TxLyK8yVk0cYOb9+jhXOKbUMvDeoC8\r\nE2Nw4f81UPqgt3ZAwUAbVOfKY7NwSnIb370M7BWCxl7YNd84WQlzpfrwh1ny\r\nYMPsPhHn31Ln0J+dNsSx0YC+KKP6xCe2myUnUV33KAyyqyh8ixfD977QUzNe\r\njR66IScB9jZ7erczHmbb8AmmzhgeFzO6Z7Se3SBH7B4HREdaIFtTLGHO20/8\r\nND4LLE6oEKjqFMwc5B/TmNZa8jeeMgv6+Vhn4xmZEZX5rKRy1BZtmk5/KRLG\r\nLa/aFBOvobOy+GW2+QwCiKIremLmxv0ZnuQGMWp5dCSnN0AssTmGzi8h+Dfm\r\n8pL/K3gA0HMTaJxi9JrN83QalDuSY/RNpXp4kUagK5RE2BrLpCzqlzXry8A/\r\nETpH6iECB9MhdSDV/Zg7O0RC9XSeW8lZb4hppTRKp+ItutB8wlpab6TO24Ip\r\nTZOrmknGCnRtCwR1lWmKYeo0cItJqICkJFM=\r\n=9qIE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.764de225d.0","@material/tab":"15.0.0-canary.764de225d.0","@material/base":"15.0.0-canary.764de225d.0","@material/animation":"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/tab-scroller_15.0.0-canary.764de225d.0_1656520088694_0.39686575691279846","host":"s3://npm-registry-packages"}},"15.0.0-canary.31e517cea.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.31e517cea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"294b4827b7ec46d6313996d87ef7941e8de048c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.31e517cea.0.tgz","fileCount":51,"integrity":"sha512-u6PWWAm9DJfl/X4TcZtUzLXdsBVjClR+NUYz9POZm0ruUoWIwRd8rm56CbZccKbxCOs6uWPMhkxxyGdWoVOcww==","signatures":[{"sig":"MEYCIQCyQyJTsSNcdmf82Nm4OqFvev1CI/npK7CcjMpAnb36pgIhALZrJcllRGwFTca3O3jw5Bn0YnLAxw1M4f+haULV4YtU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJivz0IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSVQ//aZZpfwh56lXIUiFCqKHgaXqEC2QRwdLpLKrS9qejhUiHV6Tj\r\niMmo3SlSKo74islInEN1onyw2aPRn2zA4AkYA3cN6nSY8gm/+sA4cQ63zJK0\r\nHcoC4t6JU5CE+ggKX/7CrekWVfuxRQAfILvP03S3Tp4g8A+ksnewCLtauMHK\r\nU7qC/hhHbYdDHCmoPNyh7GX4D/e/Cfw933sYmwkGwDfS2B+rwJLXMLV4m61Q\r\n50Tk6MRUt5+gthPcCAAp/hd1w3E77GIzKHjeKPSCwTJZmcU61d2yj3CKkvmw\r\nBVLRWeATIIZscC/PFe5ufaeEMYih7cQEdtskF6zxRE0Z9SuCpfMcNucz/4jT\r\nS1afwyQSok0bW2Ek0d7splYSvkNy5LKrrcrtxOYZMmLXLt3Unz6QyfAlBMWq\r\n9a2nmt6ueAI+ZuGvH+TPS+RJSWgt1ZJCMZkDVhJv/hbuwovEFpCEpXzgPeS+\r\nDUK42L6sDqnr+cHjDZLDWTlT1ak4DcbN1/zOWZu4bo7xHb+v7Cr9WhlSLw3u\r\nvHe0i74RmEqoPwKllUWfNvPhE5ZTO7jSaCktUvcx6a27224AO7C4lywfTgXL\r\nvMX1KuqHtWel8EHFyU0zm4Nx9mxtxYr0e4L0pwg7mYYQLiVXKLRsV5rJ3vdu\r\niBL8iJjjZlEMp0zaNU0TnYWAmBQZi4a8JoY=\r\n=DAAt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.31e517cea.0","@material/tab":"15.0.0-canary.31e517cea.0","@material/base":"15.0.0-canary.31e517cea.0","@material/animation":"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/tab-scroller_15.0.0-canary.31e517cea.0_1656700168588_0.41814080258026776","host":"s3://npm-registry-packages"}},"15.0.0-canary.9ea4e8e9c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9ea4e8e9c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2dca006bc82cc402c84c5fa7636f6c41a804506b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9ea4e8e9c.0.tgz","fileCount":51,"integrity":"sha512-ZMILumowwy0O5JxF/7HF/pC6I+XcTde82lcdE4nJFjE1dib/APG5sb/UcBYXw3T/Mo1mkw43RJr86nRAY5xPng==","signatures":[{"sig":"MEUCIQDxq3wxSwg2ZU1CUS8AQx7R7WgSz/4KwpA2ysR67hLmpgIgOLDL2ELQ+LJlqHZzeXl65iLGjG+uxqTjUurKPPV6X3s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiv3t/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYYxAAmHdvT5EPVTENfXgRqc47PTY+xtFTTgORHHg2Zbher15jRtpe\r\nt+kaDaQ+D3vAIt1/ueIcWwkF7a1BAOSoooYswoaQ+zyKTdQyVtK2IMSGSZ96\r\nzoMedctjQhMsnBpItcsHaqg3yO3C096FH5oTRnjuTpp7jkegHvIfnV9j8z2f\r\nPuuMMWczNkp8Hryktgmk+AH3kuYnBpqZisU2dNRAKmRkuWaAbb8pDcIvpmgw\r\nJP/IubWB3Pg+jWJ80lyShUyDj7A08r/5pm7UCdRlQaPyFcB+juZN2Yqo6vWD\r\nPEXFamj09JVuTjw4K6weNAIsJq4X+d8qJsoFGoAnCp4GYLb43oNn1TQR4qEu\r\nXvm3qyu/Y78XPMlwLrHw2gLn160Y8IPDUgCPRj+rOY5eHoNxpqq6WI9CV3Vj\r\nUW23lffxgHfX+CoLjfaE9VHqCNr+0sGVkRIxpzNJQMXWYQZZ3xNSRKYZvk8f\r\n0uOoZJM8bAcMeZGIhW0OzlKkVtU76yGIBq7vZU2UXk/3sKVtMde74TTUoFVp\r\nrQNnhxh9kZMQQvQmTBEP3T3et6sxkW9CKU7bHKxpykarfeUE7bF7H9KnuKYf\r\neoKF/OSL66hTxKUpMhPB6mguDd5Hk/x3AiQWGykeKY7jWlGbhAEFvE8C2xRu\r\nHe6dIN9B0OubAThAd2zh1W1GlNeoxZqaXMw=\r\n=bdMQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9ea4e8e9c.0","@material/tab":"15.0.0-canary.9ea4e8e9c.0","@material/base":"15.0.0-canary.9ea4e8e9c.0","@material/animation":"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/tab-scroller_15.0.0-canary.9ea4e8e9c.0_1656716159436_0.9919745147652808","host":"s3://npm-registry-packages"}},"15.0.0-canary.cd5bafabb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cd5bafabb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c954d0da6b61d550f13550ff0bcd6b17ca7f2ad1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cd5bafabb.0.tgz","fileCount":51,"integrity":"sha512-gj/m8tKkb6f6Se3IqH4UKMHvz7xlo5Cfi0dlH/lD4bS2/yEHPPgguoDVzi1kN8KB8tNhCAfgagTuOEJJnN3bnA==","signatures":[{"sig":"MEQCICWjjmfQO5RQUBx72E5L0w7TpO2nAT5avKj7+U8N9+FKAiAjvtqjXkS+OBK6j3+asNOMfGuQx2qKE5ZsTY6unWexiQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixcyUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrJNQ//XsKdo2bThOFZfbzRW7blfRTUA7EtcECXkBiyCMX0S1NMq7qs\r\nJFAlG0cTsQ+ZaVJeczgJZ9VW5q96J6h29bka47tsYcBw8vmmXvRxRAo3B9ID\r\nRl4usI2curze+BviyaCkw6zR8FIHBXdiDBKNkwONmQMYct8Kq26AMMs6emip\r\nL59tbPL/ugMXSq2wJ0dAMgeBBYnVX1apLWmljjpXdc2EMFso6egosrz+EVcq\r\nX70vcexQOyaJV+oQSY/J/1m2cSHJpCq/bxnERk9A/tOrH8YSPl2mFqZQqewR\r\nuyiJda7VA1yArknLBJTkXEjwyKaGB/JOPPpgdkv5DcD99PhX5bKkC+RSGEXd\r\nwLIMmpFpDOYd0dkKCUnxTpfFwD+LbGvO/FasUD/IoU9QG49WJLEDmkaRTB5L\r\n5SfNsNdTd4h++f4yXflPB91hqqXXbR4fDcBLzsTlg1TMIme98wPLPz5Kbxnh\r\nXD8L3z+DZZ9xRgkzObGqogk1XJyUAZf14K5jltv/RJHLMpQtKjYG/p1oO7F3\r\n5iRH0Qg/6QduFSyOhjLEzrINLgNwDoCWJ5kzhaAtv7oPE1+OSdXHC/bIbKc3\r\nbCba8yRjXCHLjADdJQD0aoWlxMp3sePB2bAMdkIf88D7fXv97JdyjaUxOTK2\r\nU5ZI1R+TTGnRGtr61qDVCIfzJYXKd/K0RyI=\r\n=6EHp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cd5bafabb.0","@material/tab":"15.0.0-canary.cd5bafabb.0","@material/base":"15.0.0-canary.cd5bafabb.0","@material/animation":"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/tab-scroller_15.0.0-canary.cd5bafabb.0_1657130132122_0.6856087926638195","host":"s3://npm-registry-packages"}},"15.0.0-canary.a02fe49d3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a02fe49d3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e5a37f222e42975372c59d9128d2f938482d357b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a02fe49d3.0.tgz","fileCount":51,"integrity":"sha512-jMUcz+VLimRaQBS5A6zm0pustLfQe9Jh7DL3albCK1U2xLiLGhSlD79fg0H5inBwl3Vuzm9xnbSMLkxQp0teIw==","signatures":[{"sig":"MEYCIQC1hxhsUrlcZym/HpIOKe/9xrAXCdeM2TD8A4Xg+pUovAIhAPpGgiHVA04iigi786vet0++yo6/TGXA73kUh7fKLE56","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixdnbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmox1Q//Rdv71dHnaKd0tRiK3es1JRUYtaeZMjoNwxXUW2glTw8/OPl5\r\ndtxBo+ArEgAatEjt+xef0+zbpQQd6EI4W7bXb+mhJBjBDtoqUhdenQ5zUswi\r\nzXaenI8VMdpFb3YVOEzANtxKQU4ztSv/ZVtDYxVa1BeMw70Z8oVNNh72yJbd\r\nsSBH0S0utnigInDGpUa0AfeItT3WRYS3SZF77/wOtpnI7ld1BtQTopr5rVqB\r\nInfMdV7dWFrYHEG2ScqCL9knex3wrLxyznN9zzFTezPujWiS4STJwfKGgV6n\r\nl/IGNBy9gPqiAeXCbegxDFLcH5CNp5sQPIXbEMOt1QMwqWhVxXKoC+S8zhyS\r\ngxBBhfk+NeKRI+QQwrsGRFQ9GgINOMtfaTgIDXIiBregv6U9GS2yqXZ0jFpq\r\nlW+vd9txTjCdmYEW1tocTJkR5ZuhFPwFZmGBsQYG38CxzoULASNvjxmTutXA\r\nxUzigh4ZxfUjKerXgNXCstKNRBMVwzKMgWkqm2VWB/KP5zAR/uIWtGdhyktA\r\nE0p4SyDF+5CAKv4AivNNLbkLJapj5JdwqLfc9ZFgR7KDNtzw+wNv4AjtCSzf\r\nmsae/ON1K/18D8AXU0zsMAEJoMt/8zBGdmytxtRLk6184wprFb/D1l8ZPMqV\r\nkT0CaMVkIY7Toec8nR82qRoyemCxOINra+4=\r\n=snnC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a02fe49d3.0","@material/tab":"15.0.0-canary.a02fe49d3.0","@material/base":"15.0.0-canary.a02fe49d3.0","@material/animation":"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/tab-scroller_15.0.0-canary.a02fe49d3.0_1657133531422_0.5151392117485012","host":"s3://npm-registry-packages"}},"15.0.0-canary.826a3d8be.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.826a3d8be.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"31371630cb95d4cd65a70296deaba78949a5af27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.826a3d8be.0.tgz","fileCount":51,"integrity":"sha512-lOKjsKkAVY2I+5wsIPDQ1g9mv+aFl4IUqy/Z6IKXByNf9htWoyGp6ircWOsSWafpr3u0lCySzaOqh3glpYWPGg==","signatures":[{"sig":"MEYCIQD3N7yl/TZPteqgOpRNUz8oHevdDwp9xwca7+sh5wmOEgIhAITOOsqwOB6YJiWaM+E/YGMUBuWNNhTeeTYwbm9cf+S6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixeM3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZUg/9HassyH7Q8YB4T1uxclmtviKpFvPUDGEeiqc/eyZLWOEcD3eG\r\nHyeuFvI42VOnbU/bFjvo6u4SJBI6QbePAodftBE8vbR8zLQFQOi2e1QRBaPJ\r\n7QrXgegyN4XVTTn0LNMqdkEkoAMHueuqyNyJUDeI9GC2ovYCdL+IEpmC7lri\r\nZdNRQYGZrWR/UfV+XWBlRLbJcETM6m+e7RMeQRnZab6okoUUGhxIzsP4I2WO\r\nQTqHLaYb2WsrRQy1SBdx3OGGJKlbGEjRHVF/Aiza56zSWwMLig/fzPBrZ5bj\r\nyGCmfejFt6pPysElwZrWOHhKg8XuBDvLuSHxJfoYFlpOzK0R/qJyguFa4ZGa\r\n8p4Oxc28ENt74CKGNyud35/2hbbpr1djxk7P+3rxsJJPod85tVi/OHyXp87c\r\nMZESP0U1cHVUw/gzDAgYJ/DS+QdazttVrbfYFrtZpuV1kCRy6MqhPDHoqD9B\r\nvPqMlcUHgYReJFznjQhQwVnWsQ9nbp/si3dO8m96EFldFk95Ll4X8gnb9LmM\r\njaML2vJb3swB/Ql9SPTasOS8K7YkEn/idbMb+MSHhQXn6JNX+7YSC+dIdgXM\r\nyUf9vdd5jT43M/mNNTwQ7ymJxOIdjJOJj02mq3GyN68TyN8mgMLALvy5i4Y8\r\nRTYVBNzlvE2EdngdVVAEVaGMtbNToTOoQsY=\r\n=HYEU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.826a3d8be.0","@material/tab":"15.0.0-canary.826a3d8be.0","@material/base":"15.0.0-canary.826a3d8be.0","@material/animation":"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/tab-scroller_15.0.0-canary.826a3d8be.0_1657135926765_0.882656243680541","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef276aa93.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ef276aa93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"320a829cc4b7b2e637e7b805daca84edd5dece81","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ef276aa93.0.tgz","fileCount":51,"integrity":"sha512-76X92oEmeJGlq72YUTxLXpp/dxlApblp3YGeVlNH5+oC4VrcYXpB8jDImhxgbqtfv56bhsoA5yUer5xvO2PtHw==","signatures":[{"sig":"MEYCIQDjnoIOhj+/LpxtO2/ulIE5je51S33l11npQGgPS9xGsAIhAO3qf1FLlmbckRxcaevOYzCXXWtwnSEc8gHl15bSvWre","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxH2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkShAAjHYaskJYSNneu1F2ey39j8NyhX2xTNWPNQ42LbB967ndSMc3\r\nlwnj3NHmoVN+/h/5+R2hZaUFIMnQx2+wIj37EBtbeN2qmgDZO0Yc/d6qqE9q\r\nMXOg0DiMWd1XOK+Npe3VGNZUTCmv6hfOGwkiYSiZOqt8/+XwwALZRZtdrdUv\r\nAZXQjwg7FOlDL/QIo4JI/w/6K3EY1BSB+dQvIQRcfc8pNmZjiRpI4lCjVr8L\r\nmWm53G5kJsLBkZ3PFIYXxmxj6KffUniLgZN6BFwobPot8uULaK1WMtr2jR5q\r\nNEufBCMybltKWw7828iY6dkQO5R63qVRTKebsT4bCiKdz1bFYZM1DLGeJ3Kf\r\nb/7N/iX5raDdGwpho4MDTGGBdrLrO+W3ENPoskWTeu1CCKaJ8kM+sifsjz1o\r\nFThftVO9T9hSTsp/xMcqv7AA0z/rMaMhFvIRraJaPnaqSJ49W66a0kj7HoEj\r\nWThQAwsAwclwk1dW4aOJdw0dIj6nHg8mU8PYLz/ZC72001VgLRvvZMgJpnNt\r\nB0LNgWdjEqEfCrufI85doXNpas3mM1NMp7FVWn7ARlYCA/hORuebffIBODrA\r\neVJFf2JJ38CTNhHqYHsbopk5owcrDv4vxw8Pv4n2ONGG7HY0JtyW/oUs4jas\r\n4CMOPINQRN1v2UQNt/0yhVTcLTEHMVN2APc=\r\n=mJBw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef276aa93.0","@material/tab":"15.0.0-canary.ef276aa93.0","@material/base":"15.0.0-canary.ef276aa93.0","@material/animation":"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/tab-scroller_15.0.0-canary.ef276aa93.0_1657213430187_0.6534310056058774","host":"s3://npm-registry-packages"}},"15.0.0-canary.59cf61d6b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.59cf61d6b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b1ecdb7bb67a1d20bc0e8f247442072540d148f5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.59cf61d6b.0.tgz","fileCount":51,"integrity":"sha512-zva7qAK6CblPH9fvFIKPZ6xlpEWFAROWXktkzHhzOU697vBcByBPyTY1IJ70ZkTwfYU8/HkltjgiLAyVGPDQjA==","signatures":[{"sig":"MEYCIQCdNQF+2SUJ62B4i7AXn1qiQsww/+9UZKCyoI2RGz/BoAIhAN6VwYgc8gI6uT+gxB7HCybsWtTiMt66Z6OzkUqnwxsI","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJixxixACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpPew/+OChFflwj77Xz4Tzq2vNuL7DWA5806X3yfiTZXH1bG+x2gxFa\r\nJjG42QzOZubHQ2cTzTihjPmNhBgS4mEXoCp++2Lo1aF4p8z5tC05F5bX4i8E\r\nYRZ3HqL10CWmIgDF+bl5ioxxEfMByvDZMwv4Yd8b3QuzG6MPR3oqbbujShI6\r\ngtTooN45hDkvr94S+xoFU0HXF0k8YIgMYei9D0RBDKLAOhYdzJbeKVD0xPO1\r\nDF8X9xqAE+8R5h/GVC/ZxrWk1gTj69CJiX0UuIlS/Qvi+vNQbK27KgdOkvOJ\r\nSg+C6HyciMPoMIhDM1lAHQAiS7fDOEIaQ0+tpgN8irt9fayKHUs5bY/pDT45\r\nr87nUFz5MT3w1wrEyF6vFdvx7ZB4f6YfUIjc+5jGoAYl5fToIC9LbK7I2pEf\r\n9WlHjfft0FOO1t0hvNFBdlBslC0JXlWDLSEYVXL15GHms9F4TKSXS3ti69nl\r\noe1mh+zrAs7OHQrUdF8OWC8PVZ6QML8bNBdO0c3ztSrL5sDt4hmD1CgktMFK\r\nWhQgj0+ozLwvSr6MafH1jSrW0Yk+uza41T4EPAipsogBQlI0oX6nSXppAnTA\r\nh40i+0w5fY7KijbtGQmtFs4CkhcZA34tiVoApJhBuVS8tArsHNxqBbrF+Pyf\r\nSHQz4mGCGhvVuAnLHIPVOqgmcDceo1suq7Q=\r\n=qG+V\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.59cf61d6b.0","@material/tab":"15.0.0-canary.59cf61d6b.0","@material/base":"15.0.0-canary.59cf61d6b.0","@material/animation":"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/tab-scroller_15.0.0-canary.59cf61d6b.0_1657215153174_0.8176911465550076","host":"s3://npm-registry-packages"}},"15.0.0-canary.8647092f7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8647092f7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4b6f6172fd4d043e7c88476a68fa7ecc0eef1619","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8647092f7.0.tgz","fileCount":51,"integrity":"sha512-ec2ziwbkg30XwaZ/JH2rEDUP74jBbJ5cy0FNNfSsiHl2Dt2wvkZVldHLTMhRUgn24bslN1AM8gXEFxNxokMpuQ==","signatures":[{"sig":"MEUCIQCqSM0F7f9oailpxsu42PbnwKY3t3ZfoL0JFkH4xbpFQgIgNZbJxQtXTk1CeSbRlkt36PsJ7Xu004eIscX8zQHvTKY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJix0SRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpk5Q/7BFv4318one6jpEEIfNaoOqf0j6dDOMfEOHDdX7DtWDc9z+HG\r\njnaUXmyuIedxH3bPqdCu+F+J6c95meGEzSSNV2mnByfLvCwrD/2ytxQry/tb\r\nnnpmw6LjtrKvLOBoaHxq5ROvr8M9WyRRjlX5L4vsV/rJdMFqGhvxEAM4ihw3\r\nG0Dtd7vJ24v3sblhItYQ5dprmjrzT0+8nQVKq6MoIk15HG5TkrUdlKyDKKrn\r\nd7D48qvLf6NJf0CHmgWBNHxTbVakO2NjNyW4S8WaPAOUJvhgYS6ge7Z2wT3W\r\nRvLiPGkeHU6FPX/6ic/2AFL6oflPb4u8pI73gfGVccoLZhdidSmcdRmx9W8U\r\nKEa75PuO04bNDYmMvp7yPwK4Xp/pWkpgt6O88+F/RfGz2I/BIRUmkIa1ke8/\r\nZJmeW6RmLptz/qAz9Ki/BeTVGWv/JK/gcTmnU7wUtvPDFi79gZH7Ql13r8+T\r\nTJ4w0CAbDxmyKGR+iUFEAgyIeW9Q3inKpEaQB23EYBSJyIEQ40jB3xQBt+GY\r\nMOIqrv8NZfkTNBo7sbvxTKPq9420qqCDWBFY3lLh1nJ8KrqDMSiKHK2S+Yt3\r\nKko8NF/NcuRc8L9C3bWPIyYsXLlTy1Zdev+at5p1X0Sh/RYA0BIWE2zQs0LN\r\n8++21ldJzLwlpLthDWwGQIW2tZMiKXoCAZ8=\r\n=ZM/F\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8647092f7.0","@material/tab":"15.0.0-canary.8647092f7.0","@material/base":"15.0.0-canary.8647092f7.0","@material/animation":"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/tab-scroller_15.0.0-canary.8647092f7.0_1657226384872_0.06316888621327155","host":"s3://npm-registry-packages"}},"15.0.0-canary.02ecd4d85.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.02ecd4d85.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d808d9fd243ab4343d9e959f36a6dd94bb57687b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.02ecd4d85.0.tgz","fileCount":51,"integrity":"sha512-acAlLZZXLpwBvL82rsE2Lglmg7GnTcKO8tgEhNB7Mi12zS5KEnaKxIkHw8Yq2YIBfn7sKMeUjGF5eLjPjOKKpQ==","signatures":[{"sig":"MEYCIQCFL5i/2Ne0jkEOpehFegDJf1TmhTWz4T+eVD0spGCNvAIhANFnfeUEdgEvalyLDCWuqVEk9V5gURW2FWWu3EuCdkVp","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizFJ3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrhbw//W7E4md+X23J6JZPGk9AVtt61T2JxAdYs//mDuuvpjJ2uqbGS\r\nTRoc6OzJ8kTyPuSgaxch3vfzD9vnFl5XDQCpNU3R3D6W0k8khIKwRNcmDq4u\r\neVkYoLzB5WvRsiG0q4iyX9mhasQF74J506g6tdrYzuCteWKwW/GYAkqYSAwK\r\nOUooJCC+BnUDo5kiwEw29E9jA5sfIp05lYF6Cd9s0DLbcyEYiFYHUcYEJJOO\r\nGRSnPPrQF0RxPoh7+AQYwcSivqJWR69Y0YLGZxMORlm3/jAaSC5yGvunIIVP\r\nBLoaPI1TV4bDBCbjvEbEu/gRdThgh84nEgbL5Vvzepsii30WEC47cffemGvC\r\nkm1WrJ2sbUxp/AiTQ7pPdBiMP1TXN0XukmLuquRteLmQx60DxqKjdx6dOdr3\r\nRrMCM7xn+6tLEqS7ggLLmBs2gr4Q/uX2Jz8bIctG5v0eOSqesuBbAPiNs/o9\r\nQ/9/zslVGEm4Mwl9244ZIkOyU9PIwwTzkBFZOVFfsb8r09KFt/itXSclWmj+\r\nJ2LSliDOBIltVZ+mU3P0eR0/a4UywWr1j5RvBXCTZiNjyPHEloaIBOUydCv6\r\nwOYD6je1kGt8Ysws1nnIKksfzIDzTXsgUdIvmAdOcDSKvPAmCJvoyxhkLdL4\r\nx7fmekbjYZZVMbPsJdhKv+4h+9dOtjkvnZY=\r\n=pCAn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.19.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.19.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02ecd4d85.0","@material/tab":"15.0.0-canary.02ecd4d85.0","@material/base":"15.0.0-canary.02ecd4d85.0","@material/animation":"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/tab-scroller_15.0.0-canary.02ecd4d85.0_1657557622774_0.3182081644572412","host":"s3://npm-registry-packages"}},"15.0.0-canary.63d3a146e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.63d3a146e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6d00ab84122a25a973ac75128be9efd217206d7c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.63d3a146e.0.tgz","fileCount":51,"integrity":"sha512-fTtyyUo+bbCydihxeeuPu0qOM8IXpHT6dLhvnZZFPNk6pW+kFM2khH5W59QooMjDjcMs65D180XyNN2VTaOMSQ==","signatures":[{"sig":"MEUCIDkK1Sj7aLenCTMFY6kRkbVyfMgdmzaxADanyXjkCjlsAiEAguCTv80T5ZWWc4zqLFWpUXQ2sRyUtktVAX2f8zivGZI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV0fACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpDvA/+O5miPXDEk/u1YWw85ibgShYe3TorDOkifpOfuiuibSGaf76r\r\nVfTFovMri8EOuR2X5xbxNwRB85JxhwkqTFuaozBeUlpD/l7SQ3MvLybmuc5p\r\nlUblkFkDKyP63hwVE2edKfigJwrzE68czjpoz2EPjllVKj2qiV7nTeFR6sUC\r\nMsgDVfKrQOqu4ovrTDU6V5HlCV+hOtxEj8BeAu1uHJHzwfa3Ubd4TJfqA43M\r\nnK7rxSNo95FjZcVo23Z9hf1zWtb/376JZhqroEji894ZjKv9p56DPn6ZRNoi\r\nVtoDBxoMhtRvWaWnDVMMrguvsO/d+hPvPvIHRT6TCqAhEMJuyCTXSAtV4ifz\r\nFAqvuqwniVor/mxMDRteITJQVM4WR6mlUC/ZkZKHIwoBXtsjR6wc4WB0yCDe\r\n0/9CWeiUeOcy1CaerImqoSfDWi6CmzRa4fjp+Tyba0mrEjh7DrW/WLvpB8vB\r\nWzEPpZMQSLu4yX2v5SGaVO1Cr5TW3DnTKKkm1Hd6tbw6wk22QGl56W4k35Oc\r\n2J4TbAV/By//Qw9H2WOAN+F1ZHvSiLcCPUYC2GI4ZF61NtIz6CQWtajeYv0L\r\nNuSzVueNjrdhWIeaAb5sQgmIq28Wm5sXFxFCKxDpnEP3ngHPZdwhxBD/EIZi\r\nAQwkG23CG+wlKNFic+NxPh2vLLPEtMd2Zy4=\r\n=jdhl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63d3a146e.0","@material/tab":"15.0.0-canary.63d3a146e.0","@material/base":"15.0.0-canary.63d3a146e.0","@material/animation":"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/tab-scroller_15.0.0-canary.63d3a146e.0_1657625887608_0.3596482646460437","host":"s3://npm-registry-packages"}},"15.0.0-canary.88db01990.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.88db01990.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2c8fa3cf8b774340ec5cf65dee86c3e3be37a1cd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.88db01990.0.tgz","fileCount":51,"integrity":"sha512-R3kzF8P6mQicdv+M662YKqceEWDQH5eCUWO6MSPRStEjpp0ekn4ho3j9uKCA75ZP4epZS1cUlj01Lf7YiHj6oA==","signatures":[{"sig":"MEUCID02BYhnmgbym5HNRplz7FJ2NWgLdndTQyISJQeVsmNfAiEAtYhvuNh8yPP+6Fnxqlp1F/ccEf+WA2rVQNe55lc9nVw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJizV3WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoyDQ//UTsv7PkLgsiOaXvF/MGrp4wxo08JM3DuFGvsl1oVO3xWZWEE\r\nKdy4+/IZo/QbEBXkCHFM8W2xNFVINx5HP9K++yazrESugC5huf3ePiY6IoGy\r\nSITCeYoIHMAJAWnZJG9SrPQr4Qx1XdITyZ2YbFjVJoFrSXgARfy6ntXEMfq8\r\n9mPyAW+PIIWGOB+z9td+J/J36DIyGTavdS4qH+ACm4UAn4JPiVjX5UGyWw13\r\nmHPxxMTwqTkcNHuloVzB4V/LuwsooXZjmdMxxdkfzLCv9/f8Za7AaaItwRFg\r\n3bG9AgIi6OCXbzGJt044wbGQx/JHyBW5kFueonYbqPhocRaJDCF1fxsVwy2j\r\nmzEwAuH01t7kXRGCxO4EIAM1EiB2pnlT4dctzZVQ2+5QjRsgoHXbyq+ceXxn\r\nfa4BIwGYiQG6F9Pq4hzzzGXDRoWbs+Zj+3NcCaU3KrVP/Rgn7QVtMPK11W3T\r\nAEohdZ7TP/Evpvh3UEQRWEGXkx12FcSZYwx2VS1kgL6ZYyJ/depfiG0vEM91\r\niHEH1SS7bTb7J10CFxIZvmCcLuqs2kUPnQoh5J5eKnNiw8NPoi+bEsCpUmJ9\r\nL/h+7rRgJzq7jBCqiERckBERcB1HL7xE4HHiGABVpVSwE5A6esrznIRPFkNN\r\n5nWm/38HL8hPvQ0Of0CzPJbV8xCMVC8cNiI=\r\n=nQoW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.88db01990.0","@material/tab":"15.0.0-canary.88db01990.0","@material/base":"15.0.0-canary.88db01990.0","@material/animation":"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/tab-scroller_15.0.0-canary.88db01990.0_1657626070578_0.962429278841529","host":"s3://npm-registry-packages"}},"15.0.0-canary.6432d8fd7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6432d8fd7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2cb57edd39099f4bcf86fb118fbd8f69de5c77b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6432d8fd7.0.tgz","fileCount":51,"integrity":"sha512-tFe1Hjn9jNi66S3J24YGQ9OlG2jSkGPLmE5lXwEb5Xl1x5YNzmrFSwQWdJKWJsMAM2o3OdIASCfxMYj+ldU/NQ==","signatures":[{"sig":"MEUCIQC/0kZH5gtDCx0bRoJqExm8zoZTo41C4JHZJSKXg34REAIgXNFZAYI/OY7otiw86QJTXOUyalpiaEYwhds5QaMEOfo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJiz8X7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbSw/9FPYBJCDk8dUzhKXIMZr5pBNuXpw/FRyiwFqCDfx3DZz0+VLa\r\nbpDpiJ0jLDgomQ5vPAmVglzmfLODX8VirMN8NozkkY5qCKUdXgCwlzDeJ5mm\r\nD/JoEMcOVFX4XaaXsJPqQmpYIy/QyB5VnBLR0FZP+ZcfqLqjTwxC+w+TAuCH\r\niijHQJlVQ+hMWKsqOZwa6DeyAQQbaZmo7P+oikZWSsJbDp8rpueIBjD4ng47\r\noHrzPXF7gx4pPD3HBDw/9iBkDenKIzZUV+BCoLENhBLC9CUQd90VfJ+Qb9uJ\r\nIDBvSNHW8rJ6jHbupFDFC4966eh5k5ggWFfBxzThnpic/SBTrO/evdD4pOZs\r\nU+qE8LlkeFufshhG27t6X5ZAJPgTpjoij5AhSmCksumhT2iPNZ71FKaTE71o\r\n0LwT5MUq6igWyzpVUjrrnWyhwBYjKZ3aU3t49EC4efKpJ/W8/QmApHdE1ubf\r\nXgjyxxvDLl1Q3UET+XYIB/xk4D41J0j900GOlt54jnqvkHuKYbPOpanX/uvH\r\nHoiCopJXJ8Vfl99WNrTKcgBc+r9hVNnXhsB7dYHPA3JXsH4KhUOfCofj7cPp\r\nI/UnGz1Om/1ijguVZ5WoqDupbzwDC1vdr1r4WsjPoJBdhL/AJWt7Ak1VKhmz\r\nLZm48RjevTPT4dBZ7szulmoGyycJEuWKvO0=\r\n=Fu/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6432d8fd7.0","@material/tab":"15.0.0-canary.6432d8fd7.0","@material/base":"15.0.0-canary.6432d8fd7.0","@material/animation":"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/tab-scroller_15.0.0-canary.6432d8fd7.0_1657783802536_0.23713582646395848","host":"s3://npm-registry-packages"}},"15.0.0-canary.085f9b25c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.085f9b25c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"449185e9a4830c04c3160c38f10b7fc1604c1139","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.085f9b25c.0.tgz","fileCount":51,"integrity":"sha512-pLRlCc7o4+DBFqU+HTr5gWVz6w9TmKOEtkiPUci4xWfNlrMCtPZJAYsx5W7PdCZaoB5fI2cpmryUVHhagHUWaQ==","signatures":[{"sig":"MEYCIQCkwYuOpK4BnbVlkX1cVwbeMxoc2Dw+2Nmy0vXFcEW1aAIhALiup+EeOKm0Pmww+gjXSO0789zWLScijCocUm0dU9uA","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0EX0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokfA/9G/jaTE0JRP8wnE1vAoKcubQe3OxUV2Oi3XZncEKKfoC9vysb\r\ngKdnYJxwEo2+WWR01IoZAgf99sVCYsl1I/PoBetynjlsVvMMvYWXuTA15tmJ\r\nVvqA1pCO28ZbYjY7FfwdIhxE146KSfPVfuZo+2HcV3ORhVBhWXpGwyEJ6ai0\r\nHANrPTrURRetqJLzvFDncz/n6Y1jOSMv35pnGo01vyvAfWUdE+5sWsuZqK4X\r\naE488qpBEMufwlLraIsuliCcls5ImdB4Rkk3mKQoSiAfKFWrxA2bOl3wsjIT\r\n2p5wKxF5K1EAJnubcwAKI++ZHvieyIi3NqQBaMu6GPpy0eJAoQbYsqCMXCe9\r\nDculYSEBAjtY0cw7c8YhPIAttW9VXkQtZ554qI2DPq3Een7y2HimYQZuc5T4\r\n2kj+Ye/pEDWGl+q4lLObhipJaV9UaYFj6tcQ6nlEVmZIXGR4Lf587Mn8snnW\r\nhWOcsVZR/6yZQmbpZi6C2NCJM1drd5ZHiez3Cpz/arMCx1yM6SiOQEAM1nBx\r\n6PZxwOz6qg1N5Z8wlVPNmxHyXKcyXBGLpjNS1EpoJN7w3otDGOOVz/BSdoce\r\nr4xpxXUatmGb07JEQVVuRzfWmzCjLwyntXLasnLyYmRWPw7Lm8tvdVrSuQrC\r\nTO19GdVpFAVKdleopR+0oXP1jpczkMyw4Uk=\r\n=jWlY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.085f9b25c.0","@material/tab":"15.0.0-canary.085f9b25c.0","@material/base":"15.0.0-canary.085f9b25c.0","@material/animation":"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/tab-scroller_15.0.0-canary.085f9b25c.0_1657816563939_0.4674251712935775","host":"s3://npm-registry-packages"}},"15.0.0-canary.39f9424b3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.39f9424b3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"98bb7c140d3c4cc5e26f1c9e831db7a867cdeed7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.39f9424b3.0.tgz","fileCount":51,"integrity":"sha512-EWqtrHrcwk36tSe1w9Hc3aFLr2scgUV98YPImN8vawvvux34AqdvL7Bt5no1mdF9ox82BvuXCH+Z34G64twMVA==","signatures":[{"sig":"MEQCIH8RxvPBWuVzMvJHgI8QCEvrswjYl3U28K09dQZdJCxpAiBTKOnU2TiIyr9j7tZtbV4z1cJR5JTO8McLlb4R0QFh6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0E0SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+UQ//SUZh2Bubq5D6t+xFKewsfWMtsjqKMZf+vcdxMQJyTA69af4J\r\nmaYiCeuHGRmr6rwn3sjTMXRGcHnyjM2GCXa3BleHsjXmNfoUwTowwmTBbqBU\r\nhDHSernduMvDIPTHaG1FtZ9mwbAS6BTfPAVpjF4Z3lrwQIgCFzNfiqWbE50g\r\nGqxxAMepZRsmEf985miB+N59JvDaauiY1/2AjgaiJOCX7BZdGvpy0a7KJAbV\r\nR4Ls4o0j8j8Jbqq8vzADsUSsjZkz38OsqAZn7BoyxH9AXCbnYAUQlzOB30Q/\r\nbnvIJ69owAk8SP1pVeRelqso+r/rgjAvAQ92tiyFsp9kwJM8z2k5y5sK8get\r\nkWQ28BuIinn7lm/PKPh6O+LtijOI9+JKuRxSEGII7CIz1chNFdbOr+B5GAsb\r\nvaT6GYsRhF0xR0rbNmarD/Xf/VYIjwbGBM8KrdqmHgkbQjOu93PQ/Pv6lM0F\r\nIxBW95qxV5dfqALiVu3FLwIKMOzvI5qLV6+d0xrIUqKH+4ihfk+JylmVkO96\r\n1TO3al7YNDVikQNl1ALHm7p4bmJoCs/GopeNZoWE8uP0C/bl9fP4eadzeLZl\r\n91nMWRLpu9TrStuMwp9j/GedCfsieYmf7c3BLBO+9nCuZHY4i+Qx8hjeDz4X\r\nD/4Fbv2eXdUJKNRDf5xVmUXI0nyWPoyf5vc=\r\n=rdFZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39f9424b3.0","@material/tab":"15.0.0-canary.39f9424b3.0","@material/base":"15.0.0-canary.39f9424b3.0","@material/animation":"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/tab-scroller_15.0.0-canary.39f9424b3.0_1657818386083_0.5343958465494743","host":"s3://npm-registry-packages"}},"15.0.0-canary.ae9fce587.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ae9fce587.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2fb92f7a24e92f182fc480ab2a3294cadc55294f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ae9fce587.0.tgz","fileCount":51,"integrity":"sha512-DrEkyg9W3VrqCO8lMEUwuw5+DSuu3R5nESu3wgmCePD/z12qMngmBuijvHKcqc9lUfsCV4q1yCMeCk7WPHLENg==","signatures":[{"sig":"MEUCIHmttNTtEBIoDbZ30rPSQap6+JBLsQTqsdjfzfOd3VkiAiEA9bYsRdTsjXUXUVLyaXQyUS6mURm9JjaeqHCe2eok+D4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0FvNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoPfg//dBA3obdW0C0+qbaJ82p9Q7nG2TgtwM4nM3/8/YCbZ1HXzgrX\r\nAhJ04poSblqYGOvZA/h55rNXzEhuse63Wm56OQ6PkWS6ikq6Uoj/rY5Sw7jL\r\nhdQ8bETeYve7OrtEJJ7MUne5JBAbbLbvQy594q7wQW0fjsZkJoMOP0ANRR3D\r\nrPvsDdd6yu2a1/LQ1/MsCX4Smei+Hjt9c88jFg0TT8GSxQT/Qb2hWCyDtWqE\r\nVmPcUEU/HQKDYicC2fGY7D7hyo2WIetSK2uE7s7HpamLT0uI90QVdFZ8apne\r\nf37FRw8ce/V3bPnxOZJc+gnzQadim4JOJgZOAnsrtxZFrgOo/rfdU1JXISzU\r\nYbOHuP6WyZ6hy3KK0AF/Q6Q6lr5kjpU2hfGEMtd4xkL4OEABGLNMF52kgAYL\r\nTBlAnvH7E23Yp4ib1ejiHN959rFZ3Y6Wn1IfUeFrtVLYDmoPr3ELiGYpw8nw\r\nW48tMtc8CcdAsL2bUsrTGyaO5pOHBv/0hDGGjf7dS7Dtxvq0ZGvIwet5CqPu\r\n7+wHiqov3SP/r9fmgpVMmAP+ZxDWqPX5xXwQbFT08pxjCOgnZaXMQbGyWrRj\r\n5I4PgTKWgXmCo54PwJ65Lt+iabEjMA6EBKQkvNDzL9ZPp2LWAyrHdBWZw46R\r\nha5lXJePu0qoAzgaWLJ99xQ7UxNbMKm3nfs=\r\n=1LuT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ae9fce587.0","@material/tab":"15.0.0-canary.ae9fce587.0","@material/base":"15.0.0-canary.ae9fce587.0","@material/animation":"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/tab-scroller_15.0.0-canary.ae9fce587.0_1657822157006_0.8385282315944569","host":"s3://npm-registry-packages"}},"15.0.0-canary.1ebddc343.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1ebddc343.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ec4a0fc288ef880284255cd7fed5d5ad8dcc1445","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1ebddc343.0.tgz","fileCount":51,"integrity":"sha512-lV/Q81sZQNYVwhlLnOfl3GRCab164hujMpQCJGdIqKBYQORcXSpt/lfGnRYNGwl3PAruMoPBmW748daBBJb3Bg==","signatures":[{"sig":"MEUCIQDmfVixgN37/Isx5vt5zJl+lZQY3Gj7olxCNmmc3qdwugIgH8rCtX4nYGerf3WgTSEtHe9ouCEL+kWAe9U2kgFxHU8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi0SpWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm3w//YGKE4Zi0QChPzS9SWyvZ9gJAplW3jty0ILGi47rK/2yUm5Wc\r\nfP5XqM95cuivSE+qYCJEKh54R3M3Tkf3BrMfWPW6/bXsEVg+xco6qUSns72t\r\nCE0Rp0/pyCzi2gFLy7XAzVlc/zXmWTZL2PB+us5mmZw/0X62irzWPt9DXTzJ\r\nm/qkuB+qONpqEZ5M6S51qr0eh+dJ4a6NJDutzYpO/SsnlX4kS94jDPZ3ougr\r\nqRO8I0ONZxleH9tyOenmkb0Sp1TS1HNaVdOnpjKrys5lmltVeIi6nGiBgjC9\r\no9xo0kHL3ZumgqW/BnfkwL0rY3wpKjiHeg8PigRhkQbRrz9ZdjPqPu/3AfSR\r\nvItxkekr6b/+1K4AyJ9Qkz2axwHzg/SOQU0hDgVAJawtZVI+tUiY0nBUsRln\r\n3gKbh+y5kz5R41lZr/vu0PYw4vwbhBEAN69NOAdjf05JeHf+IUzjlMIsww2j\r\n2q5rV2lGWrGTcI9RYPqxxE4UXcTD6Rpwr/FjT5XOJ1+A8ba20cjBrfGrJWa7\r\n+UcGeoAb/3dwvm59ah24bGMjyiqaJVxfaOewP6eFNQZ6z5JbwkjSJmzWt4OW\r\ngxkvEFZqfvFHMC/rzDgF11AE3sli5i9JOiT8oVUSTZmaIZwyQJoCN8mahC15\r\nUPvAD0utI5ZuK0WEFxCc6kyWigVKy84I2jc=\r\n=6vEH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1ebddc343.0","@material/tab":"15.0.0-canary.1ebddc343.0","@material/base":"15.0.0-canary.1ebddc343.0","@material/animation":"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/tab-scroller_15.0.0-canary.1ebddc343.0_1657875030371_0.01774583248704875","host":"s3://npm-registry-packages"}},"15.0.0-canary.c5018840c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c5018840c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e9e36a0336079a1fe518f1523cdd0933d1480e0f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c5018840c.0.tgz","fileCount":51,"integrity":"sha512-XTh7Fu4dKnoKGEvMDJrlWr9Q1L+ZJ+CsztG616DPNz563hEIygJaiPo/T/r0chHwRL45bsdaz1sQEMLeo15Y+g==","signatures":[{"sig":"MEYCIQCcfkisOHMkUSCzW+NajJERMoamjDuQvrQP7DA3whafKwIhAIG1SdHULkGiaefnlL/89Fm+zKcUxCpp5Nl7AWJVM77z","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1St0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpfqA//ZEW9Kp4I8FUWG5VB/SICh789H4lJTKfebsYdj95OrjP74nzB\r\nHnwn6s2L2sJNjsYODoN8LWnD8zXdJKKKwqxOKIPno8onxd55SIPBV9DykDlF\r\n/29YDWOlXWWHo7iMa8upYtri0idU0i+Mjf6Oa7Z36Wku3+K4spjrjqEYzZUF\r\nYrXQwYe0/0H9PJ7JXv5n0o639oo+WJ8kBb76Qdt9fIrhKIuRBgcNADXkcTvu\r\neOdMSHxKFZqgYQCzWjQxcPCivuQqi6jL5R9dr7ISaNF6KdTNBiAGyMe7/Wr4\r\n40L521T5iVLsTXTQLTZyymJehz7EEQ55E1a5nd6wdBgsfPjhtkWOugJys8TQ\r\nzypfd8GnJcbdB+heNAlmJNonC2x6im0YJukMk2R4zqisRT25y6qooO/7xHIK\r\nZZLQ11Djy0ZrR5NQxRSQ6b+CsQLS+zIZxlFWZjy7aGSXaYmJSA/Yz4UV2LHU\r\n2g1iK74X5eqbXe0pfmyk75ibh91Phl1I0wRMBx1Fd4djXv5/v6NgpafJ2Bfh\r\nRo/82/9KrS2U0ICPE9B9nPwAKgIhivL2JR8zatZVBBsWBp4/hDkur7fPObeD\r\ntQdpmGqtprh4ADOsUlwIdozmjDdylO83JqHYW1TyfE2smqByOXvjrBQDCDOi\r\nTFeSOnuzoJY4zXtzh+OWit36LpdUFUzEvps=\r\n=XgEd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c5018840c.0","@material/tab":"15.0.0-canary.c5018840c.0","@material/base":"15.0.0-canary.c5018840c.0","@material/animation":"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/tab-scroller_15.0.0-canary.c5018840c.0_1658137460344_0.4047628527103677","host":"s3://npm-registry-packages"}},"15.0.0-canary.551b40d18.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.551b40d18.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e75f776e615d46203c6963ae172ec7640c3fc3c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.551b40d18.0.tgz","fileCount":51,"integrity":"sha512-cnlaAujdk4uNE0KNXs9e6wTFsA4YvByz1g1Bz8+T9S/1ppHociwKJJw2iBp3y+DI+sWgii22wL3hiPOZphT/sQ==","signatures":[{"sig":"MEUCIHrdMOt/hzWGt32b4Ena8E7Uz2OHWJVeHvEF7fzAs/AlAiEAiRO6xOrRyp68zfYPdEmZ1ssILqeXvOMIVma+b616Dc4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1S+tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCyA/+O1fKylBASIc7YeFNe4nCPWwaF9A6R8zC/RtjgXz0jQATVT4e\r\nZRluo/89lGO38amcwUVeBEWXUqSnA/NwBuhd5rvpLyZdlspY2wtk3lkZ2RdT\r\n9540vETo5sqxrlPGUUdTCTnNkKkKmD9+UQ2PnUjkvSVgojshNxtNmEGtigNg\r\nJzClHCWfQPP/2XuFB1s5CxprNqFNmCPp12n1b5JmitcwKLRLJrOU22nrk/Q1\r\nDt8GYmmr3WQrDGMK9khM+T05kTpRisWHK9z8E45g5xZoEuX8zUHdbmlfDo21\r\ntT50RxR6x4xM+Bc+4ccgzvIsL+oXb02LgZisQX27I/GRpMuUFrFqhx6JF+cB\r\nZnFmof6VU/zFrQd41p7leJsHGkRNuHfXrjk6JQcbx1fkmdgka4RE8f+8Qi3j\r\ny+FpVE+CEFjsU39HmtXuTBNeCuLHiYkhfqOr/qUDj/FV7zDpEdSUKVrlHaXY\r\nyKA5PLMsYtTXmrcx4vJ9krsTwKo0uQVH0KMP4/Cr2hDh/xPlKxtfipjeg9jA\r\nSXbNFDyWzWv37kvF/fQhuZWp8/S2E+hUcF6Q0DzyNg+pwttkeAU2u44YZJcJ\r\nOEpNuQU+Y3M4f9JqQTY88bEr+OymnT022S20Es5tRCcef4QPj8s06HGXybhE\r\nPOol3C343FwGHzEfYHhfXqWOCxuzWO3bi0M=\r\n=hFLY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.551b40d18.0","@material/tab":"15.0.0-canary.551b40d18.0","@material/base":"15.0.0-canary.551b40d18.0","@material/animation":"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/tab-scroller_15.0.0-canary.551b40d18.0_1658138540877_0.008828738117094614","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf9f12371.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cf9f12371.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ac033f462350a959ffa6ec42c724879dd9a096ce","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cf9f12371.0.tgz","fileCount":51,"integrity":"sha512-cJ8c5MmrZNHdRxwRd6FkYoVdT6BdOj7mriBwtEuhFeyxLVlXc9ciiZbld+hHgZhqARljwpdHSs6NQKFyM7xC0Q==","signatures":[{"sig":"MEUCIQCGd3msOV7SSA7q210EbZVykH77pc3yaXYOvKXYwE75XAIgIXBU7Xn6ax6XjFBI/HCMlEO31oWOvb/bCjLUqP4gYgk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1TCaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxmBAAm6jeXpF5Lbt2dLetDMC8qBrnI2/XUsdMnvuogHaizY8EGxrG\r\neebIx22oXsvSAVMl5Zg/hs1AfLYA4pyFRtpbpsBNuSILmwgn6UQQ41eN0raX\r\nTsWp/qaq55hKNHDswV64kZl1GNELpoq1CERZ1N78Z1ZggaO2AxNRi9PI6v1x\r\njmEaFts7TcNgzlkdcSXC6A1fqhJ/4igpOAZWPGcU0yH5PfTxJ4/CA/q9YUcO\r\nJJW+gzPc44n+jaf/Jbyc3W53P3py8wJeFB+YnT68Hd/kqYoeF6B6Ab9r7nBT\r\nLdXlJmU60wm8Fzq4lTmP0P/Jz+bdnOpItnl5k4U6ZFvarg9OjqAg1Uet/Ohm\r\nV5k+2Mda5GL/G0TgOvhXd+x72mPpzf7QrjKJM7BCJza5+VH0ruXLUadBnA0e\r\nzKUSmqIzY0G7a62w4VyVNcc6OsBFpkVBr9bmAUGehAOJ9DgtnhQ5Iqjx9Oh1\r\nVb8S1fP/KMAz8e7bEji1d8G+zuyUINs8rzf7ujHH07UjPSekEI5zKmVG9naW\r\ncCe/YpyO/KeXymPwqM1SDp+OgLDKV3/OY9mOfEzb3yYvLHrjHFxSuDfrrpUf\r\npFDeA+rAqGlH2ZVHHYx6UhP8CVPmkvH3ntQhkP/s/IMcKwpiakW0ijGTj8Yw\r\nLnACK1TOfvgM4xli+kcjlldLPn2+7ZwcQoQ=\r\n=QjYd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf9f12371.0","@material/tab":"15.0.0-canary.cf9f12371.0","@material/base":"15.0.0-canary.cf9f12371.0","@material/animation":"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/tab-scroller_15.0.0-canary.cf9f12371.0_1658138777938_0.4265069204555565","host":"s3://npm-registry-packages"}},"15.0.0-canary.2797ff8b6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2797ff8b6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d36ffff750315b27447e0ffd4d4cd37fad2d3aa7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2797ff8b6.0.tgz","fileCount":51,"integrity":"sha512-VLl7aJn8HpDkBYAyfUDfiB/ZTokMJE/iiBZkfwSk1cfKV0yQlIi6MyYSxDOKhvj7y/l5t6d9nNbTyLXJFNNXHg==","signatures":[{"sig":"MEYCIQDZphw5Ymn82R406H37Gx1dqhyv6y7Mr/XkQQmJo1CpkAIhAPah+1vDkviOdyiwHJcGWQ3AqPLMno43d98f8STOWhOu","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":327977,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi1fnzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0ow/+PYM4fNHHKCxTu8wlT5KDf1ynKf6LWl+BOUEh/bMiRwvi+BSj\r\nMOlD1C+e0HTFnetLVw0DJ8bi0zSSztJ7SstjQYiTErEGUobSXW3e2eBIPwYI\r\nAUsgfyo9LJ5ddTJ40MZVeXOERrgHGUUp0wdAerGd1d8Dc7EFAPD06nJtFaPX\r\n/rK0nVbcWp+8QZC/I2G0N8IROs9FzTt8SiVjAXG4hYDgGY9capZBm3P7viN4\r\n9ydG2GUX+XMZZYQPbOjHEHEEGCgA/qafbX8VzuPceudHK7TfNgF3qBaok82f\r\nlCxkxFZn841v7v6rATgHJO8TOA/KrQ5eGwPXpDlkbpRDEPY3AYXKqPUTd8Dd\r\nLvKwOtvsGPdWAXuEHM46HRDOz+kEwgLPK7Lglx9XHi0qTGIP21b3z9WajNHy\r\nrQ9/ElzuoKXK06qOzMhc0/BEwEn0c4/1GlZAoNBXLhxAFGL4UObECdrab/vI\r\nZtxYgU4QR7jBQEV1TlmC9JaeL4PErQgBGOsAqyCJh54S5SaRdE2vyyOY330Q\r\nUTlFBXcpci+c39oiMyz46PNKUI31kqTEoPmHt61rbEjEYH8DrfLFbGnoBrM2\r\neFpDG9XlnRIUzaVSJJhsBMVL6leg3NGiiUdyft2uAUOal3OZ2qUCv7wnNrK1\r\nT9AWZmrWX8L+LH4XdLIDnGlECiWWaCHLSc8=\r\n=V6Dj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2797ff8b6.0","@material/tab":"15.0.0-canary.2797ff8b6.0","@material/base":"15.0.0-canary.2797ff8b6.0","@material/animation":"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/tab-scroller_15.0.0-canary.2797ff8b6.0_1658190322814_0.09883682472464361","host":"s3://npm-registry-packages"}},"15.0.0-canary.110fafa17.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.110fafa17.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c4701c2a7d69051bbf167e2f1edc5a710c3d10ee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.110fafa17.0.tgz","fileCount":51,"integrity":"sha512-t+PqTvJo4JcVhhVl7EEYXQL2VrH52bpblZV5CQ/zxf8dtugGhKArhAwn91AGgLJlx+AkYUXXhQg1CRTG96gogQ==","signatures":[{"sig":"MEQCIBvqpIr88+qT7kHbGSFvCpNcsYNreAuwqExGA6oihTxxAiBYecJF2bTQ730pc3DQocX/ooPD7q7iregAU/p+N2sA/g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi17MnACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr2Sg/+OLm2mp0V/+qv7v8JXjPrL8MXzBuMNj/I6wMJr99zQLe6+8ve\r\nZdUepgrwRMLqdZbyburTXowG9kPRwgatTO+m0/0Bez7hlF7khiGrVUKLPQHb\r\nibozw44RtfBM/FSl/QQF9GCZqqUgUp3kyxPRqQ8Qwd+JqiIW/eKjpNcjntMP\r\nzmohMMwy6UXspbce5ttjfu+eiJy3nmh0Z62MFsHbVKhU3i3kyCkYa49zyRA5\r\nZZdE8NuazBHIkueJ5U238qh4S2jKLCu/FbCUkn60f1rA3Cjt9m8pWr5+6r48\r\nwZw5Vm3HQg8hJZlfifGC+KJV6brqGrS7BjNbosN9g1372ALtuHm8asChfS6x\r\n6aSa/lrox7RRi4u2IicRaneF9tiAiSHPJ3HG8Cnc79egvZhVwZ7eQw+59N75\r\nRVXMJleetgSAYHG+ymyV+FH/1hPIy3G1yEUPR2N1VPcry8LopAnNwkTp6UJ7\r\n9R89mtCMy89klGplRt2jZE0N/gtEtn4Tt73BRkpwSa2k08yPT7wgcKeTpHAp\r\n74HwY5/MyjIMg3mEoSdk0FCC3mSqvjnsx2LnoRqSPzKG5m+6ZwB3LKUGznEf\r\nf5xwbsNzgD4HCpdkqm0dskLhOboc7lS/XNHbk5yDRsvd55mmkpPpSanDVJVs\r\nm+PBT59rTQgYUxzM/upSptdXjSMPPiGdD0o=\r\n=n7nw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.110fafa17.0","@material/tab":"15.0.0-canary.110fafa17.0","@material/base":"15.0.0-canary.110fafa17.0","@material/animation":"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/tab-scroller_15.0.0-canary.110fafa17.0_1658303270583_0.08374028362409436","host":"s3://npm-registry-packages"}},"15.0.0-canary.386ef1d2f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.386ef1d2f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3c4b637b2ac35afebde30dfe17171d72563a1088","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.386ef1d2f.0.tgz","fileCount":51,"integrity":"sha512-y4n3Ag5DbNb4GQmsWZaDoEkGItxHPavfw33L7mkgTysK/iMmliw4+O+J7Bs6s6R6ltiPG172ZFjj5vu7R1A+9g==","signatures":[{"sig":"MEUCIQDTgYEleoLGnOAm8rbvgwIeIrLyCNtvyTlW91la4OviIQIgDmNLVeHDEEt8Tz7vilLg7pVx2cFgr6cttNr5azIkM1Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EeZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+sg//b0vo3OlmKPy2T2Q/li1AGIebaoHJdO6crvR8wANBJ1M8WWjS\r\naRxop/01zsFuHVfZXnEArxd4A3G6T0+3F0WK5fH6zOQT9P/i0LV6ou64HvSO\r\npmGgAELH020kYuumnv1vIKVVCdmdk6QXAIE2odq2r6cNMFensgvSQXK3NY/z\r\nNbgZjZJBr6K+pUInRu2ObWfcZKpPNlaI8WJ3KW9qlQYFcAZvCD0iNNbBB84c\r\nge63xE8XSECGtwskFF540J0gzdSWRNChipvpjcXAvU/nXvqvEowp3N13wRDq\r\n7OJEVyUrw8GT77uD8vRWJfIVQnF/8VoC9ud2evyea92YZ4Cu/JwKkJQyAqvU\r\n2pv7/hVMojrRdwMBxS7TYGtz/0YEaKC0ZFmAcEiFVNawspSGeiKQOCzo4bIy\r\nUFXcjR9UsQFoBOiNiveLd+x4gOjgGYHwuGfcgfDhpaklA2mlhxbSyTAO6B7b\r\n+K/lhdtiF96cgHzxZFzW9VOMr4gg57FhU6WoCi6T4CU1S2tV3nBVwz8ZZoJa\r\nNHAAh7wnfMJZQ4vSjdf9Z+l861JljXk9LN2zzaM5akO6dnQ9hTu+PLSCHHNa\r\nDbfibIglPZKuu8slJwBOxM3SLEVIwg634dsZUVY7Y9xMxphXCeXfti3WqI5a\r\nin2vMPrp/F4vtbMgLiCAAovEj85uXbL9Z6U=\r\n=GTdd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.386ef1d2f.0","@material/tab":"15.0.0-canary.386ef1d2f.0","@material/base":"15.0.0-canary.386ef1d2f.0","@material/animation":"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/tab-scroller_15.0.0-canary.386ef1d2f.0_1658341273652_0.5416152815845636","host":"s3://npm-registry-packages"}},"15.0.0-canary.c3924efef.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c3924efef.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"35eb5d545a5ff06c31b7b41782e26996eb009348","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c3924efef.0.tgz","fileCount":51,"integrity":"sha512-ZYJ9UQ2TJ/He13J8E9uoEcNbb+S7cZ4iE2TWd4KqXhrHoLzKKPlw6G+BS03sbriE/TqS7Ao1S7dD5f395xFIdQ==","signatures":[{"sig":"MEUCIQDweQcAvdi5GM+EOmraAdRsa1Q4h03042NG0SmPiOcrYgIgEgGSCrZ2anhy4VTGTRYoYCCn+iL95flE1bDSkhmAUhQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2EndACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3Zw/9F/avtura++pgx9+/kHJjQDJoEiXI2NFv3Br1qw/CjYqc109c\r\nqe1Zcp+vkmXLO5NsZszcgzd3dkQDZv6VbAgvrRaMRSvRpiTT8bQVzIqfEesp\r\nPYcr5BazIhJBfBJC3A85pnl3R7eUIfGhDYS5Z6yc4SIng9OVOhPM9OFYm5R5\r\nW9bRW1sqtJ5gn0NLKCj09j2w3sudKB2wDVHE3SsK5NfWSRg9mOANYj6Ip48p\r\nd0LeSJLWdHmArBBh7umJgla/yd/9JZpuKxIB28ZfSBwi1pBlFvpJdya33VBu\r\n7NxhKx5+leSSj1po9KeF1WqJRePpOYpnlkEphAGxTCR34JBfJaZ/mq2w4DRI\r\nzDRsGGL4xbYH92rxTj5RfgUG/6hbo3Ttp+3ehkzCmDkdOnJzWeHz2YTI7y78\r\n2RLQg9SQn5UuaIDEbCZbl9eJzRhma8XORlHZqmdlhfsLQb3vuv9nl4bj5fXc\r\nAqoNGUMrxrt/Se0nCdb3BYd+BLStt/+h5+DGHpAw5QVuPsSgxhm07320wh4W\r\noEJVx8ksIG6BKAi3fmC2DE60q5LByNSB+VPBbQ0x+UNiqTuVcAu0PmwJhF3b\r\nECrzO78PUjD94IvBjtNnchaaKaFXIqZU5pJEwEQf+GiSMXUFhbEkgNHdqGl/\r\n40PTJWjYhtPcaYUCoMWyPSabBqNXTRfHorw=\r\n=l+qV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c3924efef.0","@material/tab":"15.0.0-canary.c3924efef.0","@material/base":"15.0.0-canary.c3924efef.0","@material/animation":"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/tab-scroller_15.0.0-canary.c3924efef.0_1658341853293_0.6056176466148939","host":"s3://npm-registry-packages"}},"15.0.0-canary.cf5c5907c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cf5c5907c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cc16ba54c099834612b8073270508b77b54296db","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cf5c5907c.0.tgz","fileCount":51,"integrity":"sha512-2Ncc1g4zPoSK1/H/H2kRBAVYN4hEKs2j00XFt0COVd4dzXuvLy4nBXnIHQEs5ZEJ+OUisCXP9h1FPomrJ4tAyg==","signatures":[{"sig":"MEQCIANRnx59NCtItTPwIc1ALukhO1HR5fgp+e7j9SZdQrbWAiAVRfXgzfALxkwJ0xeejZ8m2rtzr5BKpqGYGPx0N/uN1w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HIyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJfw//f4Le7M8tZsoSiV+g9YdZCcHDbZL41atgg6B/71GItGoVxQ09\r\nUt4DPyZmMKugk/7AX6HS+PGEAML9YdnHhl+OaNJQuWrsExe2lJrkgokCDUtu\r\n6VNnCQm09ft65JWfEvnjzmow8C1HyLMBVtiQY8CB090OhsXVAOgu+3B2K0EA\r\ntJ4BZcbOjJuToyszAJZxk9MzhrqoXj1ut5J+3z5u+6C/4mFMwlBxBRrZaIL4\r\n9RLyfJlUFv921P9WjbqEzpy8WdXpAItJcPcGAA1LYpP3Q5Qr6xPamhje8B5J\r\nDCWWgQ2rMV85P+HxOf5km11ZrUw9Zb3jsdaoS6x3GkO9AuSPcepBqExktXnp\r\nldgUO9BBs4JYB0MZXT9cs2Lg1ci9MPgWSbmirF/OsbuM+YBXtMDxImWOy9w7\r\nqIyYcOR2pWjW4teLOOB2Pcp5+sveUa0DtnNFStuxDsepmeDdOvywylgibRtX\r\nXHGBMK38SUvRuqNqSKj2KNXRZtsmn9Wpsa/znVhU/NFI+1Vl113ZobkgUKin\r\nv+fw7TpNlBmNOzsCsxsghLOKQFAmU7/bid4sMKZrvrvSSEhdje+b8lZgXss4\r\nYOzWz1vFODdMpY2snN94KTGtKI414YvUFx+PrydldExFBOXMk73nbpVNaK+n\r\ngEuTwe531SedAtAsMl1hNab7HGM7eMWLwzg=\r\n=4c4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cf5c5907c.0","@material/tab":"15.0.0-canary.cf5c5907c.0","@material/base":"15.0.0-canary.cf5c5907c.0","@material/animation":"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/tab-scroller_15.0.0-canary.cf5c5907c.0_1658352178288_0.2203746742468753","host":"s3://npm-registry-packages"}},"15.0.0-canary.0617e2319.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0617e2319.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7dc32ce585adee802b65202841bde63eb11e1da6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0617e2319.0.tgz","fileCount":51,"integrity":"sha512-tNsJbWxOJw5QF8pI0Vv5EAIt3CByfTOSsKta4pGSl2qFBbkzqlKZt1MQ0YIyXaNFkK3aoBIBtp9f2pxAZ2GtHQ==","signatures":[{"sig":"MEUCIQDbfxXr1F8VuHYMKi8LUdIE4sPBfk5gCIHK5PIpIaFLPwIgeo+gRdb4vlPV17POS5//m2n6DSaWelC0VuzzRgaSXiA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2HZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoduRAAjKdN84CDSHlu6D9hTdtqiqbJ/pV50zyf1XicvHeDRLRVhEUh\r\nBJCCFTspxu8AHn/k+0Ol4c93qJc+hUUiZGxc3sL9xZlInYY/BmA0jLV9f/yg\r\nStSncQd/UaNYch7KbEMSy8tZO1sV9Ixrfg52lZK7N1rDFlN86QFtQ/ofC6kT\r\nB+CfYsGZHkEEcvZtXuoeNHQzevJnNPyi56cd0fB1Elgv7q+u7qlAL1p4e3vB\r\nAUS3v5+ZeEtKmup/wijdV3TeYyd9G5PpknYqv4BDt+ZvXqjUb02N8J9K0Qhr\r\nlVJLsPas0D2Qu1ypDjT1Np3l1K1Ik7EE4T85yBttReERO50u/sUQfZaZj1za\r\neF0IsFdPDDHEk5/PcWSLktWiHZV+WFZj3Au21sLM1osL5Qio6/zUgzar5XlJ\r\nOYEJvP4baKtc1eyfP0coxPaVt9tI3tNrv3NCws7hX/DQVCFnvbMOOHExYNMT\r\nsV8C5rQNObl6bMtHerUflt1DD0J1iHpX9bo7sU0uLcBMBgKyNpWgfLOkCC1w\r\nIhVGyuvqrIC8wgb7K6ygGtUfhzLnx7WleuwgmaLtePEaDnZ4QntM6N2l313w\r\njdqsHhz2PO+US9TaIhorw18INpEUALdjWy8Zcqr10wnQe0w2RGxVBfKQgFV8\r\nKdi64Jwj629SN83fOPYXAMN3zHQ+4zrjHW4=\r\n=/kvu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0617e2319.0","@material/tab":"15.0.0-canary.0617e2319.0","@material/base":"15.0.0-canary.0617e2319.0","@material/animation":"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/tab-scroller_15.0.0-canary.0617e2319.0_1658353278991_0.03918413735355042","host":"s3://npm-registry-packages"}},"15.0.0-canary.a743b7967.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a743b7967.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9b4cd4f36a10db121824196e506750b35ed7b222","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a743b7967.0.tgz","fileCount":51,"integrity":"sha512-XegpY7tUaPQ/hK/ZBRcTDwiVG/Nw1jMvVGxD7wHhmhQxr6G3DOQ389JrFrm+FVI4PWZ5hxMN259m6QMh85fkeg==","signatures":[{"sig":"MEQCIDU7LMRXEkVz00Vjf2Y+98OG7Tpf15LmKtzDjEMbOJElAiBcVqnRyekfhu/WPvdMFcnjN2KEKZMEw5oIO+vOkxIqWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2Hp3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlnRAAljYY4JV+IaVu7LW4NRyiGv7qpX39Kf9cLX6d/RN+1miih/ML\r\nMMEs3YAU62iG1cnDumjies2DNJkd5IlnDYZfvB/oaMfbTi35qMDHCpw98b0f\r\npG8dOHeXyIterPtVLbk4wHHvbpmG93qxV/ppySJxkH49JhcSNqrpZ6ll7oub\r\nttzGPlEwzUyd9Ln3lU8fKpySN+7SaaMutwbMDSVdsFW5Fsbia3emFr4v6is4\r\ngkgYQUw/CnZDOEa0l2vkUCjAlwCkUpdzOzfSvfZIvY0tKfrAN6v6ISHj8OOY\r\nrCPDZQcqjQd1tL2bWIjcb5OlqmstxaCYYqXVE6V8Op9S7aygrS1o5frDm0u9\r\n2LIK74zPyxzOrc87d55Vu0+5WLzfopY8RFtZa8oczUubxiM82pYjjEP6XbNB\r\ne2Urogeea49rPGJwq/r+Il6MlpNUlSId+2MKvOVs/U4U3LXB61PtpHsbGwOQ\r\nr70NBO4nJTHhrEwpIDfLQL4mValb0Bie8/9F5SHFDEB4TaegmOAQHHu4bKyu\r\nNdUvwweSXQb4EPR2Kyr/xTLATm7ZT15lRgA6Apr2Aa+ruCLegoPeS3EYSk4B\r\nPy6wXFLn748r42Q5Fa+akUkgWrDDX234S5NPS++hNfnE/wDC/ljvVYBgZWSG\r\nofN0mutffOnsCVr6m1vIrRikiX7GYhhQm58=\r\n=BRk0\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a743b7967.0","@material/tab":"15.0.0-canary.a743b7967.0","@material/base":"15.0.0-canary.a743b7967.0","@material/animation":"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/tab-scroller_15.0.0-canary.a743b7967.0_1658354294953_0.9129074723983568","host":"s3://npm-registry-packages"}},"15.0.0-canary.69fd619d0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.69fd619d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3a77b30f0aceaac4229465ee2fcce4c7cf4e41f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.69fd619d0.0.tgz","fileCount":51,"integrity":"sha512-rUzVKN3nE+DZJTcl87pjBZ8KGzR3Wp4e/37mpoCJram8pgT4jMD7HnLL8uWzwZmQ0d0uGuVjAvFzvkY/ghtP3Q==","signatures":[{"sig":"MEQCIFYI+4NLjD9oGFBu0BG+RXzdhnarmTapkGRMDVMfKdFwAiBscWD5t3T0F+56Eul8XkJxRJOSicod26vXfHs+1r8c4A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi2H1QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqKoxAAiaab5k5EU2boLm8uIsaaPePurOwCLz2yJjV+zSKVpCanlsZI\r\nfYk5uOviqEwh+6W5gyvqllVwJnY5gW08yzeOtjUTGK9V5Kzw6Q9r3A/oQ3/O\r\nUgTEVDu2oDir2BT4qOhPaye+qyAX4At8g7Z+z6aUCNPU4W1qoy4pWdx6Z4ng\r\nQowWimIXv5OXAjTZuXGBB0KaB5NSehkBOkpZ4SnEFskAWaXickbJsmhp6iTT\r\nqzJauFbmt02BCRkJED/0GGMYy1NM3xBQfikeXa1jIsYWfm4hAWQKaWNH3fCl\r\nJBx3FwrMpGlUX2e3RmCt79Lwuv6GUjjqYO9G9KlOubkSyG403EBZnyLaN7N2\r\nHl78C1o1BADh6gtzrxKClsucwUoBv4MAfBzc3s1rYRp/NmtTCOPImVVaIIKl\r\nS2WXSk9zRAVCgaAg1+acSTG40TFsMLBclZx1OgMId6ZFBsFnW63k87TA4gCq\r\nEK4s+uCsy3lpsXZ+KFam3WQqvs2Bx7lHZEWJNbNjYaZD2vOg+/GMjYyZNkwP\r\n12WGRDKU8YAjjIV/wf79cl9Th89fxITqZKTaWqlh3bdCK7gDsGnx+s+79AzM\r\nZ/rc5IGk80qoxCgCYjIK38Ug5LIOB5GmD7jOw3rGqk2GbGKvd0m4xrkEJhtJ\r\ny6c/r4ysmS1FMS4V7yyDXeDDhpPuVLMJZNU=\r\n=hB4R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69fd619d0.0","@material/tab":"15.0.0-canary.69fd619d0.0","@material/base":"15.0.0-canary.69fd619d0.0","@material/animation":"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/tab-scroller_15.0.0-canary.69fd619d0.0_1658355024386_0.877981085261885","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a6ddc1cf.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2a6ddc1cf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"21f007894172f82784f13d113122f51a6c16abdc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2a6ddc1cf.0.tgz","fileCount":51,"integrity":"sha512-2C6Ol5gOgQW+3uNdH27XACEvMGrRQK/eP1WvicRiBiVaCRFADN39F2vOiHUsdYJQY9Ggl3Dr/udwrbYmB0z3Qg==","signatures":[{"sig":"MEQCIHma27eBBzsOClBetP/md1US+XMU4BfoTlmOXix8sm6vAiBKQar7TsKFpnb5eaJUQbQk8HKyUiIJ8DaASfm4tMQt5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi5AVfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+hQ/+Mrj4VN9TD3G6kkecAu3hGPUGASwL61VL3SNilR7zZc7KxhhP\r\nIzq/OYjuiPn1MqExa3gQyZvNm7EHsxhSWwnEYbihH81wE2bZVuTBGm7hc1YR\r\nM3lnGnyCFWd43TwORhCb1Nilfp1P2QplRrTWaD7XlELsg4oEhKIwhThQmifq\r\nrbpeUYYPwO/qmustwmO51f0+5BlWxl+wSb7dYmDo8iMUKw4cEtx/soQxX4JI\r\nCqT1kRo6fKu8IsAI3D0RmURusRsMPpgMbXjj7rnDFXibhp1dVSHzKrhgH9iy\r\nTA04Jnu4LahBfEiG9hCNAxlwtq2dp/tyroVI92KFbew+sCOTmfnesg9aWZYc\r\n0PZGPPUHuF1ODmflRHDrsCSAk8YrD8Eew1fg8yyWLamanwRsDqtInG591/if\r\nYO3fL00hGUMx+u/TLPxGOfc5K//TQ5Q+HBAb8UMz1PEDdqy03WLbzWDNb8fD\r\nXffRAod7BU/O2Jiajn+D2aFovZ604ynZAT/YfShgzDFmoctF4DQT/NLiFzW8\r\nwa0HkLhOiF7j0M6rvydAP2Qf0Q9I8PNL9xP/ZY+DyBGTNoGlU5kT/lhDdE3i\r\nNcEbaUQPYeSHHkK8MjDC2OrR0taEUH3JNhXujiESuYdflWmcHd7P/xn64LEV\r\nId62stZ308g5eAYA0hhk4rmw3xqRaYlgK3w=\r\n=/hl/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a6ddc1cf.0","@material/tab":"15.0.0-canary.2a6ddc1cf.0","@material/base":"15.0.0-canary.2a6ddc1cf.0","@material/animation":"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/tab-scroller_15.0.0-canary.2a6ddc1cf.0_1659110751072_0.4940403077619018","host":"s3://npm-registry-packages"}},"15.0.0-canary.86efd56f6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.86efd56f6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ba531bf4d17030acfe9496b28ebc4e23d1bfe6eb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.86efd56f6.0.tgz","fileCount":51,"integrity":"sha512-2l1IFXkObJm0P0aelPOc0mB9ZVGzZNmAX+49msN8ct5rvIK7iPQiHNfyXm4kgwqMEyR/2gB0OA4uXBp9b0m2mQ==","signatures":[{"sig":"MEYCIQCFpIUbSp8Z7lyNFNsKj0RDzZyJZD3fXfoBjvy4oyBNCQIhAMWF0/xKmKbpd/NntawzQSAchLXY59ZezDOe8ZqhhMTZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6TjeACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMEw/+NI1joz+VaznOE+i2pv3l2kMPWifV3HZ7KztGZtUEx4CwpQ6S\r\nf3anqQc0EZKhsNnyThy7AqZvLhQRr0Uhd4rnGyUwHkFvvMJPGjloW74uTv3a\r\n8qbfgRqDejF30nhchwDmcXi+2FES5bLxtF4GXLSqwM7H3AjhD6v/ZSJkSd9h\r\nVVtOTxAFO1zUBli7tbCORZ0/oJW1eRIpRD7g8dBFY44NowCZSG2ZUhCyk1HH\r\nexF2TprAEZCLcBLX0CjATDFbls4WUCrNdcrZnjC7pMBokqo7hGFpIlaXdg92\r\nrZnty2vxk9aLYa3fScys5hp3xjKfcT5f1DTjcjTKPHZsmdgYEydt7QS3ZcCx\r\n+eC9hZ8uGx9ihLRo5Ibw3ema3fFa7jCiELcj7S/peUevo+tmmiaGzqnsNKUN\r\nPmn2V0+lWSWmcLEV8TtIZxtwV61wOCRQjx4nl9yz6kRtaB6CfCLTxfGn4uJ3\r\n4bo8GsXwNcdou3egYX8HbF2QOYVqA6zhherkgkeFhzV0ltlOtYXZkfkw/T46\r\n+IWgaj19P2n/m0cJq7N8P5j629xnGk16166PGyFhAMTZyKU6JsxCaTkmDpWz\r\n2I4xJsgZl0c5IhuNRNSyIY+ouJppvYcCx/79tkQZX7fOiu3fIo1Prse4npjZ\r\n4osYzAFZM6uHWpjJ0HygUFk4oZ1X7eOlufA=\r\n=Qswl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86efd56f6.0","@material/tab":"15.0.0-canary.86efd56f6.0","@material/base":"15.0.0-canary.86efd56f6.0","@material/animation":"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/tab-scroller_15.0.0-canary.86efd56f6.0_1659451614227_0.5819634149158872","host":"s3://npm-registry-packages"}},"15.0.0-canary.ccfc24d19.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ccfc24d19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1c17d53b151532c97c116fc1fb9576bdd7dc0007","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ccfc24d19.0.tgz","fileCount":51,"integrity":"sha512-kpukTYJ7jf6VTC44GWCpHyocBah0Avon35S6GlaFRV3Oq6c4oQDXjA6P5ye9G7sM0BSFeRVBb0mj5dsIp+lYcA==","signatures":[{"sig":"MEUCIFauhzGL0kfPn9SApxM8XHTHODv5VUhiTxnjKgDUy0hYAiEA93ksCmFTfgWNHAgn9OKfmksd5K812s9eL/T4zpNnGCU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6rsSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoW5RAAn9aTOlvBpNIh6B7/5zBE8sFQjl5yeaMHSZCG6Ira2ZSdR6Mu\r\nRprXSAT/kWN4NePAOGR+1PoSxXELmE3+IQIp2zX7wae6Nx+WXbmzr+y5LKI9\r\nC6Y51dRca5SXTavtQ9s2ahBguhxL1G3nwumT+PJ4KBBWYNc6GazDJryW6sx9\r\n9KV4/ZTz3eFDCMIDrgRRVp0OCM4qLYP+NDvK7DdNj2kwu5BXk6LTTpP3Y4B8\r\n3r0ygRQ2HWQrT6emhOIC2ySk+OeypCE85Zu/OGP9KLdssmEXzLCNse5SwT6j\r\nJpFClVVwDtUctu1ONBNKt3hREXETpb0YsL7xzN440Rfci6TYbLtJtC3NeIcE\r\nsUnTCZyYYYl8dXiglvAKiCypypi3lZ9+HMONUZw/hoNW6PFY9gDMIkQdEzrS\r\nor7JU9rdOpFYncyRAypoQ1Yv2PBAxCkrepDiI02KTjYSPEkicwtJit8qR9OS\r\no2kgXeWJN+l2Ww5D/Eg1G+XrMzkIdTdjI2L5d+V4mAVQZMcJUWsglxSPJWEz\r\n0MHkmt79XyO/7t6FTbhIVLCKSCMx/JZikb2Q2qxQPcLRPb+/luK68Np2qShf\r\ntJw4tlMXLNTvNpBBoHMvidg4byWRGLXfoBnhtCOPuz6+4kEh1GSKZRcN4fnS\r\nxn+NalE6Uyez04D9k9aO8fhfIMhPcQ8zY1c=\r\n=xU8E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ccfc24d19.0","@material/tab":"15.0.0-canary.ccfc24d19.0","@material/base":"15.0.0-canary.ccfc24d19.0","@material/animation":"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/tab-scroller_15.0.0-canary.ccfc24d19.0_1659550482269_0.38189987030525074","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4570146f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e4570146f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"80ed62d12ad4a96782cc109615e6c6cb0bde3a90","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e4570146f.0.tgz","fileCount":51,"integrity":"sha512-IEkUeQfMdXvallnolQg4VTs+V14VcYJV687GR/8GWo6dNEe6JOTCag7K1IaWdNVv6M7JY9MY8d/XMmfVhkBR/g==","signatures":[{"sig":"MEYCIQC4WhCdTgJqqET/vKGvpGoHE1dBnFZcl7n9oEBjsjdCFAIhAI6b81dH1Gms0mS1G44V/E91FbSFJaNTpkR2WFP7fb1O","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sFwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpJ4Q/9HYjyZUcfgXWDAhUZE3/SaUCws+1YpDga5RsIxETNEJ8D6+Ew\r\ngfcNnjbB3Jn9QC37maIIleybjb4XNj/nKH5qI6A5j0inOquh4jFgndQInuY6\r\n8mmQlJ2+PensDz8w9fDxn/dbgHx8G5rWetALX8146qZpzHtCFlDX4pzqrk5J\r\njPuwu1W2fVXZud/GNpykJgnJH9yYRPei3nKm1j/wcMWITm/MnImc5EPWAGmy\r\n1XG91NkED+5v2jEhHApbuJ72ZrnIKY3xAm+tb044jGypuqYAljVWUYwwBTzH\r\ndxNhBIp6SR5dZ9aaD35eJN0wNf44CJ0pEdTDsBxPz4D6a/3xpYTnDRo/lkyX\r\nSxlWFUiY2CIeuZ5jfBKNDc0wDGyJGB2p6JTSJ/+rdavvMq7GLtWkDigLSam4\r\nRxurWFqbwrEIKTZHM8Jyn5KuFQ3UkRlJigwJuynsBSCXM3DEAoG6Ad1+y7I8\r\nD2AmzYPPETB4DjCvw9cPZgA0B3oThl4DU5JjJ+rHrpb7TBqXxJgml3mBxJyZ\r\n+uqocEyMVQ207SMSfAmIXoETyhaFXUuJGSJI5XMCr9DKhgD7ObO39Kg1NGQR\r\nHVNqZKKX7nvXO1FSYCHXDeNAy/jK3o7AI0JWW7k5UbfnsnhOi5XtpxZPKVgE\r\n2+DFh2afpL5u8nEdECm8BYSPuggWJSgAqrA=\r\n=NBaS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4570146f.0","@material/tab":"15.0.0-canary.e4570146f.0","@material/base":"15.0.0-canary.e4570146f.0","@material/animation":"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/tab-scroller_15.0.0-canary.e4570146f.0_1659552112689_0.879481936583691","host":"s3://npm-registry-packages"}},"15.0.0-canary.6683a36cb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6683a36cb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5a5d8cd5ac6edf8b77423368284b2fe819db5784","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6683a36cb.0.tgz","fileCount":51,"integrity":"sha512-D6NOaQ4wB5twIUHJQCztpHdQ+/81I9rKE5ql1LYJmTN4XUcaR98zH+FuIOGPtM2l6Jx4GkXb4/fug0OlSopB2w==","signatures":[{"sig":"MEQCIGiQxIHceN3tmiJ3uH+B+IQf2FNbPdouoGxIwiIPo3DIAiBJymw/YMoizVUpe2EPaHyEveOnqqSy0x/N//5Ee5YojQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6sraACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpTVw/+IQXSYGCTVsHq66DQdXPulKBS6Rw6pxy8n+UKElOj1mxTQYGG\r\nrq8LTtqsS5OCt7Hqk1hvEWxmBS+/bs2NHdLhq4SmYcpiv5iXerSW4TJ0dfxY\r\nhcw1fWYUwRk9t25nVe54/ICy6cVFyyCzJMaP5pohWGhL52tczb5HoIGnWs1I\r\nD+6jUSxZCUgwXiV1UxTu+f4mu4Lr4Gb+VFldvk11CScbQGu3yIZ1cILvMr2s\r\n0bZRVgvqracERuG86MKjPQYi13QbLUmr5weeXgn49H5+NB/VLm/n4KiTZhXh\r\nxVUrUkgkvTPmfpYpHttE8buYveB+ROWGaMV8V0NeS0/4eZTO9novBZDZ83Jn\r\nqJI55VCLg/bgZjem9ExNPLRN8I4/KsFFZS1bV41Ri4nVcr9Be+QVG+/NVhe4\r\nd023h0osjOMwgpqJ+bzMSLf1+hTZ3sYuPECox00w2MY1tt3G4k/j1J5fi1PA\r\nhdNlo3EyDcqrnTGG3Pi/t1ZaTXOTOgIBSk5tEJi2I0iEBcjahpnzOvD/7xgv\r\nCE5FO6mAbOoPHFHHgG3LQvodxNpR+rAQNQAhvvB9mqiXbWVrwC96IgeYY/WI\r\nsmig9KJ6JSjnRRSfZkH72MoIKSRJDpWtltdavfMZMU2XsB0A2ryBZ8D7wB4+\r\nfnYqdVIjL0DwTOriAIeDoQgUISI5aejlSvw=\r\n=TXOn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6683a36cb.0","@material/tab":"15.0.0-canary.6683a36cb.0","@material/base":"15.0.0-canary.6683a36cb.0","@material/animation":"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/tab-scroller_15.0.0-canary.6683a36cb.0_1659554522458_0.8365019105366487","host":"s3://npm-registry-packages"}},"15.0.0-canary.10196647d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.10196647d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e44f7883265be0110224d3a00fbaab983bc14e0e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.10196647d.0.tgz","fileCount":51,"integrity":"sha512-Q5WfJb/Y3QddKPLiNQD3LduCbNX4o2RgZva38JPhWI3i9ceYYnpU3mAXBEcp9UcWRJD8BqXx5GJfPvVk/J6bXA==","signatures":[{"sig":"MEYCIQCqX3NwzoYgNT4srK904zL1+ghsqTtjwjs36+YnzMXhoAIhAMNsphqacHd1Zxxh96sL1ZtWJwQoJ4VTyeGPl0J00056","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi6u6pACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK4hAAnRiHL89Wxt3jE0awR6acCXLXC0hsDOQ2/MhNVGn2W0q3OPbs\r\nUsP0Tllch1xyg8VDuijHTJKLl3atS3X5giDmVuRvghyhgG9qxpLsJjJrZjpl\r\nz4TPVFs4kY6UznF7zbuCv5zf0djQH4qXP1ABHtXJ08qpJbOP639pHylKT7rj\r\nlxfTxtP/tydg8uzEFEukZvX1xMYYXA/6+Hqmuge8F1UHFRftGYnAQXe2Z13b\r\nOF4eSE4FxEzOX0tJiS0gZKYqMGOJQ3FD4jIq23qaZmr+OpMzfDCwm3flvnDw\r\nxv7pU1BhXWt+j+YqADjgR4FLa3Yor7zDnIQ24lriENpHJN9qlb2lASLL0Lxo\r\njX9075ieib/0jFhiaSyDCW1ozlKI0M5A27IbdQuAmSWDXY8Cc2piVFB2+8rl\r\nsxJ8bS+UV9slMCWIumxV/bb+iAqaPTPR0AkOFJTTBN27KzPyQi+ccdGXda6d\r\n0Om8dWFEhI9iCbu7TnX58NTpW0ZuVVUBKlq0PjAi2oiierF2shffjSIFIJ+G\r\nmBPL+e/dh8J/JNAx+mOenAGGiSmGrPVXx4eq4u6NDImTwR/rZcPyV3o4odGh\r\nuS/KOUk30eph9gtfVghXGBSdOtfrxEveBAOeXP048BLQaaHkh2u0KRy7b92O\r\noFd/wIuBfFv6UE1pXI6B56NqGJwwxec2ohA=\r\n=tuSE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10196647d.0","@material/tab":"15.0.0-canary.10196647d.0","@material/base":"15.0.0-canary.10196647d.0","@material/animation":"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/tab-scroller_15.0.0-canary.10196647d.0_1659563689274_0.04664984741368561","host":"s3://npm-registry-packages"}},"15.0.0-canary.b20d3d73c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b20d3d73c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"903f801363df5eb3af26c0812a269b3eaad2103b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b20d3d73c.0.tgz","fileCount":51,"integrity":"sha512-qAKLHnbwBsLsbxqNQpgqZ+li26/GoyLaTVvEVr1WnDYIl09Rz67Vjv1vY0fE3wchWkd6EkHNVkfQ0IapFcTyYg==","signatures":[{"sig":"MEUCIQChquGelSdU04ue96YnBgYQLfvp2ZJ+phASWIEHIHZ+4wIgcrhyuj3VQ8be5YyE4XX1BpfCK2eYyFk4Y3LSmv5k7kM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi7EuzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqd9w//eLMRZfdniIbmGcIuqqVqd0Nltc18Idr4HBEMEA8++5UdELnY\r\nIRBpO49LzepaQs483IfxMLrLk6OYvrQOJkQfk3pOQVrzI8MhGP1FYLSdiWNO\r\nv/e52RT+witps7GoUVKYhH+sgr/8mpABDW2olHsUEJy97m9QbMeJFYSRq2Lt\r\nKrxtGVHQFCvOk1gneN4Vqrv/DEKxuuGryqDsHDZV59+mCsu+tYjLW/xCqFoU\r\nQzRZNyFRRPEuKAQwtpZeFlg+pFFmcSR6Xa7owngOQe6UKJvHGc4ZGJtOrhdN\r\npyMx75AXzoxsVbh/zR3Xc8xk9vBdupNHTLh4I1k9vjlCRnhqNaeix54te5fV\r\nfwBCBGO4nh/pTV/L0UMI/IEUtvl3r+PLTYcoCP6jdUTXI1rEiuDjMoQhX55g\r\nZVIPBbu9TAUCqVUzhd5wNQI/TIjCpw8jWlwBKcLQi6wgML/KUOgKuRKlRxZy\r\nUU21ZYJrQf5W1//O4cKeDNXvZ/g4k8Vu5L30/JNJ+thaihZQcP5GaEKZ3qBB\r\nboIOxy5Lw1NjaMIyK4o9loanmS2SvaurUtBIZl/AT+kTeoy8cV59dyheMRzk\r\nRxx1i88Cb6F8hx/Rf1ITPb5y2ouNwWyZmsshA7ZWgpdAU7UmrtoilIXddgyr\r\nNWFN1KDX8CwOuG999l179V4mecbiq8rcHCE=\r\n=rJ3Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b20d3d73c.0","@material/tab":"15.0.0-canary.b20d3d73c.0","@material/base":"15.0.0-canary.b20d3d73c.0","@material/animation":"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/tab-scroller_15.0.0-canary.b20d3d73c.0_1659653043373_0.4142398889856438","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c0c6b1e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.47c0c6b1e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"037c0117490494f5a3a8e65f8014ffde254322ae","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.47c0c6b1e.0.tgz","fileCount":51,"integrity":"sha512-g81D/4uMR7EI4kVgv3s5x9WLfE9kvTwHyaf1L5LT9U7yqAfI49IEVP4h8JBNE/VvcYkHrvZdorjlCmEcDiRp1Q==","signatures":[{"sig":"MEYCIQChVxQvPmNii+huSMAEvSmTc/Xdbfs8+ZQUUC5NpH79zwIhAMK1RbasHAJ8gRfrKg6wLaTLnZpUUf3Ci6OEMIcqITcf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi8nuOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptCw//UkiAIip+/sGRBHrKD6UfEf60KemJyixqfKoIzxay4E4+FDyp\r\ndPXGNFMx1SSXxV9vcpR9HryGvxS421lQ04575s5T4ZkU8tMQ7n9WFl8/kVVz\r\n3oKo00EBBoj11wBWp0W80yWykHYObBztE2TOJgb/aLJ/meERKiOWtrHmYhNV\r\n/SZPASmm5Afid8mTO4icqvokfIQIhrvOePXdb6qqvG9tBHdeZGabZsyZr2DT\r\nHKbrrqQv41QiEFJPDGWCD1nucFA9GdAdF7s8o21faVve6IAjXU7nx85TcbYA\r\nHoYwzP6NHL8//64HeTOE8NbUoWFXfJOopEAyScJLeuvgDyOEVI3SlNvbXEzr\r\nEbrMLsuQAO3WpbxtyMJHVEjj4snQEq3qDMGYeWd0OwVCuM026XMvWqCjf5h7\r\nIDqCRDanWBrIeOZniFZ2B4oiO/8V89/rGbgTm02tSRHlJMR+ufgfSL7D/tLQ\r\nEKcdzr/zlNOCbtlqiFMq/83pOPZ+woQOenUNLYCK/gUlXdVduMPjgqvzCvsp\r\nua/AaswCumwiijlCUlwmw7LbQRIhcJU00iOoAkiVhQf3G1LFLPK4PVHbQROx\r\nW5ZJMMqaAsZXCE3Fa48w+q6e3UabEGGm3kJgi6d+/pKQlp5KPP0JzHtyROpm\r\nlgMsLi3J/ClXciiqcses1687MofD1etNP3o=\r\n=ZofX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c0c6b1e.0","@material/tab":"15.0.0-canary.47c0c6b1e.0","@material/base":"15.0.0-canary.47c0c6b1e.0","@material/animation":"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/tab-scroller_15.0.0-canary.47c0c6b1e.0_1660058510233_0.3013517105625798","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e3dc8e38.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0e3dc8e38.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9aba64ee00a5bef768bce71028879b4e2b6de16d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0e3dc8e38.0.tgz","fileCount":51,"integrity":"sha512-CeYFgyMt1OM85E+SOTjauimNbeyT4k02OxalXToySrhzQ8PGHNpcaSamhdr+bAbwLWQLjsC2QAI86o0iSDM2mA==","signatures":[{"sig":"MEYCIQDeFDADCFbUdy0f2EqyypGGi6Fq/PyVZC8CpUmjPza3XQIhAOczcjEDXY/c4XuU2Uxoe3B+mxa14MRJXletAD7vr8Kr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJi9U6nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoojQ//eP9SrFGSWIwIYFhdQZYe8dPUoS6Zfzkhq9xDhbhkOfJmYSap\r\nJsIe5InCGpO9IQAhZRJrdi3/PILm/96EPvM2bDUq7dinEq/D+NSj0sgqVSfq\r\nzMejH5cslnv6vsoXRDS3o5YkYnCIRo1CpNu1qSlDGVahkzaDYXCB9SzEa2hU\r\nSBzbZN+jrVkyJ2sVVt3O4Dmz8BmO5dLIF0XxD8TRsw/dqc9H6ej9qKi/NKHW\r\nxJTpR891QkeIONlerjksJo8jp1mIFJueSF14Yt+t3wy6Md1gMdS7B7p+tdqA\r\nC8WDvULc+lxF5GvKyJ8/J9XO4lv+7WZmqlW1jCxbhMOFmx/xtPXxQXL81wMq\r\n1SVtowGfWIN1Ou5Ok8Ypm85BLAJY5E6sW0hE1T6SgzNgNNAKddJFqEofFVfc\r\nbyq+dcbpnN4OXXjOw9Ynhoqz+/4y1gZSjHKG8skUrtSMejQV3KPGBIppTDLQ\r\nrbB5sX3PFg93eB5DaqP3FW6LbSmdE9tDzr+NOuz5s+MPnHbVthBrEoFCrgCy\r\nv5eNRSHLMi7kHivDKFaX+31lLboxis0mXny1z7cQE7w478MHek17WO47tCPk\r\nPgjSjf9Onz1qTiiC5BVoycEeCAnbEaugasodaL02mcZOqsyrNL1ji0wy3kNP\r\nxbBbEsGUQz/SWDjTHZRiusjj0UjqcCrDEJQ=\r\n=sCu6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e3dc8e38.0","@material/tab":"15.0.0-canary.0e3dc8e38.0","@material/base":"15.0.0-canary.0e3dc8e38.0","@material/animation":"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/tab-scroller_15.0.0-canary.0e3dc8e38.0_1660243623194_0.22303012460070715","host":"s3://npm-registry-packages"}},"15.0.0-canary.d5a11f1c8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d5a11f1c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2611eadfb7cc1c210b819a99670fd5f02fba55b8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d5a11f1c8.0.tgz","fileCount":51,"integrity":"sha512-YjcIDR12liAhg2pywERiUK1UeNouUV6Xb2PCkudqfQ5pzIWnulbj5dySWDYL5WnGwMGirO3b6VWDgV/m/8Q9kw==","signatures":[{"sig":"MEYCIQDyCAJtadIdMNNTahgMkqlbWhLO9a0cjAl4o2ROm+tEhQIhAMvaPyE5DjgaRNL2P+fAwUaZ/9MS35q9gNeGLA+itN1D","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjDpcCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyTw//d8xDN+TBHu1WSEzhFAUCbRskwVgABv6tG5VEOfvMDfK3m5Vm\r\nfGPSiFxZarr8VoP1Zs7NEgLXMgqTIf5DdHW8R/6pYHfxZNWCclVF35SCi1t3\r\nWr/JaRGUDWyxhv61yBFwqthZBnK7mSjdhrmG7hHagCgdM/qUlfFfuxdWp6wP\r\nc6rokAXrui5Bap8LGARPLl2V0r3hcUtqtstSNCzlaAdCvcMfWDSN9OxVWJW8\r\ne0+LE0jnV6hw76yVF72OQnuoAaZcfDG2Fvz5tMEZteqFlDmmXH4O0IiF7ZW0\r\n6yx1z39lvqDQtcnbdK+HDRrRkie11Hz+oTLury9J1J3jIQBYVnMC0axbIpFG\r\nG7Ph5noBwhn7OgVqLtImWNZwdzG0zthavd4Y9U9Yieb2mj6KCd7ksaBHg7vY\r\nj5Ba7Sq0bmhptF5GfasaA3lnSYQJNNWrocX8zcegJ/QILDHP2Sw5XeW9oQGh\r\n6TaVn/lkVLUnMtHVPkYiDPVN0kdSxBgB8+4mNux7wt2a59lsYh/+oCYO2jvG\r\ne8uNh6gcAE5D5y2QJknR/uYI32sP4ijchsZ6IWtPegUCHCAchT8DzUNBjB6n\r\nDrOfq3fJcu60cFYxDTfV8q5Lwlou6k2rqfsGtkiPpo6LE1DSUJ79AnfkLAIg\r\nMk2JmKHhQZVFKq224wvOZGOSJP7XcCbt4+k=\r\n=Hn0R\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d5a11f1c8.0","@material/tab":"15.0.0-canary.d5a11f1c8.0","@material/base":"15.0.0-canary.d5a11f1c8.0","@material/animation":"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/tab-scroller_15.0.0-canary.d5a11f1c8.0_1661900546118_0.6565667980712495","host":"s3://npm-registry-packages"}},"15.0.0-canary.bac992a95.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bac992a95.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"82a857b0ce08f6b6c0807a4877ee3e6ff77f7afd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bac992a95.0.tgz","fileCount":51,"integrity":"sha512-wQAM/rzVpYGrfgwfmNfh36T5ZYQCrUyE58wqhAsgl/YHcYu/FSGO0AMBJlabt5wraSFLEBl3NnthLk69XhTZOA==","signatures":[{"sig":"MEYCIQDQ48eLgGQOSaZ3sqMojQhiWlmq+eIw5MFOF35VVE7mYwIhANsRSWF4qI/lL7xiYHDFqfo2JeVC8YonReONvpvfDiQO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEFoPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqX/xAAjJL2jD0T2V3u8XNBCEJJtP0HShllaGAVTRfXoalMif9gfYCA\r\nW/j9Z+cb9O8OKU8FTmnHWNVGSZzF8Vsp+KncIWJVjrDf559Q02Am0txpS00/\r\nvrOrQYR9QuCVWhwqtIhkNZ3pGdfEAmUzAjybvKZwDzs0Tmml8rpI1HOzEZZe\r\njufaWUKWwgndrmpas8/9B+jOQudOajGiF/8BB68W3Icr/P+Q7L2WUuoNsS+G\r\ndwZXmBF4+iuXb4uICEwKCXGnkG4dbwHguyOSoLIk7fKYxkzuoWuImiI1UtP6\r\nhT143xjU9JLsLwhPAf2C8pKi1QYbcdswxQMPGNLF4Na0xj4CZk+VhL6OpHyE\r\nu5L3XyatAMo2AlSPLtCwXxDnvUaWggJitS2Rcndeyn/RM2MWftnBAn2RzB8B\r\nmBw6b+FsLU1o5iK/Kab1yjmTF4xfb2cqk8YwaJO+I8RI7oK4sdxGZRbRDA95\r\nCWa6HKSC2MSwtAVgPeTNzHGKmusVMomGQN9oNxfxNcrEe5AUwvmbEn0m3Ani\r\nj9edh1souNJ7fQuGMnjuOmKTCZv3i/x3GUhuf3wNDslFUIcG17LQmPDZZpsl\r\nJ2z57JvdguOVippCWnLIMzEJoxu3C/NNuV0NJneNyH2URgkrahHu8DGsulSw\r\nl61dG9j5HTtWQHN/FZaKLjTHqvKXKT6UUjc=\r\n=IB7/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bac992a95.0","@material/tab":"15.0.0-canary.bac992a95.0","@material/base":"15.0.0-canary.bac992a95.0","@material/animation":"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/tab-scroller_15.0.0-canary.bac992a95.0_1662016015143_0.1922620212281374","host":"s3://npm-registry-packages"}},"15.0.0-canary.d25f3404c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d25f3404c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1d68da8ff5aadec75a4f534af7f04f6a9bde01cc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d25f3404c.0.tgz","fileCount":51,"integrity":"sha512-mHikS6FSSdRWFgvd45ZOc9A5n/Pp6REKGpgEMe/6FAsXmUy6i7DCGqhBK8XI+7BnCsItbwe7Mcfe44cP/SGzng==","signatures":[{"sig":"MEUCIQCPQgkD9z3wPbtDb6NF98uiJ/7myuKlhDmCtv4oeeGPTgIgD+aQ9XgQOiBnXAp+83wlQ8JsLEiMmflG/ROmHDD+p4k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328085,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjEH9tACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXdw//Z8Q9O08j9ckBpv812ReLsJeXP+OYKmSBSj9zVgNVz4XuGbpd\r\n8W9e9CkaJxtpuMG45rckdAdwdbT3rZ4U618qvurJ7W0peQdMMgcWguXeu5Rc\r\ncPezkQm6m/N//PXzcYuWaKX25wyf6K9kwgaZoXy8jLJFr+cHfG1q3jLjhUbu\r\n3aMjjzuF4vPpsL7NI0h2a8z8grAn2Bh2MqWN/M23WUZ7KBwSZlif/K+lxdVj\r\nAkFVJ72P0CTjGOpCEVqwLDI4f7stCMaK153aApHc2aVzvOer+Dsv38u05EJf\r\nTUbntPz/LbfLVKm/EjXii0Itpklzwlk2J1w5mV6iW/OUEg9CC1xsALHM7Bn1\r\n/8vDDYA2dsTKcxIUQDajmNlAF7tiX8mG6KIKTXr48hgFm3Ees8tK83WxuxUo\r\nx1M+TmWtIuC1MR2vZxWtoMhbZfvnlQ6z58AUuvGt9mqz0uz8vqBvf7EFRF/Q\r\n7zUPOYY4biTIrrrFuErs36Z8R/tRl6lqEPaBKLYwyn0gNfIouUdvtD61gI5U\r\nARACqXcdW7puMGYYIlvGjd17MHVPz67SRPLUxH7w2wm2hruO61MuGsU9ao8W\r\nilGR/S23VPL8p85oB7OZ7FGyE5fiIv6AYFByB09QR0rYIt6RuYkyfEs8bPtD\r\nerqe2Iume7n3DSFbi9a+x5NM1cfxLqbSBsw=\r\n=olQq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d25f3404c.0","@material/tab":"15.0.0-canary.d25f3404c.0","@material/base":"15.0.0-canary.d25f3404c.0","@material/animation":"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/tab-scroller_15.0.0-canary.d25f3404c.0_1662025581672_0.7012632373647583","host":"s3://npm-registry-packages"}},"15.0.0-canary.920d8a79e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.920d8a79e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"26f2fd5148e14531aab07fc755e887464e4c8343","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.920d8a79e.0.tgz","fileCount":51,"integrity":"sha512-w638BDdI1Fn15RqAHWzyVZlYVqXRmYRdBk7ECAWkqmQd/CRb2jC2ELwVq1fkebAzYuliP9grbIrQy/li9Ae50Q==","signatures":[{"sig":"MEUCIQD6dTd+Lo5ANUfEoTjJLWjnlpUjTorDr6m0S5DlYMY2lAIgOQryOa7gkiLq/kJkhqez8E0FLFp6akAm4gnfBl9Vit4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjERRwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojlA/+NqkiFNwJ13t5yMeQV1wXUTQO6WXZh7mghFP/Yy2SidQ/EvH1\r\nadN4DyCbrYYFWpDJOmZgDFEZ6Hui3hqpnWeZGMrXgPUkd5qfGV9+wcFkVROS\r\nwBtPC1aw/+Ye9loITH4llAVjiIzA6Y4LG90w7aNK1i5McAUVKqBWRTY/Jlaq\r\nyhGgDLgM31rfj9IQUzgzSeleuQB+Wd7aGzVdjA1WQzSrNFgJvzPdUON0Cz19\r\nKNm4sLWWne1SIrZHECPiNm5DZowjxLkxp9jjy2tLxUMgN8RWCMWxut10wLem\r\nw5Xvxb0OITOZpXFmcXLZJ27wBAXrSix09skM72z9s7g56m62Q/vBkjasx7tu\r\nMq1sLMZPqWv+mhWU3svmf8l4fyhYMfwztZ+ZeaSfILDozUZnwydCZdT+itzY\r\nDqDjA50hBvBf7Po14Ii2oZH2os4gFTu+pgnYkEwhYtzfh9dp7MvWrXPrihDO\r\nxAn3sR7XAXDU3KhtO/CNkZyODJat/A+tRZN3gvNMoNNe9c+oafqVRpqMlrkB\r\nwwd6HRwAFxfHtGKIGzWTmPbDWbfW0DmkT3ymYN6/azHhqwXZmFTlyEnNbVMC\r\nkOI7jQ6IAao5pwdiQ8q5kQGf30pupx/oD/oFLAqcQcq9iypJG+667RGNJj2V\r\njnoaHcIqh3ESEmEQAkzBAtD/LB7EuHEdb3o=\r\n=x64f\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.920d8a79e.0","@material/tab":"15.0.0-canary.920d8a79e.0","@material/base":"15.0.0-canary.920d8a79e.0","@material/animation":"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/tab-scroller_15.0.0-canary.920d8a79e.0_1662063728623_0.24032329872463154","host":"s3://npm-registry-packages"}},"15.0.0-canary.c363f267b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c363f267b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"367e2e7a30667d497c4479775d8611e55b682b3a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c363f267b.0.tgz","fileCount":51,"integrity":"sha512-yaCkAR0DlTXrB26JGYcuQILS5WEbK9X6vLh2XFxPorBXyXtjo4MbBSTrpCMI7NTg8RSaOrhWQEMay94yv4nlmQ==","signatures":[{"sig":"MEUCIQCHSMmlHL2BX7drF3UbhOXPsHgdqyNC9dwaC79b3uNRJwIgQnmeYQZiV9sszOvMu6VGvv+qMoMc2IFS76AM5j9LuIU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjESHdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNaw/9HoRJvBaiyRDiZJVHmGwGqfH6BM0uK98ts/2qeDxXsvxbnnsA\r\nwNrVx9kFGqYj2/XHDf03chI3iZkhm3oEnkmTAn2XIjMDeUBt3robZIBxJsrk\r\npepWpnhBfv1yx5D88vniOEfSf9Gs0yWgd3Ybe6EBuFunwxgVjA98Y8YJU8AZ\r\nKUFlm4CYe4XT4rBq1/KxIMlnK/Etg+i0tR0NGgNzmYUpUj5i8TdNQ271Q4+K\r\nvw3Znc1yhksmNzd3E1G8ZNG1E0xjyP8578X4l8J+EZNoSGpXI7mCh+7gNQaQ\r\nCpScPNYUo1eaT7kZhOPt3oTwzQKCquEFYBWTPt+cqOJNAaKVrnOS4XGuFm/l\r\nWlwaZF45TLrr3+JbuMUmlQt8VlhEKebTo0o0mEgGO1BEPkBvfe0cLCUtqSCn\r\nmdLcJGtp5u7Q7PJllSZbPSamefEDQlJP0Dt0Zyp6ZPmp/d3HmAXyh9Mwf5YW\r\nZiYIb2Z8U2pIAPIrJ4nar+jknJybHvIrIaYS1rXzKrliYooPUdYCShIfYXcT\r\nxWPWOngg6A9LVwrtCRY909rYFUnZDP0/onIBOC95PHfUr6hoZjVxI/r1JKvb\r\n0Y+vOHoB0p5W2/CyISWJgATPbhH7POJuH0tsdamen+TrEm5OtDxe2z5hlAaq\r\n7PpraPr8ukyNr1/opklU/1KxE8n/xKJju8Q=\r\n=VUv6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c363f267b.0","@material/tab":"15.0.0-canary.c363f267b.0","@material/base":"15.0.0-canary.c363f267b.0","@material/animation":"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/tab-scroller_15.0.0-canary.c363f267b.0_1662067165406_0.9341876328681058","host":"s3://npm-registry-packages"}},"15.0.0-canary.a4eb4937a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a4eb4937a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e84feb85f0807f560702df64a9d1708ed3337265","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a4eb4937a.0.tgz","fileCount":51,"integrity":"sha512-vCJIxgXNLyHBzBNxCyRqJrGOC/2SLgpg7Y3nj5JCYHqsiM3sO+ugcIS/5f+hph2UDREAl06XTEh7UVZ75up18w==","signatures":[{"sig":"MEUCIQC3osEhWyipoI84USJSpRARNJopyuCrEwgpJz7E4AEWjwIgOFg83MZC/wgaYV8hmVNjbupNzbWBmopKHlbIJRAy/oI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjF4+FACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq6rg/+MZ1x6laRRy0H6XjT89MBVJNTdgNhO/FFtAsyK6SIUpmMZHbN\r\nJ8I5yJ7K/kNgCK6qYANd81ruzj8l2p08Xtix0Cjfm6MfJi3LyF/7ZYlrm6Hw\r\n9il2mHpK2s9zg46uFOMIfnsk7l7s6xwmXb1bo2ttV8R9WCth/EfGoIBVww3G\r\nsCWKfDQfkoTDFT0DZkCnGF2WKTHTYElI9f59/8uPJe8QdXs7y/pWBliRejU0\r\nn06qiayk28T5QKIbtU3EhvDcM14bP4hilVPq+JPmtuCidEOTbRSJJ+OcJ5m8\r\nrFSx+LJl290BQT3XxouH+ajA+Nk5l8JxZFPuMTyZsnBIwQqjOr7lTgAcVDLt\r\n4HwlG8w1TBl0OqtEtmNGUAuXs7opKE2ZxY1I03M3f+Yejm754pMSYZqBH7NB\r\nxvGA4OfwhVtUs9BsUcE1YNTkeOnrnmARSJ5y29ukQ6oApr0QchaS2RyvgYHR\r\nGhednVBtK9phPOKPEG8TG+YmQJ4GExx6fRz+z/zrzoBb+r85QHyOsnQ1fKrL\r\ns2PRsCTegZz6gBv02jzeG8zgSR0PCbmMj82jaKtSvCo+3KszZIwS02dNnZZS\r\nEbC6vk3EdhnU+3iV23EKXuzm8qbmu9uVPz14puv3ZbX42D0V5Q3uT3ARuZaZ\r\noI5YJ41yShwxJvJM96E+RHdRFPKux/GkC/o=\r\n=i3nY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a4eb4937a.0","@material/tab":"15.0.0-canary.a4eb4937a.0","@material/base":"15.0.0-canary.a4eb4937a.0","@material/animation":"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/tab-scroller_15.0.0-canary.a4eb4937a.0_1662488453327_0.6335869968859267","host":"s3://npm-registry-packages"}},"15.0.0-canary.4299717da.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4299717da.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f417384cda79cb778581169fd894c623944ff83c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4299717da.0.tgz","fileCount":51,"integrity":"sha512-UDcB6O5J5Lp9Pf1MY7XddYYDf3JNpEKl6XPrlDWNfakj9S3zxDtsH77JWBQka7l09GhbxW/Mx/G2Q/FMhGsniA==","signatures":[{"sig":"MEUCIF2YA3SPPP71r4nSNowflQG0zBYLgcfIl+bCsVvCpPPgAiEAo/ncxbiYkBeEO2xb/uXjTgu13XpbODnHfhiblVFOjTw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGMPwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo21Q/5AVeAFIGn8JvCCnl1OROLdqdhnCe55rwx/JjGkYPr4l/4wOrY\r\nd0K0VciuUzCG0X2jfNKO2p9G/y/9kr3Iozawbra6zuNgny7J2hwYVgYFWkrW\r\nJrRg3pkWESD2hrM8GFBsAeSGftF4+h8xlIQsr0cRVvg1pe35mFYLTNLFgkKn\r\nCkhs7xFm6hZbjr0dK2wX6siFhFg2e7mqs1OpgHHx7f+FwVRvSHYVYjQyTn9A\r\nGTVYdQTJc0j+BBmc/OSQe8f+0RA9OEpY0KVLfbjBzTeS09Fj595xlrVls3wg\r\n+RllRxDP2+Vcpn68jJqNMH/u+Kgf0T1OgLyD2/FTjor59qC1UNJojg0rMtMq\r\nfFwG/dDxjJsSPaVIiuMd9eq5OsbqGQYmrduD1M7SwLpLwnYZVptkfo5q0xOW\r\nFn4Z9xvVEOMHDXtjKnyCaHU5Gaj5YZm8eCR5h3Um2tFC6is2ZPGv/BTlhCJj\r\nuFcuuKekXJt0bIrQVGoLMPLGe6r74hJO2giQc0wHI63AwrdTC3b0oCfksG4I\r\nKWThPrR76FMd8hm7L9QKKttBEbv/bvGc8lc9DIu26PTZMLE37/is6uX+u+K2\r\nd38/ekYpg4fopRDKjqN+XMZ1gfLm9COFMi7oRmNQ6we1KhRBV512hZi/h/Up\r\nb0E5or/E7zBFXIbDy1p16yMsJZbDphvFF8o=\r\n=wzC/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4299717da.0","@material/tab":"15.0.0-canary.4299717da.0","@material/base":"15.0.0-canary.4299717da.0","@material/animation":"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/tab-scroller_15.0.0-canary.4299717da.0_1662567408646_0.5814945920615562","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa7d8d44b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fa7d8d44b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9193fa257aa0b67cc03cd32ac6feecc6e618bd00","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fa7d8d44b.0.tgz","fileCount":51,"integrity":"sha512-4QFZaF0E6ZYKDY0CsthSFccSC5QyswZ2BvkUFkuj4IV5MWeef/cszb+vPoohJZCUFGqaC82Q9gJycMxWktIPJw==","signatures":[{"sig":"MEUCIQD4zsbSZ3VMnS6Sub6l2wXTuUbXCu/xFhmRs9DRqKIwOAIgasH5oXPJkjELdQRhlecDzMT3wo5ifq86szbE/twBmhY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjGO7mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrLNhAAnc4Z+MnnbotrQ/JZFYHUFK2apnjbVfPboMu2mE1FafbxxWrK\r\nP9ftuHR81kYNSxpKOPm8zdfoZYP1eoqS87wYDb9nEjrDge/Z/kn1pYzHl5KU\r\nP9J5N0wjgoiJ+3VxzsZTSnp5RcdA9yqNXN2M5bVJI/oT0GCsfD8CeXl362mp\r\nPRL0zfRoIj4RLhzZgDS8540Zkp81PZvKNIUrneG0sK/J1q44jDhWjmAw1MRC\r\nY42A0T7bacQs09s5mm0TnG+mnmBwXeJN1Es0Gpr8TbFejxj7lugfUSnUM9jR\r\nRiTuhEzI2ybI2ip7ftMUZpbAI1CwrrrHK5lUd1qlj13032hkbAo9MGo2X8Rd\r\nVS/i5I1Ed+30TgYilZmePZNMaHpCY1gA6Y1a8f55C/tG27ln1RWeosudtq65\r\nii2vhdjawkeoVdCSmDHwWiAJgWuuFPso/aM9Q9/G8oBFGLs5fyqz4ZbZJJOO\r\nmqQ3etbD1FYy4PatUlX63ZOCpcctZTpptb8JnxW03iwtJIAW9JiD4I2+Ztup\r\nM7eGPqiY75L3KKFL38XUqVEee3oJFRxu6YBJi+IxCl/VM9il0e/6v/hsIVW4\r\n+8ORWOyBBl6+hOQv4nnlkKN328qZIvhPi9YVvfPcmD9mKZRdiFWtyLQ2UVpu\r\nsUkIoLlqLOF5ohlnCwULkqohFxGfHWEQfzQ=\r\n=KEKb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa7d8d44b.0","@material/tab":"15.0.0-canary.fa7d8d44b.0","@material/base":"15.0.0-canary.fa7d8d44b.0","@material/animation":"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/tab-scroller_15.0.0-canary.fa7d8d44b.0_1662578406313_0.9841435584626499","host":"s3://npm-registry-packages"}},"15.0.0-canary.a40e3c768.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a40e3c768.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"dde65ce8072b886e45771ce18352c1e7a97eee80","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a40e3c768.0.tgz","fileCount":51,"integrity":"sha512-c9cb3KqimArNtJYQQiwxX3UZxVrB2iaw/JzVGrWUCqQUmlBEhuo0jNOlK/0AD2DsDjF/u6po6S0ul//Qe0JeeA==","signatures":[{"sig":"MEYCIQCwAYa/1p+61fQhfMY5MKRaJWiYgQP8cOEu+DiIzO1UdwIhALB3Uy0UBQ9ElSEmxqePomEr28E7ltX+IzaCvHsHKw2g","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjG5xvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogkA/+NYp3j3+nflaW+3UpTN3tSz1IrdXDo9XME99bYo99IK2G9K0t\r\naLKAnJ1Wk+Ij+0ZIAIDnw9DsWK2GpZkgw7bijx7KTSVP1jb2xhvYdAE0sQdI\r\n0cJS3uh53ki3KkJeTqe2KNiMH3Aj00rbzNqkD3QaA3QiTT8OYVAHQzZQNxWd\r\nQ1IOS2J3+Hty92hdFvQKtFWoBWIS+egHk1sUDlp78ragF2mLdfj5iEOPqQFl\r\n2Q/9dbcVp8w5IX0qVVgeYDaBfZoBekjmvJOzevXTWFgCNSRGH/mVAhbmh2Ka\r\n5Fr1JYbKKcgy8E3ki27XZ2xNwv/WeSWDD6/2mI7FsW6Cv1o0gRyPA4itY4yq\r\noZKLB4pY9EHL6j8DeS2ihmU1IOvFfOQbQiDKcp7KwVhNOK0PNA+kCRIALrHZ\r\nJFA3Uu7OL2DNC8UZXPpq7c0hhU19Ty62aqhD6upPwZgRwWsZoCzHWXc5kZY/\r\nw0RzOImVkJvEN+HakYFq68tXDL0hVv+6bEG4OQ9ZQ07qX2h8F3jCDe0r35H6\r\nmpp81kmtEp3cxQcExwl2g6i75ysoHiR0w685LslS8+ih6kk7KZSzbMAj4AJ/\r\nFlxN0T1Pf04Gl9kUYXeQ3SdpJTnD9LaEoftQg81hDBeMfJ0VE2+oiDdMO2Fx\r\nf9yKluCtLRyfc/7Qfd8Zz3IzAocT7VU8iaE=\r\n=qsB5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a40e3c768.0","@material/tab":"15.0.0-canary.a40e3c768.0","@material/base":"15.0.0-canary.a40e3c768.0","@material/animation":"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/tab-scroller_15.0.0-canary.a40e3c768.0_1662753903089_0.5641898518004549","host":"s3://npm-registry-packages"}},"15.0.0-canary.18cdc9a00.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.18cdc9a00.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"31a6b67e1c168b629c49a5aeb232543d3e9ac4f3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.18cdc9a00.0.tgz","fileCount":51,"integrity":"sha512-Akqk0TsoeT4ozzL53/+TRPARV7d/MQQ9t+6ziDJW10FcohWm5h49SkWLynXOiIxX8Nqy+IL1DBuDl8X0MQaj2w==","signatures":[{"sig":"MEYCIQD+fhcRlCiQl+zhRfpn8tLrp2HUBJ0rFz2VRS6P7coc+AIhAJltv9JhPixCFbZYfXdUvlJU9hIjUdRdtYSSkrMXKb5E","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjH57IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0QBAAlKBYRn4UMcLXCWMDYjCiTDJL38OPo/7b4bKrE12o48CunhHb\r\nE5KfIt5jc9Q9nEwEKt6pYM1dTEmHz/A/dE1pcjSfNvu/iPC8euEzqwqlckXA\r\n31HEKDNITXcXoKWztjhNoxzWMxwez8M/IqAbnPqFAoIbXnZa7pmFazBHHzvF\r\nv+slkWaMYntPEF9HXN9YvOF6o7V0To3/80SV9q8LrSnevo7oA727frx9RUmB\r\nVthq1xbY9+FvkX8J3GoxKCKxon4EkWB3IJHtzz+aHaKyg8PfzeTRkXzlbu/H\r\nLFOpRQ0rkWAls4v2qHsjmKEE/++O8iOwW9EKxj889UlBKjd5TTPCJAKpVY9b\r\nr6MsOQJsj5uNJvp4KCpNPBCknYVBBMWPBvyAD/slw8ZHSjpCV8jmJZ5pJu/M\r\n9K//5LwTcswaLr2aNy+Thw88kO4GlclReboPlIJ1o2g5wDGtmXkh4Z0Ad/Ni\r\n0Gmjt0vZfxQlwOatLYB2frOWoKn9nINsljiLWYSDfNGnpr3dkFuObqSxF/5L\r\nyrGpA6j/lyj2GgFBq5XzbaJxzyoYVWoPtzR1a1tOEu4P+tVKFFM9wql/gASg\r\nsYJwTbeQ/rhOfBV3cmIBV1WU5D5kbn0GS0ojNwxl9/7rZkKD4h8z+WsQfwIT\r\nAsUPvHhs6KD0XHIVTR8PE2cR05PQri08ynY=\r\n=reGY\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.18cdc9a00.0","@material/tab":"15.0.0-canary.18cdc9a00.0","@material/base":"15.0.0-canary.18cdc9a00.0","@material/animation":"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/tab-scroller_15.0.0-canary.18cdc9a00.0_1663016647824_0.3589748797971206","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab3cd3c8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7ab3cd3c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cd53f753952b9509e5c0db47b5387337c11e1af5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7ab3cd3c8.0.tgz","fileCount":51,"integrity":"sha512-g2e/rDa5Ce9tDb/DdeHaU+J5rQzIvJkaocddCgph2m8plN4A2vw9w/ZzCYlb9cGAN29LfFSb9CaGiSaU4q+Ncg==","signatures":[{"sig":"MEQCIEKEcEqGkAGYKnDpWGZJudWREINDNXoer07QzectXhJoAiBILmtVObJQ8HdHCtrwpr24vBw1AnpeO9anCEcZ17farg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjIQbTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT7Q/+Ib9MoHVHHepnchAC7bQwaRqLKaRG0/YTZmvUqsb9nHPiNnEW\r\nkOpk4WCyfLcOD2GhUZqINIZBRQuBMD0tawPpJGfv6McXha7Hns3qkkudIqyF\r\nsfGbpXCt3gD8lOJ7xE/MFIItutvCc2gE+khXgdNrie2IzOE4Zj/14y+IP0k8\r\nxOCV8aVCmZjj8dxJLwrgly60Kgwj5pChRJxx1jLR/R98Cadbv1i2czgCs1le\r\nFtrgScekB2z3Uy3tz4Fgs0XO0h9ispz7yUhS99wud1TxayDWujbsffantZJu\r\ndLuxq6tph0pGUCz9Icfsh2Z+TktLnV8FUwEByUDE2cDqNB0j5difxhURhj4R\r\nwP92lenLZ0sw7V7FdTycSORAdFXr9F5fwWrxsW9Dlnli1wZHpGzQNMkh1r4U\r\nEvezF0xl0wojo0Pfs57eHiXajSnZ3GjmSI7y3oKkQgOKm/5223ZHmtDx1yeZ\r\nYqCjONxRcnDavwRukrqBHHt8sDDlyTt+1LdF95QLag53gFgBHUP0eR4ABm+o\r\ntZLe8ALZVf6t6QJltuTYQPPnbZqi4kq58LH5fdkISiWJN2I13QZBj/jXozPB\r\nJPrvJipxhKcQMv8re3tRVfRAMRdibYdn0aACUk+Untv28QfPYWTKv5PYCABn\r\n22A2/0phucGq5wvfo1S5oFrpl8PBcZMCNrU=\r\n=ppxH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab3cd3c8.0","@material/tab":"15.0.0-canary.7ab3cd3c8.0","@material/base":"15.0.0-canary.7ab3cd3c8.0","@material/animation":"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/tab-scroller_15.0.0-canary.7ab3cd3c8.0_1663108819616_0.3749872474269096","host":"s3://npm-registry-packages"}},"15.0.0-canary.2860d244d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2860d244d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3da6235bdcb37a5ee8492775172d793fe3ac076a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2860d244d.0.tgz","fileCount":51,"integrity":"sha512-Ry4i8cV1JnLjLcbRcJRKn0Ahh4hsvnKJwc8UWuUo0UDGfpQ7q8cKtfXAaxkpTVQtcP5AQ73v/uvy6AzMMiYV/w==","signatures":[{"sig":"MEQCIGu99MCoKfc0PurH741hi2Tw48xbx4YKGjaeAIOL+ybKAiBnqYQ/wRHofiOEfBCwFBrk7ZIHHop743ArvHI+N1yPnQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjJP7+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmozKg//doTylGqr4rh9s3In50VrPMG7cD61AtdaE+Vj4cV8+u35fT6g\r\nN/R7OqFOgWkC9w/9Ysc6thoi39AYeAiiuNak4wRvslnbs5Z2LTSsz4C1p73s\r\n0YDMlX+TSvIIQRjL05jIti3zUdNKr3QVDgGj6aM6MjoOBFDZ6WOllJzHDqCW\r\n4ONnDltDvyz7FTDTrEoBE9hooSaObzbdjOPi0kTXAFNPuShh+qjbi2FX8nhe\r\nyfSVizEXM+lLG2PC+Mr9ynLq2elnHzn2H67TvFUzI9PdBuVOfvoAHjt2Oa1c\r\nacCbNQdfBH2TBJ2a/0wq4UO106qAhZbhgVlooJU15yIv/MPliT0axjAS9t4L\r\nbonrIl2Dl00pWlZRhjPK43q0Quyn3qS91EfRWPnKkUJHLXcoHCNZJTKRewrj\r\n4INfeSgOn/OPyki2X+FHHsAt5b+ZJkYT6A8vE9DI7bD69wvUy8GUKENeM5VJ\r\n7u6cQMRQBw+0uvVGsNAe6hKB5agbHEVcxau8RsJtAiOVLew3EIEAYX2Kfxzr\r\n+zr4fCRgqIpoCwmApuXMkU+TU05Bv9HbsxGM09avk9LwJAlv3F5a/N9MApkr\r\nb/7Ukd8io/cFoJBqBoWZGGlDaBwh8n9KEC/MdCOYEEh9w/X9qJDx7JuvatP8\r\n+kf5C3YHa5bh8USUIAYSfnaxp7easZZE9VQ=\r\n=+p0z\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2860d244d.0","@material/tab":"15.0.0-canary.2860d244d.0","@material/base":"15.0.0-canary.2860d244d.0","@material/animation":"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/tab-scroller_15.0.0-canary.2860d244d.0_1663368957976_0.7566038477012653","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8726533c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e8726533c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b49e8b616ca830272aa2294fcc499c31a5676bd1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e8726533c.0.tgz","fileCount":51,"integrity":"sha512-Lci7AaWo+4DaqQK4u7CSE/ZqXX+wU9OKz2NwZkA7h68Q/5IjYyg3O/yc6iylftTUiZVCF1VfAOMkZjkaIni3WA==","signatures":[{"sig":"MEQCIGKiPWrXPiykd2E1bC3zuLrDvsrv7mpxRb7flxTLppgQAiBpxLeO7UO/I9bmfzWaiFhNm/fXUR8D76uGlMDAafjuow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKiAoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr16Q//Qx8DE8XuQpSr2rJRwnud4MjKQ0E48a37rQM6l33kWwe/zcx3\r\nDQNDNebx/TWwzJa8eOQDyWCqlDCzmQRyJmXlUuJKsD9vtXUVUfO4I+Z26hg0\r\nP9D6BV5gIXv0FbNXrYaiP5NEhuqgk5aGP9FT8xWXYboqGQP2ZHTBmRBeWo7b\r\nriS+fUWPVjF7XUy6Uyz6+b0zmTfovlN5HO2tEXxJdDQKm8j70PA2w19HVbB+\r\nRVMU3SfXeAy0eJGBNLIl9NSNXdMywntYTyaVKDH9AHhzml0FkFw9rEyvcMTP\r\nhyHJE53/cUNOxt33+wC0fWe6n45EtaO0r2fAdqLfuZcE6ioIFPH+srMEhXAJ\r\nTIIDQ0EkNePh1MHeB9Y7ztiKvlz0NfKR28zVIQpN6NS4y56+fQByNN10Zz66\r\nasti+N3NkXChGhWLjw1RJruqzz4vdi39t1HP6W0VtntYPWfsT/zyGN1WB5kE\r\nJEwYdwva0ZWbY+lYnVnbehs3s6cdh/phMrfY1cEmR9X6JDblE6EcBDbg/eij\r\n1jN1GELeY/jPi+QzDfO6MwtXRgqvVG2EYIds4GNVyfI7sHGbWj75Jdw1rgw9\r\nE7Zf16XzGD33QAq9QFL8/1pBC6KgxIhrdPbGK+vFCg943GsyQDznQ875Kpn3\r\n+u3PnaPQ/+06EIOI/xJE5FK2eQ0smrueJPA=\r\n=etxO\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8726533c.0","@material/tab":"15.0.0-canary.e8726533c.0","@material/base":"15.0.0-canary.e8726533c.0","@material/animation":"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/tab-scroller_15.0.0-canary.e8726533c.0_1663705127795_0.2234035167147832","host":"s3://npm-registry-packages"}},"15.0.0-canary.00d8de0aa.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.00d8de0aa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2112bba5528f54a8c4f5a2ab6f16a2babe26e3c0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.00d8de0aa.0.tgz","fileCount":51,"integrity":"sha512-HVyYrz3l8uR68ZWczbdJhoCcNA7uY6qSKrI7cXs0pWVl6U7TyfWnqdDGzm4UKGAQWkrhJu8M1ZJbbSOFxPkdOg==","signatures":[{"sig":"MEQCIFBKopHYkR9PONjJSLEdmI68A5CYzT6lgzwrJeL6XykmAiAzsnoyn+orICeEfle8KelGWzrpf/yTf7VzbQnkShCC+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKywCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmow/Q/+Nbtlos66tIuFzSQ5kCWWMQwYB0c3K2ldcbxCCAcbOMlZ6C0T\r\nu5aFo+YtewycZ+yOFk50neg3v1/xLZleN8iBFu15s+r1ml8uZx0vRvmzar0S\r\n7tk9fqqqYcHbf68QExcckfIehLl1MZ8MORdsX89hQ2XrGOcpK9S8Wm2EIB9g\r\nerxIy6F2LDsLtMYd99rdlChHYiZQv9zEn3e7GfZJ0NYepGu7SnbY+ITxYnoD\r\nDt0jaKMb0IQV57WvAMUqorvkBkkfzewZWmjkutOoD3N+A6vkHma0e+VUKue1\r\nmYEBK6GmZep/l9+qVbEJaOo2jKHSdOI9cni0y9aCkkx/Y8tI7/jn7nBOWdGW\r\n7ybpYwGx1TtE+jMtuqwchZeJ3pUuPcdyKEnzHWMyjugwWddmj4Et7UqN6pNY\r\nw9ymxA2S62b2kzTD7VnQUt8OdLxUH/VIMRzCc6h7d7GIDi+6JvsAqVdfh+df\r\ntbstKpbyVf6hOAf1bAhwrsZf4tYgJp+ZvJ8bny5z4Fr4HC9hJYY+myFEoKpL\r\nDqk43N89VGRvwQOROylBVpW61yw4GR3KoOMbFr1dzBKm5UHmbMZNuwGYfEe/\r\ndGA66THyFFT3dYLhPtUkff2kjQ/agt7PJEvcQku3HpatIODToGn9GFabxxox\r\n7+5Hrdi90SjmgpS/Dz8eJvrhOGaWakOBp3M=\r\n=WMOb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.00d8de0aa.0","@material/tab":"15.0.0-canary.00d8de0aa.0","@material/base":"15.0.0-canary.00d8de0aa.0","@material/animation":"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/tab-scroller_15.0.0-canary.00d8de0aa.0_1663773697909_0.20962503248634246","host":"s3://npm-registry-packages"}},"15.0.0-canary.271aedc30.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.271aedc30.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"04a3ae89f7bf4fe68ba86e52c42468a9de7c2085","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.271aedc30.0.tgz","fileCount":51,"integrity":"sha512-C8l/5pr21KQJ0ntlRH6K4rsxm4frpe8y5PxOtKk6C+oZnTn4MrMNsoAhUAOLd2WL0XfrISCqb1NqjCf1tNlrWw==","signatures":[{"sig":"MEUCIQDZTp4URPworZDN1cMZ6mRzobhKmg6trlOHpsZm+agexAIgAysszBiMpyCWqjwZJyqNejasf9W/rJfEvSzNy2psZwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjKy+nACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp/ixAAocg11IB17ddlX5KdJxjFdTL0fASncAWTBlsdd7HSdMzLBgHU\r\nvMI2Ri/pnxNmNIZchSAcOQYvwpAhKeKRSmW5Hw3fEU+hk8/3KyAoRaCenn4v\r\nsrB/cxjTIJw5XK8EvDeIBN/AePi1Em4hzxeozwp7KJkV4S7TVpBSL1dpY4ss\r\n+OnwmkfjffgMJpZlP/M64bsd7QR/ZNSad2mjYVc/sjGlIvcT0dKV42SxpAH3\r\nyDppOZ00YgR9fyn6janSIG0Y5OIp6W8LFRqZ1/DLIuEY9EIiWxVXev53YF4Y\r\np1NcgarTAL8b5O8UbyRtwWg8it/UMH5KVyCwE/xjUfPcYpTeog/q8XDZrd8Q\r\n1aD8UzKGjHEJD2vd4+5LbaUxQbG7Z0UrDV0Ud3kiAsewQVvyjHPkXzK1yJom\r\nWETLiGw6Hgx4Pgq3rDgmMsG1drjbQaSMZWJZxbQ40Q82g8NdP9mNadUyKrFj\r\nrnSpC387dlG8eJ/blxG+dqSUHw66mGdSEQKTpGPgI4SlpBXUYxjYTqEjYtjg\r\nZnYkvD4VH6qEPridHXsppG0uu14Cq/+6MeR7T6KZhf6Btv7f+FRUJIdoSeh6\r\nhHEF9REJdhlXgtK5n1GhVFhXa2Mc6dcnAkXQ4n3gm64RnVn/JqdnynuTAPVI\r\nn+fSE/3lbFNdiLEo7XAi8rWvl9QPqvu+++0=\r\n=CNC2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.271aedc30.0","@material/tab":"15.0.0-canary.271aedc30.0","@material/base":"15.0.0-canary.271aedc30.0","@material/animation":"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/tab-scroller_15.0.0-canary.271aedc30.0_1663774630769_0.49433165129239254","host":"s3://npm-registry-packages"}},"15.0.0-canary.d3344c16f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d3344c16f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3fa7f8efbc3a22ac7017b42919a51cf9dcb31814","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d3344c16f.0.tgz","fileCount":51,"integrity":"sha512-CA7vPMEvlrO2aWCoqKb+GmC8K1tR+WLDkD16RTKLPtXA1J7LjxcYINbIKOb8yg+lPTrUk6hMotkna6z1EuxhbA==","signatures":[{"sig":"MEQCIB9QrTHsQy0XqaXCNMf6CgN2TWRrJMDtgw6hqf9TxTi6AiBgzcPd7VkW4BQAyyn1HkKono0wFqL+Mk1UIaBQsjJUgg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLCoMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqB9RAAkG4eHH+0cOAv3wxOXwUE+AwBbVnHEWKub4REct4CedqbQZJm\r\nwUc9sNJRhXad8Hg//JsGThpcnsSueWh+BtHoDIpypYbBxeo/46O64Kytm/ab\r\nCqS9rlLCwa+IVVTrmPlCDvVQm/ZeKPXt1HHapt6sLHCEb7B4EIDIZp6qlT+6\r\nLqdciHdymLPluO7A9ihY/iCTyULm5uhlUOWi5KNH2KKW5DDeNoHQZ7ce4hHP\r\nVObk7wZ1w0j1isb6EZ0eOGB7HwGSFGws/NlZqu/w5Gfhie7JSxI1aivaQkOp\r\nvTTEt1/XrZycPKPUtn3KuGqO8E5trZOXHOq/petKb5VbNCL26hXlsMmWlY04\r\nJo8TeD8g7YB5KZa73WXp/3MY8UaGEVgiSJCaZCIAsPsgcT+xVQzxVCBIQT6N\r\nc7VRXtl9042bzW/qsL/mf30KT5FZRqpxC000ZNkfR572HByoM5HvFrAjfH5O\r\ny7c2R9TehtxDk+Pr2ZMt8GpaHopnS1oKOkU95GdZuHHsORIg8afVm8RW0I63\r\nFAgNX+YfYxOPYcAO02jkBn0C0JZZjHwIj/DjTmnfwDxTZ0Kk2gCl+Nq3A95H\r\noZgaIlt2lOatnHZjgCr9zcDVFq1+z5TnM8D022+4+5mdoNj2q7kbEXH6prNz\r\n22PWZ9KwIRd61aSocFREhjKNQncS+Ibm9so=\r\n=1ZjC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d3344c16f.0","@material/tab":"15.0.0-canary.d3344c16f.0","@material/base":"15.0.0-canary.d3344c16f.0","@material/animation":"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/tab-scroller_15.0.0-canary.d3344c16f.0_1663838731826_0.10093598853730446","host":"s3://npm-registry-packages"}},"15.0.0-canary.94f20ccb8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.94f20ccb8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"08b69437862f806f7117fa8fe73b82b0d86c7958","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.94f20ccb8.0.tgz","fileCount":51,"integrity":"sha512-B2f6EcbgQaQywsnt0q066bvd5WzydYMnki/tsLnsdlWfzbxnup4FNvRQEGx7cUeDjXWcznDgCJ0E1UQIyzbo0g==","signatures":[{"sig":"MEUCIDQxVggSH2vmMgYJcJbhWLBEWh9ZTQs9TEYfCWgkbdfAAiEAk/9VGGlRVE4Se0B5UH0vKWaXCvPogryOwUbeIeJr0B8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLMo0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9hQ/+LuvZBX3nansxZ5vjs6RYi6PrmZMuUrMDku7AbvRNNVemSs7S\r\nUI6YHIf6H1MBrXjib5zVEh5acL8yyWo+C6bWpmMmnA+sdfIRrp0CbUqsufLK\r\nZGCM7D1tyoj9IPsB9ukRkdrpvNiThH1sqLGu92GhVJeN5sG4z3aKUv8/r7zT\r\ngmzW+YYejiDhIPG+BwcGjMH5L0seBkfPvGASo+C6ygMumLXyke2RwFdOdPF0\r\npaXeWySZcSU+ztN1YZChm9n21B3O1caruGBKJFVqet/fB4tJACFoGN5aAJ5z\r\ns/HvHShkLGoK47q7swm/6u5V6HtUYlFQ37SK9zYQ40f2axtgCNlwdv4wZGav\r\n+B5YTqWNR/B2na3+pCGSgWXppgl+DxSLTdywDH8/aYvNjDimvlZIMQr+U2q1\r\nd3p+jFEvoa8/cihMmKB7GtPU4jwxgpSAvoHchQTmvvEXYDOfv+5r1WX62133\r\nFOKce+olZ+tVJYd8yC395qLk8QPDCSzeFC34UFBngmG1gO41VgYaT0OjxSp5\r\novcD6tMnMRQdZ/f4uJtyNNVtgV6YbmmamqxpqQ5yMHlq+UzL0B5Oau8KVIZ9\r\nETtXgQmhhcWezVBXLOoaBpT9e4FLvSMPyyR7Yzj/oM934tNRQd6fTCrwA/DF\r\nVfD9Adr9MdbMasji3CSffQpTKrNeeW/BWOc=\r\n=Qx90\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94f20ccb8.0","@material/tab":"15.0.0-canary.94f20ccb8.0","@material/base":"15.0.0-canary.94f20ccb8.0","@material/animation":"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/tab-scroller_15.0.0-canary.94f20ccb8.0_1663879732068_0.4115045629431555","host":"s3://npm-registry-packages"}},"15.0.0-canary.81e4cb7b2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.81e4cb7b2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"52b3ed90c1662b884aea7fed0d4fb0bfe8747ee7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.81e4cb7b2.0.tgz","fileCount":51,"integrity":"sha512-mi2woSWafFJStaFd3VQChgBaD7lraJ0JIHJ/VHO4awVDGcuanoINZrHpmDBHFbFArosficDGUpfat5rvuOHLrg==","signatures":[{"sig":"MEUCIARAL+8ETqKcHlNdYbP+xFHpXU5ANEXU2gfI4wYFX+kYAiEAw8SSGwy3Z//GNf4+q8GmP2GLxRCR6pNwMuyDT4acaQ0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjLcwaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMYQ/9EYEi7KyVHV7vVZCOqNhO0l2lZ+w3UfJLCUrjQzaX+CFPHPpC\r\ng6mdMThbxmXyXSbDTx0T6Y2nWbDw+Lp63Nj0l4UEqoJWjtT7zVVDj9D6mJ/2\r\nQraE43s08zxG4QW9lktnkkskH0rzVi+sBAjeJ1Bwz7Qe3rV9OJl+sZwKpg3T\r\nnbQAlRrarE7pQaFqgbxGxkmZ4J923sjGoq+V2NympbT2M+hZoUFyv5rC2X7S\r\nYH8Vct8uc9LYd1zr05WmPRCc/uCz/yjqX+0Ek1fsY9+Ho0jMou+3ChfLPxhX\r\nP+pCjnrOJG301fHMtjuOqPXwowYNPxpHBQldgl/oKjgkVcKQamnqzMkSxflt\r\nCwb3/hgIlgF79sZnX27Dhx3pzolANxGqshrmYuQNvCcIaJ5JTvrL/qfy2TCx\r\nL4/KbxeQ8NYNQgroaNndYyUQ7JWLe7Z4BXuhb3dUQEp9oIPpJqmuz4Pb3nqY\r\nf3ORTJa6FzzHcpQANTxdIAIGYlRykOUr2suKN4BhbTLNLcAmlmzJTpQMTVl8\r\nsZSM15eFidbB7krF8Z6IQHNipvavaOgCQABfPmNWPsttyyOqY+qVLC1+atAk\r\nPNlLKdSuw49QWVKyG8pmjGCddyoa/Egu0Pe8aAN9sGP3520VAAdSlhE/AYpV\r\nSuDFQ8sqatDGZhsLXjPwqx71kjZH2YjXDNs=\r\n=uXFu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.81e4cb7b2.0","@material/tab":"15.0.0-canary.81e4cb7b2.0","@material/base":"15.0.0-canary.81e4cb7b2.0","@material/animation":"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/tab-scroller_15.0.0-canary.81e4cb7b2.0_1663945754693_0.12253475142604286","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa85f9413.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.aa85f9413.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9dce2a80d19e4bc83cca7cfe7cdc85f35b3161ca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.aa85f9413.0.tgz","fileCount":51,"integrity":"sha512-9pYC9tkLviD6wUabH+pQ7vLdx0EStONXCAd1TvYu/LIIKwH+cV/JJVAxRikMUwEKgSc7S/d2E5Pm7Ddw3jvrEA==","signatures":[{"sig":"MEUCIQD8U4t3CUiIPpRQh5f1o0VRslVzrluFw7uI/65PjlXpMgIgEGBbdXAozgu3AaiX2MZWjgKPpK93ePFSDOVoy9Qcupg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMegIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqlSQ//T6ILrqraIIUebVwfkQsJ1yg2VW+EGo5/QDmVPzH39zdwnIDR\r\nurcy/y7ARI1aqByeOsDwRgYeek54p2w9Zfr6y013ZtPTso2vUcm6picJvsj9\r\nIJg22qOWBKqJkHeXqe3hTb68CgZkDQXCeMWR5XqPrwE54mqrdlQhEIhOea8r\r\nU3cqI7Y+OZr2FomB9iJ0OwtpmGpBCVFbBhUYp2ijlvV4nTShLYt4jaaldVTs\r\nezE/PWq8PcsDRQUFB64gsIksg3BqpQj/dPz0G/k3eo1ZwWOW73Loqo7mpCHw\r\n8RHWuzXVfb85iSLv/3JcR3bjf5ifMwQ30rvqAvOboI8wkCNKSBmffWugnoFt\r\neSVSN4VVq2wv7so4zkCbK2tC6nesrBLE8ymEE6BFAVyPEpgvahdfi47guzQ0\r\nerUgPfxmyvUsi3h6U48pzGIs6S53jJTFWd5YMswTBrp6xUHtKRmqwRO438IL\r\nyBNackbXsd1TZtLlfO4HmyziF+QPFD2nVB1LqfSvaO8W4y6vJP/W84dhcvqa\r\nHIBgR9xXTe6v6q56uNZ6o6ojKVOvBosiT3C1OMhJU8WmuURBITxjoKmlhIys\r\ntDYOyIoLs9f6II8yQ1h5lf/Ww64aljXxSV0Lc21mF1EduqmyDy9tJSzbfbUu\r\nZdHtVRz/m6CtwcHuULM7iZTKXGo/7szjY7g=\r\n=reeq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa85f9413.0","@material/tab":"15.0.0-canary.aa85f9413.0","@material/base":"15.0.0-canary.aa85f9413.0","@material/animation":"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/tab-scroller_15.0.0-canary.aa85f9413.0_1664215047883_0.6447144383117247","host":"s3://npm-registry-packages"}},"15.0.0-canary.7134a7752.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7134a7752.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"78977678b6678606090ad06c0b3238f48544d18c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7134a7752.0.tgz","fileCount":51,"integrity":"sha512-sAq+rLUTk95PXfrbPebvW6vt6Wii1PqToV0LrQJkWojsNRJ/ucBwiTTGF00cMe9MuyHt3+Ix/DrWiBurdsqk5g==","signatures":[{"sig":"MEYCIQDBu2NKMpYSOXhvehlRZSwJdBK9/cMRHMTcqOOM0jrUbQIhANJuV4lrJS3SXmhlKwR09BAYdddKuurUOOl+KlsW/89A","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjMiCVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrqhA//eShcj8Y8cMeryEscpUUHF2VKPugnI272fS9vNLHuPUmBwskI\r\nRlOuizequj8In7sV32BbN3hbZ/mkLyyWhgiUAUqvkIomgB7Oh6Wff6gz6/i8\r\nnLg4IpbGbipd+Ej9yigOXiHhLqKQjoV3gpAEn8RK5yKjgutpBOVJcJR5s9uV\r\np3LfYEKKIaRWOvNnQ/2zJAUzl1ZB/TrXn8mchYa6o2mOsAkhL0WewhvvljcC\r\nPV2mtLgn1k8yNKMcDeTBo9PhNwdG57TRP1uwWxTHpD5IrQl7XlruKY7zPTgY\r\nghATgnyWHz1soGhSeNScPZbyGeSUzRjhYR/ZP/7sMv7frpGjFMjObzTdgXVp\r\nJNEJlpmCknFt8jFSxil2ipi+qgxsvfctKYEj18ayZ66ALDJGm7S2Sp/b6/W9\r\n0CxVICOFbbfe24+PPDnSKYbMqtm8ZoPgre98t2JG+B5N0N6Wa1aUtW9ogpTY\r\nAHe+dos5xrNkxE6E/LE5xxql/Gi5CWc4ktmIjvCvQ74cPvZt8EROwDz+S2GQ\r\nDA+iW8w7KueKCbNOVwh83Sd412rFS1VH79W5xZtdt6r3Ql8jY2PNxx7IG5mp\r\nT7y5PqwMu/wDzSmu407GQ6ErufYHVg48OttShkkcQCzO+nJOnACjxb5OSVZZ\r\nQWNq+yVGRgQUkEyB5qEQqiG/9UVdH10YE7Q=\r\n=DAs6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7134a7752.0","@material/tab":"15.0.0-canary.7134a7752.0","@material/base":"15.0.0-canary.7134a7752.0","@material/animation":"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/tab-scroller_15.0.0-canary.7134a7752.0_1664229525352_0.4464769856073867","host":"s3://npm-registry-packages"}},"15.0.0-canary.70b8ac16e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.70b8ac16e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"48ee7ad1e391aab231395a83c41bacbd1008f5de","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.70b8ac16e.0.tgz","fileCount":51,"integrity":"sha512-KoOQYBl90Nc1e9TW6Afx61lUYbrdk+fyc5svWvoCGUIyDFSmGA/NjFbw/uuux2odcxbQ5bd5MFwzadEVWXZ3fA==","signatures":[{"sig":"MEQCIGqjsY0Uo7wFypMFSsyvpT5HunlIlY+kdSfqU9mlCYuLAiAUndhXSwZSLg22Sg6bPFPyt5Ha91T6ocX/3zK2Dg79JQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM30mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp1kQ/9HoTd+K0gQgFG013cjUE8grtzQAGsT0dJfm1AQzSYxV7UgPww\r\nj7e/IRLrzAGL+Oactnu9MB6hRvv0uHHsiEEThybwoVtuCL/yxFYcE7zQ77xl\r\nf/mS11p6NfXftp6ScMe9b3dBgLfMAUDleiPMfrU/3kOyyRSLMq6QUiTs9UIt\r\nBdWOa+bCv29taN//54ZmFJ9PWfHaLMjud7kkEm7Cb4NdluU5xuu/Vx7yfwSP\r\n5hw0BD0W2YPEtcgr1kfRubBBH8bmDIQwGycW6GUrOB+c6KrvX4tqB2NWi4fZ\r\nf+awSSr/a0GFSOO2tQA8ln1KBPIpuypJusl/H8KIRYFkIiQ9996D/GyB3Zce\r\nbn4vnXzzRoXxZADNRZbEtB/Zv4t+U4/HcM6Sdzsf11QHx+zAVWDkVzUihYqf\r\ntih3L18dLfGMoxMqY0usNOmtSNHYV9YrwlxhYnt0ev0efNguPSbT2lpSJ+2p\r\nlCYEVKewaJ+r720jg8IxfvhzXxIAg1AkKtZ6yfxpPVfv0YredVJRhtyVdTrK\r\nMxc+Hrfls2ax/+ecqB7aCklyCbH/dsD6XOWVoh8EqAkuGTPNO921ICPC57MN\r\ndF2K7WqhqvlhunePg9gpgGGLrFqM6+IKLXIBWYtY4Dx4hTV+sUctnP6uTSP3\r\nQ6Yq0t6+tPFOU2EA1462K0qnhZNSWhDT0e0=\r\n=mT8x\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.70b8ac16e.0","@material/tab":"15.0.0-canary.70b8ac16e.0","@material/base":"15.0.0-canary.70b8ac16e.0","@material/animation":"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/tab-scroller_15.0.0-canary.70b8ac16e.0_1664318758006_0.25238271991934846","host":"s3://npm-registry-packages"}},"15.0.0-canary.c20d74405.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c20d74405.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"50fbeba8bbc4e760e590bc5d2b0d0c4f5c1c9f4b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c20d74405.0.tgz","fileCount":51,"integrity":"sha512-fIyzStoB+aulpbOL6ScpCVB5Kfk3acTv0FcJNmxQwBD8bsflNRVbvSphNT4s6WTY8+NhaaXKzzFtsQC0DLDMsw==","signatures":[{"sig":"MEQCIGKpXzZauGyuklxIpaJy34un3Q5eTq0su/aQt2FtIYpBAiBXOwxMsPo6vqH1xZlJBLeMTJaE7gYgsm5i6RVZfQmuOQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM4gCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr4yg/9GcWHXsDPmcY8TF1StvlFNFNQRCQvv/N36CTpMJJLmQb2ebN9\r\nMbcEj1o5BEikFOMjRcIGdW/ARehpUKsu3yZ2Mv2sH/YVEVlXfCnosDb9TAKH\r\nMXv+Sb7QhTTKuaOAvv094QiwUF9Iw/2YmentZwewuFc8tChg195B9OCSKbX3\r\nAVMfXKx9xS4CH/0aLQkEFZY1h/YekvBtXJ+DBI3bZCq60kW/rQKz0OgescX2\r\nZMnXla8mfSLloYwT6WVldi1k2EQhxyAuMktdP+VCe1NkZ7a1/jmG0uUpslj4\r\nMOnVQ2LrfEAlD2v+7MomHMO8ogpRpXF6236mvfkGlKMObY6dgud3jeI27D7W\r\nH6YSO0cZjt5l+o9mFptXXq06y6rDD169om3Dkn6XqY2jp+i0947aJpSznlrB\r\n9j7qFFr4fRri2V+mMQHelY3EnaSJvgqzab25DSMrrSi87QW4sMlxQxz/vn32\r\nwVK4fu2NbCg6+9iBrqWd26cPnTVWtlVROnf7qJq0WgsbXiIKe7a41pkcBuUO\r\nZu2WN+G6qXwRVvHjR+NLHj90x3Xh9rm9kTs+cBJ0J7hLNy/ZUgIeIM27t9e5\r\nRmmbiGjGXGtzujU5hAYAf2X7F7dToIMHhPVzvX6I2p8D9aWxsw+LBtaCtRB6\r\nG3QZxViaCujvRbPuKSnWLl5JD4ajEq/c+OU=\r\n=NMGQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c20d74405.0","@material/tab":"15.0.0-canary.c20d74405.0","@material/base":"15.0.0-canary.c20d74405.0","@material/animation":"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/tab-scroller_15.0.0-canary.c20d74405.0_1664321538776_0.32711214174636183","host":"s3://npm-registry-packages"}},"15.0.0-canary.f033fc8d1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f033fc8d1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"28d029933e7fa109c581db05656a2ae0dfc6baac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f033fc8d1.0.tgz","fileCount":51,"integrity":"sha512-8W/nG14grhwoVBTEd7t80QJCFt4xEXlcq+tdCvXl6lZpg3z/2oe4UfQGcectLdtjh3mtP1Gp2NrHeKBS/x5OaA==","signatures":[{"sig":"MEQCIDxnxVIzqwuAFTh2BsD8Dn+kuafCxavnL+J+ohIaJxjYAiAzMnPErb9SUYmZg4REWqWymo2ZrZGZQUDbuuSfMH+OsA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM44eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoFRw/9GzQepCSxiBEXrC1LwYOnmF/jZEB8CUKmSn0qAVLYXHdL5co9\r\njxHJFnExst2ynGweb98BjgABIibHf4+6AqoDfPZBD8ZjU3yP3jnpDdpoqBhd\r\narrH8rI32GUgUFk24Pl72QEuWJbWevzHDO3kkHzBJw/6zNInr3348aYapZjI\r\n1kVRXhGTzzQqO8QgOoJ3tZpwka1K0LigITEPXyIq0YC7hZDa4UBzMISxIRhr\r\nR9y5oIx5AfZDfZah0RmrdGp5If8DtOMHXIbO3JV/trMZxX7cNTTHgT9iWAVn\r\nG/VoH2JlxqPeIykizN5wyhK91IcNLwx+Y0GIIoECADjGPkC4Ds2ds5LU2NAh\r\nb+L5XVhF52v8+3qw8nt0bp5VoN6iEWl02dETy+zEir/kjhbZeUkWb51fUs21\r\nWaa/okBRyC+8qxFnOIEKcBkohQCawmO2ZeXhtSyLzv4p1nE8+JCNW8qVXWkK\r\nF3Wl0JtjK5ODecSfZuNdCdVv4U654uHnh7avw355Y4tVitORTTxrcazupcv5\r\nzGfvh7PL7hiJZ/zzw9YzxH2rSkzo7KwSVDzqKLox8cjwdUuUv355CdYspaV7\r\nhqzuN1Jg+INIYYbevZf/ItA+S6iMEq7T+O0HhwMCZBbOqU8sjGzsu958cIQa\r\n79SILwUMn2k8rHDTVqpxD2y+vdrvj5naW8w=\r\n=d4bt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f033fc8d1.0","@material/tab":"15.0.0-canary.f033fc8d1.0","@material/base":"15.0.0-canary.f033fc8d1.0","@material/animation":"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/tab-scroller_15.0.0-canary.f033fc8d1.0_1664323102331_0.9587356102789282","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d7ae912a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8d7ae912a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2d47751c6fc85061d42fddb75fb628a9e7bb17f0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8d7ae912a.0.tgz","fileCount":51,"integrity":"sha512-v4Ufxb39KkmWkA44xN+0oKTSa1MxTS7U5vLN3U9LIiBtIAzV2kTOf6+fiDbncijJ/pK0XOL2KlseOa/QICfDFw==","signatures":[{"sig":"MEQCIAWg+TSREQwek/kSx5QQDKyk91ADZSzIXvPyxaDioGTkAiAStzJ0C+6ZnMYiARXGCa9YeyN3pzFOlT9rncvhzRGVag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjM/5WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmogMA//Rq9QkIJYk49wZxBUvfdszDr/Bio8aqrfCujiMIKdMdQCBupt\r\nvZtDtkGlb403QTMe2pt8J5kftiS42Yy0d6f3s65x1UaOsLui2TUs7XJ8rGjO\r\n6Lfnjy9QIl6CMqfgDXN11Tf4usBZ8E3VjPKeoBGk/8OkXNzzoI8yZ2sOybv8\r\nzyJSn6+JtoiDfwAUCDAqkokHJbiNfxMbw4XHZAB+1JQUPX8HHituDW0DHYvM\r\nL2Znv3VAykRV61iZvZUEBPFarR328TwdM+CTzVj/uzLs3yESuR4rBQUBEWn8\r\n3D4jKKPOyZJ9Kl6OCoIR/fLUmTU+PYrlszI1LO23wX9DRPSP/iX3kjcJBSMj\r\nRZU+Ixl43aQySvoL6DskCydN4y8SS+wA7TA1aQj46j4KVndWxla/OO5UeMeK\r\nTZEMlLt5KwlAR4DTnNBy3zhcDqd5xZgfX4fWCOSB0fqGE1QfSEpgKXaX31YH\r\nER+Su67wCOKnZe8KOrt5D8iSDq82ErUXn5lEtWe/96Cbq24FCvoBe/qBulSB\r\nwMeOcZPvcbx1+XkQ8rKo6kUQXwBl9Smm1tDl4tSoz2ZTFXi68Bt13f7i5u25\r\nId1TEY+Kam0hBfq+mPP5pjVoqfpxq5yBEwPHzIwVprYflCsK0kjRvOxq6bip\r\n3F2QtjdhetWEOydturTK4Kx1WRbTIdou5j4=\r\n=sFf+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d7ae912a.0","@material/tab":"15.0.0-canary.8d7ae912a.0","@material/base":"15.0.0-canary.8d7ae912a.0","@material/animation":"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/tab-scroller_15.0.0-canary.8d7ae912a.0_1664351830277_0.8382020554975804","host":"s3://npm-registry-packages"}},"15.0.0-canary.db414b864.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.db414b864.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"288118f6208dbf8749b61d08c0b5d2db25f3ec38","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.db414b864.0.tgz","fileCount":51,"integrity":"sha512-sC7DaMcyZcP6XXoEzJeOJQW1KpRwBuBf5He+O178kqb9c1K68ygaQYWt4ojetQb1e2Ms49rzv+nh9QGMu+QJmA==","signatures":[{"sig":"MEYCIQDkGOZ400m0h+foN3U48+sjOcKOKTH/n6f0byTxHDv6ogIhAJlGSu3cSA2VrtJw0ZkIUGalkkk1QVGszKSElc6hL/UE","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNF/+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+Yg/9G/ZNBhCkf5sinESN3gZ8lpy2g5Yt4zOwkWxlw8n45Pj5ofP3\r\n3XgZIqvYEdKamjBKnaIwKSP6pWoxbIcDc5fvzbYuO863h8pG150kZzvf+j17\r\nwfHbwLoIuAxL1crgoCvxh0K19tJ3dGtbMQ2oKdQ+6SX52q0WTxhVAHUL+8MR\r\nQRNAiPM7yrtfvYyZT1Y4GWUh8IpWmAircAEMasjcFYT07ABaWEx5nCvIzr5/\r\nh+zAhDUFXXHOVogf5FXOVaRv6g9ZHrVAThwjuwigW2EBoefS2aY/IvIoWEIm\r\neqwd1yCBLoprYNoC50efOctLbrpxYjuTC8fX/nPG/peS5N76W6GuTvH0AFJW\r\nX1hwDdpnyMvDiTfMqo0prX6jTRqg1eeWf45uf8bTu64ugK6iWjsGyt2jiEwR\r\ncJIt5lqYlUsHP3qQ2sUa4s++vBVQ3CRbvV7soVCuI/1GQnCy5UBOGjvd0tUf\r\n0M8ps2zrZh3qIJV4ovs6DsnvWTI152YX4ODzr1GN+/D6zgHbD/CX8Bfr3W0v\r\nJKOedZP/WKbLZJX8sCwr9M0za6d08apb1qCOlN95RpSt4I2PWMv3dFNwGlKE\r\nYMP+8cCdE9tXBRYR3gik0o1/wgLE0o1rR4TZG+DvzBfD2h9JZhpk0WoQGm8W\r\nl3Mj9MVBpLXCqeDMM70ETclhHqzoHYr5Pvk=\r\n=zJBC\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.db414b864.0","@material/tab":"15.0.0-canary.db414b864.0","@material/base":"15.0.0-canary.db414b864.0","@material/animation":"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/tab-scroller_15.0.0-canary.db414b864.0_1664376830086_0.9692607541995912","host":"s3://npm-registry-packages"}},"15.0.0-canary.28cc6791f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.28cc6791f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"43a29fcf3728e4909aaeae70802cfcb321833ffd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.28cc6791f.0.tgz","fileCount":51,"integrity":"sha512-a7HYoUBi0/5y9hTdwL9dg8GbCIXjRj1cVf/jqdN90RpyrNzB/ZMpYAg+oDL+q8hqTqPDNYOAXg2bUhzGw2LqiA==","signatures":[{"sig":"MEQCIEeFj/ocw5tTVYRPzy08Cvj6AZuKUSu084KgOwzz7OkoAiBbDcBgWU1r3XLmmfa7FfNfoS/Rt5i+XZSq0e6hGmSLEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNI2JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpo+hAAmVXGFsmuq02A85hswLaGCHXdkiUlpzpjABrgPLU2HQcaWzoZ\r\nFT+H8Bs5ZZLU5DerMf2Th6ZKd8Mt4y5mNMEz2FCTlBtpNbteXiMTWbStYyf9\r\nQm7txnCcZqqnBfwnYXOXcY3UV87ya4tH4tY8WAXSQtQaaDn+ka2MDJR0A8FE\r\nuYeuxokCj9mrmaf2toRczxwMuibrd8usJJU1XUOCwjxEyzJ/QN7UEVrkTbp+\r\nsfBGGbXTu7V598MD0G1xol0+ZQuoxaURxmoG7Tzo4borPyQh6d6+SiqTwFYU\r\nU7I+j57Vz0gnlOPOT/vffRO31B2g1QdK1rODpbfclXGKWfDbMPaZtTh4MvvL\r\neSU5q3fBtD5k7dG4huONNMPPjbLJKYplQPYqQ4DRpjOiEjZDTAmDcFqi3Eps\r\nOgXIm0w/Q5mtd2fFxglSzdFAwl7GGdTXwiJQBfy1jbefQoOqzSldzwTfCwpT\r\nl9KhV3chlWNgndNVgwBLWARQJC3BEI4GnnDltjaNUIPD7I5QM638WnTq2x2y\r\n/M27PgOzwSGVCSkaRRR8bJPieFc3rrYP/tWJCveHwcoWq8XQbBizgyG0T1mi\r\n6hPesZBaov6b5X1U4uRVLCQLDdHth5vYybaws84QCjdMeVUY77r++KrSt4oJ\r\n4g9LRAT9pKjFgukJZJ7X2BifgCIWgO4cjRo=\r\n=7AQf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.28cc6791f.0","@material/tab":"15.0.0-canary.28cc6791f.0","@material/base":"15.0.0-canary.28cc6791f.0","@material/animation":"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/tab-scroller_15.0.0-canary.28cc6791f.0_1664388488926_0.42026476669407375","host":"s3://npm-registry-packages"}},"15.0.0-canary.a515a2d18.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a515a2d18.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"13d45e623561f2ff26e6e4c994d97778c016d48d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a515a2d18.0.tgz","fileCount":51,"integrity":"sha512-YqcrswfoLIer9BQUXy2zd61QCwr/4me+VVxwi8f516wvTXzmlC9XQb46DVee4tpXM62Va6EoXlWi/Lz6McP8ww==","signatures":[{"sig":"MEMCIEdwR+W9mwk6N7KRsrjEVYUP+DMM7hAZ1PvBhoDm1IkXAh951hRaLSapLGAVGD6hjaWsXu2Dk6EaDOjxnEGZcGe0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNJj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqgwg//YPomkZMTNWiJ41VhMcQ0JmCzaLrunlCLT4cwpm3cgNjr8oMc\r\n7pkcyoiJftYoBVIft+Ar3off11HxMlBIhtZ+mXSUlnXwpeqvpLInYlv8XV61\r\nMDf6fFm02OZbI/gc8BTAKgbplQWKYnl/c6foyWPxRYBPR/kJTpPMpPLWvIKl\r\nkiynoFJy7NS0sAajk76XoB5UhmzfGOg2vfgQe51FeugsoCXVpRpGT5YRtHlr\r\n5EMa1TrkEpc37tUazmqb+hgZxmwhnrZO5fZllJsKrhgt4IFBnVwiCNfbfqrX\r\nARDeJ4KasYsUAss59U2tmxOaRxw7KZVLZweL37ZS0GwYBsnNnYFw6VXJuGPc\r\nMurtXQ/7POEstIXdwBAuDEVMxkBLlgSu2wqcNPp4a+qYrw+OxI8AD+QXGIHm\r\neSFWQUyE4N7ulTnsoft8h3xnDXb+fNPYP0k9AjuCrvKB8e2wvTFLHbt8izKh\r\nqR3wbXRJAUiQ7WkTJthYSOsx/S5ojXLe9sS/aQEUqq+0CGp+rPUBUUnpcyVk\r\n0bwCF8ufeSdvT6PyCBYfaTNDbyn3jAS8p9KbjQQM/RfTLgOcQoVYip/8uaE8\r\nbzQCmaJo1RE4FU0BVy2VnDrQg9oHEzAatzpfZPPzFuqZKp65fQtQOFlqKlOd\r\nHFO7rRYAKvMP0YmRE7iRylA64/w0KR2CWQI=\r\n=H7/t\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a515a2d18.0","@material/tab":"15.0.0-canary.a515a2d18.0","@material/base":"15.0.0-canary.a515a2d18.0","@material/animation":"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/tab-scroller_15.0.0-canary.a515a2d18.0_1664391414683_0.9460874420445773","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce9523167.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ce9523167.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0d5da9562997844a390ae0c5503dbca86e3d8938","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ce9523167.0.tgz","fileCount":51,"integrity":"sha512-dfUJL5T8ZgBpuqijUDCWXx/3ODrWhL9GQ8mD9tgKu38Qm7HuaO8FhAZrJ4a5EIwcCA78NMqZXEq4RnSwSKVUHQ==","signatures":[{"sig":"MEUCIE+wHVQHNdKXjZ36cqxbFnC6ORGnyv+J5Poh2UATcysXAiEA3X0BQBXCLcXBwJDG1fFulJUZnMYkydUo5WfZT78/c8I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNgDQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6Ww/+IObQQtnNxJ2JGcgndxfMiTGssHQgyTjNmAVWR0ZYeXkimhjO\r\nETGYH/YKMZLoP+wyl4u9Dvmf2MV3szSdeSoWIaBMkZwBYaRtprnT71spN8VX\r\nhED0x/NrjROlehlq58U4r/TZKwCf/l08IME9sm4YFBI+xCSKeuK4FkjCXT39\r\nFAhXD/q3BCvWcETXR5cn1b+Ji61ZofPJoEpr2qVvl2n93yFB0MDX+5Y7IwLZ\r\ne+qWM7vU/rkeLM4TZ/7Zsom9hM67X1pDOzcf2mAlS0/Wfd8uWIQ54JOpQGZn\r\n28/rGbGrFBoRId8j+hhikaOZR7cKT7WE/KOfSOT20yiJiYPJIjTxG3q5aEzO\r\nm5OuZXIDZQMMofxGdhYg3O+jfAl94O5eTSrY+rUjpKpelps4kdsY3AWeKcu1\r\noEcwRwqiItdp3jS4teQyLX2i3W2nsAgvLwglJ3L2oyl65FPla0lrQOx5Dnmt\r\nGfkZmyuinj483zrRVZ5UbSqyNvCHYV59fo4dzP4qwVxor6lySk5X+WnQEuib\r\nVgdsgSJxL75+W16BP4WR9ocuLUxwJhdy1oY5i2t5MOy3VEFC9T+CJy9T4Nvw\r\n/zUvXqlCfOhluJUYpQpVKUJNe9sKiJCG/YwyPibxFmYHLkedtxCnAYUH1FDt\r\n6FZrOP5HCxCQs9g/N7MUcVkcQGcy+xQ1iP4=\r\n=KnVp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce9523167.0","@material/tab":"15.0.0-canary.ce9523167.0","@material/base":"15.0.0-canary.ce9523167.0","@material/animation":"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/tab-scroller_15.0.0-canary.ce9523167.0_1664483536101_0.6081155664186804","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2310f7dc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b2310f7dc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"625bb3af0723eb2fce6a36f5bc266c033e731410","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b2310f7dc.0.tgz","fileCount":51,"integrity":"sha512-8o366ux3sMeoGRdkfspHL+htuMFmibN1SinQrMuBfVuCop0x7sAQb7xwBrSzGvIN4jFG6k21k767IsZEI42csw==","signatures":[{"sig":"MEQCIDmZjlCOv7iEU+jLu/1ct7YX7qLFKo5HP7Ej3l8FdfzhAiAdeKOqf1Mt+Rn8vlOC0pkQtJnnua95yLZqr5HkiWQ2SQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328203,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNjT9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo6eQ//R4Cc+61IvSTx8TcO97HjUQRlYyU//6SXIgixSpkPQhMdVXvl\r\nBrCMBnMen/WqkauYrU7mKwm+/Jlbfn5hzZX42c00dn/egy9OYHFP5h1qoohQ\r\nkGZW2AzZdz84YNzhbeF3DxMTexcYsHqp+eMxInycPjCsq5bG9Rp8HYAE/cwN\r\nK3YC1Xm72uOcMYDW1JzabvpzyzSCOkS/sk8ywqeNiwo1ZCm5SF/2CxrlWcnB\r\niMNnJCwj40ul14zwKBjjNyBgXwBo6d5NY602UijkRnjXNJmaFHvlykJPJsG6\r\nX/hOFPHuEyiYI3MHUHPc5DHIp4hmF7dYm6iAFwJV+Q84B+UahxBFsK8Jwisj\r\nEPTjf4USQQVzgojSHLLpfdAhLECTi1qEdm5fDMnt/an3wLx253FR1xRjV9hV\r\nV8VhRd2dom+Q9+isk8SQbJ0kQK640lJKUwE9yE3SUjdp+qfBX39jthf234j6\r\naw427l55YMH5XjGL+WBVvKfiMcu3YSawSHeDVibQ7XFQ48Ye7RBDctuwSDAr\r\nMSM2LeJd7zD+h2LAcxOwBBheAiCrBy8FEjvdvEcRxzp/pBW+/OuWgwCzr1W6\r\nTQzj4I02vYfhwcobzN0h9sCDETZqtpB7tuLNPfT2j9Zg4pimOV98kJ5Fr9la\r\nbz+EjgFcdOjNJDX1pg69o32DHHAhtynPRrs=\r\n=BhAR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2310f7dc.0","@material/tab":"15.0.0-canary.b2310f7dc.0","@material/base":"15.0.0-canary.b2310f7dc.0","@material/animation":"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/tab-scroller_15.0.0-canary.b2310f7dc.0_1664496893342_0.5011598603712466","host":"s3://npm-registry-packages"}},"15.0.0-canary.a44241e54.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a44241e54.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"407eb7a93475839c6c2e76fb2560687e23a5f4e0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a44241e54.0.tgz","fileCount":51,"integrity":"sha512-iBLcCXoFdPuhzZZKUJNbjsaVVZKs7+l0uVprTia4xyf6LiDJju+tbtQ0d5UCk5UCG4du3rY2/UUaW7XLuvpAxw==","signatures":[{"sig":"MEQCIBbcdFBhqieHW/irk1q4msft18/FonDSuXRcabILsObIAiBtnWyDqbuSQ7FwIQcCQDdOY1AqNyzMNJHgXCUfrK8ewQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328211,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNqcyACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqh9g//dbR1UbrPQPc+exPRyD046zR1gAx0c5R9VwT2AXgx9Z+Ua1uH\r\nTzczAst74FrWHf/7xz7Bbw556CY+UxpnAOjHI3c8xQ5wkybvYiid/euzFXKs\r\nOmqoRHHAvkL5qo6FoY60S6Fk5gCsnmEd3bf3izQOKOSBSxG+PWyiTFE0MZMK\r\nW/AJaLAaPBYj8ZYnBbc2OKN9YV9TSNhZ7gh+iIT1g8fga51EaHwcERMCGoaG\r\nWs3F9T92RfDEDzqdaXuf79v9/YywByDyIGMbzFpTBIqSjCQMuyg/I5rPOkla\r\nlt2xAl6QnJ9kmugjYyjEcWj4gPD1BK+BWEgmVX3q9DQsjnXp2N4aFZQnhSSE\r\nteacKJzJkLf2ht7CcfdLQy1ETb/m1FquMjlwRelarzCXS1o7ahIt5GK36CVd\r\ntGyE5fPnRC0gpgf16+A3tC6JCq49E6xPgguOONzgCjkKitJScqg6lfe2Crt3\r\nX2vs/wfebLhFOv51e229J1HUFr9PQ1Y0zudtRgyRgovCN+SMvcvCjxjTMxji\r\nk+LEmc0kp5oy8gf2WwD/imGJSOGl+Czhkrrv7Fk+4KOlFgQHB78daRImTIQ7\r\nPVFRntXqoWffdniWHiX30uaiz4oMYIPtgt4AVnF2BhoQ6tYI4BA9LsY4Thdc\r\nyUzcgF254Pirhso7v0G50Jkio1devW9IO5w=\r\n=SJav\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a44241e54.0","@material/tab":"15.0.0-canary.a44241e54.0","@material/base":"15.0.0-canary.a44241e54.0","@material/animation":"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/tab-scroller_15.0.0-canary.a44241e54.0_1664526129948_0.9027872775654116","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ce81e115.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0ce81e115.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b73d3f8cdeb3bec1cc7bdbf12b870c94f1e79bde","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0ce81e115.0.tgz","fileCount":51,"integrity":"sha512-Y+YzBWF6ShILF4jPFKYGkzaT5rO4kPUGZTd976i6nD2PlC9+VNr9LTvkUTyxFYtBMbu7ZfeEYJ2D+ExyUmVLpg==","signatures":[{"sig":"MEUCIAN4lheKQpA/orXTSaZd/evXikpQQS85GKjM0o42tOQoAiEArZBfMiilKc1CVXuvQGyI6S1SdIPubzv6S7rxPvMvYUw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjNzMkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp3Dg//dER9aLqAqsaZsug2DTnA5fW2kfDzgnTJotEYOpv2MBPf7OFk\r\nhKs7jIXKLFJsmaP3VMOfvr7d3iGKXt7j1G6bTpZuQKDg+mCEF5tM5bJTgsgG\r\n8YJlLywd+claSjXkFCt3XVd2h6WKRF1UOJ9yzHZn9Zx2cIAh11jFWzN86zQH\r\n9uzUlDbv8zKwTRrBUuqiTI+qZwV2GhH9qHC/EcAb66jZVackeHGmf6Ih2omy\r\nOTIkKOIARKGIbVQcwlmcH5NdhkW2eChdD3E7VCn3WoszUdhVvRRwVCccV0mT\r\nExPD/SY5fqbs32fvvRa4Sj2VI1I61jvdkdmcIQ4m9CvDI1Uy2FhQRvXkRcMi\r\nHUlU0H83jn0G+tH6yrj6VqdKSpYwSzy861Kvr7cjkMQnobiRaKhldBuHJbA4\r\n9B5CvRA2IEPtPa3mpF4zRv4VZLcoggA6GUp1HvEXT4G8ZRLWUT7Gafh0g29R\r\nOm8FM0zErVbWzq/IrTrn6HAd3k9Iqe6AeoB3x5zMmzc8E/vxmKR4cdIVqv/A\r\nkNSMYUE6cmv/mq1AM+Uqz33wIEkCDYSKXB/CsVEQSv7UN+1T4CuwSXFgjzcs\r\n7cuciBjGzCwq3kHeCZ0kSnnaOS0up9jDNjWVt1bFZ//FzxFtAZyUO2n0XbQ2\r\ntjJbO5ZINbK2funIq0vtgpMi5fy3ycEpgP4=\r\n=2Dgf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ce81e115.0","@material/tab":"15.0.0-canary.0ce81e115.0","@material/base":"15.0.0-canary.0ce81e115.0","@material/animation":"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/tab-scroller_15.0.0-canary.0ce81e115.0_1664561955899_0.7984452189362126","host":"s3://npm-registry-packages"}},"15.0.0-canary.3cc30f6ad.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3cc30f6ad.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3dca58b41a79647a17eb0ee012fa3816c7f750f9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3cc30f6ad.0.tgz","fileCount":51,"integrity":"sha512-BgUoGPoosPwQbUjs4uoCnsqe0FlcDL2/4OoSo3KkpxrKnM1oqJfmKA6DP8Jvh+DW88FJEirDjHiAIo6IsuEHKA==","signatures":[{"sig":"MEYCIQCJdPIjYpVjH0r668vI2j7ofBAO2He2gb7/CF6Sbji8RQIhAMNuiAf3YA2+FZ8fGK23FjgR3vOsapeh/3F9pX2oTezy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPGtgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZjQ/9EI+kNH0i6wAoNwneee4mfGUiXbARkBljHRsGt1FSo+GbrFcZ\r\n9W/gC3P1BgbIDOEiuqC1DZQn6DNTUHjf7j6zH9anXuTEI2qSi9q7foRlabY5\r\nPNvPJaYzmQb4qar80w7m06g7iIpYQe7fQdNkRxg3A15nVPXveGMN1dsqYQNA\r\nhvFg7TE162FC1wbAQ2iRVxrLoSF56SB/rhWWOiFLiT0uEwZHr2k8XrXzKi33\r\njwwYgf8Lh0CJ3C2DE2+jgLEVqPM2VulND2KeM0BJi4iENsUj2BOCtL0b6q6m\r\nPX1HX4I0Bw4Pd05zid+MmI9QKgAct+dFy4eVbVLP116vjAliJwBGeJ3zpuXW\r\nGJHC0RjyZPMyVri6XerLnfirV/u7OReeW7VbNWrn2nrW0HJQC03XByskmbIS\r\nJmpQKTsh5mFhZHbLRxJFwuDf14KJDdd3mSJ3JVsrjvWVjxgN6c3X+9mtkkET\r\nLNjEmJ9XSwSSFHRzu0qqyKBveGTwclr8BuD7wZ9w+c7ZckqA8PdCK+n36aTt\r\n1GFTg/wJz4hXktDJB8g6iTt0JQhyepx4AekAojpiEE+ZXJOZnaKe+cww/Y7Q\r\nF4CJJ/QsDY2B4aPevh2u6RGudv0U/RiqRl53Ggnlcm2how32St29iyoktr53\r\nOFEhZvQt7a1DL6QiuSa1MgJTOaMGNj5Acxw=\r\n=LCQk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.0+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.0","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3cc30f6ad.0","@material/tab":"15.0.0-canary.3cc30f6ad.0","@material/base":"15.0.0-canary.3cc30f6ad.0","@material/animation":"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/tab-scroller_15.0.0-canary.3cc30f6ad.0_1664904031854_0.5667504740896878","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9cf98e60.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d9cf98e60.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7f9e2437389955fcfe0b8587706f45f0852c13c6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d9cf98e60.0.tgz","fileCount":51,"integrity":"sha512-ucFXjLISpZkNnsMCfPvjHoXYPZPdWIiSzTYgXMc4jH58/ml3U1YLi/l6JnYTYoT0eu6ym4MMA8Uow3Jb9HR3Gw==","signatures":[{"sig":"MEUCIFMxVPFNpBu2p+7Ri7j2qODoumvUrzWDUAbouizDAL7XAiEA4raAJPbii+um1mZR3OLsNQtnV4IcXWhcyPhU+eOs17k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPIPSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTgA/+OQCWROxrgXpD/oJ7cTTY0C089iNJsq9Cb5PhrrK0WB0Jhz7O\r\nkOgeHV41stCvpVAGcuQ1vjG1o1gAYwIbMN4/qJM97aOYM2X+JDL0DVQ86gHc\r\nm4VsPPSQSeWTn2HLF0bHMGszaJwPKRxgXPVsw8cey4EKQ9bJ3WAyVoP+bWiY\r\nvns9K/KZhCRBh2Nff2VA22LqGVlyQNYwMiSUJqL20Qh+osUf7t/qTTtMeCjA\r\nwVeK6mnHqr2NR3AR0k5rez9FUPAUmNMTQ78W5tx1B0WXaBV7Xe3Af1yeA9ue\r\nS49fEX9BI3pvB2ZTupYq30biE1JJK4tp+hu2hojfxBOtZFajcCjWwd3PcwK4\r\nzb0pM8uov4ulS3qBdijwpthHxJAAR1Vu44fdMP2vVuQYAgxxSubMFWMEQdMR\r\n/s3mWY80c7beXAvS66iSJJR1nuDw1ACFKMmuBpMQcv6XjRM4vqwjdw22ewTw\r\nhjo2pIz4PXWwz0Rtwj0AyM4gEJlfC9rtiPLAkteZXp7EAu5VJrYfWJaynWGf\r\nIgtcgYuYtUKnmdaCgZ9HAtPw52L7U9QgSvn98IKGS8RqUsBSkAzYlAUOv8h4\r\nPm/VdS1ZwDD2T+onTVDPnsrSJOXqNngbQOEuWWd1tAlvqb8xCOc7eN/1KXNY\r\nlTkqDmfzL4PSDAgYbkTWNFXchfMUDWYZMx8=\r\n=F1j1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9cf98e60.0","@material/tab":"15.0.0-canary.d9cf98e60.0","@material/base":"15.0.0-canary.d9cf98e60.0","@material/animation":"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/tab-scroller_15.0.0-canary.d9cf98e60.0_1664910290572_0.7395947537350089","host":"s3://npm-registry-packages"}},"15.0.0-canary.d71935c8b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d71935c8b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"61efad525cf33f1aeceb604626537d78e5d6b9e1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d71935c8b.0.tgz","fileCount":51,"integrity":"sha512-3pO75xQsq6+BI+lgrFI+9gHaVGoNDjhvanlYFhkdKdFai3lzh17z8IM/9CTMDPr0Ud+W9A9jh7aZlGBuxm27Fg==","signatures":[{"sig":"MEYCIQCJXtDdB9WwgCfu9RNut3TTycjzd8YN6MMoI26F1Aj7FQIhAKRhot9Ah3ue4hzd9JnzJjCoSiaqwQ7npuoim+xHwwI8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPo6+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr02hAAjTek0JTeMOvyxqRbi9adjZeVzfueXbfWAwpgisNJBTEj59XT\r\n8puJuX2Wvg5Fo4bQgsaVYiVWn87vDb0PuMwzUyq4rcTpdKIJq0LJVdWxjGEA\r\n6Ovg6wrnEZ6KgqNMlZImFGbRlS2p+RNWCaEGRBLu0LuuB37TMq0DNhVLn0XF\r\nksOHlgbsxi+HdDkzgD7wyWBGMNHLnA3i1TUJafWCdqljr2nyf30HOxlFN1ld\r\ngXt2v2BjtrB7sAtCMZRb/wMXdqt23Tbx6r4H89mKSlb+pdskfL4q76iihXSf\r\ng7C0eTB5rSbeBD+r8doejLmNlpbWroWgsJnkwbJMKo29B0Iv2mUHOML0gaw/\r\nHJY+lHmQTHLKEDTSWp1ipT3s8UhFoUcHa6xBZbsihHeoZ+OCOSd9K9Dx606+\r\ngaS9puCvBfwcjkrK7Lp48QC7ckL2I6BkfLoPWzuSYW1fyfwKXd5bCh6xtKDr\r\npYiJ8zbMxcuCxT23hn6eApi9xUFBVPz6KCou1i3geKYzg880GXh6VSF+d6yl\r\nKbK20KI14VFthez6CnC536zOrVGTf9Eq69NlFmJtnHjlkZK3CMx459daQrAA\r\nk3nXjgbb9y5i/nGRymLfuxoxhF6L/lXPTAYO6N9TWm5zLEy38w6qYVTfCBVu\r\nhYPrubg1OE2yJgDyZ7omTPaxAUsIPS4tfDk=\r\n=547E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d71935c8b.0","@material/tab":"15.0.0-canary.d71935c8b.0","@material/base":"15.0.0-canary.d71935c8b.0","@material/animation":"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/tab-scroller_15.0.0-canary.d71935c8b.0_1665044158097_0.45363677203868025","host":"s3://npm-registry-packages"}},"15.0.0-canary.49c56a25d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.49c56a25d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c8b67c4251e602941f7729965191ade9b8ccb6c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.49c56a25d.0.tgz","fileCount":51,"integrity":"sha512-00MDm8ql07NmYxG9ZCTaFw+eovQvFCjLoXcQf9l/NpBgYwM1h33u6Mlmg6tXbtU+Nfp9AGYVQsplZJ/CSNxVQw==","signatures":[{"sig":"MEUCIQCEuokz4gngT/F8lO1JEf9r3mcCKwb7b1mt0HMN5+Ty/wIgJAdoP3cHjPnL46a/YQcn82u8m4JgZq6zTNDOQgDFcWA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjPyPOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEDA//VoKv4GHtoXd/W8SVb1KN06JebJ9VxresCjytz+LWIQia6AEw\r\nAdy7RPyPzj5OosnHAjN6eXcIt0p1stwYTm4lt78ItTs32oxIrKw8zemrJ5+C\r\nqcoamZBN+Jjxdc7kmtRD7LQ0HKJz+vsnq+gSYhvnZzXbyTkr//PphSY8me2y\r\nUCMNo+KPKf0lgvagzRgEUIOF0rbsdu58sohTv84ftBTDMv2rgDwPkRijoMNP\r\nBLKRmg6rP2HF90jRVxKrdKK+8iJeCpCGeLP/Jwh+uEVVMKRXaaz67OmnXxC3\r\nmqsHEUQredTL3iiH8dTdSYEHrabzsCBQP6jcIBQJ82CK9x7thlXwb5MECAiF\r\nwjHYSZRDAPGzGrARz5Fxs5uj1/IJQ3JMOkCobm6OE7jaDsbjXNkgOBYy1rVF\r\nBMK2OtE6JdmngUx3VAnm23LML6uog97g7Iu2WkRWax8MBOp7HNDkeLMqd6WD\r\npaJ8Ehg2yDlnJgX9tySY/1wQizSYNL/29Y4yH2GqL9pWrX6lTJqfRZJ+ijjs\r\nYvHKX6N6vqe8z0MVpO9z+hsZLAAOv89jKzx/ZLvURJ50Y71fRNSYYP/VBpj2\r\njDKIScp1TMJ4m2XhUSOBaacvVRcOW//dGNULVLmXD+DfYMgLN3Csol4n4/H9\r\ngkzGIbf59IpdvFxkCrA4WG+9kHQMNLM7vgE=\r\n=K2Sj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49c56a25d.0","@material/tab":"15.0.0-canary.49c56a25d.0","@material/base":"15.0.0-canary.49c56a25d.0","@material/animation":"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/tab-scroller_15.0.0-canary.49c56a25d.0_1665082318747_0.03906781944974158","host":"s3://npm-registry-packages"}},"15.0.0-canary.07acddef3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.07acddef3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a1dc6bf66b902c10afb0d98a4fd25980bed72d5f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.07acddef3.0.tgz","fileCount":51,"integrity":"sha512-qCvE8+J29POJbu+l/bavpvqchAETzka3Um+rubg8cJQ9efA92H2xu8bSBO0sRy+/TcPv3nKC2rY31csCh+NWWQ==","signatures":[{"sig":"MEUCIQDPsDjNRlnqBAdMjH4yihi6+GvBvtBhlV+MLL0yoT4YzwIgWB4Znf5cVn8lfuZkKkJ4WSB23dzGscb/NIkUC6ULsZU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQJyMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmojmw//bOaSzcQKJBpPo/FBQErqtBOmgXVHezGAbCMwk3MRcpJG75cc\r\nsfrZwLyfoHP1vI2RdFjdTcxw9SYKZf414swhZY5dG5GCylvFHtb7pH/7HniS\r\nw5sWrip/lRYHaSIUnEp2ccrGkeR3F8CVz5wmx7vAGAWUnt9zhbw9fsXA2Yb8\r\n/zDTeE9THjbQPc5ZENCu9gv5SyCZLk+QN4jeNfqumVR9jyyLZTtDzTLpqSTd\r\nhmmNQgiCnTIe4rdoVNE/hMNg1K4R/EdUQV4j/ZmTObkGIo7btzQt9Ev+WqX7\r\ntTdykeuQrc0Nr9pHPtUaBLHw1eegVcoCQZyYilrEBFGhLU76y3BJwM0B6sw5\r\n9RjLQZGJxbImPNezsuUV0qtuDUBL5ee7m5h2PCE1x6TG8YGuDyP5Xe5dtwML\r\nvpPjWvp+ONKiyBv6X984EnkYLirhjD7NEgkoDtFTIlgnkPYr/q/22hVvs0cM\r\n0b/bK+9NT7QkEC7AYP0SbTIquOh3R/YTWK52hSiEEw/3zH8aKZNi1AKerMTh\r\nU1AoxzkX7QVmJ+fZJFH+Sz+C+xpB/9Y6LqeP8oqUGG82DUBIRVlTR2TtdxzR\r\nTe1DYxc8BrzrBNCR6AsHctPinEniEDlv1779PhJmUFzmTtxVQ0xBm6RE9XEi\r\n3DgJkSqv9yjE2++wGVz6F9FBEWCPG3jrh8s=\r\n=vLj2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.07acddef3.0","@material/tab":"15.0.0-canary.07acddef3.0","@material/base":"15.0.0-canary.07acddef3.0","@material/animation":"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/tab-scroller_15.0.0-canary.07acddef3.0_1665178764207_0.465447787433485","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c74eb2c0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1c74eb2c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8d70cae0601232b7eee1460b2e89f2591f9703b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1c74eb2c0.0.tgz","fileCount":51,"integrity":"sha512-d719w6AxF9tULV5QM2ZgzVN96Luvgo0WB8iqyAEMlvSdPkE3Gzdo4m2sFuJcCX/J79dKwecACM4/2bUMdqSTLQ==","signatures":[{"sig":"MEUCIQCWEnlN9SFcEYb83KAZ+N+i5LDv+umL/7jpUwDYAC9dfAIgfcGiTqlC5uO3hVzjzpgUxXyJ4Sz/aaV559/pWMiAvKA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQKCLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmre4A/+JhIMSgjHkjOpDYEzhpmnI64gwmbRcBp8SHVPkom/xcPhLH4R\r\nA4aDp5Un/ENMim5aczHcjCLlM5peA1hg68NbhCNP7MYE7IgVCC99ZVeZMwzH\r\nP6C54VJ1Wt6HNFHmnhjJoKSNTZm2fBehpQ+OnPee96FvgyMWf2iBkBGI4TkS\r\nbwJmKP2xzhe5ielADeCgacOsr3MSwN7eY9Jnz4lGw2iDY06kAohRi/adzw5u\r\nVwHtkVR5ngGd0PjA7nutWN8SYZFcyy7/QYDo2j98Wg1IoPuK88kSqYJcNkEJ\r\nFz1cnaDYJ5IStffv4/b0p87yjRE8Z1wxyc4m+o2NB/pGZXkJrWg+SEPvGTOM\r\nRfnFRTS516NizI/RD0zZv3ZTNUUsbKkdJNFhpfFXc05sG43V0FSPUH/dYK9M\r\n1+oKmTvr8xtvmHZ47ZYVXpOsjU2dy6Hfot9VpaWuSaZP2+zLt3iDS5yWm5rC\r\n8C/AsHQuOQtcIj4w5Dp8FrCH160GDwdaYc5VVqHLG/C+SAnPBklHcsM5K5bP\r\nyOjzdpMxUs5RxkapGF/Bt0hmnGJjv6jGfKCZuvTaj42I9ep+szbA7zsbhpsL\r\n9GFVIdy9zNcn+6eFr9IWcGy2lOh+UElJ4ZTYsTWimx8kARu59kt7xDY024SV\r\nXJzmio09amOLzT/hEywdJE1lJEJb8TqWaDE=\r\n=YBFF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c74eb2c0.0","@material/tab":"15.0.0-canary.1c74eb2c0.0","@material/base":"15.0.0-canary.1c74eb2c0.0","@material/animation":"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/tab-scroller_15.0.0-canary.1c74eb2c0.0_1665179786241_0.39396164046250526","host":"s3://npm-registry-packages"}},"15.0.0-canary.dadfb713e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.dadfb713e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b1fe266179a99f904ebfcd4bfc3a3fcbccaa9a6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.dadfb713e.0.tgz","fileCount":51,"integrity":"sha512-50Dx3m93gSpGzl74nA5olYkICGUtrdPxkrqSnqAytf9gNf5zxH/vpklCfQMbHfTOZawz3q78Vhnagj1p7G36rg==","signatures":[{"sig":"MEYCIQCG6gJc2Gnv4W63d/WS/kSO6U5xAQ6IdpAM6zis/q9PKAIhALM2mOzLHCZ1fgIQPEFjxwDrAwiJ9TbIKaAbmpFreJO7","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQWVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqK/w//RQAviQuK2xc7w44YWmRfcJ2L17hnp0ZC9iEi/SFqZka8TuFW\r\nNXGfoAgUkWEx3QW3W0ELOtK5HNGwQ1Nu5bM/giS7r0gglOF34ZITPHfYVd3E\r\nTtm7bbt5DrppoJwLTQD0Gw0L6NAIBHjXVTYeCcYGga2kYzIh2Z5MmplWdjiU\r\n4Z3TlAN/eLFkUSyByS59myWO5Io4zkeosEwt50pTa5ctYybf5sm0/VbKaYv6\r\nzambengGeqdDDkqVt1mdbG34eQ0doyr1SolsujrhgjEnzUBMEihzhU7xqP/G\r\nzOkWUz2xtAPd3Q631dDFB7inIWwXNJEElmbZTym+gnkySliITu8SgVZAXaxt\r\nVKvQv1Sj0HVlgtMvZi6ZlPgRo5NTvwM6rp2nuOb1HSQJkef/ZX7fW+kqZ9W+\r\nEGj1Tl79vhVj/HzvqRIpg4p+3dRtTccVeaczrJFUAfC/t4verhmhgR8WbwN0\r\n6gA7gy7UB4z9hjXdGI+X/4lXG72KzL5ZN3rWY4vpGFbfBZekRVkIiI1BRQbx\r\nSisOGhOZefbveK0meBm59SXhRrW7seOJAmQLpaAQNKLtaVphRyxX+thvkh1f\r\nUL4+benKUeAwAtPtvN0633fhrEL4ybdZmvGng3U0aqaYCKSUHCKrG2/B0K9U\r\nuaLPbodD2TKd3yoxsCuVxTt9i9Gzlsg+rnk=\r\n=nTXP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dadfb713e.0","@material/tab":"15.0.0-canary.dadfb713e.0","@material/base":"15.0.0-canary.dadfb713e.0","@material/animation":"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/tab-scroller_15.0.0-canary.dadfb713e.0_1665205653477_0.30705930423422334","host":"s3://npm-registry-packages"}},"15.0.0-canary.395f1ce61.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.395f1ce61.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"62f7aef70dab116cb888374a4d6699a98e70393d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.395f1ce61.0.tgz","fileCount":51,"integrity":"sha512-GBnLxlztJSKqwlOw2rxarBD/8iKVavDIQjMAD2zAvr8alFAgdpNePgUawvGMm9NLCn8fQaqYfeOUgkbIRzd2iQ==","signatures":[{"sig":"MEQCICQRPa2APDyrfMf7Ua63v22QCkaen69As6Obv98TtbSmAiB9SZRQdSRH+5yRWziwYrBQdDHlmruoynbKh/c4aKwMfg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjQQYIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo++w/9FXdQ8Mt3ENR9jRArLryyLwPr0lCrR8eGkrWRSWRhRWvYbHRx\r\nJM52QP4dphpA0IURgkAKmFvFK283H4yhp437Y3t3pkZdd0y8kxpTogDqmJQ0\r\nn7T67TIB+fe/VS9KgJfweGl95gnXP+/OtyDbXLhP6ujpiFiWW2vh/Wcr2dbs\r\nKmVQf5hiFaOmROfs7L2FeYSfoYcRVc6w4XEyNV+qeWqMtF9YXbp7wCpa/oHU\r\n9UUKbZbIOk0iLothkFaxh8bTTsCPhhnOuMeZUpTSYeAnxvOTNSaS71dF4v8F\r\nI38IvXnUtFklEidaQDhZf1eIe3ZSK2iSLPmeVedX1Jiv+HjhBVKoR3f5BWdG\r\nJLF0zJdc8VbbWpuMoV5bGCf5VrmMLz+nwoAZiUm+Rtofc6PnxzxE1zYFp/BC\r\nLwxlT6Cj9kBHIDQr4tzDejB6JWJG46sK/O51rS42vdcWA3J12JavAZMToXbZ\r\nx9Ey+zOz3HJnZK/qljwhmaCkAt5mLhn3maLUQ25knIlhReooTPf9nAow6fwo\r\nXysQg4UPku/U8HpL0dloJgxeRuhtoMK0p/kzIio20CBVUdn8A37w/ealj5e7\r\nMlpUgUlNGzmU4dxCeZtfQxu86eEoD+YvlLjHinTuTNkGYt111e3xJzIKNd3Y\r\nfs5QKX6yeNBjdhYbwrmcZbRgSkpu9m46AIY=\r\n=Gy8Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.395f1ce61.0","@material/tab":"15.0.0-canary.395f1ce61.0","@material/base":"15.0.0-canary.395f1ce61.0","@material/animation":"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/tab-scroller_15.0.0-canary.395f1ce61.0_1665205768297_0.22385791581549164","host":"s3://npm-registry-packages"}},"15.0.0-canary.e741b5c82.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e741b5c82.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4faac898626ac0c5e4537e4604d764de721e5fff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e741b5c82.0.tgz","fileCount":51,"integrity":"sha512-WtoW+/84SghkLJc26NHexhX4Wsr5xGM5ZW7V972RK4Uz+YKCWOmffzxLUrb7xaL33T7q8EZ3tijlN0d07TUODw==","signatures":[{"sig":"MEQCIE+v4foNo5UHyDGiW3VgJvBguiC0AaWCZ2kvBqU/khfUAiAahIhjRYJ/l0QjUx0pKnEYX2dyq7Y8nN+I+F0wAEFjfQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRFj2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrC5w//UfVcYEE8f5v1GYi7RGb/B45YmzXp7pQzk+uVJRsRKVjXTQAb\r\n5jl4ed1YSqtzAuoXkRpLKgMT5byW7hclTGzKRWAzWEDOEcDYluoEaldG8cu0\r\nHhPG/Twi49JKO6bzFiEUwg/dmqKCgfwv8ulSBbth6st8o8Nl23IM6KR+l8Oh\r\nDoL8RgP5AvNOB0SejvjzqUKfF58BS5fe0xoT7gT/T/XOhVUh76XQYy22ZMmb\r\nfQWumEwe3Fh26oiB0u/Hg0S9c9i7D2JVnDCPmO5vLow7wkmOyrbH6PGEioWb\r\nSmjCOeuCFj4tHuv5g7DoHRRH5rJd1KS22QQd92GSi/z18hkxJesyh/C2vGsQ\r\nodC5REegtbFDDCvXiN1MHVhJFrGs8PbCjbM9JzjB8Z37Q0gdxrVNOfBalcvR\r\nlJxa5ub1am31hwjCJ6FKqZSUZwvleQzF7dl9edqvdi1DTBu09b3kIeBvEHyW\r\niBI9Z4ccCNlXO8NSwmr1+4pjkYzHr3TxubA1SsAvkQ2KLmiYNblOdcodBHNv\r\nVBH6try1RIkoorTjMGNLMqm05TakGtp6GFHAX/P5AddEnVZdSKltPQvDdlYr\r\n7VXRaqacYHW+a6pn4FfmCrJTubdcPHG5p6T37cakB+q6Dc/QKq5Y6Sln36Cc\r\n0BG6iigoDltRLAFryBjqevyEVZvRBCIBPPo=\r\n=Et6m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e741b5c82.0","@material/tab":"15.0.0-canary.e741b5c82.0","@material/base":"15.0.0-canary.e741b5c82.0","@material/animation":"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/tab-scroller_15.0.0-canary.e741b5c82.0_1665423606051_0.17627878440799738","host":"s3://npm-registry-packages"}},"15.0.0-canary.582f3cc1c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.582f3cc1c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"557ff1a09124ed98c8b0bbab1b2674aa95299648","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.582f3cc1c.0.tgz","fileCount":51,"integrity":"sha512-SKhNNFrptd6A9xWTCKRb9+aLO36HKp7lm6z4ZIwzgak9tOtr+HQeqWTeHVHKosty7FFRdvMcmjEady+UdrKwMw==","signatures":[{"sig":"MEQCIDAyANqxMLdrlZMITOloLNTBU+v44mldR4+jlpH0D0IeAiB2w9eIin3rWMPWZLApE5WnblXXJz4MS3XWSA950reABA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRPYtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmotdBAAjybwyw8ryD5fbIPN24laYmRVKdZlrjICYHTvBhzeyKGz+zSh\r\nNgkrtys75J/3bZGkheY+XoOpfV+7uw++1bYiTMAqKIFXd4TwJ0FTp/JFedmv\r\n58QkR6jC6zJmYGQqn1sjgqmSKll4NDzWumnBFC8F+Mz0Lo/2j9K7Uv5PIivW\r\nfK6ffjL7GbL7wdmhEnI8ePvzPihHx9llkTybl46UXBKkLARHS1loPDU0TlWs\r\n2jR9xeyZubpqbf/ojdOHqRQ2i8NcUl/Plubq3OVMBG3FhJh1TrNAUPj2KRzT\r\nGKoiANUfpUH+gF26GjBOsp7PfdQhC0fr9J4KXYzWOehM6SscUBmuKznSl0dY\r\nAVq88ySbUKsgM5Ma2aBEiqIRZHcBjvDhrDM7ZnXlUjOIE7/zZgeSPIimONvz\r\n1bzb15WtnL38RL887TyMmcQIQ52XcvlR+AonM+yxIl1xUZe85wFs68xDTNeH\r\nsv5IyBogItFZHI7/07Gf+SYiilE+u1M3jPJKBt+y1RHG0iUdvQ7p7K7RLRCu\r\nV522AZ1KeZf+uTfsurSDmjPH/lMCQxDdjWug05pLINT08BxE6mSTFv39IDSW\r\nqS6U+ubBIL8P2Uar1yT7KDuBioRVE8BnvRgXHkUFAzqW6zq8Gj03+l5ZEBrq\r\nOsfS3yvh+UrzO/lQBHvxd0sruQPBO6X398Q=\r\n=tz6n\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.582f3cc1c.0","@material/tab":"15.0.0-canary.582f3cc1c.0","@material/base":"15.0.0-canary.582f3cc1c.0","@material/animation":"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/tab-scroller_15.0.0-canary.582f3cc1c.0_1665463853284_0.017570716705182177","host":"s3://npm-registry-packages"}},"15.0.0-canary.b1a6e3e88.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b1a6e3e88.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"15e2f18d6d02a0727c9d985a6c23edd906797930","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b1a6e3e88.0.tgz","fileCount":51,"integrity":"sha512-5J8/3MHxRtxJEy9lKHxGCuO3/Kv8Dpjdm7wHcrBxaasLjPzpKrhnGtKfpkSim/G/CeSDOaKu/D6RlpLnIrL1NA==","signatures":[{"sig":"MEQCIBI8iDcD3BroQncMwC7cHRQnpFjIee5Nfg28BYX0dDfTAiAvYyk1vQA14/JRNvZ83IHutRshPKQp0gOys6E9vTWYMA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRq05ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqyKxAAjMVg6QBx/1GG+d3VrQPwDxxR0B//W1uW9OFk8qT6B38R+54s\r\n0slb3omDPNe457DisIiK1sFcyzKz7RjwCnK/oHqXfIPdWT2aiUsbMR5FFVmL\r\nuOChVJuARosw0N7Z0kIJc86HB5vHVzjZeBN+wmhgreohVHc1jqP4Pd9kx2dC\r\nTzwWIYGCShXiPbhum81vexH9tNjBuc9mee+6LlRaw07APb5YLSgtq0KXsDq2\r\np6/WKI/55jVD8KdnNMYoSO086QoOQn/4p62imaH2gdDJ7jh9zq99/n4/1Ldp\r\nQQD+bgDb2K478v5/HnKV380qOJpcdI3/Nt7P3JfcjxdrQAGTLTpFLyjevBHC\r\nGxKXs5/OM0uMWxAQ4N7/1NWh6IUM/f1v177TBbnO2j32gWcBC5ulJ4GtAb9M\r\nQVU2Y0o8Z4UMLcjGs1xvqzNiOOGodIuFT7y4B0omZUd8lA+yQxpU8Py+wl8g\r\n+uEXb179Vqgz5uVDHIdGmMUtezM6ZEzyG1WUymtSoOuo8sh2VDvi0fAMJR4B\r\na0+2rwfy/WhB+8s2Cdii/nGVDBkekb4qQncO9yztSMGUirkxBtlSoLiZBhsc\r\nHkgkcxmspz6ifpvrwmcbGapqHJNnDPGiawHlr9IBFbpH/ywh9f0D2c/rYngg\r\nryauH9NTLs5rVJ2SlWlbyVEvOEBJUr7qZ0w=\r\n=LYug\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b1a6e3e88.0","@material/tab":"15.0.0-canary.b1a6e3e88.0","@material/base":"15.0.0-canary.b1a6e3e88.0","@material/animation":"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/tab-scroller_15.0.0-canary.b1a6e3e88.0_1665576249714_0.8238561441875425","host":"s3://npm-registry-packages"}},"15.0.0-canary.c9b1a31e4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c9b1a31e4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a0f8741cc131978d6efe67541c899d3fb45e1373","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c9b1a31e4.0.tgz","fileCount":51,"integrity":"sha512-WqqM5KRm8q4FMifMHfrkx98u9/sVdGVt5ieI5jM2z6MCqVNx/Wu3LM3cDH6BXCLpvZlwyQu3nGlnIdMfVhbupg==","signatures":[{"sig":"MEYCIQDb115YjVQsTIlXhPRM6rwyGHfpcl9bsMz1MTee6k9+NAIhAIHfbjYEnnhI2+Mg93xcdgRBnZJCwnNrcZvUrUl7JnzO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRvKkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoNTg//fhreibyy+UWjzMWPqgAapWmHTBt2ZE2umUjwAAE89le4CuGx\r\ndjnXKbeL2dmz68AF+mLIZp/DeRfN6bsEoPa3+ejQX8MOLzDLY+453l4HpoDV\r\nfF7wXHokwZpF4NqonAaIF48szmspWViOR7Wd0bmtBXZZ6yCSE3cXb97EmYxg\r\nh3nYGjWKpZHqyPAa+1e0Zj3APE8lcWhOlGzMXaWuUqvBS8snNhquKhqk+IXV\r\nMj69vrjhmAgw6f8czsHu323g9ClEtXHqK87S+n7DzC904Pmd01w2ZDefOOF9\r\nc+3w2qbkW9p4LDGGTTyF/+iSxFfOvZMK6pRXsPfM/ERhp+Q3neyYP9u6K/bK\r\nER0c/xoN/fkmIAtmENBZIYVUQAKvWd7Z7x1m7EixCRLLTuyMLOqE97100IN1\r\nF+IxJUob8zkeP7mjkB/eJSSavHSym5hl4X9lU+zV3NkWHRctKb/SaBcdhMii\r\n3k+XArjwB3E/SaiaWH1xoJ7WyrCI/3uZ7CqNt8KI2k9Y4fWX1iLQC7mQkPN+\r\nkiZewdOjIG3DmK+SRc/h9Q6Uih2v3e3eaz1VVnxAe4wbAzeCH3u+5Kvg3tsd\r\nNhZ4LTFzSE8hJ8wSlhYiA1IWgVtASOqNVnoahAFZofNpGNBcGmUamMUYSVWt\r\nNTaH9+6U2WxV0LRFe+ypx+1uzszVEhs9OD8=\r\n=tzD3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c9b1a31e4.0","@material/tab":"15.0.0-canary.c9b1a31e4.0","@material/base":"15.0.0-canary.c9b1a31e4.0","@material/animation":"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/tab-scroller_15.0.0-canary.c9b1a31e4.0_1665594019801_0.28697530148227557","host":"s3://npm-registry-packages"}},"15.0.0-canary.13e9b0d1f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.13e9b0d1f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"77d696561f9896dec96f17a3863ae8dbcaa39347","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.13e9b0d1f.0.tgz","fileCount":51,"integrity":"sha512-/LTo2tjEnA1zq31kjC68XixjJvOh6gE37eE9mt11Nuhbt4DHKttV9D/VOrPgchW1REHW3qRT24eP12LvElmc4w==","signatures":[{"sig":"MEQCIAoU5MPalZW4Nq5KO8fU+u5pBXvbX8fBIQWGkGtH1DgOAiBEKpqNsHO/zy2gw5cBPfiqzSGJmiSFAsUc/BdGjDxltA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjRxQVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7YBAAhQ14CRmnXJoY0ICxOTsN9wRpxgfN+q4KCbegzOKmvq80NCaI\r\neXPm3llGFQb2mK3l5DQqeK7owr2NPjCA6fM4Ta30ERNc91eepEEVv/YlmY1V\r\nWQYL4yN6jqkZRFL6K5VRYMaPZm9ZLKmcWqe2NwUFNmp4HT0oT+VImW2ujtdN\r\n3O+w7WFaY9VXgGAW2QNw5fEHG01Xb2654CuKbDgnY6YN4PIk0T6WSJtOCrAb\r\nxKpLkD2869Ju4+YcYH41MtfZ0KJ+LpsAaQR6JdHGzyN9Qw5xtxzE27hT3K2n\r\n0pHsLllffcWLbuxvlxi7H1boMVcRckX2BzN2X4YECgL7Sd0r+EM4W74iwKW3\r\nbV1cPtloEN/4tw/WJkhqRCbreXQwn8aO9/pEAYhKhobdc0Vcj5WwD8LscQuN\r\nvLw11GyKFxKIUxuhZC9Oi2dT0F62HlCkh2JFGqbtbkWAauUzV5VcQ5W/chZH\r\nQ94frqaZPKn+A53iH8qUWC/cJbu3bsgA286y5iN8iK5EMIJzsOYNOhAPlFHr\r\nKDzlLaZcJ1Wcg2Z24z3wbpaIcq4kgHPgZcAIOTz0UXb18mTCJyFpjfM3yviX\r\nIAmxGxLdzjrh2ECNiSJGHSghOIkuH8UBtRz8cxsW9fvff3DZXFnE7U89kkCd\r\nhpYWQP/m1/L94naS+pPPULafkTO9y/zjfaA=\r\n=rAkw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13e9b0d1f.0","@material/tab":"15.0.0-canary.13e9b0d1f.0","@material/base":"15.0.0-canary.13e9b0d1f.0","@material/animation":"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/tab-scroller_15.0.0-canary.13e9b0d1f.0_1665602580910_0.6566672778177538","host":"s3://npm-registry-packages"}},"15.0.0-canary.1dc797e7f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1dc797e7f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c2d9c7592ec1322d91a153b77a8ee7b40463e7c9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1dc797e7f.0.tgz","fileCount":51,"integrity":"sha512-C2uDIvzQKcE7wyVIDeqEzLnWUM/HNKlk67Eco8rb71dStmGXicNUOvOI1WasQZo3CdZRlf87S4WPBOWETpgZJA==","signatures":[{"sig":"MEUCIQDfOudSmJVCI0g0a0ql9hfXeYfiEzz6iiG5QV/ypdlSqQIgLQeN7FDYedwftN6r91kbu9XE6iIRlQSE2pCwl+5krL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSS9KACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWYg//Rqe7F7+0rPpF1Qbwt7vGQtkOKY2f2gex4pYZew5f6TycXTM8\r\nZCNmIPxQTZdYA6Vg1hzeMhICwmUPRJUhqEqjRsIQ0jIrsh5Hg5rMCbA25am0\r\ntg/UzeVNG1C5UR7r7sPPOIJLG3awtHoeHaD08xtYbNMENK885QWbrtC7F3Zt\r\n5a8fX397iGTCXGlVTTSbeYikNeEzYf1W7BEHmK6r+e8B2CQ6lnHjOhkh3gmT\r\nXe9f0LcYyx58n4YCK8ODvtM+RYnY8nX6I81fmSBF8+VLrTILceKUPOYQ4D3b\r\nYGA1/tz/m3Fq8s/wOvWJH7nD57GvrO7wF2hapmqTxg90Oume4O+ajFehm1yb\r\nVKR3NKodeFATxIc9+L2ZRurz/pQmoq7jmDrfRWUrnVF+tV9v3yoiHqWKz5Ek\r\nRbS5H+8bAoZ6N9AbN5J5ApOtYIXnUnAibwgxKFOa1/kLgHfEduAkw0i0XgEW\r\n6jGRENeQzNkgaaEfv02YBIDK36qjDzOjBv3dcSNd000PkYguXffI7eLKq5PK\r\nChlChp66js3esQfAVNFaEnEnbmhEtpZJ8TcpgRsczdJaujXYOB5RtXDF+8N3\r\nU6ZspQKscC9OhIUg1bgBEZ8uq6rdn7kIvRKLBr0QkBBcJt1DX70YVNBnkC3Z\r\n05v3mEjHAp2cHmhEMN4yAt+LFWrEGPmy+9s=\r\n=8Xpn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1dc797e7f.0","@material/tab":"15.0.0-canary.1dc797e7f.0","@material/base":"15.0.0-canary.1dc797e7f.0","@material/animation":"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/tab-scroller_15.0.0-canary.1dc797e7f.0_1665740618205_0.5893897356486186","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed4009397.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ed4009397.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4eb4e973b01cc0069269bb86f65df9cb8bf1033c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ed4009397.0.tgz","fileCount":51,"integrity":"sha512-J5YLcErPcP9KDzXNfsD9zqhibGyTdfxRY4F3LzvLehiXh9h8VRmgX3ttpD4fnM95P+jKTnjDLw4lspei7x326A==","signatures":[{"sig":"MEQCIBD1wziDunSn9TqIl7LR4nnqqdC1zeS3np7CN5/IyrNwAiAA/zsAglWO2gjmS600oWDiH0xFXhWns9a21YF/ha/M5A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSZPrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCQw//b8bNd6mBtaE+d+U3hp/Comt8Nap9F1SiLrhHznXd458A4wDu\r\nZhD+uPQ+WEnv2fsLrFKCJzzyvEQvKWk5kq7rsF9sZvyx+e/X6o+9YlPyf593\r\n2deo4y3IOTAsdFY7uhKJS5sMNQOLV/NnACF8DRxpJVLOaV1v2w0q2UJ3UIpJ\r\ncvABGYm4caHwWbC28npnB19FKr92uGn1/iwpM46ncTCiawvId50TvpGXGOtm\r\n6uwNtpHmkBbH/ABkftB1s5xNV/4ac5IjxINjpfXhuEfLCoOq8mhPEKwKOQwK\r\nILv0HG9G95hDqAdQ8d219rhSfzB65vaklG6Em+/Q2oISPQbYRmkFQzesw9Fv\r\nk4DuOmQ+71nI6DOOVj4WFl/wTZcigUnCjoKkehwy98pAycepUe0HsoYsj2EV\r\nvqFQcP+ZLihuG+UHMLIEAZU/crid1cy9VupdfTE3Fi9lKv/pEpFbPQ5YM2e1\r\nmTMKpnj6JXkZwUzrG0LYJwZetO0bEZKljeMIH38aB9uWkI4Fs/onK/Le9I4a\r\nMaokFrlZqMTZvwaWepoFOmGsXmumobCo5aHJa5XguFg9a/Wp4Qw6YJcx/dcj\r\nkT+ZGctiw5JvCXO5YdyDktuOJFoVsO8x3NZw+fA2dGq7395OtIeol6iw29rD\r\nZVLTzmR25bSpV88gjfiN7Ka3Uw6U5BTqV8I=\r\n=JFqx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed4009397.0","@material/tab":"15.0.0-canary.ed4009397.0","@material/base":"15.0.0-canary.ed4009397.0","@material/animation":"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/tab-scroller_15.0.0-canary.ed4009397.0_1665766379556_0.7522770849385378","host":"s3://npm-registry-packages"}},"15.0.0-canary.95ef196bc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.95ef196bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2e08233d0dd11e2a9722377ed1ef9759e82a1123","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.95ef196bc.0.tgz","fileCount":51,"integrity":"sha512-qWVu9xOf7CeJCIpRME9XtpAFzyfytMaMDjdo7ycwiSsRPZRwGp9fqBtWswgylRIf0sHWyPNp2UZaeq9BErs0Rw==","signatures":[{"sig":"MEUCIFUIw91DJ3vNpaQHKx0kzM3V1xKBTrENyBySi31t0h5OAiEAxErQ7kgDAI+4IPMbxgRSR0DJksjQ+LIomAQHnLwFbHs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjSe2bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrgEw/+O+6n33el93zKd3RHv0nq5i4wdB8dlA1hImJRy1pjV1TgUYtO\r\nTiuJdZqXp5plSOdNlyqlzGWOsifBiQcTAE5LhkA+AhuuQAVvY5JleRlfUUQG\r\n2nqLL8DPlX3ZB1UgevPinRw2EhgV8HHPJpd2KdCC2OyLiZXK6PWe34Bw9WQj\r\nSMHpZ0fwA74VGPXtO1tKR8x3222JiyRJ0ZsvrQSfyOjMwXZyVFFjVRdKLkaF\r\nIwOOQDM0gElp+LyN8wIh0nGbvc7fC4X3MyIo7ZYGDMI6KMF9Ih6pfxvSxAGZ\r\ng25HbDtEnETON3yTItH5V1FHZC870nPHEs8NQ1Y3Ceyp9xHflmT14VPLoJm1\r\nTkCtwiqCX+VZ66piydvQIb0VgcG65JB7a1hlNzMGOOwtizrjO9VRCQ6Q1P8b\r\nZ0Ry0NTHwjQef/GnAf0bz3/Mrerv4f9M4gZllXLo/TMu1F4U2Cpykmy0Dq/a\r\nND1NqhK+IIIwnLMoR5wRZiW5kh9KnCeVJPPF3r+AqOht/EM4O3jCGDZMcubm\r\n6VEha/tKSStcLeWtgsj0uIOvqNNnfPaA+Nt7u7mxP2ZIxGTVm92u/kL5YbBj\r\n2BH0hR9Wa1njvb5A2W5nhHLAXNIHvqTR5o0Uyjc/Wff9Lf8rRhKXqXwZ5tfb\r\nt4IKYH9+MM/e7CV4WTnWSL9iC8VsyEvFPZs=\r\n=JZvq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.95ef196bc.0","@material/tab":"15.0.0-canary.95ef196bc.0","@material/base":"15.0.0-canary.95ef196bc.0","@material/animation":"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/tab-scroller_15.0.0-canary.95ef196bc.0_1665789339754_0.35493858499426567","host":"s3://npm-registry-packages"}},"15.0.0-canary.13eea1b2d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.13eea1b2d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"74553c74e2f4c3762ea71740eb3f2662af997adb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.13eea1b2d.0.tgz","fileCount":51,"integrity":"sha512-tYiNdQwmXmrlVDTFcNku7vRbYyxWTleLQGwk/KZYDza74tTzwsMGgDpZ+ocDX/c9d7M7jc6Q0HGbs0OmB06zpg==","signatures":[{"sig":"MEYCIQCTyJyn1CpR8C3NPd19WZlkqKXtuvt178PRPfyI4oxTLAIhAJMdFRxhoN9iHVFJOYOiLGSi8y7f7G+0gX9XZ1yQRUog","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTNGuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoRcQ//Q18O2HNt4qzCSKT0VwoSBi5L3P2126xSR4buunND9dfPHb6m\r\nDfQew7AVcVoYqkHFhQ2RzxWIO5z1GHWCEnAveX8s407JFCeyAtP/PMgG7SkN\r\naiWEv2Rjd8EkBH6x2wcrnxSNkBRXVGRhgA3QZ6cTVcSqwaJssDRo9gdxu2qe\r\n51lXSW/wJQqJmfO1FlTfVQbXZrntmxqrjW6/c4YQfd7UDFJdudx0ftsORZ09\r\nUfBGaL7VqxZMSq1ALFCBepUxBhzBOcQFPgPSY3gIpoEHsEEJ+ewTroQaSXO6\r\nGcAYVy91LeaBUT0eNRKE+QCZoiYA+iZBvdWAgefoAZq71pDepFiugp0kTnHn\r\nsDGYKIRidyLwcFYwUDk+TlDn977YWsori35KYWMd/P42e5mPE749ZKnHbggH\r\nRBtCQYo6mqu/L9akKJU8cbeLn7qZkjhlrYltpgytz3N8CghXaoKTi3MlFNTh\r\nndbOd8Yaiezqtg/NP2Kj/GqiJ4ZGcPd6GnWehxJEDwLaVMJBHwmGMV7kMo8S\r\nVS0ZbuAAFmOJPXuSbrocpkyOVzxAfnaPFTiCp7wEhGvqEqLMTmJsTaQg1Plt\r\nRSKIxgwAieO6ocljwRklj2TOIesaQRXFkyMEHgOhTVED2strCDj42D+7wyRK\r\nGUqhAOI24tG0pZCvYdWwSfX+u10H8E5VNlA=\r\n=vWIS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.13eea1b2d.0","@material/tab":"15.0.0-canary.13eea1b2d.0","@material/base":"15.0.0-canary.13eea1b2d.0","@material/animation":"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/tab-scroller_15.0.0-canary.13eea1b2d.0_1665978798190_0.5173113156161047","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef9b2babb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ef9b2babb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"da75278204ba1ce5b45d8de43b6881dcf844c2dd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ef9b2babb.0.tgz","fileCount":51,"integrity":"sha512-uvpv4OSwdHnAy5IHd2gW/Fc2AEXNDmdfGEEJ2qttkK4CUqbL4ndArZJHKtW2Zj0SBP0wQXYzdryywC7YDlVxwA==","signatures":[{"sig":"MEUCIQCzZOfsoiyxght2aPgFnxgIpkUUTnA0JIp+jfyW1IR4aQIgbkyZ7YRMm03UcxYK1G4AXPpZ2ToYKIzuf+He8OafE4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTR45ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpY6g//fO6e7LNnksPLM/wvt1VAOb78ol+HbSUV9L+QYra3D+UapCnO\r\nt4Ut6N/csNB195dhdQrWgL3uu1whN/M5riJAuu74e6pX6d0y1ZTSYOFWBdeZ\r\nYZUNmrxAczNiY+bM14JHODuiP3AFLUbblOlW7CUfdbCoQ/9eo06Xc1sO2bOe\r\n2unq1yb//rdHa0UT4EOWQfnXmORqccImWj+nmm/cZeSOEsk40ZfH45YEZ81n\r\nTrf+ncFHYKPo/QKk9wgako8j3/d+YSTjXOQHeiWlQe4B7PoRldNC9l3Wgyzn\r\nURoY+bsQyJ/w5iJ4f6KxscIrbYsgirmyLi0o3FsOxRbbyuLQZgwOpDcfxDyu\r\nRtsWziKy1HshJPYFKoLgRr+d/QzqSQUT/pdwSha3RMfX7jQgXcMMwMj84ZW5\r\n3ronzLn5s5iAwrkAwq1/FUcUciW702D37mCQnJppuDzB0JMAEgZVMDPlIjg9\r\nQsUPZmIfjf7HilgV8qESwOUibGt8hkRsiMftf9I+MJS8IRtfJvqSMvBUvs4H\r\nuedu38dRaEYbHWyEC27sbDOnLhKk86hxHNc6GcxeF+iIrrCuem4trvkq+D0H\r\nG3D6NrGg8qOqLWbeNpPVPDP310IOuKOLrMvto/QGmVe/CUmYVZYYr3BilpGc\r\nLuBbUnkYMXbH3oTXm5L3BYhxDOMw+0WFMIE=\r\n=kqNi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef9b2babb.0","@material/tab":"15.0.0-canary.ef9b2babb.0","@material/base":"15.0.0-canary.ef9b2babb.0","@material/animation":"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/tab-scroller_15.0.0-canary.ef9b2babb.0_1665998393211_0.7162562678782385","host":"s3://npm-registry-packages"}},"15.0.0-canary.cec7fb987.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cec7fb987.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a519295417f4f53d5e1e68114ad8402f01f31601","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cec7fb987.0.tgz","fileCount":51,"integrity":"sha512-O2ik5G+MPziixIKAjOb0uTjVPoYWjAuVtjuioiTwz4gzIfH2fqyWtXHd8VUB+nKYavlofOEgNpW3NfgnXjYdRQ==","signatures":[{"sig":"MEUCIBCoBGuuWMajtjexJU6R9dJu6gsv3F23nhJp4uHPgHauAiEArfG52ua1ElaICLAwCe55lij+E2e5zTVPwgHmwRKaj7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTTU6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNsQ//SWhE/sCmGKquoIqGbEBeCoR8jnA5f5ONnWPDrlfgwDei2yAN\r\nvO97uvmZ4WIrx95jqDVLI5+W2jAemRD6mjm1w1gL/O9T0Mdwbpb+/dBflEUY\r\nGcX3cFyD9bu2nsqBvCQVHYyNOgrVSegJAeIEnRZwHAO+KBgJBlRS/Nbbfp5Z\r\np6MDufSIs78ii0a4T0Vps/MSNlqKKkxHQgcorQpBPrSa1vPvByUWO1zYUYie\r\nFk22teVBzyM/ECl0kFJFDp/RhPTAB3BXCYs0YRt/gpL2WpngAJQBxV1shN/h\r\n5yFpz89pBaLy2XNI7OqkD9hVdjKufHWrhOGPXVHi0ayE8jLTfFDWx278UdmJ\r\n69FcWa2p/lbJEnJQ6nLKCXTuhSFipfvfsiw598F0tilcyv/0Rpvna+XbyR55\r\nyiBOjgmpGl3Cv5LUml/ZN3S3kTgl5YYs4X5/zV4kdTHWdldKwuA56ADiX11I\r\nDmdSv+cQFhDZtCXjyeQJYwaJUdcjfkTU324ferzu4cOfRftgFiHdvaRNZdpM\r\n3Sw97FL4gECIPRjSBLOPWFLfqydSsNdw6XplVYWjOZ4LFG6d3OZHgO7vALjA\r\n/hP9BgCYz++CvocgC9TdveL13Vv5cNR5nx2oMeznHJgAbJzrwL+fQpKA4Oe+\r\nsFSLgPcit07/G7iwt7L8rs8Qvv3S/biE1UQ=\r\n=IgQP\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cec7fb987.0","@material/tab":"15.0.0-canary.cec7fb987.0","@material/base":"15.0.0-canary.cec7fb987.0","@material/animation":"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/tab-scroller_15.0.0-canary.cec7fb987.0_1666004281962_0.28650809404735056","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fff58b08.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4fff58b08.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"256e53380ab44babc02e1dead13a1777d71d09b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4fff58b08.0.tgz","fileCount":51,"integrity":"sha512-I1xfzDZm/LouBdPYgTe1Vvj6Qbr5MTOYZ7GroGl4cq8Ya00LOdy2v3o54zqSlfyjhbN5fQh5z8/Um5O2ChwiHw==","signatures":[{"sig":"MEUCICK+gO4fNXrb3RUPw5Q4OGDg0Cv8KVACgIuKpkw+Z7JjAiEAsvhM5Htcnjx6GyagsUi1kAMsFn/Qg+8AuHJqmLaoS8c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXOsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr9yw/9Hos7SOqPEp8u1YTm1Q6DroAsg1rCXdgwvvpFp30CRVQciYZE\r\n+cNWTmcFnitgf5cFiambQNTvEAdHrsI9KIUKcOoKv/FKNW8WoHCtcP/oWqLw\r\nlarDPs7Q4p9/AIKZDJ7Noy/qeUBQiXwO0+xQR2/lF8+hQ+tEAk1NEmDFlOS6\r\nfABCcZ8RpMY36h06thfZSha6xzK01V6tweheNKmApqjjyml56HnVTleDb8/R\r\nar1TsV+0Lpg9ktei1qN7sgd7E/zkVCOQmAZjCYWnCcnM6pMMpEs5zOqKRCNH\r\nzZQ+mcQcuRsNZsT3hATtPwtxBi4Whb7qTJAzMOn285KrFzB9oLTgBTDy30Zc\r\nU5HeQ7YlR4Rfe+guAV0b3OjK1IhCS6TqzL41J6G+gWWiwoLIOaBthG/FlS//\r\nWjGaEZK7ZP6c3YOjW9TFF3jDiXnj6PPlTTBUSKYJehCoRUvuBX6GNPG7f0Qz\r\njAee1L0UuU4JTfLuL7BCFDuTXVOTN8GeNu99xkM0X3lg/cyvHsLqTzrX+6nm\r\nPPXvrLcjKTQf7E0BJeXpuhEPImDzsJKN68ymZMT1zEDVKc8aGXsitcb6W10W\r\nD2psVEj+UzFlfaiQMZRonqdAJvs2JO6N1YnVepkD2RSOsH6eyMwRazZYz6a8\r\niFWUUIw4sfvHky4OBPSbstLKS+/hU7UsFsA=\r\n=aSn9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fff58b08.0","@material/tab":"15.0.0-canary.4fff58b08.0","@material/base":"15.0.0-canary.4fff58b08.0","@material/animation":"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/tab-scroller_15.0.0-canary.4fff58b08.0_1666020268214_0.6893016917636092","host":"s3://npm-registry-packages"}},"15.0.0-canary.587d8f871.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.587d8f871.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"11dac6e04506e8a3912ccba7fd5abfe4ac548ac4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.587d8f871.0.tgz","fileCount":51,"integrity":"sha512-KXDUhwygrprDs6OsFEm8/p/XSGSP8sl52bnStmBdddZfuXF3onSLLyEzfH2B8tZeGl2ZqV40QHTaiQOehi54JQ==","signatures":[{"sig":"MEUCIQComcvqUSmFjjD/A2P5R/lvI1a7E3D6OjQCpY8RzZIdggIgGhLplDJQWnrxyZrwLrJojnspJ7wznO+uR1gtBv9fAvA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTXu1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpGtBAAn2jL28GNQRe3g/IzLEwNdcQ3Vs7aLb/Qnni7oMW9HY/4tJeX\r\nog+jsNgItx6Rb6kRYpFV5eJRDKGHNMRcvconkJ6ZA0rOn1snY94ofOS3oImW\r\n00xdx+iWhSu3qgrFr0fcD+I281jjq86XcHQss3xaBQ02Z/N7tI8KL2wAAfMS\r\n7dOYUM8EKq4Y2zDYewgjKK3kBTBhcAbcQPBeJ1P1C3WRt7Zhr5hmHjrqEt0x\r\nIpyStZcsNjOUCc3cewEqZ/EJYX55KZtUbSdL+aav9xIUEkydjV2LAmlfgUvO\r\nOmvqItZL1N6c42CDJZHYkEhQ3ux4LtJBLkDwk1BADRoHtmwq0YDrTWQ6xdde\r\n8o2syr2r92p43yDQ9ATOQmVA2Gl4j9YOH9GpwNrwg0XCZz1hMeKnOUfceb/y\r\nHHk4lhbHA49TG1Dn/dB6mo2ox24JkfHh/ZbF/GLdMjm2FaxL4cYdg8xvzI7l\r\nMT85pGWrs1ELZtHJ3fPuZhcoGliOhehog4dNKgsU4iijUZv5nxJAG0EOiiF9\r\nV53dDndIUgFFwGakoXHK6JP4R0Qj4IgjQ4gADGJIrZLndcXTDHdgqi5nxnNh\r\nKEBBvYTxdpOVxhEWqMM2fFWgXWPrhTw+7g0u5nlYL0zy2x2qqJ1EgsJKcdV6\r\n6RDXOsR96R5rIr9gFP8nG0QucoA677SuXGU=\r\n=2HXA\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.587d8f871.0","@material/tab":"15.0.0-canary.587d8f871.0","@material/base":"15.0.0-canary.587d8f871.0","@material/animation":"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/tab-scroller_15.0.0-canary.587d8f871.0_1666022325380_0.20975326024644314","host":"s3://npm-registry-packages"}},"15.0.0-canary.edf4b98d0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.edf4b98d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"df3d37e9482c2b34f089855913ee9aebe37a9377","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.edf4b98d0.0.tgz","fileCount":51,"integrity":"sha512-ii3JCcP1+r3Ip8jVy6w1eQpqGpbyTbU+WHFTbm8IJatnXedblJleb/T/HqzjaB5LDdw1y5lde8XYFQMk7+AxtA==","signatures":[{"sig":"MEQCIEAOVXuwAxHbT2sH1CYKRAGTM6wOC51vbnt00cbJUZnmAiAnPPpxZYk0Fg2RCoU0/WC99lfp8tvEK0oMN9RsTzZ4Xw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328229,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTYXlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2+g//e2ZWz1nkMtKEgS93otuoxbUXGt8bL/ZBECaFP92Ffz1dVJX5\r\nAKIIX9PlZ4tknqG/4qI+gDczE5u16nIFDMTgDyyDAvw/uXosCn8Raa8t7doP\r\n6Xs8orBt8yP+pt7+5Wla41G+0wt+BDIwMIkFBywYHhylCfBX7ye8g/C9Pn9v\r\nvIWesafZDAbToF1pFtI4IliunwCNIFckHJ4KYFG4B6D0yP2YQ8XbUR9c3MZ2\r\ngHnhOukGkn5lDuL36TEUEWyiiwfgD1qHjXRJfPbHI7QdXxktIWY1+CQAncbz\r\nKdKFh+iNt4cfFXQcO/lrTQ0x813E8f8oqmRkcQOg4dEgdFiQRJpmf0sEkULF\r\nW0ItkfxcITINemd6SccQp1SS837SppfRzzPK4/D16jz5krieIZEcvv2kMAsN\r\njQJxVQYISZ9+lBR7p+y5VuD/iBJe2TumacGmf9L/gmbxK4gO2brQOOD/9dHV\r\n8R/IjZEaLoPrVTT0rPRpmQ1b+oiEgxxv3ls9689CUBxnTVqJNnMGv4e+53qn\r\nj/PitRC522GKuKowfpB1eqLFa7Qfhkm+Wq6fotRRTQQOXRyb/iAreUOcwyvd\r\nx0rebXHjm+QSGcKKtaIzdrLNvc8rLf4hVURSufqiIODeOUCOLGkXNkAovVlD\r\nJbAKy8q8xWoOxSI0DHShURtZBsmYNKor444=\r\n=t49N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.edf4b98d0.0","@material/tab":"15.0.0-canary.edf4b98d0.0","@material/base":"15.0.0-canary.edf4b98d0.0","@material/animation":"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/tab-scroller_15.0.0-canary.edf4b98d0.0_1666024933494_0.9375515194452109","host":"s3://npm-registry-packages"}},"15.0.0-canary.024ac5f16.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.024ac5f16.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"be5df25e8b4b8f25cc301ee5febf23a46d037927","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.024ac5f16.0.tgz","fileCount":51,"integrity":"sha512-a9DtXlIGR8aif7i4q/cjiNWsbVNT2WtbwXWsi17dLxA05TT+LqzVN7r5ge8gGOKC3kucevsdl/hBXxZCMJDuPw==","signatures":[{"sig":"MEUCIQCAhLu7dyEjksrkQUziX3WjxSRZWT56dNflIXzF1yI+RwIgNHXMDe4dCrPhx7Q/sWNm0WPg1pIdGwkTsfxsbGs6ePo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTdq0ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrELw//UQZuBh8fj7MZINR9fzfxeSJRBvHNsauJ9LsD5MSzMJBU/1zM\r\njKQ4f3d/c8SsgeXrlom1o8afXFJ95nKx7irmzWP6I4BrjOjFzOa4C/rFlfRl\r\nv0dgcyud1c9CkZ/ZAvq6ybqsGMWLDFQ5onMhMNIgHPa4t4qHS/3gxXN9S8ki\r\nQ5LsFm7HvBigSt4hvCQlITxtIJwRi6VD2mMbetCUmwft8x6JksYNRDQnP5lQ\r\nKb2VOCJb6ENYHQIGQOIf2gIx0eV8m5ZljmNjDmb7jim8bqzbBaQxe3yJMk2g\r\nJ8hRn6OROgLiff3fp2AVfdoUQjW7N/yqfRET24b8PNdyl52EcwbyU8wsuXrs\r\nP+g9WcjExYYUltAQHBIHHvpS3xhDIAQHuaWlKa2YqbbD/wzFFdeoKICp7V73\r\neAi2ccR7KGQ2rVvuE04bRLq4k8a6gWLyfQpHELX5DZKf3b9XGMVcI9Kkhdjk\r\nOm/aXEmTye7C54LXHbR16apwA8/mMIfp1oBD0tUY6SX7QM0z+AMpU0/alYrM\r\ntFor0LWtQkqWwh8raS7ikoTy8Hio++RfPu84Z1A/MTYMbPL6gK51QpuNAv0l\r\nWcbIablaUatFyL7wMS3UUUXi6BtQFaTR1Zq+VybsQ1rDfF3LhQwD67wJMD//\r\n5BFJ+D4ixJC+CZ7KYsWARyp+N+kWIfLc+BY=\r\n=ZUcf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.024ac5f16.0","@material/tab":"15.0.0-canary.024ac5f16.0","@material/base":"15.0.0-canary.024ac5f16.0","@material/animation":"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/tab-scroller_15.0.0-canary.024ac5f16.0_1666046644639_0.043670850864970356","host":"s3://npm-registry-packages"}},"15.0.0-canary.c8bdf6144.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c8bdf6144.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8b4c40390fc389215251479e5aac70bb00cb2284","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c8bdf6144.0.tgz","fileCount":51,"integrity":"sha512-sopTUBi/ieivC+D6IGp0wvzUjsw3xobqzFki7UZqWY14xGzSfSqEu9xY+ewhxaODd0oRnU+pD5ln74wxSmrZyg==","signatures":[{"sig":"MEQCIEMRneeSpPCxYKXEpBwwxwWZeeClt9D9wtB5kJZcNoaRAiAGDpMHf0y6tx0ywJKP5UPf9ti4LpgFkZDfQ15niZdqbg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTu+EACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo9XA/+N/acsw090TDeVzXzpp8XihRTOQO9uY8LukzVOXVGKJECFcIo\r\ngrXu260P8zKadzMmUvHU5PJiE3ohRCwuZenBgKCrJ3dOohuFj50J4phWUU9o\r\nPqSvdChepA5KtkbXDMBl2XaaoAtqKarU11Z4WbrIay3PYUvDB0snc/pmYgyJ\r\n87riK8P7LNTxurtSAgeiOeT383bai98a4olOlh3o05X1nZP4WOc2wPKZIk4t\r\nbK13BLROUtKLSyO7rGuHEyNuJp5gZW8yYuptXm9EJZ3dNN928covcZJozDQD\r\nNIyRRhVOYHLfC1ga/9245JWk3h51c5ZXs+ipjewuIBlYdneKNHLboVnD2Os+\r\nHIHJ8cHyz4EykiPVzlCHpfs+WPRUgTepnXHdZpUPIRANwHt7RIY3x0IiXozZ\r\n4k4Me+6ytk4gCEQDCRBWfhPWlAgaKp98AjH9LzQLXV3X7Az3sXzsIdj6/16t\r\ndWK6mIFBbXbSVCPasleFV41IEVcxmp87JObaqt7MvEGlFsnAe5fdUYDnWnZG\r\n2zp5blJjKPjfAE7KSc/rcttLu8YjCS6ZqMJlaA48J2UBdIIPbbJkGoTlQf+D\r\ntALFm1p0CKb9duqpFqHN1q3Uc7hoRoGOFJpVyMTScJXLa2efUTsDqVDvwIU3\r\ncMsZN6o7dhjX1GmxQSfvLASpXGEgGI5KyKI=\r\n=Uwhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c8bdf6144.0","@material/tab":"15.0.0-canary.c8bdf6144.0","@material/base":"15.0.0-canary.c8bdf6144.0","@material/animation":"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/tab-scroller_15.0.0-canary.c8bdf6144.0_1666117507815_0.5904161260208509","host":"s3://npm-registry-packages"}},"15.0.0-canary.bacda4885.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bacda4885.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e2c777144d5b86c43ed980de477dcf4519e231b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bacda4885.0.tgz","fileCount":51,"integrity":"sha512-xmWqsNTCsj4/LwxPbGhonuHok+TVajekWQpJ42OSBQiXEZp3a6RMjl9ibmg5jGWdPgEYFQG+iSl/3kqcm8wb0A==","signatures":[{"sig":"MEUCIQD6KudSxMlPaxWS2CS0UzbA4mNxz3MIUNawfjdEHj1RYAIgRiP6i5cmszi5gCw2cH2j8pkNb0+9HV8uAFPV/7oMrnY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjTvQOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp+jQ/+JGVKeWluEggb/Tx23ODrkMHhrsWTdw58Hkydc0qqgfxbvu6g\r\nDg8lowRootFBv1HTiqvQyeovFRicv+6/aMKxIqCJYJOPykw4at+iKjQcGz4S\r\nH2tQ4QIDI9dzSiW5eC0C8INQHbFbg5UWeh3PuR4nb3tEWDB6kMlrBr76GfgC\r\nteP74Oi3OXep5rmMzDkh/u/CE+TMtRYYzK7gq1LW4mXEKbZuCqWLrNdeQDGD\r\n80ICpqQkgUa3pWVMs1U1yORgFZXpw3BdQqVEPl8XfBeAIZdlm5bDZFW2yuRz\r\noyzREeWt0lS6APqSdnHM4o/yr9phEKO7WUd4RfIDObd+xPFO3DcvbCWUsQQq\r\nI79uar45fLGleDOElH5BwUCmpVLUXCEKZXn1547/faBgz2H0YljyXP+unX2G\r\nVjtGjruApJtEtmkOolB00xNy1uXfBfzRGwUxWIUMBQHQkdI3/DAhjJ9l6L0o\r\nt7zeG0XH48f3++zk70S3H18c8hmBY2yARkDxKyhcZBbOCk2nf11Tleijm55H\r\nGB4XHcrNTJJutV3spLy+rsrJTHzbQwHsB0XnHd5RC9K8h3qfkuX4rDFe7xqY\r\noDqPv3jTTp+9URFwexSCThNJzPGWSpSmLMo6sutF/PRcI2GiiT9NkeywtekW\r\n0sC/IGsiWqYuWf9xr95e5hoT6aYiqSk+aQA=\r\n=ClqQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bacda4885.0","@material/tab":"15.0.0-canary.bacda4885.0","@material/base":"15.0.0-canary.bacda4885.0","@material/animation":"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/tab-scroller_15.0.0-canary.bacda4885.0_1666118670085_0.9728296230772633","host":"s3://npm-registry-packages"}},"15.0.0-canary.92b2556cf.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.92b2556cf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3220905e581f31c74e73ef1a882353b8df3f6f40","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.92b2556cf.0.tgz","fileCount":51,"integrity":"sha512-otLCTaOR6nK03TXcpxZ6I+BhqwL01vJGxfGqRftwVbLMRHQzJQNpEjv8k96r/fJumRl+jBHQhdcl0wtnii+G9g==","signatures":[{"sig":"MEQCIHyXMZWT3eeJbKfG0xZV6s+mx/dtoTNPgCTGRHkKPdI0AiAjJk8NM8Mnj16dmoc/rarFzOXH7+HyuNPeffd2a1qa2g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328162,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT0+ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpieA//favaPt9TGxkgwKKiMe2hKcF7K0J+J+ULkVHr3R2a+NHpSrJn\r\n7P6EIYk6aSKPWTpfXVJYEVMe2Det/LhvFua/JVnrcX26zrzhqjHCqRyz+TBC\r\n9lthlRO19IaXzJNDCgDI4CW5Nw3JNFB+RG/8/3QkwYeD7CG9gyZzd578qoui\r\nQAUCfux8mUU3iNnGxMB3cBGP1uqbdfRcpVO0OMH4GENfS8u1lPhJXf0dvD9o\r\nnlmoiqgVYtYCphxNoJxgibIYJl5b+PtZ5gs9ONylIygvOi48YZ5qF6K3efLV\r\nWXgsCV2MtzcARTDsBbYkAqZFdcYe3OOh9LmpbPd0pxrzEAjy7AydetVV7AiW\r\nDbQQzGNOKQ9y09lk3YHyFLKzwvZNKKvZGqMaa7YHyHgpcFgl1ZghpFm6HvKR\r\nQ1GYP+yexEcU0vfQBQ+/LVQifxKBSHWmZKycawABuXoTNkQFp7I9JHUkshK0\r\nhYEOHzU2RxaNtoKN+Nlvb2uPt2XCBM/vLFDvdzZSq28OIVEVYSDCK8jIdtuO\r\n1XXzx7tyUmKB0L0gg1gU9Jn2M8/Z28yhzRiD9eQDTmZJnCmpSgnIWo4IBeuA\r\nKRO7KRU16VCHLBXoJbMXjYa1C9OdfmJNuuEm5jg/ZD89KNTnQjF7Vm4VGD4i\r\nDVDMxwd0v3pPn5ZZarbrhPLi39Ew22KoNHU=\r\n=B6uK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.92b2556cf.0","@material/tab":"15.0.0-canary.92b2556cf.0","@material/base":"15.0.0-canary.92b2556cf.0","@material/animation":"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/tab-scroller_15.0.0-canary.92b2556cf.0_1666142105389_0.06443479223342052","host":"s3://npm-registry-packages"}},"15.0.0-canary.cc804509a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cc804509a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"49beb3e5e4d8b61c81b181a5df7e6a6c0116775b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cc804509a.0.tgz","fileCount":51,"integrity":"sha512-TkQ9e3pnKae3UfpWpHCNW7hO4dGGFhCKOv+LCD1+TNnlfS6ft+TrhPsUnVQwH2ap+EX5rpmGfYBrwsYEB1eY3g==","signatures":[{"sig":"MEUCIAQ36bqH8S3iJAP1j9DC8oRgv8Nqp76W8S/dirhWw36OAiEAmd5y8kjFORb5IYLa+Ciho2GmblNDgBkUkAW3eCe7mgc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1B6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoEZBAAh/eALtVxgRDzYqS0Vp0C68ZZyStXNuk4iqmGKQ3Mc1V5s/c7\r\n1hoty2vrQLd/LOLITwJrv2twvLdkHsDWJhOe2P0neMofVXfvJvKSiKFxD6pm\r\n/OePF/NfRVIPK3ht2Ur7U8wAbrkbEJhl7ie3cRHBvpqT3BwraICd+Ll/lpsP\r\n94hlTCco+Jn+Qp5wB5sn/Qhr6Vsd+4lorgE5ciwrDhQ1YpJTHaxVJN9nT2it\r\ntvvXG5MSu5quMuFzns6dZ/YUIgDHUPj5mI1w7I0K0rCx5P65IB2pCk8pBjMc\r\nG70U5wuhk9IlgSSg5bNfSRQNNfAVJPY8qqtj9ofSOUks8RJTgvOAtSTl1dqy\r\njxcCGEEv29/Zu//iemkGpzWkRtydRlY9+ktXwWf4aqthR9KPfmAC7dhSILua\r\n25VuKEkSb8QhULnADujy+PLavmsz7H9Hhn7UQLzKGicjNHBVKlNq6oRD4mCC\r\nNB1RgAYIaqmXNS2wm4xYVRuLixGUm0b5aB+L/Qt/rdG3ic1CDMibvO/Bu+Nv\r\nPGKGXiYKpreGUtOppYX9ZqZcUW+vr61nwrIlOswtbmAmDNKjvAFiqhIZ9hwo\r\nG19bP6xhyH8bEbtu2DH/YXhsU3tOamAYk8EteACZuYPSkK2m/fBEu47+CCmL\r\nvnHAGbfZWBrJ9pHl3h1/+AGI/CQ8Q2pamkQ=\r\n=AvI5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cc804509a.0","@material/tab":"15.0.0-canary.cc804509a.0","@material/base":"15.0.0-canary.cc804509a.0","@material/animation":"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/tab-scroller_15.0.0-canary.cc804509a.0_1666142330704_0.19815674573105002","host":"s3://npm-registry-packages"}},"15.0.0-canary.982bedae9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.982bedae9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"79f2074f2deb90e1ef723599d754ee45e2eb6a74","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.982bedae9.0.tgz","fileCount":51,"integrity":"sha512-bWQDky9R0qvJYp6DMIRZ+UcqYkNbBlo4RXOvdOgBu4hsRrmXq5vw1mYxuS+XpEEJt2OP9lF+cvA5h2Af6X0RQA==","signatures":[{"sig":"MEQCIHb9B/030ZbxIwgs8zBnlbUva2sz6aR4uCOwOK8DlWmIAiBBGXUkARE+iRN1SMSNaOaaA/tK9Rmp7hU7mccltr8aWw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjT1UvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqoTRAAg1ukoLgdaOp2o3xNNydH5AEG/rc4d6NGIO+U6y60ZdBelo+W\r\nf6w1xrfRlJtdOdsM+9EljEWd8dHXSZ5wDhdZWNR9qrG0YRi8wH7/0KThP5gL\r\nN07iZyT0FH0KYUo63yFR7HyGZLISFHRiNWlRQB0y9MRGT8LvcphP1uvbZpBp\r\n0kws11doax02KL5Yicatx7n1KZ0Nj2s94NSyUECj9XJ8yzddNV6Y8QRJ71Mz\r\neJ0VqdXe5dZ6ft6OLk2iIoyiW9ceRNNBsEK/BGb9/Mu8YtMI2WmRpteOOp4V\r\nCceo3wW70B75ZYtv9qtbmM7HKNs0k+8HfwoQE9Djz+WiKPkCxlG5eTNAEhCM\r\nQGJotTCijTFfu99ggxhERTW5SB5+/F0s0fokii52HhAPA2vGB1eq/8c2ne8y\r\naMLwgNitCuH2FGX4/uf6s6yuJTmh584toMYWdqUg5JWl71BUabwtMsnb3VZf\r\n0Vv3Xs6Vq0E1gN/YvEMU2BQvpKRTNDeygOwS0JIpF1TnTzwUhg/1LXB3Q5ih\r\n2BBM8+tdGNeYeV4gdUZWYY+PkzA81AHL9KkSZ1wM3hTBPIRnRC0la37Acp2I\r\nnwuG05j2w+vldpQe9/ume/ru/PU2GypjKprUi35sIjWhL2l3owYZVMisK7CO\r\nU5tst4/a2cfD1xJmlVUHPY9PPIeJES30gn4=\r\n=GDo3\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.982bedae9.0","@material/tab":"15.0.0-canary.982bedae9.0","@material/base":"15.0.0-canary.982bedae9.0","@material/animation":"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/tab-scroller_15.0.0-canary.982bedae9.0_1666143535608_0.7789995572528867","host":"s3://npm-registry-packages"}},"15.0.0-canary.ee40081f4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ee40081f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b25468c83b577af6803acd6df14d8d52e0ec5234","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ee40081f4.0.tgz","fileCount":51,"integrity":"sha512-akR1Yr6ZZZ8vY7+UTZLTihTpuwJToCADFjY3eTUqHJeLQriqUu+42NvRisv7H7ToQ5VvpPBartdgcZTEvRVvXw==","signatures":[{"sig":"MEUCICL6gJjSYQj4lNC1v0jMzuznN+JyZIPBw0N3S3dz+qdZAiEAh4CFO1rkv8yLnBEQ0BPx82yy0b1Y9Oj176gsw+u4nWE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUFpwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOOBAAnPfIiDrxqTnTQAB6Fj6XPbibW34EK+t0/liVbeUbjSp8vu+V\r\nPNi6Jj/l6HP1ZwdgJLFF4sJZF4Y6//z3OkTXT0cIYsfziDq8mB0PkebObVrH\r\nC68FMF+RP34vSyeT5llMiz+TK3M+qJL+7fRq7dHCPiihCWbugm4KO0Qd01f5\r\nbFFE48mmYF9lsa0B0RnRnMkOhyfqSwgL1xDrbSltqqZVKo13SmsAb7kPOKBG\r\niYxIe2JM2K2gGWWJuXWYfuTUDFRo/01977gWRlJC3Pj6hNA1ILr3Os5jNsB/\r\nWWBe8Ylp4Pt6bsB0VXlmZrFhFmBLHnS/mXW9BuxvrzMSLvLwW6g/CPwzK1Hi\r\nx2CgZpyghuypRevq5asDvO4Y7LQd1J4aExujHMaNq1O2xCPD8wsV6snWQUUi\r\nRc7IdTz1hCl1tZVKL4sCU298U5Z5WA0FKoiZCnbdUPnpcUckvGs/CIEVvwMO\r\nIZpcPyJZHfI4Z8WeN1LKA+FeDk7Y29Qn+09N2MsnTdjCPJ1hfazjnIswWIRD\r\n32wep0vVQuGOeiC65/K+d0X9DYFfeafjPnh23ITxATA8Fd1zH/2Mq/rHtIPe\r\nWX3mVUDKJh68Qrs0ntNZ0aufCywqg4M3zLhsqYfFwRZYD3qwbWF9ZHuihmah\r\naXVm8rfINSo46RUO1LlWMkaEdFEboBI/lGo=\r\n=9EYx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ee40081f4.0","@material/tab":"15.0.0-canary.ee40081f4.0","@material/base":"15.0.0-canary.ee40081f4.0","@material/animation":"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/tab-scroller_15.0.0-canary.ee40081f4.0_1666210416384_0.46906822001913406","host":"s3://npm-registry-packages"}},"15.0.0-canary.98f1b54e2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.98f1b54e2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5c2204697f0777018749a2478e096fdc87ab835f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.98f1b54e2.0.tgz","fileCount":51,"integrity":"sha512-MzHG0ved9MhYIofynDmvj8vCddy19hFXMFTwq0edVpSap7gUqzpxXHBB5o06q37WrS9o+lBBzu9vMPvEcM0IOQ==","signatures":[{"sig":"MEYCIQDW+CmeD6QkMIJmbQGgcW8PCYKDlKuW13n77aP+9NFJoAIhAJdrLU21BQgLgTgZXoEqCy7oOCePcJvqcBxYwtGpbRBK","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUdKSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrulA/+L33xNJ/OdL7Hl/vQ8WLc966Ih5nbp+HHI5RPXd7pfKk1F8WK\r\nGTb90976zoG5V6NN328dakyYg8fFU+AI/EA9yR6YEkWa5cqaf2UIsa0h1Nl4\r\nTMhyl2d4JV0s5CDgok5OqZYsOnhMh3XdBLKry6PMupi1zvNSKXbu/RcmOVL5\r\nhAeJ4o6g5OFVQFuiXogJ+JhDAiRKouQuemyukylmKK89AZPosPETwMqOWJ79\r\n8NRuZQcirmCe46rE1ZGzxjHSk5TD34to62ZZ+kt9jLDArrxgVbceNhBJOB+J\r\nkZqLf9mzPol4o0KfHd/kHfsGD65b1Kb/XvjCKIZXk7gpdu4Ub2u5v7qn6fTy\r\nzcZtkRpnLiAdy0CvXq/CPYFdhvKvSyy11dV9x1fHAQ6zzYTFDYzVaZvGRjRT\r\nWAgMjs9kJCjh4tI+lXtYqfELMqtURmvnMVcQzdR7IPbhw3D4tDb2eD/1o9sG\r\nudWMIkcOBDqqvRMZtoi07XAiYRbr7uvcLeoYM+TchE+f7FfCIBRGgWRIocQS\r\nklvQp5zR5uznUDoFcLn9zPmsXetaFIDTEgoT63mHFfG28QRjRKS+H/33Sitb\r\nDri/ZcwjslvrJ8Cs92EPPAiLb8koHqNwATLu4hUmClHzIXOjRVKZxYAbwYUW\r\nKcdYlBIk3syJKvq8FYJO80Pf8PQ9jVmTrz0=\r\n=FsEX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.98f1b54e2.0","@material/tab":"15.0.0-canary.98f1b54e2.0","@material/base":"15.0.0-canary.98f1b54e2.0","@material/animation":"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/tab-scroller_15.0.0-canary.98f1b54e2.0_1666306705805_0.7336682540529742","host":"s3://npm-registry-packages"}},"15.0.0-canary.e74b7ba7e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e74b7ba7e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1724ea51a648253ff28a89f5e5803ecc75d6c704","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e74b7ba7e.0.tgz","fileCount":51,"integrity":"sha512-ktVMr/fDzLAsHXfbRFMiRm8sixnaEcpLo7DZ1AjIoqSqxeey7my6F947yyNcAD/DBWWVO/aimw3lkkQPJdZSXg==","signatures":[{"sig":"MEYCIQDp55ovz76kkMcj9bLrQGHbRRFx1F8Omc++E9SUiTAigwIhAN31HBjb/lLInuVGV3vYIaSQzPU4MWtoHr2YwWtpRKTz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjUtHRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmRA//YQt+/SO729Ec/hUbMcQsAzzixZ4TPIe6k9COgCP4Os4RaWnO\r\nbRchYkPbblHiJvSzsvLKXTyPAzT1BkFljUHq6cWfkQbzK3mo4tzytbeIRXbg\r\nwfgB5bcZWuzjGdT8Vpl7/u7NPiXDGsh9HdAg0gMM2n78xEUwSqJ3rZyd3itM\r\nHyShvMVG9DrrniTWpxJ+WUSQFF2SaCz6LiCikdRooHWaZgiAnbnnXx7lILQZ\r\nv3bQUVWIW0duDhFz/BX3xPXCxEUa1khc6tl986dWsn2g/54hNi80tZozPV/P\r\nLO5Plr2jmMs6fwaomC4JVxKG1n6pc2eVmv6wLYKDhFjdpsUO7FdxdDIrFmc+\r\nQ3Qa/W+gUp0HJ8b87ESAMORzb6t0sYUJ5qCB/DlFKEeOjDftEU1rXHIgjcG4\r\nmUSFZYY92Wosyg6BxmOn9yRk1ulOXCZGAMP02K2f9nVqo3NQ3JX9EpaK8rsP\r\nmCxDLCwQYcwdRvpik5WXjTUaRZeE5aYu1EBvRHbT6Q1gV2s0BAgtLpkrBo2x\r\nFTzbiwQs1Fz5Ijok+SzA+8mA/rwWc1fyLZsfiav1vJX+3PAUYd6m6qfoTLUM\r\na9BSnUqMGHpMkWjGY9Rh3Ard3xHNsVRvZ94Aco9kmCXqrFAW6KtwyuumY+6t\r\nGk28enSYpbRdouM4yZTNpzjJ6SYBiHxJ4U8=\r\n=Sgt4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e74b7ba7e.0","@material/tab":"15.0.0-canary.e74b7ba7e.0","@material/base":"15.0.0-canary.e74b7ba7e.0","@material/animation":"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/tab-scroller_15.0.0-canary.e74b7ba7e.0_1666372049539_0.44264411594176334","host":"s3://npm-registry-packages"}},"15.0.0-canary.ab55c07d2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ab55c07d2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c2802a81a0edb3ad89dc5fa8ce2acae8b67c275c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ab55c07d2.0.tgz","fileCount":51,"integrity":"sha512-dvP+3fsMTAKfIe5bzlnOA9dl+QRMiLW03y600UbwlVgY+QQ7pR7yDSknN6qBnSd/u990XJQGAmjSYOJaejo0tg==","signatures":[{"sig":"MEQCIA6XIJ62cZDQYICVyWuN3jW2wlk/UZEdDHSie9v04WpMAiBmWfOS+M8KwsquYfO2GHst4CxIyxHtbe+n+GepBWh7rA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVDSBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrjgw/8C/ongTaajFlaRAKQsUjYSi0649rknthU5hSKNYpK4xQdwahV\r\nqVNi9wNMtvoC8PO+kwjNBC25aZ2GqaW9SgTvh+bPpJ927wG9DAFelx6i/P6R\r\nKcLn3y3BAhU5EYBg4qNeS+0PRKg6qNkw5ecGPIawVdsJOtf1kr4W0zsBS6u7\r\nA9G5cR5B8h8hSvloZELm/R6S85tQ3Jo6byVP9Jz/nfI3aXSCam8tK0/NBJJJ\r\n7Bi0wMmGMoiAlGQP6/OJk7NKj6Saccyo9nHlNjHYY+HtT/lMIPeGaap3YFUB\r\nrFjdbwX8nnYismiXTVCfMvLPkwEG8k7F8laroy7DrOWw+HGuBNH7GLHvXGrU\r\n09A/rxv1A9UN9aKwCKsP6C1rJqzVxsfStyTgYJW7mp0X57YHe86j35Z+zSGO\r\nefatP8QMJ6BfK6slVCfytjbfx5VWNv+w9dN4GGlSKoPOWsY3MdsXTHpH1Bbq\r\nUCAn0xIpfUP/SK3hGX4PwU98H0jgz10bkjppYxCWu2xTwdD5cyn79KlreR06\r\n0a1KGOkY7SS3UmGTv8BQFRPxizkiD1Js1u4vhbEq1SLa5FkZuZW6uxUjY7X5\r\niVGnc+tNrkvD39ZuYGxpa96QXBHIswrgNSyshKP+YFdQZiLGgK4AnHqqFgpo\r\n2JNfnR1P3edfimzBJhw+QzNdVMXsPmKlc1I=\r\n=4VhZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ab55c07d2.0","@material/tab":"15.0.0-canary.ab55c07d2.0","@material/base":"15.0.0-canary.ab55c07d2.0","@material/animation":"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/tab-scroller_15.0.0-canary.ab55c07d2.0_1666462849555_0.8138967327287021","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc539db34.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fc539db34.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3fb9a2867f4b66b5ea968a725198dbd445d87b23","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fc539db34.0.tgz","fileCount":51,"integrity":"sha512-C/VCtdS+ef98QK0uXVWSut1ri+1RXjmqYFC8JY8N0i004irjwgtOAzhZwCCrr4Sw9pWvdxVI62fs4UWl0uMdhA==","signatures":[{"sig":"MEUCIQCTgZRDfaNaUbw2OvH920/9niyUsr+WJJPhQvn0BkcDRAIgf3eDN+nSDSWAUlubOwC6VAFtHiDyHabS/N6AI0y1hwo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjVuDmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIrg/+PQE/qQb4g1QHWE8nFP83MFQ/2v76+kcEcSJOHAwe7Hszvocm\r\nvdDD7ZT6m1pKIoI9wu0YnvVhUNAJ2mTdSlLq52UHrm6pkVgmbKzodaUx/dmG\r\nfeH94j8t9sD9dnHJTAYDWkyYcpMqHv51jXNPh7QNhKMSh/I0Eda3OzSqG1kf\r\nbUNEVrSjodptif7DpztgRzWbjs6CG/7ONlVqvuN3fleQ5TMJF0bD3JMckOcw\r\nLRg2td1aXkGhQqVwD9u+tDBz3b6xGQdMuvtHbbzuj9F7vM1Y0p1ED7fR/LIG\r\n5WGZZj8M797JxF4PjkPhqgJ70qUhepmOq5BICvixNgm+dkAqTVvOxvgBddxj\r\nv7RdxrUAyX69ZUQiohd3xLCoqlywD0kV3ruByXafptzXfYw195fO+ijXOONu\r\naCjGt8qfeQ7Jkb5GFr5Q1/LNe6wk5M+8n5a/bPSt5qgiIYi/WuY/3S82eUHh\r\n/esP1IiNO5HzAwqG4i/vXsrKkFaJTxPCV0KukspjDz5Yx0gaJzSnUGEDIenL\r\nz6kTjlhENA3yrKBp9eBBpUfIwMiSiQM8A5Lusf13XMrvq6phpMpVqeixf2+d\r\nnLs1EsoMi5dfCu9JnGdVnsZUIhjcpgxEnnOz+aAWEp7RKq97T5c8dYl+Hx6m\r\n5HQ5Sfrj9MeYGIxEgm5RqVhqoTUhtTSIc+E=\r\n=CAnH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc539db34.0","@material/tab":"15.0.0-canary.fc539db34.0","@material/base":"15.0.0-canary.fc539db34.0","@material/animation":"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/tab-scroller_15.0.0-canary.fc539db34.0_1666638054617_0.42031749862586487","host":"s3://npm-registry-packages"}},"15.0.0-canary.e340b04c5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e340b04c5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1e424cf2bcbd8f606afa6e53f9eac7580397c7ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e340b04c5.0.tgz","fileCount":51,"integrity":"sha512-/YJhmcewpWB7hEZn+gocfx11B7D9ayZohyDyDDW+T0+xWb8q7CB/35+E/gBT4mv4KUX/pcjE/QN+crSTk6m6Jg==","signatures":[{"sig":"MEQCICAPzEtp/2LxR3n6yTWIgm9qKPKnltz28CvBbzAeUKiOAiB4zFZgD56+W+DYqXtkrtB5wWYYsdLxaFTkhlTVMdlCvw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWHVlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbMA/9HzAgcwEp/+pUdGFr87hggmBXrdIKyeFLoUwVJtCTW3y2SudL\r\nnPT2SLFWZic8NVWe8EVKhJNVhIyxgXqKo9oBWyKWE90p54JOgDUJRigPz29T\r\neWDMqHtsnl56XquSuzb3krzx4LMXB45wQK/F4LGnTzV++OaPFG1nqL1S+vwR\r\nBazrkMPTCmIkS0V6BqRYGrO2cYDRVKqjz88GGWbQ++GftmtMTVOCn54WIp12\r\npqfOTen54xcGbwpGONJcTqGXThTzxohY+RgONv0HfIPK2sh8K+uXY/1oD17A\r\nESk6r5435cpBlsW7OtKjWaLVrfqWfhiU3RXMyhg994ZtZIENH3cV/na1RqaG\r\nHwor/6iuZNqL1WKQALBf3kQ079FFkRYtdSQgBmrOEPQWJue1Be7CojpCZ/xp\r\nYnyYSW95kBZGw/P8HMFLoVLClFWSRKDBEs4ehFocdUj5b4VtX37g0EXEIDvi\r\nYQ7XTK0cffr+xEZbDss4WD9gk2gI6AGMcXtnOao0ZdhSoe6SB7vY90aFra8O\r\n2WyEVeMykyKy6sbbZHxgKWb0Ll+p4eAoQLYOJSfJ8fo2w9MrJ7EfcG+dehhb\r\nzm1JP248rCUbuDHmNNgoBAxQODcutTPra+I2D6rWuYz5uwqYELe1y49B2Pnz\r\nAG9fW+ouAD63RcIz56uOWSaY2sIuyJ4sFN4=\r\n=L7SK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e340b04c5.0","@material/tab":"15.0.0-canary.e340b04c5.0","@material/base":"15.0.0-canary.e340b04c5.0","@material/animation":"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/tab-scroller_15.0.0-canary.e340b04c5.0_1666741605418_0.2647289570385034","host":"s3://npm-registry-packages"}},"15.0.0-canary.2c1a8f8fd.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2c1a8f8fd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c658bf7973c383ae6adeae3abdede6a121ae0bb1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2c1a8f8fd.0.tgz","fileCount":51,"integrity":"sha512-QzrpcC2RKnP/Cx1FbompbPFPSYRrtjm7wxY4eB0a01aUxXgC2Nge+q8WSkX2SqFs746F0WRgz00hA240P0BT4g==","signatures":[{"sig":"MEUCIDx3CAdHq9/0b/5EEAdgCVn2em/9tI/BTl2sv6xFEYjIAiEA9K7Qvn0Cxb2CSI+eyUXdtbFXfWIdszcZwb5H1+QRjuM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWW8oACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3WRAAlbUD6JBN7FNbKKvJgXwJIPzDFKpjqBI2+wEw0HS5Z/EXKXKf\r\nRgbGvY/GDPj7+dLiTLpoBDIh20Ar9w48BxtzYeJZSwaeYURAVvNfhfk5+0Ft\r\nhw6UZR8oagO8841F0wbyyV9ulUYsUb+iiV65qK/odQ6rj6sJzPw3p/TbFOSs\r\nJH1SAuyV4FWpSZ+3Ob/Ppcgdg7tAYVX/5f8fhAjxBd+3GLiQXPjikUx+PnXM\r\n1TBk7KpP5+QM5vjsv+PtvszYe9MDyJa5Z8i0GiMrfc0XPCnhgtS9ue5RoBG2\r\npQFS5C2jEcDMq/uXhUedZQ93+zze43yU0JTfokBYZcE5nplLhbLU5PeuDMv6\r\nnQYIZ0kjao6sBCirJutptAo3Q6DmYqFNXbIXGj2RQ47pQCwcxoJVomA+/+ZH\r\naMbjeomgJKsCJjjjHgCB6A2PGzRxus4rIoqBmhKKNT6xY42JYUliCmGey51c\r\nu4J945jZqQXK9B58vxRaYwPC8s8dKV2MfAse1+FdZLK+Nnoj6C7RpxSS0Ui7\r\n/KKmNTIGL7/wjtXOCYQOfrQD+qfKEIgzSx+hO2WRE3wSDA90B6gKFAwcs9NR\r\nNRy3oTpjf5tg6r2AI8Ge1aC/NKtgk+LiWcjEP2NHS4jY2Mb6mI2ftK4ZF/pM\r\nEs+tJ/L7dFErPTFx8TTMRNLA7jklFoqrFWU=\r\n=9MaH\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2c1a8f8fd.0","@material/tab":"15.0.0-canary.2c1a8f8fd.0","@material/base":"15.0.0-canary.2c1a8f8fd.0","@material/animation":"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/tab-scroller_15.0.0-canary.2c1a8f8fd.0_1666805543965_0.5608860557967479","host":"s3://npm-registry-packages"}},"15.0.0-canary.ecfee946f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ecfee946f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7b4775fcaa908856ade88c0b858c3976458e277a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ecfee946f.0.tgz","fileCount":51,"integrity":"sha512-ZpmqxgO3yAolCz1WvBnG9t002XvpPYWnVN5fbLtGNqE5B30AJwSxoAAkNjDQEZ3TzxcYGN8PhhdG3jY4KiQfbg==","signatures":[{"sig":"MEYCIQD+E/ipX1g/EkzS+LXwGuVeHE9fkgqBpxAY/votEM4s+wIhAN84+1H/ADG5Jsh4bSJSAYrRDad8a/zFUqrYv+Q/qkbC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjWZXCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd/g/+MKDLaXUJaU7MUrU3pRTWY8D7KtvHaVgyzB0zRRCvV2QuQZ1V\r\neZOyVYrFsfpiioZSKXxNJf5sEHpEvYefs26r6hkOC40jHm+vrF7D3P7G/Ae1\r\nM6Ey6Et3A027WzhKVF/bW6WCFTW/Y5/8u7c4pA4No1MhThtPMc9mWUDamIDv\r\nXxtBJ0OtfquLM2+u4cfbB1cpwWPZ89+QxZJG1LXBRHmk5OAIYps5yb6y1B1V\r\nxnog9bjv4JIZXjt5+La7md3xNbigF5P7t9hURdr1dHVKHJAuI6VLqhSOkBrW\r\nQ5v1KGsFmoZOvAXipWX1E6NTKcMVyMLJZNs7xHQqg4OAxExjX4sOVPKFpldp\r\nFJU4aKF9xiOCzUt3fn2o+jqgFn6FxLOKnp0P74cRmlTq2LdPACIa0e64Fvnb\r\nl6ylUSwN5myNBz4QTeWaXhnxh3hrZyBY1OS1SgSdAPvdvZ6CjWKNtv9iGkd/\r\n+co0vGk5csAfYqAgTnbH1UCjzWM78jUHtciaT9RoQ1KdeSmiwqZonX1NjA+Y\r\ncgVl0DbIE8qXd5uUz5RNgL11RIDXrAU/DFJxxMDXQhU/BkW17+/HsniiH8QJ\r\n/+6TRA07T5kGvx0Zg7EfaJ+Q/lm6Qng4sMeYK6RNehtyIS0/IDTc3RLwOd0N\r\njDsOxK726CHwUlrfvZoEHbobf65gLn77GlE=\r\n=LcSL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ecfee946f.0","@material/tab":"15.0.0-canary.ecfee946f.0","@material/base":"15.0.0-canary.ecfee946f.0","@material/animation":"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/tab-scroller_15.0.0-canary.ecfee946f.0_1666815426655_0.3402411441514175","host":"s3://npm-registry-packages"}},"15.0.0-canary.73ca9dbb0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.73ca9dbb0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c39744d06b1d485a91fa0b20907126cac8a7b1d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.73ca9dbb0.0.tgz","fileCount":51,"integrity":"sha512-UqJZQo+wPPbHgPbl3xTZ0HPnGh55QzplDrLlf9yuNOkb48gAyeffxg/YmckyUB6Hp4rSEygW/X7LrTObSb/mGw==","signatures":[{"sig":"MEUCIDlMv/U50dY921jVnNFe7VjDRSPYipgB/H9NGm6pRpc1AiEAqzI+CGPe92tBahRHEUZxyLyfOxcKGwmCjgkoPzoKotY=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYAcUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmomcg/+PP30XktbwmN7nmOQdQYehL7Q+vEZKvr//YL4Zw3gD5nAbq2V\r\nV1VUi6W8Bg5Qt352dEnZwuZ9LUelK6gCZl2YmDjbj6VJDuLnor1Kf3TJWnmY\r\noKjCKHiSNzJI57ceIppx5bt8dERawiJNrf7ys8H8tsDDAIPKZlltN6CTzbPE\r\nx6caQd+OE4Sjz79Vmzri74LjyaG4Q6u1m/DAuWXvzJ9OLLwvy/q9+qYAUQfR\r\noPjbub1Jw/8HH3etGXHq9Id1c+3FCDbXjD6AXVx02exhAlXgeRSmcYmZWJ20\r\n5fqXIZKM430QgfTMz5Wnfu4CSh+uxbMBc0goB+I+OEIG0PIcF+PcaOGv7yfM\r\n45b648PEOgou66DkPA2tY7nYZ3GftuRxeOnfiY+11yRgfwxZ0nOIWOQu1gV7\r\nGRZbnR0z2AiTzMGZq1Ch5kWgiOEzRJHDW3x87TQtMFs8H7uGvAgZEcQRd6oC\r\nFqSQeeTLsf7ClH66mSoCmG93k3W4tcx5OLk0E8IbVlslGtvNETUNrhi1RXCp\r\nmtKPGXlPA6QxD8g9jG3EwBimnWy7jr/5pstWTud5A8rEd2u4sd64YFasWBPM\r\nsAc/Gk5m4yULN8t8KaQV+BAV1fajFzFtvtPRoLFpIS6i9XGSnSh4y2OfKqjt\r\nwXjCHfozr9VMqVYvhXVxNk6j+kQMLd97oYg=\r\n=zX+O\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73ca9dbb0.0","@material/tab":"15.0.0-canary.73ca9dbb0.0","@material/base":"15.0.0-canary.73ca9dbb0.0","@material/animation":"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/tab-scroller_15.0.0-canary.73ca9dbb0.0_1667237651723_0.06413019259230479","host":"s3://npm-registry-packages"}},"15.0.0-canary.357f2e5f1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.357f2e5f1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"71e92b27319c00f2a70144d4acdd5dd04a54ae79","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.357f2e5f1.0.tgz","fileCount":51,"integrity":"sha512-2aH7ijvnDDoCG3J7g56HE5rpzTwa7X24KTPFdDuXlh4JeOpIZb3xjXqN5Vr/lVykOrUcBcahAmFWN5tv32fsHQ==","signatures":[{"sig":"MEUCIEoBB7u8smbcypATqrsC89GPu08PmkiHb7vs7gv0MV1CAiEA3GrW5rK3nDfnMfw94g87kgvf7zemunZYFL5XgjdUA8o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYBksACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr05g/+JV5ozDIEcPVrlvAqSVibOPaYUdAwBjo7EBwsFRCgCuswjDYH\r\ng+yXkj5L90wsB7dhapVRiZcG9+EzX7keFE4OF7y94xEy4Ciztwsi2IClk+Rt\r\n7kHZpL/7wV4+Zj7UZg8v8i78CSeejP3tR2ktj0/UKyX6Hn5SnD4sgqgmajVR\r\nv7wW+8Pn5n2iOcZ9zNiT0v0aAgZ/UM5kUpMPisa2jkU+QAhhcVXMp4CkWdXk\r\nluZ5lB8FJdMpGeJcW/vg3JxEpVVKr5EmZGJP8YCTSHtsL+nzMex7m4K+LJP9\r\nn9zbJzTccQFiKgmJwDokV8kZYbBjjc0IGRmAN8oE8+8ba8SRW2U8IOFT9t8V\r\nbYAveDtuedBtqYEh0sa6zXOszdtI3q+ujrK0tgcYWrZ+Ys2bTqvC0rAz2228\r\nBg9hG9gEqxn78gc0y39j9rZVLrrExaXJ2bhCV7wMRXiGeOVD8NXaxDaaGf6V\r\nm2mBvwZuN5XeGUaUFAnussDVIcQNOdkg0B3kGY0epFXV0I8ylpToIYxAlMMa\r\nr8UsgGdDo/l0Ve4NRmaFoJWpz7DSVAHJaLc6qyJRpffu3mq5EONWx2cYyHt5\r\nexKlea8TCEtdnJXThqM1OQg0V/Mu/VS3YBHGSoPPG+vmiPN6HkyEFjfE3T1C\r\nlB+VQmpIj/bJEunJSFMfcUlPN/tWHrkP7+o=\r\n=GtOs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.357f2e5f1.0","@material/tab":"15.0.0-canary.357f2e5f1.0","@material/base":"15.0.0-canary.357f2e5f1.0","@material/animation":"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/tab-scroller_15.0.0-canary.357f2e5f1.0_1667242283949_0.7952486951342237","host":"s3://npm-registry-packages"}},"15.0.0-canary.eb103d4b5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.eb103d4b5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a10b23411693b2924f2264c8c20ad5695793bac6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.eb103d4b5.0.tgz","fileCount":51,"integrity":"sha512-x1rOo9YyjjfFH9Ael/WQjlAf+UNVRGR57BwPG1ChlXGClul0oG4khfU5W8FGUqey9cbEMrnhutZeOyi7g0rKRw==","signatures":[{"sig":"MEUCIQD5NqX19OhXab3Him0xVtvkbuCT6YdjJEwaX2lVg8pyUwIgDUkwrCPC1qAy0FN26tHWGA0YzR0wFWy9Eqs+GgbmcbE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYCjaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmptLA/9FbSdYyONWYMovDiEIBbqOG4TRhkeeFGt6hZODgTgq3BDhhCh\r\n32KTmwZ5JPPHSiNaIaF/iVZ9n6DHNyGJlsz6+DS/1I4EDovgKIFpG1REvElw\r\nWpf6Oltn2L8/PhL/wq1TIuXSDhESxgnmh/VXolFyvrXhXFjodTioGaPLJgw5\r\n55Sc7PrEiE+X6LZ+RfbVJ9TOU7zJWrUzHXFjRiDZ0cyHG72TuLOiU16FfIPA\r\nHHqYN1jSioIn3Ueiwp0+ngeJDHtXq1nyLX03OkgxGC/lPjSsCUxqzgi42jcB\r\n3bopcOZhlu8f8driqPknWUli2LTrW0QsOjgcWCoz0ZEoeX0TjKswl1J+h1NB\r\nl+2Ckfgllv8UNm0hge3crnrXPc1ZfN4EAAtzyQkJgzyrquC7BtBJAyG+a6Jp\r\noP356WPmP9yBCXH8Yi/Lk2nHrYTU5dMmfvti8Vo+DYqT9xNDF83xkRl6nhQT\r\neRMOGSIKI6D47ijFbEK69LAmmVxRCvB8E6YWi9t/Lbh4cHF1bC8lNhB1JQJU\r\nANAAws2zBmBlY76ld9mOy/FdxreT2BRuhaKaphairQtWYBXzGps3s3pSLU6R\r\nHNM4KVbzExCoCLbgk0sqTHEQMAJXDE5xNOPZ6K3JdsRztFo3P2kfQpkRUco6\r\ni4UgC3kai6yLNzwGaiNhUhBOiAoCqumsm+U=\r\n=EN1w\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eb103d4b5.0","@material/tab":"15.0.0-canary.eb103d4b5.0","@material/base":"15.0.0-canary.eb103d4b5.0","@material/animation":"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/tab-scroller_15.0.0-canary.eb103d4b5.0_1667246298361_0.1849052268753033","host":"s3://npm-registry-packages"}},"15.0.0-canary.af5f01223.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.af5f01223.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a22d0d0fedad255899d72caa1bf89b78c24c842c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.af5f01223.0.tgz","fileCount":51,"integrity":"sha512-yTcQ1Of+2mPBe9n6huz7rwLxYW7xb3MwBavXjeC1SSc+rFPTf5bpf5ohHiwPD6u1JKa4thS2tsRow3we5FH/0Q==","signatures":[{"sig":"MEYCIQDt+2Fe53r5jQpjssKgoncNdNbbH8Kuk+DkegjPnLKghwIhAOJNNE4+zeBI/d/aWwFXx0u5/DfbxysxXy/f+wjeiPwQ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYWerACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4CQ//a1tXzuZ28jzhhzepII2FWYQHvvn6/YmEq6NFQkccQyEe9Gt5\r\nw/SFizbkvisk9sUPaJYTya1G2FAATfftPz1JLR31t5M9qEm/cM+NYGbjk2Of\r\nf2Ng7aYTZYIalytIpJSe6nPSbRjABGEvbQqfK9MNUkNQDSTwYt6ewW3BV9LJ\r\n3MWY71sfdtBqQ87R2IHlZiwIO8ovqXzMRuyAOdm85KVmfHtvtcjWWUrGII+0\r\nlZn/pfo5VZBDOQMGxdVjN317dADK/HRJv4s8lnUeKs4LRsSEFzIVNPJ2OKAJ\r\nXU5cKbO7F+zWYVhxWwjIhdEwx4/+6oviaglB01dNYE72cdOWbC3olBxpcEkl\r\nXZeO0rHwByITU/Bj9HClJjyOUFtEHugUNHlivZic1w0KesivxPsGng0J2Boj\r\n2Lxtm9QVfzCR5BxuZg3EZ8ModxbpGRhDXfsnCoEYGb/Vlh8Ew9lLDC2Shqot\r\n+xaGvVga0CiTUykrLnvccnaKlQQgfh0+fCEtvEUiTm9ovw12piZzyN0vZKRZ\r\nV5KRPNEcX7qAu9PcxIbVQWSst874DQf4nhvhnZq+rn8Fw9XUrO8YeGwKfMzw\r\nEhizh7t62bpZGrzSKMeLgjXR4q1o2RiYs7A8AtKd/XJB35ncmFcuGn2hDGo+\r\n/+oeES0uKGK6HJ1TjhomXLc3G0EJ6ZcHUsg=\r\n=ozkd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af5f01223.0","@material/tab":"15.0.0-canary.af5f01223.0","@material/base":"15.0.0-canary.af5f01223.0","@material/animation":"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/tab-scroller_15.0.0-canary.af5f01223.0_1667327915188_0.7075758902866809","host":"s3://npm-registry-packages"}},"15.0.0-canary.58733ef41.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.58733ef41.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"592a433981ad9b387e9d2488bb852badff387a55","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.58733ef41.0.tgz","fileCount":51,"integrity":"sha512-XFOrV6ItXcKW304hxKaK425lnkhaFI09rSqzIfJ6OM4vad3dswzEfoTHRe8g/wViDzx9BWAhOjannsiLArvGNQ==","signatures":[{"sig":"MEUCIQDt3b4UEUQowrLLYanYAQEQo/wdOWYaMtdR+hjHLrfRnAIgcXu7X9kQAVybp5gGwRRLR23p7D8pwMXG/GttiDlamuk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYrMNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoC+g//ZN7J+k8lVnPlTaiaBdiNyVpJOFVk+NT19TFDIKRBZZ3M2jVr\r\ndE2h00gQ5I5XuLuYhmbV+yyRyGVBoTxxXKaTt3Mh0FVjAxCT49P1zL/BoGsX\r\nVNUofKweDM9tYDUCMcFPyRUUuPJQ1pa6XXOv/Vat3VskwzxCy9gnVwXYThcX\r\nfLy0KMQDGrplS6cWED2oaqzGY3UiUbQYMdg5z/vEDyZxgSrkzePEWMN4Dxcd\r\noHkfLc0uMWP0d4zg7WQX1iJMSzLMfqw0vetZ/WEmYKYnWWX2STNJpWM8jrwr\r\nU6TMgcDmpY/WAQ0nTG1JDWw96K7TdBj5sNOAgNRXOX0KfEOp0VgN49CIIR50\r\nSDXNvRqkhINVhZo1itlxMwrpVRg3IFF1KAVvKNOLBhqnsKqjz+ln5grC3rwr\r\nVgF+pOuAYKTPk8nxXzxgRv4d33/4fNJzdt2Hq8G6mT7TghB0R4/0VRBlXEYp\r\nC7+3IYXDri5ctorilLReEf5bv4qTQ5xAkpFiAZJ0houBEcGWquPpwyl3oo2g\r\nsDQpbEcPnZACVn2zB9B4tzElzBVxRhgFPl5b6iqBYkuh1j+KMRqCwH0N5QRd\r\nTDBUhwPS3Vux6n0n7D/LrwFvPqWkugUpGol1EsB1c+67owAwYha4o5fxmfHX\r\n7/I2xdgpkV0oSvks6FZmH8Bjp+p9IhYJlrE=\r\n=ZPPw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.58733ef41.0","@material/tab":"15.0.0-canary.58733ef41.0","@material/base":"15.0.0-canary.58733ef41.0","@material/animation":"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/tab-scroller_15.0.0-canary.58733ef41.0_1667412749182_0.6541880175922172","host":"s3://npm-registry-packages"}},"15.0.0-canary.909b48215.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.909b48215.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2c1d1d931c4247b5d3f23f25e66c43b72afb58f9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.909b48215.0.tgz","fileCount":51,"integrity":"sha512-iLgeopfPypfDiUCp8YoAawG0M+DToCqZSoRpuxPY1QeO2H7B4rtN6NaiE5ljGg1r6PRxwEqYQ2Ip0lcSB8Gysg==","signatures":[{"sig":"MEQCIBz6337lgusyecs0Uzdu3Y7VsY0S1Z7BW8VwF/mVstsfAiAHdee+po27L3vXlf2FBP17Wxe7pXrRzZt7c0P7HaDZpA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjYz8HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrcrw//V+yd/de8zFQz7NQApc7jq4zKsycvjhroOOBk11akIdp9vaiy\r\nUDqsFwC0PxFRB++NNEO98UJ/UOjdri9GG3sXVObPu/oJyJYqhtVsV/n94TpL\r\nhPkB0pUet+xcKY+3RN54VH3F0BdasVN3ZOOEKUcQgcCUnH5TW+/+y7Rq5nCi\r\nyNFjeKsFEDNdoEZlMXaPQ2RI6hq3btJttg5XLfBQV/8gtbtwdE6jjipER9Xu\r\nxLn9B0zP7wMHX+KR2vrxMX/jQjbMnnYEyUHArExNvFGcGmE+2yx5VRsWEa/2\r\nejNcM+OfeK4/SYV2QlUxaNV4wVCFoxWdagST5RPySFvPCRFHZGiGrxOTZmqz\r\nzSns41mWhdcjezrnSyX5yv3MN3oXFpkbsUiP1P4jyVX4n+BDL9/8/D0Nzqi9\r\n5ThyvFjKBDc+sD/idc5E4mLBottkZGz5fW6wWKXZrgqnYN/Zit3kireOE8BT\r\nYvu2Drh4KpFipb1yRKlmLG1tcTK/JoOVRYefnAEGpAD8/2N6Z62KFQ5GzlVK\r\nXTmHy953Og0SRT8zWoRmRzyt4OxGETFOP9PE5H8mMpD+8i8NBh+t9/czPpcR\r\nlm4dauB7+RU/RB870WZrUbJ3a+5MRBQbTRSgJEMHSJ/q0S+1fyGhm69KVk+Q\r\ntxL5Rgeo3YGkd4vFCacFyjPM/BNZO1IH9oA=\r\n=45Rf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.909b48215.0","@material/tab":"15.0.0-canary.909b48215.0","@material/base":"15.0.0-canary.909b48215.0","@material/animation":"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/tab-scroller_15.0.0-canary.909b48215.0_1667448583039_0.7216166245487805","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f17127d5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7f17127d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f3da7f42a793d84977f2146ab247ce33975ec892","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7f17127d5.0.tgz","fileCount":51,"integrity":"sha512-le6/6WaT/M7LpvIdO8MNYYZJZzDMX3xzh+lr/xUeCm28jUFAY+zGT0uTDbv0yml+583m9qWH6CvSFz01GtXZvw==","signatures":[{"sig":"MEUCIQDBn33c9zem+nLHMeBFfYm5dVtCqE92UhSYT8/tyaD6agIgD0x+MQFC+dD0WElKi96VAAChBDLZpunU6m0H4K+0hzI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZAaJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmop3w//cAzq+CCz6ge3VJA0ZJsaJ0xXQ2FfUK7R5VoJwT9Lzspuoqlc\r\n/6Wv7M33KOkr8YFbBNUO4K1I05WtDlOrTHFjh/Rjg4BU0QwtZOwARBK45UOo\r\ndMIsdixFWd6e9NToPMeTPd2NSMCDqbu0AtwXWcad0bQDrPzsWW48UfepYREG\r\n28WhQehf4BSdhUNB9ipIbG2cubfNy7NPnXs+4qzHP6Rj4H//qBj52XCepPnW\r\nfP4oCMVyzrvQj/tJB3n5bvR9EL+ULVBbsi+HTkHW3wkjsnKYDGuBIT9qQQk6\r\npBnR7y2Rr8kpNzl+fuqok0WIIMWJEW+AAobfYxcpNmFxDk6ddGAVFDgZUsID\r\nbrrD94AsGQeCQZprBAjZbbxYWdvo2NbUYEWm1ijvO0GX0Af9FHDl/Gmvcqej\r\nttDE1dprLeoShHyQOH+WtPrgAHaY5UvWrn4tBIQwNzy8o/2j58z1b5vbHUSC\r\nsLFwxX4jMMPq/T/wh6yTmUSftDyyTS+OAeWzn/BWLwE5J7c+6ihPZrtbBcGs\r\nRjWJW8s9q6mkycWF74k2geVaKbYiPTGa2J28TkfOQfzI7AEb99U3Y8f+0qQY\r\nvc2bejTzW5KD+SZsUkaf0Lw/Q6Eb+MI4hXiwB6ULppprGW9S57WKCDfqP79D\r\n5juafiNpT2wAecw8FydrwaXD8K3b7EWWpBg=\r\n=jmzw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f17127d5.0","@material/tab":"15.0.0-canary.7f17127d5.0","@material/base":"15.0.0-canary.7f17127d5.0","@material/animation":"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/tab-scroller_15.0.0-canary.7f17127d5.0_1667499657748_0.1658389769177202","host":"s3://npm-registry-packages"}},"15.0.0-canary.da95e2a05.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.da95e2a05.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a841f09964d8f1b6948f51682c1b1faa11af0948","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.da95e2a05.0.tgz","fileCount":51,"integrity":"sha512-Bp1HEErd077oB7T0AGoCQdBc57UsnmhkDOj47FZTNUHBlOukuL7kTONklczlTs8sr/NNuXMahuygIvuvdlTW7g==","signatures":[{"sig":"MEUCIFCB4phM9QO1rujtRaYjXKcgnx11kSnx03P7/uu5MpUcAiEA3slj2BpgQddVZeFFr8pIilYqeEBw9Uyqhy/E6yj+bL0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZUVBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqSzw//Z6D3tj0TZBOJ7FZAKSz0f+Bj7Ab3K9hqc2zhOETXocA6PltM\r\n08wq2307veqhctv8Zfm+4ZYb3Zy4bw9+pZOJDwInXaEicy6dchit3lqZOZJP\r\nSKjgXeak3H72OlgGbJBUBR8jkKTX94G/DCs8sfb4efkbMrzn2JLcRvjcP9eT\r\nH9tfKd8ms/YwtnQKxyfzYQ8NLNqxbfmWcchzljXe337P/VSmSJKsGp1LFIxE\r\npoWOgy2na111JmIJswHxeRf1RcjXkzwtf0DXPjGahWjWHYP3saWe1mYKvuZ/\r\nCdqmvbHambKxdnVLk3LBSb1172VlB8xoWANiFIRxhNAzo8SWrWpdVqrkVUxI\r\n/FBPKesYGedfczaUDxllif/NUmBXR/wjfTVa/PFpVa/nZbJMxNv3u+kGrVoi\r\nacw5od5pJgiU2C1+k4QHb6GUFBGhKFIWRREclNSAQzLIeUlwFAa2EWCI3DB5\r\nt20/O2WBX0PZ5Hw8z7NztXYPh3KrQgyvPpVqQgJk+PRVSj6rkbJlDS35elNh\r\nos4ivzTgM3Gj56C3VWJYWrAtocGcAyWj7ft6m3O8yEyLJWIxZuutbKbU2R02\r\nkYLiNPzofYe1kxEkU46oH0tEN90hwPJwFxzrmZC+i049UUVrmMumE6+uB7cR\r\nToGwh+ZF1YsGWinwNBg2bzQA8mhzjcVuAuY=\r\n=1xjs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.da95e2a05.0","@material/tab":"15.0.0-canary.da95e2a05.0","@material/base":"15.0.0-canary.da95e2a05.0","@material/animation":"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/tab-scroller_15.0.0-canary.da95e2a05.0_1667581248978_0.3804799661184879","host":"s3://npm-registry-packages"}},"15.0.0-canary.4832e2750.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4832e2750.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f2e28628c630ba3b6883634a16535f175540a7c8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4832e2750.0.tgz","fileCount":51,"integrity":"sha512-MwtxfRPeB3CRTCMdALibD0T/8zvtb5XB31CDkTrLsfwL9a4O0f9ES9FFUrr9tVQ6kzPujTxQXaMb56pOZERqwA==","signatures":[{"sig":"MEYCIQDVndVUlcB48HmimGismzECzHFw4dsWCAOwJoUf7/bJtAIhAKX6t5sG8g7BhQ1sYQ/vxmcWMYNGFUaTHWRBW1TCeBQs","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZX0JACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq8MxAAnjE120SP22ZRrVn7wUyC3LBC0fCGk5lylivfghyFVAeVPxhj\r\n+Na1V/B5RcJS75Oun+6JxvFlQloRDJu2BSUMVm23c43xqEL1tubiTQSzsFac\r\nw70SU8UQWxHO6a8UOSf9dp9Xd730GdgyuwxHoxXV+RxSbdsvfAHmmBiHufYB\r\nyA8mzO5emRdx7+UNnvlAQTbJlVUvs52vGXEgOQeSiqjmKeOlDc5H/A6ipO2p\r\ncHqdbSBNWUSpJM6u8EYmuzD62mqkcnDT6wH1C24Wfv2OPyESS1OoOnQGJaX0\r\nvVYgvmbndGXKanEkVxSIkl4Ot7iNJuC0J3oSnPbFZM5x8LQQceQYiK9bnm89\r\n4ifAAaqO7dmZ6emou92hSjM7DjRPPITVNHR6Ig40FKUCXXT/6OtYas6TzqpK\r\n8AEZIfy/sUZ9bIDQc5HTKqUEr97TeMLryPU3vJgmHWaI496l89S9tAg+G/EF\r\nv90bfeAl4zCLHU44aWbHUqwmTGGVpwBOJ9N3PMdn3pD5T6mceyA8KjA3oFkn\r\n61aw4kdYuNhYKXS3sMs0IjwWzvylFbmjxaK1Lj8wBaaauM4ejpmY09WlvKCS\r\nCcZTDGXJPOKLfoAbqO7VktzQJLReWHlGzAA4ZfdWUzZ8tdXtqoRLoyayeiaD\r\nRL+EEccDCOy4Z8IMb9mrRJ0oaVqPLonAG6g=\r\n=PK01\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4832e2750.0","@material/tab":"15.0.0-canary.4832e2750.0","@material/base":"15.0.0-canary.4832e2750.0","@material/animation":"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/tab-scroller_15.0.0-canary.4832e2750.0_1667595529170_0.4149868410494326","host":"s3://npm-registry-packages"}},"15.0.0-canary.215506426.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.215506426.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7d6e004e7c989aac876ef08dded143296e2bfdf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.215506426.0.tgz","fileCount":51,"integrity":"sha512-qLR/opOOB36FTL2NgHNQifd6J1FoKeNY9JgdMGv8w52NLF4s/692lus+wnHQH1tADnVotyefV74gb7vz1J/Ndw==","signatures":[{"sig":"MEUCICtUzqUtL5yQlNyDetu4+1aItw8Iz0l4aieyhZHvHCIPAiEAsOXQfe795Ob8hRtUzeETRxT1UHyJky1pAKYPjYgH4Wg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZbdiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpj5A/+J/rJCwJpVz3zDM5lldjeRKu4ZJX/pku6QDYx/Pxw9PIzGv2W\r\npF2GrpJJvCpOFWO7dU9G0ynjQwRbZBUDMBgIC+tuecvaCf6jIRID0oHCsel3\r\nNNMlaqMPf9Gep9DDdt+vBYK93IQQTMvywU2QmnBTXjEy1dlM3N/7r/Szos22\r\nfc+tAQL8cNMVB5L2vrXavyj0I0ZTPJLWgd/8OQvomEVIoY5CkPG/19hL1GI2\r\nI/XEDmljErdaiTjoc/s0AbjfpbgCZHgkyiHxys7D/BglgX4/dqs/y9wvhORd\r\nsDEQqA1W70Xc3p9Unz/c2OsO1Kh6JWHUbxZMrvO1hoGPz/39UUjL3XBHB10E\r\nVkVM6PF9HdEeIOMWE/AmhEWlDoM0JjzMh+zbG20ysEiIwZtTa/J8CblD2dr+\r\nvhRArBvmkDWUj3/7lH/p+Dt3ImK42OqiGwsiR0uXlslXOl3KUFQzX6D1OKYn\r\nWyPcXg9pxmbtFl1sR/OAMOZlNSs00HalZ5a6K8TjE9iWr0gCsWxne6ZzF2Ml\r\nf8LW9xJu4sRelWl5xRsd22oboNoYCRbiVUR7kkXN6qcItacHN/kchnpSKctq\r\nDG32Wn43HE8eyTYtGM5SuEKnJLkuz6uxprta9wXsz4o5GIV4dearjR5wRDHi\r\nSCAeTzmjfHQ/FHSM5hvzAeft85riI1/PnPs=\r\n=tqTU\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.215506426.0","@material/tab":"15.0.0-canary.215506426.0","@material/base":"15.0.0-canary.215506426.0","@material/animation":"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/tab-scroller_15.0.0-canary.215506426.0_1667610466472_0.6721030014274978","host":"s3://npm-registry-packages"}},"15.0.0-canary.4cf917476.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4cf917476.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2fa0b5e731673b0b4159e3eeae45343e611f8b60","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4cf917476.0.tgz","fileCount":51,"integrity":"sha512-C4Qd7WtF6Cpjiq8iYlaAq/d0PTuFD8UTtnzjB1TVoGUv0otUI94NF2nRNRuFHxzj2W4sJrHJnGE1iw9ZeuGbmQ==","signatures":[{"sig":"MEQCIB6wqXEpfiKnShA3EE5eX0yXzH8GSjHgGmClHWtz2CbxAiBZIWa5L2/isrtOrFwc7XC8nUE0BzIzk5ak3VJUD1Ff6w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZqYCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHzBAAk0Rp4fErmmFyfp99Ivut0l0KaW026at4Q7HU2X0nLrBLZxEU\r\nuO/SEPvPLiWrlx6xFwYAxvuaQSz+q20Btmpu5nmsssoGxznujbAtQq91Qtyd\r\nSO/Vgt5VvVMbHzC/72nbD++t/oD+936QYagdLy+wkg3hZw3Vjflxy1o5iKit\r\nt3MSrAlkKJha43NfqJ/I8pMwtHG7iA5qrMEfcK51Y0f2tN6hxPUsX+OvhLn6\r\nw/67eBHKOi6YVD5XT/CEthqck/zMLaiHOyKbE/vOGaAu+ssW4X27a1QEyFc9\r\no7aA5mwhftFI/GQUhw1/u1ZFAXN3xL2cEGf8M6WH6T1mQRld7pN9C25ueccJ\r\nmVo83RvKWKB480N2pOl2Wm93n34eEtDSh203SREG+ZCAmI41Lvhg0BB36SQY\r\nfRDn1h8hZwMoNSRrWbdutdBb/S+FCr2ysZbLtYFTJKyY6Otoo8jLjhGhzIPx\r\nqgFrTdTXyrIC9rh+ZkWnN6kOtoo/NY/W5zdecN+zDBZSzhnDPD5qKjwTZhFi\r\nXYgSZuO7BqGkXi39g03YnRN4lQEMFlqhVzmQA+X4u9+/YaDTTh29CJEByMta\r\n5JYSUoldpzsWEEiPaU826BsF04O1dnIXZkDY7xJenBY86kkhnf7H3PtGaxoI\r\n7H28Ny7QWo9pEe7dB3j7QjtZ/aUnbN81hZ8=\r\n=lYN4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4cf917476.0","@material/tab":"15.0.0-canary.4cf917476.0","@material/base":"15.0.0-canary.4cf917476.0","@material/animation":"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/tab-scroller_15.0.0-canary.4cf917476.0_1667671554603_0.05359603808378921","host":"s3://npm-registry-packages"}},"15.0.0-canary.eef14bd32.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.eef14bd32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"545ac8363a4fa33516986f71837651b540cb066b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.eef14bd32.0.tgz","fileCount":51,"integrity":"sha512-bXma4CAy3n7VWIh37dHvmBlcqe/D31mIMgrQJyx2d7U0x6ZZaBeEQVvKPJbLnLHSuxztRK/hh58y40SfN8pzmQ==","signatures":[{"sig":"MEQCIEnkDzcMEZIQ8I2nMo7au5rxh5AoDXVAaGHGkFgL8l2JAiAUrCPPQ/yyS3izpWeLrToo6pGpTKt766piC9YFZZs6ZQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjZ+44ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrmtxAAgfSBEqaZswGCCnbwaEs+Pxa/bMgyQ9yyTHUM5ShQ1U3t/TKs\r\n8EHpRCVI4WFENM4I/vm1lfzORPjCg8yLS+kkitzNiJil/oeoqQ/Qv/Fsmu6/\r\nF04gDlrE7zFAHN6oeG8jjfPnrGXoVhgLCdO4FsOCrYVWgz4AYAZYZtkMI2cL\r\nUpCe6PCd7PWD/ME5a4t/8quhtVdYFt6Fi+2DctwYbaIIv9b2SaUV768zgt4E\r\nkPrWHHVn3hz+Bm+a5cngAi5tpTl5Mvjw6YKo1P0HJ2+zmX+KiovJvWppohxI\r\n3EvgEVoefRtiBUOm8stP8fEnB2tp1j2/YbxoHvYh3CivfHt+kbEcQuiU4hsP\r\n0eZ4UX8mcBF6iF6Cz5lPqbvbx2/fDtpVDasaIyzp3JRX4VMEofzBbEi59BnH\r\nqLkAmgOp9pA7DJPxmTxZr6ZJppgdK8wKMC0EYnQhhr1afqopaogc9IjBrztp\r\no0xN6tJ91zGvrDvh+OYJcvxCand0LywPeiNI3xsLvlIiQuT0dNl2mUp2cit2\r\nGAYQ+AtHyCbrb0dvW6oJ2JxfGlABWfa60lDPwUAofeD4UdeKTubYqqkpn5m6\r\n678x7+tcgtK7XP66GsGVDzKVPQEfitNwuU/eRRZiRFspyztR0vwywIpZVrbx\r\nvM7oHE2k5dJGydFn03SEO4VypQGAcMUKZnM=\r\n=wc6N\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eef14bd32.0","@material/tab":"15.0.0-canary.eef14bd32.0","@material/base":"15.0.0-canary.eef14bd32.0","@material/animation":"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/tab-scroller_15.0.0-canary.eef14bd32.0_1667755576173_0.6548352602222252","host":"s3://npm-registry-packages"}},"15.0.0-canary.6faa29fe9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6faa29fe9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3a17d8a9fbc1cc94d8736e57dc552a87b83374db","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6faa29fe9.0.tgz","fileCount":51,"integrity":"sha512-FmemZ6MVv58GSS5o3U2Dt9qrVpaA2bmC7MQLciRWzFuKsfLsUnRTbtIP85MJNRH0C/xvA024rqC39Q8kkiJlBA==","signatures":[{"sig":"MEUCIHDHp54ELtyxJoLvtJJrsYL3A8OSJB4wI5tBzOJS/lbAAiEArQxzAPo9qwdT2VUu4jdJUCI4AXbHMdZWsrKUmRzXCDs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaHg6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/ug//UgJ3ldH9qCJWfMVmodSELlSu7xknaMiD0y/4DAGFS913uvub\r\ntPpGrRgR4sQJjSyg5JbPOdMKFKuw+Eki1R/vJc+6rYTV8+Eu0QOWt9RuwpQv\r\nLmTaz0z8qdVJ7MpsNqAqU+Acc+lkC59w0b5DBcTQQIHkYZLGv9fUBYzCavXp\r\ni8PJBg5mS44BKdesHACmdtzm0ACTq4db4LY6kI0+YA9OKHlwz3UYA0nzBx/7\r\n0CfuvB6I1Omo8iJ8d5D/tcXX/bNUZ2oxY2x1gboKavZof5BTqKe50UHCJDkQ\r\noQAODyT/UhyGiMyy1RJAy1ZWwmNFCj/0VAAlCiQ5SM6rJU8zp9VzHWnw8Fvd\r\nYMAT68KTuUI5p6S7U94FK3q4Xid3VJ25zHYLC5X5Tw4Am/FutzTIbhTVPVJ7\r\nlAi8gGWTc8XBN1S8RH3dPPsUAWFzv0m8SBCrvRhf/8vWVStyHdjp6K6auJRl\r\n6alWNq02rx7D/nlVj69LygRbqLxBdgOHPiT1tJmconRe7Tt/csOnhgyjQgL5\r\nQ85RVYG3mLDFDuQy+zbZWQ6/ol5xqnMXlE2xc8HoC/xP1G8EqzUYn5BRfYJN\r\n/QiAnJySIo/ZXGb0E4y1zUusiU/OwfY3Gd4uf9oV9qDk4OSELTI27uTNabWs\r\n1Sq9fzqWPXtnOKayhwjTHzZdBNjs7y81vHI=\r\n=CaQ4\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6faa29fe9.0","@material/tab":"15.0.0-canary.6faa29fe9.0","@material/base":"15.0.0-canary.6faa29fe9.0","@material/animation":"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/tab-scroller_15.0.0-canary.6faa29fe9.0_1667790906404_0.08845474714347046","host":"s3://npm-registry-packages"}},"15.0.0-canary.9af09b967.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9af09b967.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cdc1f45b36f420cc076b8c40eb014951ff3b4c1a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9af09b967.0.tgz","fileCount":51,"integrity":"sha512-c904tw83wZjEOwWiQJhOoa+MK51uBRUI2Sx6Eo9th+lx/Izdr8tDGh0aIed1vbFLhM60Oh45Hruc2Z1NE1dr0w==","signatures":[{"sig":"MEQCIQCYdS1dKLx8EdE6fmCrVZh6kdTohEDI+PYe5e1CuFE8FQIfA7v7dB+iVusVZSNuSdJw1U5CrMHq4YChe33JMWAPQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjaU6SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmryIxAAnd+Bj61AzIRlLRRVj5PwZCpjQq4odg8nMcomjoF3p4LdhkiW\r\nMOhvJkN2xbLuY4AWDAS+RWeAmJtlfm04CrMZNkxKFc2paIF9ddUi0AC4Qw52\r\n3mAefVgxoCy4xSfuqqo2UU4wsmLM2eCiR2CTAa/Pwq7LImkBlDTFHSB7hTAW\r\neyT9qoMtvQnWSwmz3njyOvdH7irDLXEIa4rpKwCmGUkh0dtoo+/x7Y1HmOn0\r\nLVidnZ0IlfsvyrhfTqla5DS6GYCJyGnWnQg8FKZhnqlxywTkZiKKTxDcoIBJ\r\n0oxsl7j7hbaMDd6qiSwgcsRI8mnw+LacPMfXEU9byhQKhzzWgbrgSFth0tdB\r\nYwuSLckjU4z67XPYTDd+Qx2KdTTRJJQjrwL/RyXEAnNyLx8td1Q6v9lwzpa4\r\nj5LWgoV6R4grMf9Xtvilva6hIssxlPS3G/Oua2GDzyPigP68q5qC9BlMYh5t\r\nbYzSeFihuS5ak5uAQiU5qW9BLy34PrUKyrsykQQLLDvOTofg7kevqHvZ3m8A\r\ng625CdTLc9xFqzHDvvnIkvsB3zAeaQpIgYpkejBJgaMMstouvs/LoWJOR5Ue\r\nf45bOrkUILHqGM1D11EVsrMVTTdLSiWXmx59yvRiexziyvfbM9CntlLxJ4ls\r\nrMQLpHByINIeNrrGONzbHPjqtS/VQnlTdBc=\r\n=UzbW\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9af09b967.0","@material/tab":"15.0.0-canary.9af09b967.0","@material/base":"15.0.0-canary.9af09b967.0","@material/animation":"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/tab-scroller_15.0.0-canary.9af09b967.0_1667845778521_0.6961430316065911","host":"s3://npm-registry-packages"}},"15.0.0-canary.0f54fbb93.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0f54fbb93.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b5ea6b89a7689429b48516881d35d2086f0cab96","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0f54fbb93.0.tgz","fileCount":51,"integrity":"sha512-v0rRgqs1XqAJ1bhoM9q2tnGhgGk6wrXgd04rReoBryGsRZR0Sc5CEDAlmg5pLQuz2A9pBDeNeSIIdG8PY/vO0Q==","signatures":[{"sig":"MEQCIEdD3Al5Q7g+G3AeSKgz4ICunqXmhDOoTpqvjprk59kIAiBTLz08ipv5FQCsyK01Ayqy9RSOYYpDhy1Mw/gNGlRmLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjatD4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq3fg/+N3iKemzz0Ion5FYG/YzkcGV0TQdGCJM6ktu47nQCgKIwObW8\r\n1YJrjaTphMjwmOXE9q/iuU653LmidmxWBhMLqVx3HQxRCzf/aqp+mCxvtVum\r\nZHknnch/awE2Vbj3PkF8YDfqGekM7X1nQ/mQwF80BFHKKOwUSCJijF7Bm1xt\r\nNtrBu7ElbR5d8uc2rh3c+OgpRld6PbiB0nL2yZ4Nk06EH/VqupD7SkWeIKj7\r\nmbLzggoGXw+LQG4z/JZok14ulRJ1Uc/KW711V18w22RbDOiP+l2feiiIhhja\r\nJPoQ9eYAaeAJf1zN9cA2yofiFLKShDYoJt8SMSQulqZEunvhsvyFmYtukvW+\r\nBGgPEjrzWO2rrMLgd3V9zmSNhmnga/iV2HjTrA0cHcrnDusaj6Z1NVhP9yKF\r\ncW/HFY3PKy7HWvhqjc1Cij2+bnNVUwaUMVPtGSHYXRdmBaFKSrGe3fWu4CKu\r\n4pqC6R+Psng/guJ8cl0+Cr6UWgMHoprwhqt+QnV2MRDFpxOyxqrHOitNN+gP\r\ntuCqNWOlyM4VzcO7UXsvXtEc2jM61vCXu4I0DqV3hgr+Mlc/XXGVvkgHsBpc\r\n+4JQD02tmjIIVEWZR0Cm++JAiaveTaNCXzKxdfTSyQhfTkQJP3NdTsbazZRn\r\nmOFyZniq9gq5NyzGBNhzta2PpQ3JRfenk2Y=\r\n=UArS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0f54fbb93.0","@material/tab":"15.0.0-canary.0f54fbb93.0","@material/base":"15.0.0-canary.0f54fbb93.0","@material/animation":"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/tab-scroller_15.0.0-canary.0f54fbb93.0_1667944696455_0.9273325782329591","host":"s3://npm-registry-packages"}},"15.0.0-canary.a8d47f9fe.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a8d47f9fe.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"05366381e207b978e167bda63fecfdc46d359ead","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a8d47f9fe.0.tgz","fileCount":51,"integrity":"sha512-XhBV9qp1IswFEsYiK2PhTtTr1UhgraXgf+ZRtbAhFMHeNbwGegaKXlnBlwxXYFf/DPxNTtcuLIC9QlSQwbFMeg==","signatures":[{"sig":"MEYCIQDR9/2+z+PyG4pJjPhU/m4XIMgEQjoZZ8oDY0oH2rLvUgIhAOLtREsRK4lhMFfmJ88Th6rTHG3DL3peLuA7DzZ8Prl3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjayptACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqZUw//TZvv81BSKtmIC0p1EUtYhYwZ0tq8SrFCBXLSgLldpTu3FWYv\r\nJgOPXl5YGnsXFnGebUE8KwMgUxjbuOAbZLRw5s0RVuxszYhrj20TT9KYxxMy\r\nZNPAmSbf2GBEF+U3EWPm+H0G8P9bzpw+KKFhYm2gm2i42dZwwvuLG3GBiAz+\r\n6K0To6XzKCefqNZgl0dxQrP656nEPECz29s2rXG95ogtw0bAeElix4+sS0AY\r\nrcWGsVRp37qrBo5fZY1z3satrJwt9iZbsEXNnrBGVgcMaI7Q9nqsvkCi+2lx\r\naETq2ED9SXIlLltpXmIDMh7BUWYLf0HGZecDYOxYkplM32o7vMFvYw61jcTK\r\nNhm3ex/GeOOINMKTsui3kzgj9Y3Q0beI/GEsIuQ3LsQnwZwW7csQPXIalao5\r\ngLVWbEekwVw8z8Ai+dQ5Hd9M3gXwyutXXsuJJG7escNiKWnoZNKVXsto6TeA\r\n5DpYdnBSb0J3ZmxuFE53qHQtGZOG3A+zXaQ1XcMEEiJWPo3OyMvb41eS7608\r\nM3+w18KK59H8uxJIbrdibLFEPi9WaTEd2LSJrdliTdsZx6DU/aXXTvCTR2cz\r\nzS2+nMvf4QroK67le1o+NLdwQtGhDJ19A5ng3D1GgtvE+Pa7AV2tazKCxA70\r\nOK7QCWckg/sYz3ork3HbBdnc+Qz2RLG1AJY=\r\n=yowJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a8d47f9fe.0","@material/tab":"15.0.0-canary.a8d47f9fe.0","@material/base":"15.0.0-canary.a8d47f9fe.0","@material/animation":"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/tab-scroller_15.0.0-canary.a8d47f9fe.0_1667967596939_0.6070927386504568","host":"s3://npm-registry-packages"}},"15.0.0-canary.66a1e75e6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.66a1e75e6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"de55fc82c88474973440c5c936e12f7b341b014d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.66a1e75e6.0.tgz","fileCount":51,"integrity":"sha512-LzuAQpJV5N6gMbZNGQ1/izWDVE5jFCORDSfhq6Tg0oP0vKL0tTiNGqlZ4lcHIGUT0dRZQtziSa7mgZkJ8oC6sQ==","signatures":[{"sig":"MEQCIF1rsBX/nl+8WypHxdh3O7FW4peYC+DrBDEty43lsYXNAiAw9UxXTR4hUk9XdlUGM0fAS6WW2AuIz89m2RfMWt58Ag==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja3TNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAtA//bkdiDZv4zk1e8Z1dHIhBKwrlHCCLDA8P1Ap0LZSHlJtug7pU\r\nmgVNy3ASMm5ATmz/Myq4D34HNDrauNsuNOX7Xp3iQB8Gg8NOEOkuJkFIcgYM\r\nZ0GHlUxCT239fumP+MSmm2GykuGBK4tEC6wVxrXe3ebjzZaUFdvar1sY/3lZ\r\nj9F32W7MLDIbySf5yXoSmHhCEQsuh1UDNoKgRKltYWjyGL+H5sAh8ur2SM6f\r\nBgDRAEWDZNzSPBD14b3Fd0MxINim4QzRNVAZ7WcXZzZnwcvwoqbhbAISq9Q+\r\nxy+oGzRt7X1r/5IHQhx95ov+KZ0IUJILuFEMOlC81FjP5Xn6vzfXw7Wnim64\r\nnlvEGbxpJ8DTR3/irSJXY/v2v0iRWrOH6NnDkU5I1m9NGV5gKkhGeGI5fXNQ\r\n0fMHFs6WIKayISYGv+k52iMApMJ/y1oONlBxCgVdkUUcmFO7WW1iM5BMyznE\r\nLN1tEx/IQoGVbAYotuZEOvQ+g1SLiMdY4Rj7e9iuXf5OPnN4rNur+/kckvig\r\nszYHjXnG+uup3iaUCwqcDRJhG/gac6B4RvHLqZFoPONVuRlI7zZS0TbzGCcf\r\nNP583ZKxRcIVa/8muP9hy4HkO8wv8oxsMPoas/VcQTlhJ515w2je0+5synyw\r\ngbuGsFZW0Oruh4hIHXxVOU8qgcCpvwe+Ui4=\r\n=aQvJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66a1e75e6.0","@material/tab":"15.0.0-canary.66a1e75e6.0","@material/base":"15.0.0-canary.66a1e75e6.0","@material/animation":"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/tab-scroller_15.0.0-canary.66a1e75e6.0_1667986636907_0.3658016534459996","host":"s3://npm-registry-packages"}},"15.0.0-canary.5e5c2afc0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5e5c2afc0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fa1e81a6f92d85651a7f535c1bc5d067b5ab9e20","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5e5c2afc0.0.tgz","fileCount":51,"integrity":"sha512-RMiSu5dU9vu+C9anxYkEsTJ9ot2pGjKkHoy3K7/BVU4nWqS2Zoht0wglnZF79j9SXrTCivoS1quePmRTs8H2Ew==","signatures":[{"sig":"MEQCIGvaAjHeb7kdEf79bTHL57h35487fUT5vcBwSRJTzAccAiASQVkVgJZUx/+VgXgRTQTdi4s6mNv+VA0Oostc3MP1tQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJja5UUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq0yA/+O0LgqIjFSX3Z7zRhSbIxgWLABJ62GgdDK9by4y97kajGMdAi\r\nEDOWM/tfbWfIQEOWmgSnqt/lnwKRh/Llf0pFAhCQ9eYD1YTtcI6q04W9Lpb8\r\npjWJO9owjY3FvRYe4TwHiTkBUnYvnw1gQ9ZM9PSxOrkma9ZnQxyk5RQvKQha\r\nCcqLdhpaW8YaI4w0V6M6QqjcwMsxAVXN8oRQtv5enD7b3VzuynZtHRQ+hvsM\r\ngnrNdoIzQUqzIrasXDpqjJeUKQKRwnL1SbZeAqac663793mAA00B+7Jwtxfu\r\nDSzUjy8YQiV8aoh7VjeM4GMGu+Y1Lq+NujQnmL6GgMP9KNBFMaz0ubF4E1kb\r\nBAaEG0zvb5Y5Kb++VmzAfTTvbWFaZzSKHQbqZNDhN9K13QLSNatXLgG7fPyN\r\n9bl892Ad7thbxAcOS+DlQE6s+q3CTFoKYZ+8qxjXT49ukkL2a7NY1ZpayjT/\r\ns3MGooirkCJ3m84AHQpni03rwwjdI/SLDfacy3kvmpvxYVpqT9724gjr3qRL\r\niB+yBBE5iDGOJ3pe6j6r7hdacZA5y7SXAzBZv3gj9jmmnY/Ev/xEn65n03DW\r\n6cCJCJRurqc7sCNxM0C5XEqUG4UjJWKvAByQ67kcT7V4Gs5eDupWUNuPLQUt\r\nz08NP95rLYvDMmNsfCuhpaMk2ybqMybYPYA=\r\n=V7le\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5e5c2afc0.0","@material/tab":"15.0.0-canary.5e5c2afc0.0","@material/base":"15.0.0-canary.5e5c2afc0.0","@material/animation":"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/tab-scroller_15.0.0-canary.5e5c2afc0.0_1667994899860_0.7798258838950658","host":"s3://npm-registry-packages"}},"15.0.0-canary.3e3f43359.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3e3f43359.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2138a6ccd55e57d0eeee66dfb5ede389402be2c0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3e3f43359.0.tgz","fileCount":51,"integrity":"sha512-Mhp02k0y5HLJT6egTdE/dD1jkK3tWBUA4MB0InPLcH1snGq5Gr85M2f5vIU09sMaAc5fMxLVbh1gNFFSTPDVuQ==","signatures":[{"sig":"MEQCIEJh9NCAdcN/ElxvLAE5d5L1OKloPm3vdgybRTPlFyhxAiArnLbavpAVY1zNZIRIHF5Xz/wjT5rkOBi6SgtOTw5rTQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbAfVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpRLA//fb84Sfad/DceOPCXkut1Gdu5By5vSO1O8kNB9dzD1ucpeeRg\r\npX1pvnKJJOeF9M2C4s6+GZkEtwawHvVi4aMzPNA2uO80TN4cflH/gJPFkuIa\r\n8TPI6Qa0aTqoKfrVAVaTt/6Z2qev+QQ7AmLgs9wachE2Y0NRwGEMz75RklIR\r\ne6nWeL19o/Fv2l70oGlSpusb5VgtqST2U+L9X3Sfvza1ByXO9HpL2igkRuFc\r\nrsjqhq12NNjASmvOQS5pUhtrmcRqwLEwMPzgmf/uv2ClUvwGRgUnDCAdjGGu\r\n3gHx/raALXq6Otg3PqOpEIliBrE8F5VE0BQVv9EYHbBliHujmFCM9AafFs/e\r\ntza8EtOb31fSEfGjeGjglu83o5wqzpCg9CRKZz/v24zkV7njwRaPsmzMPtA8\r\nAq1UUgTotWrO7eHj5EQ/LA92VWmDJ9di8j5Ct9kEPh+basdZlUSv/+66GGOo\r\nOiwu/fIDRty1oupQ5n4nCeCml0CL0SpvmrTXzREQp8VHMlqlMRKzazGqXCbM\r\nWAEQzi/YfnJ5Ii7X/pTx9EYcqQYtgpRVv2b9NmavC/oqd0dEue/nQ22f6oC7\r\nnNJa2WAiE4sF3CyGiEL2PNlyL3T3sL/jsyMiddJsSk7r0t0QKFtcoHVtGFLP\r\nEgLivIyKPjq/XZYHWxwzlUBi9Mi5OO88vtM=\r\n=be58\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3e3f43359.0","@material/tab":"15.0.0-canary.3e3f43359.0","@material/base":"15.0.0-canary.3e3f43359.0","@material/animation":"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/tab-scroller_15.0.0-canary.3e3f43359.0_1668024276982_0.9345595221660032","host":"s3://npm-registry-packages"}},"15.0.0-canary.3f667fac6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3f667fac6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"318f1d685d16d19ff2e4766748d4ca495bb4e042","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3f667fac6.0.tgz","fileCount":51,"integrity":"sha512-e7aqVzpnxNuSsMbj8ftpuinkD0KYkRKlqwpxAaPaA0sYLwJLPEFeZa2zBsZze1KHvj/vswjkdb9afKBFIhduRA==","signatures":[{"sig":"MEUCIGXOd1JYU0iLQD66oe693/njDFPUylzutaqHl+WnazLRAiEA4sK7KBYnfPnX5poPzQF7PlLiWLKt1I4Yrufaho+7cxk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbCTGACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmooSw//ZZ4psfrcffkQbvJ7EC6QkJAW1MrHkam8JYBo4taKYMoDmMP7\r\nV+LyqzqSn3cR2uhUZ/7lij67pGU/1NJ8hAc3USfXwbv5DpobiQk2jUsoRoL6\r\nXTLAwKeS3hekLeDC0dvF+cFp4xQLtfXFSK+5c3bZRkWqtAYyMGvvRirEdW8y\r\ntAn95oo5NrQMvDoyOsnzTAC2Fb183MQPYUaN9/6V3t4rPXFKltYfBN7XMln8\r\n4i/CJ3BwM5KTko4syGI6lMq74Gj+FHZ8hksrtCiMtEV4iiFpiAxWErFr+GZv\r\nYeEAinpw+yUcb9KP+KLjtNo6CUvrVVaynVFw5kwVeYF7tfu0ZIWjzvI2LUCf\r\ne4IYlqUF0XuwBQwf7xaousbN1kGSf9124Vy322ndPVg04BXehTJyHhVOjsFS\r\nWOgUt3KXKS6cGc64j+ToAcuZaqcluqZCvx9eyVs4n3s+UdZPMNX1W0ScTZYc\r\n2fkNb+fYTFaoLo/QUKU+I3xwbpGmpMil0n3zMRSuWg0AIMWNp9aSV0b4s+GE\r\njbu8KTkUI5eQtnKs9mQJy5LyolaU1G/Pawkvjj5gx6Uv+NX3UcCmz6EmCviA\r\naYoZw4rG0sBE+RTLhm7RSZ48HJcS3t8n1v5cT9mGaV89U2LzEJsWgXiA6cCY\r\ng4R70zKagYhcKMDS1WIuiQY09BuZM3FPR+w=\r\n=n2Jg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3f667fac6.0","@material/tab":"15.0.0-canary.3f667fac6.0","@material/base":"15.0.0-canary.3f667fac6.0","@material/animation":"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/tab-scroller_15.0.0-canary.3f667fac6.0_1668031686136_0.4549811093573699","host":"s3://npm-registry-packages"}},"15.0.0-canary.faa28c1c5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.faa28c1c5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"98818f863801a098470d66bf4fc769cf305e1a8b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.faa28c1c5.0.tgz","fileCount":51,"integrity":"sha512-DqeOC5dDJQI6rY5bmcjRjDIPxCj8YvpiQyO5VMhMGsReyd3UVATmea9ZikkI+Jdnmsu0/LY+8OyKaNHSqQ73yA==","signatures":[{"sig":"MEUCIBzlA3EJp6lM0Fgaq62yMM1B3dG2DaGNON16dXLSVoV5AiEAjQ/+vz9qHj1o3ccLgAla22m98rMn0oNWGdjXhQYwFT4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnpVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqjBw//SkSNRJNtSzMqME/5xjCH2KzVAVTpUnb/VrbnY50h5AsmHKN4\r\nSb+mK/1Sx/HNKgcuJp952F8TBr0dvgCKo9p5OGc5JxiRZif/OkqRFmDsbMgs\r\nCdYoqlLd3wnucPriAWl88ZTKD9Q41cjlRjHtnGLAKvMD6mIAzS8j0iAYtTlF\r\nG8NOkRithV+v4sLGTp1vPpM4WqombBXsO7aAfonUMvcAJjEZhx2uvTwuJR6f\r\nKbuybbN+pZF1382ZGKEFithIoq3/JbwQjY2s2rv9OTvr9Krsr8lYvJtYeBEy\r\nF3/AjL+XuEZR0oTtXifgZMNj/V2b9pk6VnmHGwOrcWuY3viIbJNBhd0QoFXa\r\n+a8TBODTl3GupOv4D6w7MDXmiG0yt2x8q0H8HM6xTpCmFQwkqVsGqxex7CrP\r\n0vyjuqGxF+g2zKluJ2PbPuKRwYNKNg5ZinzVIAO75dW4ClKudkUj9K/nIfOb\r\n8Z7PAqHWNcM0wIF3v/okRhOBJnJfMkAq3yi2+031co48e2abkziX9U1CRT6C\r\nwD+Uhw0HxAS5h3SARh1ekwFXaG+CiTiVbdiQgwkcJqYK+PVMGLpY6iL2zvm/\r\nEd5Xl3/2fxLiLYafxl+pQyRwewmwYBsJtZ2s0LpuwmP38l2lzDPws3QuC7Vu\r\nanBBsyLVdKHoP4/tDHufewPoDblf4YRap8o=\r\n=ovEw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.faa28c1c5.0","@material/tab":"15.0.0-canary.faa28c1c5.0","@material/base":"15.0.0-canary.faa28c1c5.0","@material/animation":"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/tab-scroller_15.0.0-canary.faa28c1c5.0_1668184661538_0.5251912252576314","host":"s3://npm-registry-packages"}},"15.0.0-canary.a868c7866.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a868c7866.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"54488653fe9158136fd47a39c6cb34996781660c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a868c7866.0.tgz","fileCount":51,"integrity":"sha512-yH6uSFJmG2xVS7/rpe1x6wms3w14j06AvFT9omC33HRsdks4VvQ1oDYNPE2AGNkZ7EAfwGBJojQXfJW7TaKK8Q==","signatures":[{"sig":"MEUCIEbfgQzMC3f0E2zARrqnxeuzpmuQHTA5UlXXPIzGfYqPAiEA7iYRWcCNTjjgUfb2l23zfzsrsIkZ0EyXtEbzrRT0ojU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbnp/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoA+A//YO67/SquMqKGDCPmpYH9+8w1l/cecfs95Q3NHENkbkZvOaxz\r\n+6mgW5B1cjDzAxjjbxwvjZnd9UMs9N2b69O3TEFWZ58nqXZ+8xHTumz7UNvy\r\nUBOnbqi/2c3Vv87anImiMsVkdx+SkfinrrwWvQ9aMnlrfPAANfuhmCDEgIUy\r\nCc0/+UONxg+NPRW9ZiwUiRHn4Xl/2limawK4tmPtGXClV0yrCWJjQqyeiKhW\r\nvHVWciDkGOvaH6nhj7YlytVLjiJB3puGKOrAd5FCBfm1dDbEykaVRYFkJ9rp\r\nTnHp6EyW1RsqUKrkrYUJVolRkgi1fZRzCPPbADTZr/GaEAkDNPK/Z3TgxxJ9\r\n3AgSHI+RZGP8Mkg2E847A8/rTb2pTeQ6Ql7u7WjNKGYcjxoIly/MbCL85aZI\r\nCo1T1aHPeV29BZU/I//DIy1W4cUtCn7R/6tUmB2Ns/ajRCIhevRSjn+dlHmt\r\nGkGnKgxNpnshvlNpRtKjsYT+2dXEV4IX3fxXXUbKy0FOj0FucDzD+wDjVNoX\r\nh24FtUT/FuNDdHq6DvEJJrhAAjr9TKK4th8d914hJJI+jxevErBasIWeKqF+\r\nqHTpmL2G4sXL36hXujlVr/m2fsQryQmy1AY/399vW4L1WoKXf3IQJZ1QJOeO\r\nzEYI2V02hZ36Ev6if/Crb7vABjd0a3DSzwY=\r\n=XKfE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a868c7866.0","@material/tab":"15.0.0-canary.a868c7866.0","@material/base":"15.0.0-canary.a868c7866.0","@material/animation":"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/tab-scroller_15.0.0-canary.a868c7866.0_1668184703233_0.901703686015759","host":"s3://npm-registry-packages"}},"15.0.0-canary.602fe8efa.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.602fe8efa.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"89545b93a3399e1205bacb38aebc9634636a0719","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.602fe8efa.0.tgz","fileCount":51,"integrity":"sha512-kWiEU59+301cEf+/URjQCRwrp0IVTaHARo1aTX99Cet/lIJ08eunBxeVYWT5ah9WC9UbtyroTnHpNCbLpC5miA==","signatures":[{"sig":"MEQCIG1eWkBx7LccRSbhUNwJNY9deykFF66LN1p2vO90LSzcAiB7nYmF2emqfMfRjJAKlbr4xrP3IA0KoAMtsur2UHj3tg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjboLCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQtw//b5EIJ1zvytcUeXnHLZ/S1J2XWs9VGLDnQqwQ+ixA3+Mwkbst\r\ndKewkdLpehreCvwHfxi5QreLTsqnokYB1CmMaWGQ9cv7bVCWmn07OW9dcSDG\r\ndnlr+9csJUDv2apurrgL6UDsLwhzOtzCevHoDcCpGZJKyJZ6Ps3FRnpVDCxs\r\nnL660ydKbumiu02jAPetqFVwINHgAVR4JDQ/hvMWKSEVYqdlPZkHi10FJdu8\r\njipkec1aGm9JkpqPkou8NC2WivzeLRvtcwucunL1GCjSaK9U4Frfj5871Ezf\r\n9FgxBWosKHJagmizmOpK2eVCmXA85SG53YDBWGSffTVlS4KKMDvzdbiF6WDj\r\nCtt2jUYVRqxINfg6ttSBGNVDbrdrn5bYaI6in2xTZNGIu+8/6O7/IfgUFJkn\r\nAuG7IZ3xG1QdkXTKubx3m2xEaVCWQxP9JaMeemQSGlML4Ire8+AA9xqMBeOB\r\nIiLbZCWKF70rCMoLwE5LH5Bci75GkyzxIAh7J/pItBVuGMgWV/o8jt8+XgR7\r\ns1yuoT/egr8tX4lSEM+dOiZUMKPmxTBktZB3I5cgNgNOd5NVAjqms9JG6H6/\r\nCL5o994D4WGAoKgs2EvoiNlXAbHO/dnqcbCyfAG0dbgciQJHUe/Hayj7FrRE\r\nWrKfUsAToj10yXd+fXj07ME5Q8iyauPvB78=\r\n=n6h8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.602fe8efa.0","@material/tab":"15.0.0-canary.602fe8efa.0","@material/base":"15.0.0-canary.602fe8efa.0","@material/animation":"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/tab-scroller_15.0.0-canary.602fe8efa.0_1668186818262_0.4617140226028562","host":"s3://npm-registry-packages"}},"15.0.0-canary.558c2be62.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.558c2be62.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1f6f88cce84385566fba5b91eb73758eb13eee41","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.558c2be62.0.tgz","fileCount":51,"integrity":"sha512-qjRCPWssQ3/vihprobROmO2ctityR6YbRUyK2ihnZ/9swB+KOy62H6THULvVrXq7YulaJeB0EcZ6sU8/NHO6Iw==","signatures":[{"sig":"MEUCIQCk8T/k6kOtfRpZae/LCTes64mSPX1waw+jMjyZ+ExotgIgbHU8wO2hfI7TqaulnvcTE5NlmAF5DMFNoGTyitouT3w=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjbtDjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbqA/+NQ62AGX5n3OPJ02oeExIAl1eb2zfeyLZk72bE1ORPzTqLZqf\r\nNwMTUbvgLgTfAp0bNhOvnbaSvlVoNO7peMXV5YVuQiN3DIHsmJ3aW7iniLjN\r\nomw4+T1cG671yiVjpVsnjat/d8tsVg/OtDelcgRkW4v5sgF+70Dure1t+L/G\r\nTUmZhg+vJcp6Srii3nHzOtXDm9GoMVZ6gfbIVW7Qnrx6RWiIjxkTPunaJfOE\r\nDyN+73TolgA2rCmMHjLNaJW/Mk1RBh61bTTUUVs82cuxFDK0UYyuqxjqmFfW\r\nHq+A7G5SKys5J8M59CxYK+dTXXoWDczRJjFVOelDxV3w4w+aLW/C50nrvQaJ\r\nQCismK2P2ObhJeTTt0i7r9Tr4U3steXAMHU9BN797mdW7OvA5SMkviQMa+YN\r\nFeIjHFopEtxGS3hc2zXGkmZyizQybt8nWLlTtaznzDR607srd/lgVgt5LWmR\r\nL85Hwrj0fU+puxtvaienwy+ixTZ7iG5W5h5UNOvN+ukW4Yfe4LX7dQldziG8\r\noqmb+jA4Ij+pVLFRjeFojDR0EzcT3vPqkQhDgMItPv8VTvobj1ptQ13HHhP2\r\n6R6krR/ptccMIU/ZJ9O5i7oEKZVJgmjeIw6PgsBeMra4U2tmS4LTSwDCF3xe\r\nTxji1pyl3XX+0C9a3Y+uXFri/jIaCNkQeN4=\r\n=DSyo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.558c2be62.0","@material/tab":"15.0.0-canary.558c2be62.0","@material/base":"15.0.0-canary.558c2be62.0","@material/animation":"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/tab-scroller_15.0.0-canary.558c2be62.0_1668206818905_0.7661228156800899","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5c13a7a8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b5c13a7a8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c51e563f4c376461d27d24f2384c2a1a01852ffa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b5c13a7a8.0.tgz","fileCount":51,"integrity":"sha512-+Zw2PSfPjCMHuGdwnehBWai8UJkf7mKMdbWKzVnnf52ttNeHnizBg8nBnm8y8kaD1MgXd2wKuXnebRxDzlZK2w==","signatures":[{"sig":"MEQCIDCaEd6PDErV9vrW8pbcpVReKiS3JtiEW7cnGPy+7bNLAiBOFqRWM58NarpA6/QiGyB0PqneuFENv7czK3XtRDNrtA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcmYYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpvOw//aGbh0nN67OAEk4z0n+9bXZ5BzlxRA0SbR04xaSOHPwvmgVAD\r\n14UdfIIadwg3r0MkAblSuU0+i/umCouIqAqBluvqujfDIoij03l2Et9VqBiw\r\nvCj/oH0zaqbhM/OxA3/sC+LF8Dv/le2Bt4OMLzeQ+fW2n4vhGvOHZDI4h6OL\r\nRngWsHSczx26EoesjR2/GnSwz13SBUX9B7qIiNoP3dxj4teEwnp2lrjDTOnw\r\ntsdF2Re/n10HOtR1FHQq7AW8SNfvlD2hwIF1m4J+mqnZ+bQ3Ln2Gc7TiyoEF\r\nQChjEaXKGCLelX9/v7CPx/U0u6DQy5tJ8NrRg54ETeVskXx4wiwzMgNHVQK5\r\n1EpJANYA7bBFprzj87lPhojHMGbRL933zMQc2HlbANn66HjD6JYByK4hldxy\r\n5IsqvpLxSO6mOPGwIsogGvgpkfIZBVmJ78qC5yzMFh+W9Jzc4arFlwO0gcDI\r\ntl3vJXJTt4VPBY+AubZyGQFsCeY1kIrI7SA70QU4UABAT+ChoJlc/dy7fwm/\r\nwautQxFY5YXoEUTOJhDjky1+Bz++2hUotYpHQsr9RoMoQpCq19AuS2GGTeyc\r\nh8STdvpFrlIUnR/hbTaekOo1ADiJ7ihBLmytSBVkEJNCNmMmpl8SHxRC6GCE\r\nbwz+6XGZ2OZ+Y9v3C3TDyRGhaVZ2+plM8zA=\r\n=JSI7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5c13a7a8.0","@material/tab":"15.0.0-canary.b5c13a7a8.0","@material/base":"15.0.0-canary.b5c13a7a8.0","@material/animation":"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/tab-scroller_15.0.0-canary.b5c13a7a8.0_1668441623989_0.26225700524409556","host":"s3://npm-registry-packages"}},"15.0.0-canary.a6e1c0702.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a6e1c0702.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d74227679a3ac2ee8cf1cf823c2fa8c989dbbe50","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a6e1c0702.0.tgz","fileCount":51,"integrity":"sha512-VtRkiLD7ZSMiYi7yYYMy6MzOw6WjsMHqChtnjgiRnczktiUEQv0+9P0ZsEigCstZ+DlXMWRqoT3WKKfl7cOfFg==","signatures":[{"sig":"MEQCICn2HiNH50eS7ambACJShNFg7SKpu2OBAJiY3UZLGYewAiBRnYVIVF5J4stgKqgOfRwLfyv5bjUJkWIwtUeUTUNtLg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjcnrSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmoBAAmaMD7VNrBfJaIP8WAM4YXfV57jvRRknwuAkKVG1ugBvrxIzf\r\nmpgXlTdhLB21Zrvywzr7H+gnJ0pG4sSJXOeoFrYFIDLaMjalFsDsOqf0RKXB\r\nvRmvtluGvRYV05RoUBL1fce2Zg+AsFbPG5z0lMgE42a2urkGDrNCabjD3HHR\r\ncmCQGGJ6haJsnHJXgP+OSYrMwhDp8KpNvtjprE3UTFPJStOSfYEObjlR+HFY\r\njoTKVbJ8GrNA/nonkzBgIde74jXavsUQP+SAuXK9zqHkEEaPekYUOON8s9N8\r\nzYC9Uk/26396nrrdHe6bLaKA0ppQkfMz3zPtqB33kNxhVi2Hy21k8VxMHShq\r\nVZtXlNzy378VtHeGQy5jRMZu1lDcfCMQGLOn2CL/GzlBooMLSuU0tc/pMWng\r\nOaoxhf2mxHceKopfkZjW0MFmJerNpM8bvMcXlw+ooENQG7lJGSNL2Fwvr7GI\r\nrk9JeczzVmE6RPLctJXCaS2xcZyCzn/e2ClTCLkEzDEUDgP1Zr1Rs0O48BTB\r\nlg69baZOXEDE4PRTq4wqQYoW/j9EkXuHADmFtO5W93z15REazQez/YV++Y+9\r\n39M6MbiJhLL0PLqmle+4IYCuwRxTniWNfCKQIplypnoBHuwr+5NKnWYxrfb4\r\nrcQje/OR/eMPLxfgKbYhAfgxfwaJ4jxOOTI=\r\n=92Ap\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a6e1c0702.0","@material/tab":"15.0.0-canary.a6e1c0702.0","@material/base":"15.0.0-canary.a6e1c0702.0","@material/animation":"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/tab-scroller_15.0.0-canary.a6e1c0702.0_1668446930114_0.358115311780977","host":"s3://npm-registry-packages"}},"15.0.0-canary.b6f8a06de.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b6f8a06de.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"30137372b54bc9f7e8b32e99914388e92a64818b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b6f8a06de.0.tgz","fileCount":51,"integrity":"sha512-X3qSI4yN/0JYdCrXK7yNGF5GWbu8lJepAicpW3aB94syrSYmOke0xvXs9Pp6KBB0o1ExQmDC08Ev/ki/54IFcA==","signatures":[{"sig":"MEUCIAxAtj8mMBrGMPvntqgNQmXG/0wFtcBFUpop7BXzZhbQAiEAvbk6ePFMTpeibm7yMYM+922Omni8uV5WAsk2EDx/y1k=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc1wlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpuBRAAhw0k08KYxQqL9OXV9sPz88wg8ZFMf7W2bD5LfeWBdmM1dmfI\r\nQ9yVXH06pFc24uznF5Y8koi07M3c1dfjs9uIrbSS6xR0R8HsqNWIXR4XluXQ\r\nRULocM072FHMcyjckHH89usawtQOPU0WGJRq7SLHUbWA0XzgERJTxC2/lAQB\r\nCAyY//Eua4cJHCRQD4nCtuFqsVdqsTiwDmQxjy4AtLwWtVAG3QHAxyTRMIAX\r\n1U5BseUfPYGTg7YFH6jnD6ZrgssBSk9lIjb8jhJ4FT35GC8TrfMQdlf0Wwx/\r\nUb72X7X4DpdAjbzzrmnckHdiH27XiVxabz5HD3wv4/powJchhev2pwIUGU1T\r\n7/ywP7PWlobdY+FqLS2qN9OWawBzcprRAMtPu/oFwcOrNyQ4nKPugJxMsFCz\r\n6epb2glr/41KsugHQuPYZW0UnFSkPwW17Bg1+7MFNoGEfcsv8w2QnNbfiQt9\r\nuspHBpcRVOR2pxEo7Nk+DcpHXDqGLvwCG5LHivvH+04RqImQEjyPIFnP0m58\r\nHjwyx7PCpIsypaWoSu/9H4Cnji8kDG93bxELEqGgeA9XwBxARZxHT1fhIcYP\r\nwku842sFJXQqhRh0G7UUQmpRNBSZ3+cRSqUBuOCGiZSlK3ePAJQj6KJpU+rt\r\nR5CTeVtLqYxGpq5U0QEQDZ9Qm7ji2fanBqQ=\r\n=qZvM\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b6f8a06de.0","@material/tab":"15.0.0-canary.b6f8a06de.0","@material/base":"15.0.0-canary.b6f8a06de.0","@material/animation":"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/tab-scroller_15.0.0-canary.b6f8a06de.0_1668504613335_0.605140771474675","host":"s3://npm-registry-packages"}},"15.0.0-canary.0163f3ba5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0163f3ba5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3900beaef51869684fb9de2befc405e0579837af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0163f3ba5.0.tgz","fileCount":51,"integrity":"sha512-8p+EkLCKC11v9SDwgBwddR0SI5Jj1VQ6NNfhYFGBDtQa/Tta9otuyhjfG482q1T12+fVrWKM0YwscscBbG/KJA==","signatures":[{"sig":"MEQCIEQCGarJoIb/sKrTMVNinl0s5WAxq9gUBadqkYEGhNJNAiAcqe1f1boVCnQjsaSyq7pHgytN9uVPtmojoOAOK65aiw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc9SPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdtQ/+PR7kvKw6tqqv1+sjLqMaApW0aMUeMnxAgxtrMlAzm2MsIgxE\r\nPynEGdeF3cHgRFOGipmb9b5rSen7Cs7uMAvVAQnlVYlhNJZUrjlE+gh+x+co\r\nVp5Lh16DbzaAQ1R8nlShQp0ReJu120cwIVbINSgKmitedOks0+dMesYOxDWo\r\nlPVa2EX2HkO7fGkvNNjn7lSNQIGpoAUKlyFiL/F8l0VSwxdLGqvyo4rkpkQz\r\nlfDSpsxnl/8BvRk+ISNYm9P31I5TUdsq16TteCPAKBBkbn6yFLmkEWTpz+dP\r\nS4uIvGHXSMq4m/C80AayptlbG5DnmSPdQWVAT8eN+bJkd4dauqkZu0mKIdj2\r\nCgV9UgZWZBgjHK0/sqKuW9q5vIkOnRVl1QK2vlIr72hQN1ajfmqQoBXqpcmu\r\nngbDdc3LQdF4nx3P7MSEBp6vmxsYuv00yZoutYQ46cv/OhzIrI7Ac88GOlsw\r\n4TOjXGw0GNSEDxiTrtd/kp2eYNRk2leiEYF1V5F8qdYJS176Mjd3pl0V2CK4\r\nMu8qqc9DcnMkRIezN1kUAUCwfg1iDQ6ocNqY0TmQvx1SetxCbdSkpA0OPjmq\r\nZwXgn31fdpTacbVfQx4g7oWg370YJUpnXArj6PvJruUK3p67gQCcbNAjg3LW\r\nhejVgtdajKMsMfo6lLdQBZ6BziQAzq+qcd4=\r\n=6sye\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0163f3ba5.0","@material/tab":"15.0.0-canary.0163f3ba5.0","@material/base":"15.0.0-canary.0163f3ba5.0","@material/animation":"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/tab-scroller_15.0.0-canary.0163f3ba5.0_1668535439638_0.0396640953990528","host":"s3://npm-registry-packages"}},"15.0.0-canary.66c5cbb94.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.66c5cbb94.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"39fe7c122b39d48eb835c667b366d4208e79f577","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.66c5cbb94.0.tgz","fileCount":51,"integrity":"sha512-6YJ1LOeF8pRhWHMqpgXUhUzShRaNnAfSUjxWVsSabtpxvD5C2nzKKczYzAt5zNRBeCWB5wUKAmSuWBwy57Q32g==","signatures":[{"sig":"MEQCIEgEEwdirf69VD96t+M0HA+GZs4j49EGKaelf1qWB1E2AiBX4QMxDd4doH3nRI0Jt1ZU649zCFHSyR10AT0o883LUw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjc+kvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpm7Q/+O24VdXQYiFbZX8I/bU9RVWKM5WaNm+1z7ZchB3sLJ2yTWphf\r\nt3GlfVffMv41qzuvKiZHIvULZZ9MsOO2r6aZ/qLDjyzSsWRTDUopJigstQZE\r\nqLW3bthorGb5Q6AmClshqkwCTvbL44U/CdXU3pDDKB1fkXF9tK23mowP/WZ+\r\nQ3EaobZQvu+iugu+R5jkQOh3xtxxWLlrZzcB6/B3WW5sQD+LO62NSKHa498v\r\nelzuesMfgUVOqj6XIqjLqYkvgIT1pZLs0W3UAXVup/tyBAdtH1Dx4JascY5D\r\naXqiTVoAmLwvDCs65SfjU8Nvp8Hx5frX+WcuISnO/sPBgaj5v64DGStNFEJV\r\n4ZhICNUzqFMnpSvDAT7u3APqbMrPQ2XaA/PH+gT1B7G+z2z4HqLFtGfmD4WB\r\nwpg8LTer5dj0bdl/DlMckq4sO0wKiGtTDVZbZqg7EIs+V5PcrZ7GoViToV4W\r\nI2jp1VOJK+XbVeVJAIhxLHrrRAahhrv/tyE/Np83A2nADKx0p7kBfbqGrrTS\r\nQoP/aSJx9ibu1XYRXs9eF5nlCcOW86q/galt+kA+br5OKpzoWKOx1mV4anZn\r\n8FcqtCRBdpELFZb5nbOlgqBZmGz7eb6L8DxHRKozadcB0AubXvrZxy4m0FV5\r\nVkYxEWkgxU+wE8a2D8BaGM2xfpFW5zdRm5k=\r\n=Yvgy\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.66c5cbb94.0","@material/tab":"15.0.0-canary.66c5cbb94.0","@material/base":"15.0.0-canary.66c5cbb94.0","@material/animation":"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/tab-scroller_15.0.0-canary.66c5cbb94.0_1668540718970_0.8235771974238661","host":"s3://npm-registry-packages"}},"15.0.0-canary.b01136063.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b01136063.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"309b23bc0583488c75d13513ac42db194a5bfe72","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b01136063.0.tgz","fileCount":51,"integrity":"sha512-uRtjV5WZ7A3UIoD7iA9ufeTj7iUSC3x8cV3CAytSPbHKYSqZ+Ce0dorgYiUko+VRR9FJisvUSkLkJuUKkEluAw==","signatures":[{"sig":"MEYCIQDzNe1gYyD5V2sOQUTU5wTF8saDzt3P2n/jlGzvA1asXwIhAJJBCUGwivpQxFgtHxWAkehBDc7NNrgSBX2mwN8GUN2n","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdCwrACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpyYhAAlUGducWQnA6xTihrFwc1dXoDpdM+OXrC8EYXYS94WOYL25BM\r\nKmDnQwBkZEYY2W3asrBupl4v//arJRaWikMUgCDUx5aShp4dZmTpGv/nlfUu\r\n5xKXCyk/EB4U5ZKFTmNhglngn16Dj7tZHtp5nZ21YYaydXaUDltS5c8HRrIv\r\nTZgo6yW6xYxAzoXAEYuxEWDtk/WZdQ6rugtfHUnVP+uACu80MFgpHsdwwWdq\r\nMkt904Oaml7mdqPmmk6PXaPrYEJrlTLuhUPRfKAwiDeT2ZUDDNvbyrjnCjNu\r\nelHnzJq5P3GcXd4KoqGZw+ULr+5ej5Io8R3d0K4N+bJQx37rtefhw3HJeU5c\r\nAsMPBL5U5k9f6gIwRJQwXhGUogtLdlLzYLWusixJz7o/uD09SEPL5emzCnNo\r\naN0BaNX8IuFXCZDfTZjyKlJhf5vFhlWlU0sg6lM8PPwQoUzNNOqTtXsMAPwP\r\nCvd+IK3XJHX8787rLI+Ivf+W2L1UuJqu4t2H9bV3qiHiXDmlbIOZCBTFH0vM\r\nxiaO5JuXIbzaLpZOgTSgORF1h0rYC3660h8thKA4gLMFJ/hHAqWbkXAzqVZy\r\nSNT1qU2wr8S84qCHmcSmS+LPNBaLNl9BmRzGN9X7lY/Woe7u62Wa+sC4+FK/\r\nXtwebOgtGwZtGH01CV6aTSKBUagLjiDfQlQ=\r\n=+i73\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b01136063.0","@material/tab":"15.0.0-canary.b01136063.0","@material/base":"15.0.0-canary.b01136063.0","@material/animation":"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/tab-scroller_15.0.0-canary.b01136063.0_1668557866967_0.8758107439168223","host":"s3://npm-registry-packages"}},"15.0.0-canary.01da0cabb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.01da0cabb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ab6cf18edc006e9b6172c18d8bba0ee2fc4d1928","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.01da0cabb.0.tgz","fileCount":51,"integrity":"sha512-X7hhgVmFG/3FeovkNMMJbPn/0NBZXu95+BrBm4J8zfGMrEC0mp14PBBNbDg6+Nkw9CMQOOXctBXUb+DQN6xCFQ==","signatures":[{"sig":"MEUCIDmj2Zwss2qBisaGsk9xzTZMQi/tncH4IqtZwmyUQTyXAiEAlOWDV/x8++dfKAzrjd7MjrW8yn/vmldGMjlb6swovro=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdKodACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmopvA//U5Gpz3H124I454pBjNvuyGsmFuP6l8EWpnu66ijas/FcLila\r\nwm6Zjsn0K7wmAqaFXMbuAV6JHlUQXZqHewUhjCz9TNv9QZH3tEaPP3ENjwdi\r\nz9k1HPIoLjNlk2jWavHiO8QQG2iQlTsdgRfQemCCSlyiVK4oIFrnX5W/5aiN\r\nO3hhw82DXn0dd96MNKH8w1SwUYbgu4I/PC3/jsPlYZcZHFWLwM7yG+euYtRN\r\nU9k9WBnZCmx1KXdg6KBuNiNJSw4M3gb5MMgK7LBvJwUp4eUgKOptKSi+mxI3\r\nHw6BtPGbkCYWSwkY7qwRneCtqK4QPE3Ox5jGktzT8n8Ax746qz6+kWxwGMgj\r\nWEciSL7CibmdGkNrY9AU/Af6BNYBSQ197hnqlXAxja7N4O3RHOcgyDPnN8h3\r\nqMYWJNQLOhqrZ5ZNZSKyDu7eEamFN8Ib95Ku03T2XTmWcEiiGbgXfV2D+Vv4\r\nkZWYEcCRgipcDZO+sS6tZWf6ihZdEIFF2SI6xyYQhgRNWnSxq0Wx3loGJQo2\r\nub6x8xadKFMi3nFaKRckLEEt2NRTKIPr++qT7pbptvMci7RXkwBwLKiPMId+\r\n55ccPJvTgiubw6ff0BbZBbnVfKM50TL7y84YRfTRpqbZC/lvITrDehgqKXZW\r\nJa2VCWm/+gEp4LVihKFoBil3xerSo7OpWEE=\r\n=XxVg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.01da0cabb.0","@material/tab":"15.0.0-canary.01da0cabb.0","@material/base":"15.0.0-canary.01da0cabb.0","@material/animation":"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/tab-scroller_15.0.0-canary.01da0cabb.0_1668590109242_0.3908953978495089","host":"s3://npm-registry-packages"}},"15.0.0-canary.4ac393164.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4ac393164.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"131b256d0c82582581fd058d83994ff823632302","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4ac393164.0.tgz","fileCount":51,"integrity":"sha512-3i75Lr53oC2OCooVm42pcQXsSfRvBGVa9H2w3AuzKNQqzENDOAveYgZBLgT7Arh0B5vrDb306DtribxqpH9U0A==","signatures":[{"sig":"MEUCIF54bSneVYw2WehwatNtMlIByt0hDywWwY5b5IDlnMk8AiEA2VTNptWeL90z1rMdIxrXszajdbFZMc8RMOOBqkzYlrA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ0cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqp/g//Z+eHdABcIfMSplNLdgnFwC/m2u7eSm2qNy6IYTdBwC/4D68P\r\nilV1zZ8Yi6Sbhv0S+Eoek/IyqJNuldXkMCvJxDFMZVX57L6tCamuX449RXUU\r\nPncGPhQNjjUYiRNrXp4PLZsvPGE7z4S0fZQ60FVAt/msuNSTRnfzBrUh8UkG\r\nNrXp+8Sc9c8JZvc/85bTQCy2yoTzFnnL2en+FuSt21oGJytVQuruvtPwjYNT\r\n4fWDn9dxRDHjJSmXNikPMZdmXHSX7xY8HmYN3SSV1ebSUaWhzCzdbO95xg1I\r\n53RTdrB7GSCH3RvNH/eHeeELuUM+YFWB/8NWlPLX1svOLpYAPBjyHeRn7v3n\r\n+5L0Bxa5zTBPlTqEn6kCMvMrE14QgZqrybbBwtCVkF/nkk2TqXd0uP/qXvb4\r\nULV3Qpxl69EglwlRjmpputO3clEPDIdnHLaR6oTbsfY+0UD+xRumAnoYqN7N\r\nJ/UQu1qo62c1blODxeesh3KhGxItK28pjOk60aG5xHU58K1p+L8QqmBiJ7On\r\nOO1GqTiYYOxwFE4eTBhHFLghIZvyRVn6X7Lx7vAA4doka4LKin/9ezMsOMXm\r\nX4jRWhkco7gVTbFHlkqsx/hDuDaO4/8LNWheF3K4yBTF9aRSd4wOfRiMAmDx\r\ntUioGWkQ599Y3INPaHk6bwaoMRFQyTyr2XM=\r\n=c3Tz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4ac393164.0","@material/tab":"15.0.0-canary.4ac393164.0","@material/base":"15.0.0-canary.4ac393164.0","@material/animation":"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/tab-scroller_15.0.0-canary.4ac393164.0_1668615452443_0.7424282980986223","host":"s3://npm-registry-packages"}},"15.0.0-canary.6048fb563.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6048fb563.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f339592b5ef445208b78ca4049e8d84dbd8f3c60","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6048fb563.0.tgz","fileCount":51,"integrity":"sha512-N8jeiY1DBvikv1a/dlCJq42vau03NzPvTe4n7enp42828e2G2EPTqZ3eL3gKDl8KbqUVYI/5myHhkIOjFHXm9A==","signatures":[{"sig":"MEUCIQDIzNKVpC+gmSF+XFthhPF8LgMI10jByqXsEbUNA2sFqAIgKHQZ/w+ZQ93lrjFqAvE9vqPdE8pkguvNrubx5AyhkAI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdQ2gACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSXBAApEdFMJbvCSdO3ewzGZcSSVfjRxUZhrlN23CIREF2M16nLceW\r\nvJFXwnqW+3bAmhArVK65+9NUIH2B1Q94ynmll14RAO2FWFCPuJPAI0occdmA\r\nuNDgFF37HMUwUUaTqVGw+BmdkEG2MSaKoVFja6xXE1U6xF4Hv4UcEom1MHhO\r\nXh8IdT6ZnLZhiN7JLSHV9MsRFmLGe2mqyVg/CxUKr/FxjRKluy9170vhaI99\r\ntT2h4Y1ouK8giAgqsIjx+7kXNdcgO66nyZdIiSq+3qDeBhx6VaA2rFBnohSI\r\nm3zI8MX029AEtUyIQ+CuxvLITDNTBF+WQ4PuKKehxkxmTaku1xUtCu3Qat9k\r\nJvDTZxAs4OgmnnJP0PDMkhSyDWh/dTDGguYpZUpWsyvkdsONtKCE7KURcwWq\r\nWshNH8K/D93K2N8EPEFWqbayGvoQYGuxpwQrdtWYh8TqH+K1Brgv5roYC2CO\r\nH2WrRFbYAknbvQh+xBskY3L8ybio2u1vs2JncyE9+pu6hLo8JtnuynLODnTt\r\nEjMqCxWLMJGgFUHgAeGXtxsqSLx4tIwm4sxdx4yslQD49plU4RJgwb6h5ia6\r\n/57KycZoDeWd+9IyXhdT1S6FF4aB9Lf/4vSL0zOh5hfoXGstMj21+gpNQzUG\r\nm1jxlBvm1nFgePSwbLUeRskZr5miYaAGxBA=\r\n=tXZm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6048fb563.0","@material/tab":"15.0.0-canary.6048fb563.0","@material/base":"15.0.0-canary.6048fb563.0","@material/animation":"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/tab-scroller_15.0.0-canary.6048fb563.0_1668615584473_0.4889695683430755","host":"s3://npm-registry-packages"}},"15.0.0-canary.f7f56fff7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f7f56fff7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2ec0ee04d1a1046a2ffafa0a2066fd5a5e54b5c0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f7f56fff7.0.tgz","fileCount":51,"integrity":"sha512-vUF3zX9FVSt7kk3sHRPnXi69xXl5ykAVtk+4bGhicFLY/hpEv/hSZaK4bU76e5z9w1nB8JgZKSzq/VJIpLRJqQ==","signatures":[{"sig":"MEUCIH/+SDM0z3Z06+kAsZhBnhpUTw+8KHCOQMfD6gdSLtpdAiEA9eiUPPUAR609crO1b8nG0XD/1UcLH2Iq4GcKu3X5hng=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUDAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqDdBAAnNNJR+STP4raGBum2hpa7Hxjrf03c4uLMJ0fpHfpkqfSB0yc\r\nK6gTgv9eFJG+y5OCI5gbb2wtkStrITHVrtl1Gay7U/B47IdISKFEBPpXFlSy\r\nc8RdRYg1CKL9xZcDJI1TSAXD4cMSqINkeMJzM8zK2WrHC8IRalSOLzxA/a7M\r\n6Ukcy2F4QURXirlZqIkEl163jkrv5UzL+wSGM9EOSkqxXnFX9+d+s6uonfF6\r\nPX8JMew5NUPkuryB+IRd+ZEEUzvGilKUgmgGsoeE9UMlQpfGHNv25Ia5oyHD\r\nQzCVtqtEZg0gcr2W3CeZSwtOm7pdVMQ7qI4ZlliIxLFnjN1tqKF+L1mTsnK9\r\nqdTw80LJm2yGDrpRhOJs0HCa40+Wo03Wk5xb98Oic8/A5Jwpb/u/XfjZm4tf\r\nbjb+H0ijqZr/bljjpI+YvOjO0VTqe9qPnKSRl6S4ziu7d4OVtawbHmREvTeY\r\nc5f3ijjf7KyGQA8Gjeyptd9EMl72O1KTPmKXLkkB+4k4PBfocT48is/S712B\r\nzzM+rno2AeoMvjxZObhWUMN7wvUPgAkYDo4hUzzc4XnrD07Eui/GflG+slcV\r\n/aedBI0tIzmpyuSWOPKjwD4li+QMkSVy760gdPkF5q1BCBLDJP11/4POG6LW\r\nDFp3WePBrHZcOrbRPeyoyZuf641k3F/Noiw=\r\n=9hOo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f7f56fff7.0","@material/tab":"15.0.0-canary.f7f56fff7.0","@material/base":"15.0.0-canary.f7f56fff7.0","@material/animation":"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/tab-scroller_15.0.0-canary.f7f56fff7.0_1668628671922_0.5002450916389336","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c73f6134.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7c73f6134.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"65166dbe697b56085e7659d9e4c782daee16ea0f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7c73f6134.0.tgz","fileCount":51,"integrity":"sha512-h2uhmoLl3bxBDCOwtrA3PD54O5K0oeMS1IksNeUz6QIoB+Tg6xcQ2Lh28hsSFMpkqRemm/Xm5npVMeojZJsrtA==","signatures":[{"sig":"MEQCIECZ6s5n4b8XmxDgpOQuNcbXnIH5pxp/uE+MK58Z0B0VAiBRnwA8oq4C1uJeGVKQ+gBMLpxum9wmcHaQYNwD9y2k+A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUGbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAPw/9Exasm8M7dimlrMoH9KfEI+zIzPtkJezc086QTy3Rt0TfdB5+\r\nSRsTPq0cwhi6EG+v6k5Ly8VU3vGTveo2LheCEtCWWPjYWXmTCN4U6W35/Hrs\r\nI+02utcQJoM8JooxlomOe4lNl3aJo578t43RruGH12qxAfAX+uZkh7bCj1Z5\r\nQbson0QBkof81VmYAvUrgHaBI4yLt3WGR6aQR6LC4x3kvPNtrpaAHA56BhX0\r\njw5CdmZq3tn0/gwRwtI/YEUjS2rdc1kK0tkHkSycHEzu/ZBhk88BwjzoOmp+\r\nFghwq4a7gEmE1YpXQEYD2i+D+WaPC5K0gip6erFLW/4iVN0XassRVcxE04cT\r\nSwy6RjXp78YuZL4TuevqEeaUkN3WWXJDcQROJa3JYRyS0aSdEH1O/YKfkZU2\r\nBIQM2aJaLnVDSseFkdXRKNXRCrUronVHo7PnZBeFH+KZ6m92JcSgP5tfXlqK\r\n/p2utuktzEkeeHs1Wv48v452MW6gHlt+/hojHYG0YCL150RoJ4AwbXq1U3MJ\r\ncAXSWSNHXie/Vnlz6Sy92+X4x/GHSR86Qo/uec/WH+ETIHjQeL0PFPujM354\r\n31xL6/MEm6VFa3N/8uLYvnlwzLSr5+CaY2UgAFr8IKevV+4LPInqCUbHHpW9\r\nv85vpxIQk0nLAk5aSjgY3yqBjGsn5CKJL7I=\r\n=IAtF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c73f6134.0","@material/tab":"15.0.0-canary.7c73f6134.0","@material/base":"15.0.0-canary.7c73f6134.0","@material/animation":"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/tab-scroller_15.0.0-canary.7c73f6134.0_1668628891053_0.9729615858017482","host":"s3://npm-registry-packages"}},"15.0.0-canary.f1e037150.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f1e037150.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c13333a840050465689b6af425c47e68aec0dbee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f1e037150.0.tgz","fileCount":51,"integrity":"sha512-KbsfwaO1ul05gqIMr7QB3nm9eBA+lX4TAEifr+AuyrXsqUxbJwaxb0UCC3Rp3A9hdiYSM+bVMdnsF0i/QOv/jA==","signatures":[{"sig":"MEQCIFVeO3OH2poxYeZfyNSW7jgGmwLm5XzZ5jKu3qYXAr3MAiAZt7b0JhI5wxFWNpJrTUFEtk4pzENfEgBzQN9hblqGEA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdUL3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdJw/+Puyku0nZl9H/yNaKbr1HUSPVoCDPP4S+Ng7WQeILBZWsxXZ3\r\nUs469gzAd/lFPomDb92Pp9hk+xwHf5fwWi5fV7YC3TFddZz2sZwTx16a5VAa\r\nnNfBay7C1Pme54sx68vQmaAy+bciZLpu/m+TRBvTmbhgoqwW+Iioeqj0Yh9C\r\nVU9R0uOZRx+yGPWBuApmKNU1YpusvG6p3kzg3xoRFLmItShpRq1kqfukvw59\r\nAFvDC6RmpAhVqYqgWqGICwdvva92mFwbatUurwd4gey09Llb+3+rbMpWaFZL\r\nzIiSrptvq6ZYt9rS6E5VCxLPJ+uY163vAn46u6etyounO1PTYfNDbmxuYOav\r\nUkFM7mw/jqOgFsTk9SFKeoyTjiznn2WNx9ErTpSG6XQ5hGpmYHON0VxNOrcV\r\nZp8V/uekRRS7e1J0IfOZfNv0/soLsoZiR/jmNGgDEt8wGOge2lTUvRPKhRKa\r\nIaaSHDElBNbDRWf+DiHvfHY/XCRDqrM9GWjiHPwfxiBemQ+xnN3FZFeoE7R4\r\ndxXe2bHbXQ7tMsbm24XD0GB7mA39+W7tL9Ulmsu4UB4cv6TpdG6FmqynWVZp\r\nl6x1MFlUPmaWTwwrTbfF81fF6repXZUmCS0qN9t4zJNke+KjzLVI0Nui4OyX\r\nk+Z/nO67AQRZciLS4PNSWsNyCrydFQpiVE0=\r\n=OUhc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f1e037150.0","@material/tab":"15.0.0-canary.f1e037150.0","@material/base":"15.0.0-canary.f1e037150.0","@material/animation":"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/tab-scroller_15.0.0-canary.f1e037150.0_1668629239496_0.488973213371394","host":"s3://npm-registry-packages"}},"15.0.0-canary.40b18d043.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.40b18d043.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"20a5cdff06e11530493c483ea7360701ae20f792","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.40b18d043.0.tgz","fileCount":51,"integrity":"sha512-EryZQsKfy2FmGxehXaVEQCexPmLR4kbvwojz94kRdAXmA3T/ZNi6IhjLungz+4CTEAVMICO8Zn9gQ8RTB9GFjg==","signatures":[{"sig":"MEUCIQDis395TBmFPmazUbKS8Gt5Qk+Gx5pluPAhkY0qSMhFgQIgKysRJZNeARM2A3EzAUoNCWPeW/vHCXi4gDHY4MvKhbU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdWuWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrbZxAAkR6RAvmZjqCRCjfmcLdQjpsIbDuKcleGC+OaLGa7JJxKjzk/\r\nMQt8WAP3EC7PnIa1N7vg9CrTMj9M0TPwfRdvsNr4KsIo5WwHH4h9g/KQC6Um\r\nZZNmRm7JgTg2XPaD/eoGxzvDfr6WUT87SH+zUV7FdScM3pjkASiWqA4Wh8Yp\r\nQmsxJPMF+R4f5u+OjwzH8YYEYuED10VJG5Rrjrv3r5QfdbhblKElDzZaOhp0\r\n7azQr45tANeDVUnxLBmKZVW8CHWGjJVrnyVaNzVGqABqm73VsIKZRo1s3zfx\r\nsmh6XJ69xIHt7qr19xGeUFZDl9bPgLsv4kxrsDXFuSD6av0qeMYncC5oZmSY\r\nzGKdmAZdr0CaoVmNnSo2flyVpWV3wXs6trfUo7yinuZHvtAzPCYQne6MpbSy\r\nvQqkR9hT/bZfF6oLRV/86g6UHboDbmB+eqrRi+mGwhCHhszY9y9Cqeo+gCQb\r\n90E++zqdtOVaRH7JqXt6XXbPtDPccDZ1iJaC9RhhbweYTUnZ6CBt3f+0cCet\r\nTfbTPPrR7/2ppDiZmgqgWV7luDvphjo6JsSD7DDu3IUOL26VB3yKcYDqTIs4\r\nOuExgLEBmaGa1y3Q7CI8LhUX0jQe5w+tsIrCUdHauqe5/jIYuqqaRp1xuPh3\r\nAgJpVU4kv+eN2SavMzWxEwkcEBJvACD/O7o=\r\n=uqrf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.40b18d043.0","@material/tab":"15.0.0-canary.40b18d043.0","@material/base":"15.0.0-canary.40b18d043.0","@material/animation":"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/tab-scroller_15.0.0-canary.40b18d043.0_1668639638617_0.021162171392634432","host":"s3://npm-registry-packages"}},"15.0.0-canary.86bde5c06.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.86bde5c06.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6aeb05877bf3f6ef1fad11ff1a303513de9f016e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.86bde5c06.0.tgz","fileCount":51,"integrity":"sha512-GTL7RS1fLGgHZhJs7LV2sZgcsPFs9HZ4i1J5aZEf5LGyn4lk98FRgRxAUBwICyO5Us8bh0kLyM8PXo71NYMdVQ==","signatures":[{"sig":"MEUCIQDbQ1/vwmV6P28eURbdVaompXtMqR1fH83rjSYFswcUaAIgCcnfXJFO2C6QiyeUJq1Fo4oQVXCwc+XDIgcfHkkil28=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdW30ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoYSw/+IaU5ZOrt2jcl4nYDG1VuyapjrP/j3uu6MNPVTl0l1zbWLcW9\r\nsG+WTVw3mE3nbRViULkEH/zjwcKbXgEJH+AKHGwoOHUyeYN4Pt5Lrs0nyOA3\r\ng0dga0SysgGhMTAzzchLyBhDC6X0nggEYuOb3ESHAsV3P3jlDoSmbgJ3IdQP\r\nC9KsQBz0J0JwWnKSbd8zvotl9Nd4e4uOhlSa/8kAuIdSabwyQHe2Vw06gRRG\r\notpcYWd7VxCIwk0a8vkZJuj9Hn0jubJ2u04xfKMzxXaMWsVGZZOXuv6V7CeI\r\n2HyVPsjQS/cJ5fTq8XWPspb1K1WoI7jrjCH5mjlx6OtfGRwwC3+HYOfEYIAU\r\nxUksp1yW8tqN6YzzGcpEV0XwUyoBkuNdbYZXmwmcOuhaYqsWyqwQWCVZ3MLf\r\nja7ANdVxrufFJZqwzaxkegR3iFTKZgiWV0o3dkcgxQ+ILrLGxdeUCmIhEvgQ\r\nkNxDPdEU/DAmqxN/1fpI1Mw//BiY95gwj6pl9VgIHdZfEeSw2llg4fK+eb5p\r\nKIT/IEFc97Ef51d1WEdiOtdwag77nypnzMjx/hX1JtPqv4mG8ZGJIELl33Mh\r\nQfRy+PR1GxAA/WKyLYzgdFz9feSN8EuTRa4A5AneopIK+w4oITiKNmj0dwe+\r\ngJp4m7FrtyN7fbzRoUWjyS3zLqLjUl29cmI=\r\n=2yfQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.86bde5c06.0","@material/tab":"15.0.0-canary.86bde5c06.0","@material/base":"15.0.0-canary.86bde5c06.0","@material/animation":"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/tab-scroller_15.0.0-canary.86bde5c06.0_1668640244125_0.2389811302565179","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb7751002.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bb7751002.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7276ec34913a49f02db55ce3602e050dc92a07c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bb7751002.0.tgz","fileCount":51,"integrity":"sha512-w0QyW9yTmkrvqRT81M175dXPh7ZMOyiAcHnLD/wCYJrcZQaxjqdJzMFCT0uOMZKnLuzAymnn0TNi3mKdL8Gf+g==","signatures":[{"sig":"MEUCIQCbKepYfTMGn49n09vRrwEy7F3Joj6fc9Jbn2YGkjwFwQIgUIs962Cz0d5jegPIWMWLzLVhmqV3nVqoSsPJmrG4xUI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdXn3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3kQ/7BZgRKOP+KVZZCPIoovrdf3zoxegvst2EJA6I+qQIZPkmxXu/\r\nSfX70hkaGC8H6mW4oEOQLBQesPi00FI9PtTwhQOV1mddj/hNWgqyEPg+AxtF\r\nnSkk3Ok+fhGO/mS9U/eM6FHAsTheqT3vFx2QNg2paNl05+NIfdzDXruM0KAh\r\nOlafDQbIgGk0YZmC9wy8wcQ51OwiTldd3tcFEsZ1zUXzyDQkeic7SDAJVjEB\r\nSXAeSUguXqcGtQ1MT/J/rX/c3pb89IWp5yv+k8cuHV1ZRDsw53wfpiJHXnXW\r\n/2laiJh36mclwEefa84h8sR57q0HQ+rKHUiTibiTF/7hTDRDc6jZ9DSaXs21\r\nb/EaBsoabTtf5O/ZoNVq14tfrNiG3EaHvl3zCi9etVg9DJsyFxxiQNoXoW/a\r\nHYWdkvKyKfaLI3HSPaGmtcz5EJavWW8YWuS9ZtLH6f0BYwpTirjGfrFNIGIQ\r\ndOciWgQOyMpgpQHsPf03eAJaYvmkMEMULlxoXeHgtrVlCOe6bb3/1+dbRoPZ\r\nIvOy4GIX3/7DSC5fC7iDZIsPG6OQywmZYyfgrVEvuGG7UeDw/8oY8JPZoH7l\r\n1asyPRE3PfmosFDrIvCGOLLUNPQK5MA3x/205zRkWQKdwRfZ9Ip5OLJ/o/DB\r\n8nnavvgO13JU5Ft8siyGhbtWoilwTZ1sUP4=\r\n=lECX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb7751002.0","@material/tab":"15.0.0-canary.bb7751002.0","@material/base":"15.0.0-canary.bb7751002.0","@material/animation":"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/tab-scroller_15.0.0-canary.bb7751002.0_1668643318779_0.5529762192838779","host":"s3://npm-registry-packages"}},"15.0.0-canary.63aca9af6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.63aca9af6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"074536b348502f658a02fd32f850fbc98a570852","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.63aca9af6.0.tgz","fileCount":51,"integrity":"sha512-m956dY6QV5V+XVVzh3nQAZ/YLnGE4frSWt/SjERcOU/v93yd2Qy7x0v8t/ZPLzrDwrFSwrxgqNXssOosH6gO0w==","signatures":[{"sig":"MEUCIAXFBZeamvdJ5H9TPJlmqQ99pNqSTMIU39id125E3aFzAiEAucfhQw0MBhOcycyUNEfHl/76eHsANJ83IP3U0RcjiCo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdoVWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJHBAAn0h5jLTJtnIwMYxxusiiSr9IP8GpIHreqEiD9AxYuV6IkFTH\r\nrXoATjl4v0Fv38ILFRG00JhiIoTb+cBPy5evlSq/cIfj9RJZF7pWaICnH9cH\r\nKYRnBmq9qKFJZyo6KYoG9ZV3o5czRksm76N53x/kvQ/aZrcK+SPt/S+QQEol\r\nPdGkoikjecIZxm9xWq6WiZGDgaMRqFVBCVOXVkNIH8Q9mYFjsRIaIARdITFW\r\ne0GwNgs8fMW2Z8yit4V7+H8LwfjXwuQzf233Qu57yHrAK7gmr20dPQeMaj39\r\nPlmECIFgWgG7tXIvJ9j8Jjj9qtByWftFC1COgQFpnPaSufhWfEu6Ub8nOd4U\r\nKjStxduFhK1C17d/2k+wfu+bqS9WAOWF2BNNX/HTTDdf0/cdthZTQ1tfBVTr\r\ntgVu/5ZkEFmpJM222dh5BRWOUKPxvolHTjk/5wp/6JOwBMR1sbCR5/hNLu+o\r\nsBe2pvczMNSeeAPMHq76qih4RloUMglF3wqGaw4v2yRhHzvX7macA5tDywgF\r\n7s4eS98b5duQWT6EaWhRj8LRpNlznnUyvsA6d5QSacrVMo15ITRg1NfR6LFZ\r\nsAgt+UiLP/D/5B8JvmVK1Nu0JNVL5j3jytndD8aVA01oLfUBtHbkLzWF/iE3\r\nfoghisOSZt2GycYiKDQJJ2GopbbFmyTMJBU=\r\n=2fsD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.63aca9af6.0","@material/tab":"15.0.0-canary.63aca9af6.0","@material/base":"15.0.0-canary.63aca9af6.0","@material/animation":"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/tab-scroller_15.0.0-canary.63aca9af6.0_1668711766100_0.9822412950631532","host":"s3://npm-registry-packages"}},"15.0.0-canary.56482dc2e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.56482dc2e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"651e8eb508c8afa28055d7b8b69198133afdae53","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.56482dc2e.0.tgz","fileCount":51,"integrity":"sha512-J0L8WwLyodutRx0uGITi6GZAwwIQlytjK48PboXaJhZW8N6d7Iu0wZftdWNkjOlx3CM0uxjBplb1LujGxu6MqQ==","signatures":[{"sig":"MEQCIDXodYUj+LyW2T3ztgTff7jTVetazr5DsDzriHUtziC7AiBg6wd3zWISH6GXoWbwDrFH9S7rqHRdB2V8PjcyjjAADQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdq4NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrH+g//TDmGbva+8CHt+zYp2pAJwDAgJZ2UvjmO7EP8TiPlbQm1+/4X\r\nzJkXQvuh6wDYbElY9BDvZXde0IkFX4kqzoL34SPXnLz+AJ7GGTxlVP6nn9oY\r\nqoK5h5SL4qwzjvdKCh8v3MW6N/K2kdGXB/E+GBa0Wcv5/CP7kpeDzGb/c4UL\r\n1LsQ2ox5ksrUyZAYvya1gIef44gfM2GsY5g8Ee5VvVCUcLucKHc/SaIJCuXH\r\nuNL+SF/+Qif//+MTBeoT6+G87h5rWIaMT6+TuvsaI7KTeDD8OGb9HijPl2Li\r\nq8NlRP6Fgw4DcWIrhy0T765qt4z5ITQa0V5QENeSYqSxnzR37Xjz3Bb+/Py9\r\n8XL8r/n5LiPnUK0bFs58XM/MQDCt5P3iQv9yedzb86DA9cUCBNngIF+t5jG3\r\nZG6rqezNCyewbmSoF/Pq94iPnAMXaAOBPAcfWTOdsSrs+Ps/SpQmnJtjYOA5\r\nR74w3cpoermyvNrWTSS+Sd9VazMPgMHw/XsVB7XBXd0Czax3Jw8xLKnc+KLL\r\nRwqek3rjyCB0NCp193Qz2Vl7lTMbzD791gwZJYbTl8vCXsfFm264/CWOpi3W\r\nAk1397Gqran/a0wf/bTSeuGXVJeUxM81UVQ+is2lfnZXxtbLLMIuwJ3h89r+\r\neYvMDZSGmtututaWUxuhpKHbQktczcHzIMY=\r\n=tQ9b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.56482dc2e.0","@material/tab":"15.0.0-canary.56482dc2e.0","@material/base":"15.0.0-canary.56482dc2e.0","@material/animation":"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/tab-scroller_15.0.0-canary.56482dc2e.0_1668722189511_0.7761389154545129","host":"s3://npm-registry-packages"}},"15.0.0-canary.953e689f3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.953e689f3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6dacdf7b073f01dbf51f0fd832e2e2149d657cd9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.953e689f3.0.tgz","fileCount":51,"integrity":"sha512-/dowTS08R5OmtH7HnpF2qLXtZev617n8cJgSWhnzAkTzvK6sdKLbad3cjSyvglHNLhZTmiKkWyQKv58op7nsRA==","signatures":[{"sig":"MEUCIDuaP+RxkPm5sM7FtCpBXaOhc2KouWlDnu3+J3uVVAigAiEAu0gvPIiymkiaTeSoK1KcAXaD7iUIZPM6FBau6HpwojM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjdrBqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpoYA/5ALC3lu3Lt+WJBuSDms+ATu8KJ2UG08OvrgfITgFyq+rnC8xz\r\nCZJg89FLLK/tiguuyKIdLmbCNBbErMvzyrtx90YCVSvbrFej8u82lp3QqIUB\r\ngKS/Hnm9VX/dSNGPDUzuDNaovnbD4pyIxITH0y2/T1+tQYPpBHWgHkXBWzDI\r\nGqTwMq8RdUTtV8NqM9IELtwC6cunvb145NwGrrU5rgD5jgPKSvGtqU9nsG6J\r\nnAhHDoE7XF3y3fW5C9jvPGOKk644inlcToSX0VGzWwZmsi5WPO+ujehOEx9T\r\nk/oBVaJAWbdO8PjPYoYuQPS/pLvvvaHcPkCrH/2XLqGaTTdfR0xOq61ZATk5\r\nZQTYQYhdRnbKcdCNAZ1JIVFeliy8wgdYKO4M/5NAK1Eop2EDgHODRkikHdFO\r\ne/7rwz2ECsS1dcVu7WIxwCNb2ARJ1SJBDB6ciPOZOMkJT/6v0y6Fjihpsi5n\r\nTv4lnSImJhFUn5AgKs3dtX7cE0XEWcLEwAT0ytnJje0jYbcxHqNz11a2cdhj\r\nhJVwkaPkRFGdlB+MGWHgWnJVTJ5e1k42ZRid58mYU0wsyz37omgKYo6jrpwk\r\nv3SlClgnqKHUt8squyqi+2/z48X9ZyLQfBwdRx8Uicm/rHO37AFsQhPk2bLk\r\n4fK0tqEqj5NbOvEUIesuFODr0u59Hz/K/mc=\r\n=r6cJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.953e689f3.0","@material/tab":"15.0.0-canary.953e689f3.0","@material/base":"15.0.0-canary.953e689f3.0","@material/animation":"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/tab-scroller_15.0.0-canary.953e689f3.0_1668722794395_0.23481227446768838","host":"s3://npm-registry-packages"}},"15.0.0-canary.b5606a793.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b5606a793.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9bd09bb03210af8e1365fbbe38e906716d0a0683","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b5606a793.0.tgz","fileCount":51,"integrity":"sha512-KeWPPvSfOLnpItJqkLq6EN1BEwjLrTv5bGKcYLJHcJmQVxBuUbg4fbf7zibB1bz5akCa0EZx214wrhOI1DqAyQ==","signatures":[{"sig":"MEYCIQCCLNz3YIYVV1o9+0+ZygF8Mvii3cUpqyRMC6C9YWey/wIhAItF13+x/YAoNEsCc3ywJxQdlLbzty/RuoIGTh3VVQOB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd10BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrSZw/+KUTPV35FdajA3yPhGP/45kH+wfljHu0JYS13c4vMLsA/gTWY\r\nU/tvS6e+45R8p3Tcw3I/xfCmGEokBkyC8lyaFnQyoIAl7SmlVsD5bXaJb1R1\r\n/6yQGSmkjyDeSusL8i8/rAuKkFFQelhEqnyiDMSJbPExX/1eC8pmTpPDhPbu\r\ns8L/lK8C+35YR+N9cWNaXBhL3L6fknGPVWTmMQcv1weHVZc9h5Z3IFACddg2\r\nJbM5NbRByIowd2ropOdLMOzTShm/mJqIqoCfUaaSMXF2wGvo8cIlROmmfG7D\r\nzM2SO4mvtJMTvDqooK7oZLt7LYmlk+tjxZI6/toWqsvpqR1FghM2LqK6s56j\r\nFQLRudARBHPa5nJeNhVk/MshIeilrJDkgJ8ua6IDg/RG6SyzrylC8xTpXKSB\r\n4bzpkwGen9RH2nBScUU+1O703+4y+wo88jZc8q8+SoaHxaOcZ7IgpbY248rq\r\nma28AFPazsIz1+XU67MkCeTtALkcYOJoUgva9HEk05rO8foHPGZ0OFbtAxR+\r\nf7mI4rtrpuPLY1szgSaCF2vDoC09OuHkA6fBqUFnrAffL5w6Xr7KTtknHAGK\r\njCSzCidUznnirRh6uo1WfBI+pjLVe2flR2y0CpVaoxKZ7qNB6utckf9EzP2j\r\nn7qWv4fjy/SifcnKFDg3brgZWbyDBd0/XOk=\r\n=9TGd\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b5606a793.0","@material/tab":"15.0.0-canary.b5606a793.0","@material/base":"15.0.0-canary.b5606a793.0","@material/animation":"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/tab-scroller_15.0.0-canary.b5606a793.0_1668766976872_0.3760045443335982","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c5675942.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8c5675942.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2c1f1f235cbeba3b1d0384b81ff0d33084bc46c2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8c5675942.0.tgz","fileCount":51,"integrity":"sha512-1MSlKENxLLi/c5rvFDKTy40L2YrM5nvq7QrxLFStci090N5buNnUdwMY1AM3vuLlEDcOXTRQr2HGF+QnJENIKA==","signatures":[{"sig":"MEYCIQCeZXJUTTcO+H4xmAEMxzHlGddXlkymoeCktvE+WygP6QIhAJ4EraIZ0MEXZrW8RrAYDl6h0BhkGIPaFzo+M4XuSZfO","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd6I2ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpx8hAAkcsDibUf7SplJVgluXXePJJdn9inL9R3NUSWdEk8KD0KCU+X\r\nTGklLND1Lnw4eWYIPZDMDfdtLgnVuWRgalNmd9/jYKHJ2rijyjI074B8c8BU\r\nU3NEQwvT58W8fsHnIxJRgr0Q4HVeso9uJ6fSua8BOxBrCs/i3WjRuVxIcOZr\r\nTcg3DtqnKIaRcYN/xTNaa5zWR+Ib4TVNla3+2zSmfZncREduQHKqf8BmhO9k\r\njeC7r6weEPj4T1/f7gOk6s6meu98LdgWTTGz8d9+4k8B5oInnxhjk7KdMZq/\r\nBMIkuWK7JKErKXIgQGmDJFBB+uVbzEog1nGtqv9XHi44z3nEQOXFeR9GGtui\r\nW6c/hB9uUa0X64b8xUe1pZYzJaE3QLJBrNO+Nc0LSW99yCz/GTQwLJHjfEjb\r\nGaVOUkNMPioUpf8HdBpZqwyKE4xsCfaohl4yC0bytYkzFcotfD9o3tnCKkFy\r\njcAbYknF+MI+1B6EWX2tGbcjAlIy0WasNJETJ8Am4S2+yzH6Dt9Fs4GTC5rT\r\njAMlXg37d+5oDoNh0JTFoUHLeUbnBka0+zPgHuoxN1x07cEik4LXhKlXR8xf\r\nYIRmFVPID3/1Jt22ZrPzLT1rYRjao08aYEdotcDNAoZXHktjVN7ikRtk8xxu\r\nyHJsHwMI4m9RdTVEY/r6HQApEJcTpkrJ4H0=\r\n=8EGV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c5675942.0","@material/tab":"15.0.0-canary.8c5675942.0","@material/base":"15.0.0-canary.8c5675942.0","@material/animation":"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/tab-scroller_15.0.0-canary.8c5675942.0_1668784694540_0.14564460062755313","host":"s3://npm-registry-packages"}},"15.0.0-canary.697fbdebd.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.697fbdebd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2bffc10404621b516350b39e75fa05a96d63e2ef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.697fbdebd.0.tgz","fileCount":51,"integrity":"sha512-SNmkBzbYSzGK6qlk3NbXv92GDw615p0xMMdlG6cCrim5AW3pCCrieu+HhbBHQEdGLFjFlbXmURaAPuYRhdu+YA==","signatures":[{"sig":"MEYCIQDYLk1V3qtP1okqH6+k3rZAyo0kEtIBcM9+oIZQUBmaZAIhAO+q5T92v+UAn4v9n7mUOPfibDZpGgKSCM8KdkCK0aIq","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd7rBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpbwQ/8CMP7/pVmSZ8N3ZdMBpHnXQMJouw8GEaE0sq8a47R6uRE+Qvj\r\nglyQr+mkmeH9HgL7QqVInyRAchOt/NhnJctCcTQXQP6fLZ/YICQSU0JBWXhk\r\nMg4pYfl9kdN2Tac/dkkXY/maYYMcRLhG5Dnrm6jUTR7PEyLkU06qPUeHBg2T\r\nYiw3yHxB7+MeCXojI65K8DGTszh+jJozmACryKUNfN1PdIoR2AKzcugnLyZO\r\n8K49ykSFgYmsf14V+R+1CaohH3o9JOcIQCBXafN/6iGKqN1aFV3cvpf4rebo\r\ncugdnhAs1eyYbt8gDyjVBjs3/6WzMcru2n+0tkA0leTS6HOzjZc7IcDjB56f\r\nBtV2aIFJxaXNmN5MoUBoV0Lk0xfpCzM5rsSXs7h2YgoPV4tceZHwMrMyuqBp\r\nJA5oUfMUs23mB0m+M66o8AIHiYOxMxgitfG95RMmZFwPcB1mhiM9sF8lBV+i\r\nZm7m6BV+arp/fWLmtWcqDv1DXibJExpxyQeT1y15n8UyzWQdtA22n0FazBzB\r\ns3TrnW73gvTaXDK192tLOjKBXVnYVCUc2d1JHxxZtsuYq24r/VpIC/rv0Xa3\r\nYd7a5uWXzh5pak4Kc2I86nleBBkah1YcSyG2Z0qh34njVEuiuab5zyOP8xf1\r\nfFN5gqX0iItKAWbhChjk8Dly9MGbD+Xkgqk=\r\n=XOen\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.697fbdebd.0","@material/tab":"15.0.0-canary.697fbdebd.0","@material/base":"15.0.0-canary.697fbdebd.0","@material/animation":"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/tab-scroller_15.0.0-canary.697fbdebd.0_1668790977664_0.2344582320859927","host":"s3://npm-registry-packages"}},"15.0.0-canary.d58410453.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d58410453.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"83300606ce5c3744af281da3f73b5f6894352024","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d58410453.0.tgz","fileCount":51,"integrity":"sha512-q9yWRhsdCpao5nbGNfbcPDytiZV4EcZ7QEX9TrWBJMcp1fwlnGp/+mYelv5pCiZyC8JO47q/1/mlDwhN2BkW+w==","signatures":[{"sig":"MEYCIQDlr4Nk4EHs1LmBJSMuEfA1fnlB4Y5xIDV66vL4D6fxygIhALoNPYHZxcoItSTsw6K1L3fmt43rX4gfC/stv5Kgzht3","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjd9yDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3Xg//di0zMufZkMMsT74eP6pJ/c+PI0uiD0Rq2HFXx+vrGEjZLHBY\r\nsKOSL+9mrS14cUzp9NN8lQL95LsdBv0opP5PgIaAu383koGSTTbDXBhEhgle\r\nbGWDP5eqZ/WahX5D0/I/40UNF06TL+Kf/H3rjv6jqDchNHVuSarinyZfYMcT\r\nu0/TWLcxn+IjjavNv0LBeWfs6gqZLRgRKqiQJ0n/zy926dHkbckgKyqH9x0l\r\nzE+flXRBmOoy+LyoAVas0dSffTSJFSBR5+lvktWwx9O1WM+2150SrXkJJyUs\r\nuLfq+3CGlxkErlkTauz/hyr+zQAMAClRciTp4G4rBt5K76Yefffm4wWNMV3O\r\nb3byeq6qSHJkek8H4XxNQqrtgqbcqfk4JBoCTXfJrHo1/VALTU4BL9Cv6mTR\r\nc4q5doXAihYB4LycqEwXhf6K6KkG3eRKSHISlAB8KE5bnCTMlXM8UcPH3req\r\nESlq29//KKc9sQWvxc1tUpC9gydtal2TptueBFxVBD40vLzfzxzkAMOHBA1y\r\nwzzKXEsfsB64Ik8LxFy1ThLDvpzMrPbzxzUDY7YCmXbg9gOBSeEBM2nuiHPb\r\nrke3U5/IiaVIyOohRiO8MPXycGxCvu2VimqemzSMu+mkVdRx8epN9i8ZM3gt\r\nUF9HmSQ2P+GPLiHpnB3/aOBrgmuDPoyOIgI=\r\n=hi+1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d58410453.0","@material/tab":"15.0.0-canary.d58410453.0","@material/base":"15.0.0-canary.d58410453.0","@material/animation":"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/tab-scroller_15.0.0-canary.d58410453.0_1668799619608_0.1454323128096029","host":"s3://npm-registry-packages"}},"15.0.0-canary.7971d6ad5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7971d6ad5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c7fc0b171524633cb898a1eabb6de8858b6352ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7971d6ad5.0.tgz","fileCount":51,"integrity":"sha512-//Ih8ZPx92PLQwXhFzv6YCQc5xW2IH84GdIeJrdBNcQN6wgbQNsbU7h9m6jymtpWQgvvLY8E0+2qkNcnWejnag==","signatures":[{"sig":"MEQCIGtMmOcYQPGTFreeIgXGiak+4RXQ2mv58gw9oYR0rDkOAiASNKC4zEoGwySHjqTeZGb9x7qp3NxjL5X3p4CzQmL4lA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjeJgDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqxsg/+OR1kQ6LIJicm8P3LCN2M1v1TY2P/LguGr4umeUknpPXwNX8W\r\nNA0w77cgeVFI9TMwG+f7ovKo8wCyjxL4snxpEBd99xO68Q0Yl6kF7axuL0OT\r\nQV8Fs6zqQMtG0UEeZjSlYh/smC2RtSDWVWIa7zRyEftqXrsGCIOj0lJlZgg1\r\nOCXRRgXooKL7xkRGkLyQEbfGrnEFLmtWJakQmuHoWMwHbCtfyKUOfXxuy1qE\r\numZ/WGBdIvgVASsctdfrdDv8Gxh+E/9HoKviyL2xccQGwFG6X1g+SeiDxYPg\r\nAJqpaoUjYnIutYa6rXw9Pn4RG8mBlKoKHgVI41Gj6ORiqzAcBH4m9Pznq8dK\r\nBjtdYMOha5VnfOwXLbCrNBym462vAfMTu1SxTeRg9AIhte+AdLkOJuZailqr\r\nciiYNrSGTOA0jZojAcr7xEItmJRfsoF8CCfCAPDonfCsHFhtiBcRq1ZmvoY4\r\n0hRhyppakKxM+GNuI5ovFstGMXUkDfHKHQtQK4T/M01iYNbH6LDaALp5A5Yr\r\ns+70FurF1pjqZ2W5q1wkLX/An4X0fVvBQV3ZwJ8f2Mk32mZporLr656/jPEn\r\nHOsTi02sKvIefqFSGt7ki/IgTWdE7e6piSHtoYIXYLK6KqeP6Ch9oeMf7j5X\r\nz6NJ0lK99gAibKvxKQT6XRfzE8wlHyJd2Do=\r\n=2uKQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7971d6ad5.0","@material/tab":"15.0.0-canary.7971d6ad5.0","@material/base":"15.0.0-canary.7971d6ad5.0","@material/animation":"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/tab-scroller_15.0.0-canary.7971d6ad5.0_1668847618813_0.7515447161513074","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0ae73b0e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a0ae73b0e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c17acc9be0e8eb6d901494665a2ccf4d5b8c3e70","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a0ae73b0e.0.tgz","fileCount":51,"integrity":"sha512-T2+r8mn5Rf2yIoBYkKFVZYc0Ik1s21oxDeHRht9AeoTYilV9kVPWIwORmSPU7eGdy7SXvUxp0RVzhm7vxJYVyA==","signatures":[{"sig":"MEYCIQDJClQjZ+azT5SV3sHqAEKxDRLVPhZjDe//UWL3sj/9HwIhAJAl8uNznHbswUh8aX3pBiVHhp60V4GDucEnaeeJaCQv","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje1k5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqrnw/+KS++PO8eqQ1fuQghojQ3J1gKwXiKskeK/v02FtNPQJ/k+WCR\r\nu3T6f3QDj6s6kGme6kRf9VU/jMGKVDPilocQAhNTjI8IEqUl0GAdKkycGpiy\r\n970lfWxRMUoPkMPJJfT/P5QbdoOXh+xPq/5vUH9LADCTQ+GWI4knBw7Nq+2M\r\nR7Xk8wsp1/1OqWoXebNao7cwMB4NWhd79L+O7sQjQx7g1tgS6P2HQEMHqjpn\r\nGa77ZjNFoGy8by+iOqRcxF3zAeOoilA9kHeGU6uG1qFG1d+kIoW2sZP59D1W\r\nbR7VfAGwE6r08oMi7lrhw5U9x+cyr2w2JeRlbj3vg3EwPmG5BqySZ752Uw6y\r\nwqtpTcOfdcgjJadaQxHVwt2y7v+YPj20ZJJHoTGJLZZ/1unxeu1H7qQKx4cx\r\nkTsGYwlX+0QzAgQ6Z3j6Ra7VDbqBO68TL5QaXVykAW/t/r64VdXZ0G7GgfAp\r\n3HuStyPn03dQDCVbu2Qoq0Qd0yYja5V7QbUN5g4yBtNGLZnpowi3xyWGlO+Q\r\ncRcoU7MVEMwvATJUxYflMWzsIzPjdm2LrYIolXnr/oHaCnv7/KMuZdReQdRq\r\nzGpELQBeAtBmv4Fbh+OoC+RafkDGXrZx1NJheEUZHoAyMr9bpKruEEU+nvZE\r\nkrRwswvKY9oZqjjJXbE6lG01k+OWRiSU73U=\r\n=VSlk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0ae73b0e.0","@material/tab":"15.0.0-canary.a0ae73b0e.0","@material/base":"15.0.0-canary.a0ae73b0e.0","@material/animation":"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/tab-scroller_15.0.0-canary.a0ae73b0e.0_1669028153281_0.43714794281122016","host":"s3://npm-registry-packages"}},"15.0.0-canary.96f472604.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.96f472604.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b5a0b62edeb275d3a438332d7f7409847162442b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.96f472604.0.tgz","fileCount":51,"integrity":"sha512-yGrWgS+jR6PqYuUt2SQwWgBXREa7kp+v7MN8u1r9xdnL2vaHnCwDytJ8R4Tiv45JBhuCXqnsQ0BlbQGnH/QOYg==","signatures":[{"sig":"MEQCIBIB/ZO7YyFvBKYZkFRDeWIel2SRe6aslJf0KCUaZSHmAiAKBnxqLWH8m+M/MZeaIBjbHjKYD9NSYJ6UL+SAp1Vj0A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje3UTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX/w//Qa0BV75fT4Xkxn2NH6kTnYaYOKh2ka/ubWVHBeDPNuL1tw6W\r\ntN+oaveDUb9yjgYqt/OnvfdCMXpcDuy1Imq+9c2kfPwBL2uekbGILx8m0wy1\r\njfSUhcHl0eBKYc7h41MUqj/xRp4UsvOy62BWrv8XNt/6FWdUC4ODBBvLlEnE\r\nVf9LhWv+XGsM45h9rj3a2crQZz8G9uBr/caKam2smvzZuuUJoHqMHtOqHRjs\r\nY1h4GtgVNryc84DKanUbRiltMRIMDErUNi2HcmC3NUOyHXVxC9CYSDlGd0E6\r\ncODeep4+nJkW8YAo18qSgJ4iqmCMtfKiB6IO0mFx1RYeJhvWvLAkUbkttJlL\r\np2nBdDvxEupNjhvYIQkkFYeYznQ/ljnfltKBN4H54SFLwho3334WQUvrwq73\r\nDLr/F+8ucJWH2h6PLp/2Ho0/jXyDrt4b2Ozn3ZsfU4oPB5/1RnIilDo2fiPD\r\nf12Wu1hkLAkRwcqtRvOWb4Iz4/XcVDDE1JxQI64MTp4qr+Vrby8T7Mc0C+5x\r\nkg8ezBcaIndwJSAE3rDi5p3bpMulJBD+AZFDBx/U5+5d0zKHOm41bV60Ly1Z\r\ngSve24m6wyt8nnPr564BwMrPAWWYoNO1wvQ8eZElmyRefAmcTOMToDEdTHEE\r\nM4vQ5IqYF1nxRz0+riGqesVc3Xhkzbk1oI4=\r\n=5Z82\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.96f472604.0","@material/tab":"15.0.0-canary.96f472604.0","@material/base":"15.0.0-canary.96f472604.0","@material/animation":"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/tab-scroller_15.0.0-canary.96f472604.0_1669035283507_0.36798133416042256","host":"s3://npm-registry-packages"}},"15.0.0-canary.912f33ce4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.912f33ce4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"125664d9d76f1c28b7d3908f1eb11ecdaf92119e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.912f33ce4.0.tgz","fileCount":51,"integrity":"sha512-Xsdzrf0VUQom/UJE1xMwruxZxrSRFsdqorbNqyF1X3BJJ1mDHttzBzm0o46t42xB6C4imgXmuqmUa1TzsCG70A==","signatures":[{"sig":"MEUCIEhCiXQ/l+pTle3uzp2a4cNKe7abnZ1ZJSdZSwlQQhdnAiEA0NzvQEdrpgOGuRg9DVYvdk1VUbf/yimOip1JuRwZ8wc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJje7utACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoBbxAAkdL3CfcjlOzIS5wQAWZPNnN0HMYtqH8ZPTV+3FS8/Am5HlIx\r\nqpae2uB6FpGRpJ/mNCrIswSHKkLcEoALrJx6o2B+MbSHnNwdP6vLhf/7YG8M\r\nOlua3+v91K9rCxSoD4XyfSu3I6vhp4oXTtC4tAhfvOvMqVPor9ZDBw4i8uew\r\n55u3i47wcIdRIItraKJHI2MSkgFukLxvmYXN6JTKp7tWidA9czflpYMHuYGF\r\nnWP6VIIPu9zXvnMZqLcmwrn//LFV/aseXHVn296eyjfTJd8Y+RFIEgYovuUN\r\nGRnMt4g4mLduB+CHL05dpQ7r7DdCvTAn9kb7K43AO8j3Q/sXiTAY6jTfR+nX\r\nVUoL/LKfcUHs46HCHooHKifkFErLSHKoXZEGDrmfIdNLeXgr33JlP380MLje\r\nsSjIC9ktWtc2AFNesnD44dUNUE2NO+CLVk/Ghte0k7IqnlOpsuEVR3E5npND\r\n4viIX7ucYe0R7xsMQ0f8xn+OzQ0BYKt29vO+WxSK3p5eR4aPP413tr7kUccN\r\ngW+/yjpgfc6uYfB+o89qzCJ4iKWDJxeGf/YCp9RJjG/ifJxDqo0EUHyYwfbO\r\nJrYI7Yx4rF2CHhH3uGRjIidOFesqFhusmKCoMmRqy4nBBRAo3ydihM0LcQri\r\nqom6WMI50S5WMszaL6yZ4LSvPFCFIg/GIJQ=\r\n=bXuf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.912f33ce4.0","@material/tab":"15.0.0-canary.912f33ce4.0","@material/base":"15.0.0-canary.912f33ce4.0","@material/animation":"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/tab-scroller_15.0.0-canary.912f33ce4.0_1669053357354_0.45557130778163013","host":"s3://npm-registry-packages"}},"15.0.0-canary.1e1b1c369.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1e1b1c369.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"96e5fd719b448006858f2ab8174246e3c6618d7d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1e1b1c369.0.tgz","fileCount":51,"integrity":"sha512-sBqf76xHLuiidIC4sLx2cG1JD8RPNbYxFr2aUvzxr3fFF7IumUcE84W4y67LXFY+Q3rzdTKeydeoMHOzdR90vA==","signatures":[{"sig":"MEQCIDPN9virQBbyzb5KlsS32UDPDwgiih61AsrF/5rx90qYAiAIh95M3hlO+HhIMFtRNk1gVDyBT1wg1sNNlAShC0xgng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfm5SACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrCgBAAn0yIzlm7dwkHFrelwVY/hztFCkPCSeWNn+7oDZG7ngqJIf9C\r\nPhBL5j5TCiBZATjII1OXnm14D1g/X7r0G3ztnVDas/474m96e2p9lKzGBhai\r\ny6X8cQVzl9FM9+05I75Iqi2Lj1Vy8X4AO/E5dU1aG9zjPHpJKOZdED4djNSk\r\nz/hEGEBwlPhCbh6vDq2LZhsGhFA4zJhkxTCLPoxm658rAZbkEbdrEkFExcqu\r\n0yNOKHsvUhpx0gf67ZKHUH4RQ8vW8OxUlziTYNE1gWqVR0SmMEcWhKl/6gYb\r\nP0Me8j4HEWnbXJ3FMhIc319xFdqVwx4yFwyV3ITSANybYoeWZkG35Wt5ZYZW\r\nnH9repBOkF6UZa2mZsgbA1MSKe1x7MOz9Vkhc8LiWcFUeknf22pzRNR5Acdm\r\nTw6nATkinvYOv6hoyCB+l8h8Dla5+CChSMxycMPSVFbBObhbr2NmfWyygxxC\r\n+JxypkYsutf+SAbs3JRp0N2bxrF/Pf0r3CgC0wMMW8e/+ARfupIxYUP+Krpf\r\nfqQV+C9q90D+D1+WDSbmip8kuWlzj12fEKIuPMTJ+GdpWrxKg8hp72aQnZE0\r\nbKch0gcqTcOIQKfabSz2Wi2qrgOp6mFeLulpVImFpOvlaBFjNfvp8cWu+sCf\r\nsNJbOt8btiKfQ6vU4qB9nSBtc27gwdLy1dQ=\r\n=E8t9\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1e1b1c369.0","@material/tab":"15.0.0-canary.1e1b1c369.0","@material/base":"15.0.0-canary.1e1b1c369.0","@material/animation":"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/tab-scroller_15.0.0-canary.1e1b1c369.0_1669230162639_0.06858841187413334","host":"s3://npm-registry-packages"}},"15.0.0-canary.a2ec49244.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a2ec49244.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"64a1db25ce701a02fff9103b123926a73cce8f94","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a2ec49244.0.tgz","fileCount":51,"integrity":"sha512-VjYu2hzvROJVPfe7I9EqFBgi5dxx/osHPC+TVE2pJ6x6kSEF03vXD99FUDbHmL6TfMw7ADXPTLcq2SNfkWsRIg==","signatures":[{"sig":"MEQCIBCgKS1X7nMKLI/0EbZIZzyDZaukM6LXpM3cjXa8s7m+AiAykciMUxVhFqyZMzfi0W1LbFjUPC6Ooe8p9f8k1fW15g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfnVgACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr99A/+K4T18LELaBAIUCYl0oRx9bSNMvkPbBO+tc2WZ5g12Gzkyb8B\r\nNa5ulHX36PuyxqVV27LBO9CS1dhRL35+4YUVzzWlZzfcDNc9LIZzFeSlmW8/\r\npqPb9lT6i8AeeeFzB9odyo375ruEVzTSWpsCUtoo0cDYuvjUfZkbEByxGR8f\r\na5qtxwjgsWgPlWUTdyyD36vfdlOWgG1eetdwVc9IEVwGgXHUjo/8FlQdtmhk\r\neIEKyYLMA1dplcMHnDkUYjsWfN1leNkVOgHUO+DCScTwrLqbZjcN2o8Me23A\r\nHTC+21PSUK8fm17fQZ6OHAGk2vvbnewwRsNvRTRHLfwg9Ek6PZX1+AEAZUaS\r\nPPZHbdCxqcE8pKRP17aYsRUDdDwBFXQMJM5uS/dP4AbpW9FLTh8H6Vouf9DC\r\nn8BPxNzo4CfIYjC9ZI46l73BZHjGL/uNoC834aypVUY571QUJ11eteDlcTd+\r\nTxiF0tp7pSbPCd0mWRoQBwaaVWJpWQFoEA4E8KfBrVpa8/UxqW/M7kzEEvDT\r\ni2dfp3i0Q7tFCFIfeKgP+u/3QKYFQ2ZKgZw0Jd9zCtaKgqKsrDvTt4nWuMSh\r\nVl6dtph1PcHSERp+QJ32IolxpaBMOl8X7CkIvZ66dauTaEG3Fzh0jMqOlGy9\r\n92W66LOpxorBf9BybijXJ07DNy/cjfUpPvI=\r\n=nWF8\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a2ec49244.0","@material/tab":"15.0.0-canary.a2ec49244.0","@material/base":"15.0.0-canary.a2ec49244.0","@material/animation":"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/tab-scroller_15.0.0-canary.a2ec49244.0_1669231968295_0.22538805507579163","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7458ba0b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a7458ba0b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0af0b67ce8fd986545aee2d307b4889a802a60fe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a7458ba0b.0.tgz","fileCount":51,"integrity":"sha512-GPF72oYKx1L1ATTH0xWny5rQMK08yOo3nGJ2JhvkNcGSyqIAYALhyG2MB6b7dcRtP065VBs6zYVCHb95kcFaWw==","signatures":[{"sig":"MEYCIQDVNlBURsKHjoQ0RZAj/+pXu23yPdzUWJR8WQAlvP8oKQIhAJs5ZcEtGFbRSZgkOubTPXakuZcs/O047XNRVPb1vdxW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfoAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWaw//T6hmn19sHlnKg1eN4MQlsY5htxCWWLkCjBTfjYDL3u49FCpV\r\nsvbpX6DsIEwvs9jlrgbLK64QIwoj0J31UjWtTX4JYD8pTwicYHlwcTOQD70h\r\n076iYt+X0+Vr5Fm2QtT+6wWCv1U6rMCSO8B3k31pUqslJE8JcuoAJIOemc9P\r\nVgpyWV+6skmMtuJYBx0UvKS7c4Xz9+DUNRe2K8hN62/qv8AdjJPh9okMsdK6\r\nfneY8/Nws+EqdLeKaGTT6JgCNafKLBf0LyAie5LzEz760ukQwxhF/DANbiKT\r\nhoI06x7010kXTkfxVTdgzbi0QuS1Rv9fmT84x/XMAb/pb+raMBhIzc4ZbGDK\r\nf80bDIXjlgXZa526b7FaEhWhFq94jkCDWSrOA5SCh79OZhz3sLF50do9XMAc\r\nqI0mGsESmlM9BCB4Y1BL9rePTtN339zkREGO+qtD/ybg0/pfzzRYshLfgJ3t\r\n7AnAI/1nnGBu98BNC3MNSIQcCK/h3PCUPqu7l/bjv4jFKi45VG1Wn6JgBDgm\r\njoA8u03M3/vRJd4MA/eecJXuwWBeBvUASCD319xgc/GR5ZJTg7tuFyO8p0j+\r\nb+h8oT2lsQ6bu8dHWuMmHx6PcUyY7wkgDuR1NdtPT4owCjjFYOhJkeXeX2lR\r\nLrTC7D9De9ZZ1/ciVXD9nJUy9sClVcpnIx4=\r\n=Pi7d\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7458ba0b.0","@material/tab":"15.0.0-canary.a7458ba0b.0","@material/base":"15.0.0-canary.a7458ba0b.0","@material/animation":"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/tab-scroller_15.0.0-canary.a7458ba0b.0_1669234714032_0.540346873224052","host":"s3://npm-registry-packages"}},"15.0.0-canary.7c35e5036.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7c35e5036.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"69862492b152c3c087cce4c005ae1bc7fb3398bc","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7c35e5036.0.tgz","fileCount":51,"integrity":"sha512-iwdqkhc9DrmQJ0Vp9fo2XpQWhnzzfvJNJrnQf5XEUeNyez/y77QFe+3+uy9SI03nm2cUI3+rEjD+lxLIm9TxQg==","signatures":[{"sig":"MEQCIDv7gsNCM62pZk43jEBSvzd3PV91ucRXKp8JiYpxBQRDAiBqzqKrV+NY99aVdmrtKTjnR2cvQHWwZdTDghxmNQjdug==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjfy40ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq2gg/9ExRpf/4IXvEyueI3oVRvUEc3w7GnqEOOUswVCykA/ux0cvSR\r\nhjDASodsAy1slhEWqEbkX3f1oM27L4B/SH0GL/gIVy9Mp1/u8ZHL+eTHwLf/\r\nVEa7+X2PH9OG8/phe828AYoXeTo+ogpkCecQd2BnMmsKqQZwV2ItUm9W8dXW\r\nbwLmk+278OZ1FG1LQnCtzI3N2JoZnbg7rkxwA3mUwb+jw6fJ0B71XfiteSpV\r\ngJFw+BSHrza7h35QJqquAhP0Wd5SWiisxb1nPe5kRWxsguZfsaSbdTzt3YIe\r\nffdiU7X9om/5ZDY2qNFHdcWZiWVbUoIU6DoNBOEZ+/cZ5h18zkiUFnb0uVjg\r\nWcwNDrzygME6rTGkq7tkPQTdcOPsiUUO8Hc8QoD6mdmxawX2CV3743dw3EEG\r\nBWvy3dD2i/XvUtSMrF3iIIjym/y8pO426kRLgdBSByOe2s9Cfha5l8jqDhjo\r\nDuLg5zBQLJmotmIuB+H36lBs9ARsYJGTwPNAalG5jVGPq68ccWGX2wEk2kc9\r\n6npZKtRy4oSH1wV/zyifG0p9LKW9ojf7HAip5lcB/94ODK7r+nnXZVhe+E03\r\nUaQwz252Bz8maoUs1fxBSHuadiA5oGNLVdUuXANXGsKoSsBUGixZwsgbJGeo\r\nCZFkCGORuV3D+F9j8yWp50HXZKaSQEJ7GVs=\r\n=etrK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.20.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.20.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7c35e5036.0","@material/tab":"15.0.0-canary.7c35e5036.0","@material/base":"15.0.0-canary.7c35e5036.0","@material/animation":"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/tab-scroller_15.0.0-canary.7c35e5036.0_1669279284100_0.8153620248567124","host":"s3://npm-registry-packages"}},"15.0.0-canary.4356e05c5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4356e05c5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1021fb3dbd0cb092d151abea27616bfb5b56e4ac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4356e05c5.0.tgz","fileCount":51,"integrity":"sha512-oJ4kTTJ12JqYIiph39eG+AuoA2C/71cif6CLlsDTxgowg6AYRkAa7CNrx8S3IP1aPjIB8cRxrUjaAWyL4HXUpQ==","signatures":[{"sig":"MEYCIQDAdGwe3+8y9+ckCRIGWl8CbiaPHqOCQwASUfr1gdG12wIhAIcNKFQ5/6kWH9qsDhSOPqBSjMPbnkhnyWyGXWNdEmdW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0BSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrVfw//QemZT3MOwcGai0rgDR42Tn5BSh49qXOLZwy5u/OMV8C78gOw\r\n7PLnuIzgGFACO/s7w6tq6URGFVlFe68CNr0KtQHNvvCUkxDsPmHVbOYy5iyz\r\nuVbwtnNNZ1sYYeuttmyvIilTX3LHoMO//mN/gSaytqmIgQFTha8eGumW+Mc/\r\nBk8+fnGfvIq+5gOG4W4PRAwUnohuWD90F/ecOTfXEf6jB829k0TzVVi8EaK5\r\nFxJYA6ADYjegU7wJJpvnyp6T0ROvYQzDomO4LjWMFXm893Y6o54K564PQqXV\r\nmyr6rgL4CCGTWfM+AATxNCGGcovKy6877zh2dtny9gK+cWujebws/T+feD+7\r\n5G3nscvHKsuIqWdTq/6LCBxXhojRyEy9ay7V1gEuaAhRUYnZuJXa3VBIHnit\r\ntYLJNgbkoMIz7maD+zZlMfakgJTRL5BBlProlkl0XOTSr8pf7l8T1ZoM8xnP\r\niaQSkvmtU7fw0MRlmNX64gD/Ip8QxLFHyCT8A1sMznGVe6WdXK/F3BkyjoMo\r\nwrZMvLMpeUApesN7g2AanYxWIxX8LBY8MQEP40kapi7wivCY3qIkHHZCN+UC\r\nPzPEiMoNCjXCrCFDOCmoMfuLGh7LkBMRsYCuVlg03vj1CDvgehW7634LXXgb\r\nfRcqzwjJ/ugY/cXGLZvJbbVnz8kNhnkhonY=\r\n=d2ly\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4356e05c5.0","@material/tab":"15.0.0-canary.4356e05c5.0","@material/base":"15.0.0-canary.4356e05c5.0","@material/animation":"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/tab-scroller_15.0.0-canary.4356e05c5.0_1669283922535_0.8307162829604486","host":"s3://npm-registry-packages"}},"15.0.0-canary.cb605f8af.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cb605f8af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8fd2ad2a8ce0da5a54bc4919c53fa9004b7d7b2a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cb605f8af.0.tgz","fileCount":51,"integrity":"sha512-BInJXM+KUG9M1WtGydhlGQyKhR4LzWPIWtuKd76hrg+nBOsQPyb9M59STiYpw9zyksr7aJ41rPL1ncqU/Xh+Xw==","signatures":[{"sig":"MEUCIQD+vJ8xqZIWfQYIXOvx8HJJpc2kBZKoFPHGm3eTMDTRHwIgUobTUJEZfG7T9rU2oE7AGgS5GXx+QhTq6CuGVYnXSt4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf0TcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrOhBAAncCEyiBXuGPXblOgzN4RJbGnWeTylkGUCrg91BEziizmZ7ER\r\nEXtQqdYxmxVDmYtvT0hdQHgTpOiU6dkdYG0FXO2Swr7kNK0O1tf3MIlzgrFU\r\nrTn6/LygFbKU0RH7or9a4iGizXhAuGZ8wCtIz7Qtl+ZJ+fY3T7UluOcgwZc3\r\nYxJe+ETwnS5n4paFkzw2pP2xKqXWJ0FNIhMyizB62ZmDclgG/ta1+809tsAu\r\njoYTxNrj1abo2dhQShJYy7aX1oa2dF3sqPN+UCn+jwrznlCIIZCcfgiJ4DAX\r\nMc/ttXAq2lr/Q4ZTEeITa0NZ3S2NZd/ke7FnSHBBokxtWnPRCeZi6Nr4Nj+K\r\nsnlDrpy/LCL0vKEjlPdUVyPeBTBH+6RPiAs6DSvsozEI4gmaRf1fQqNgVZPE\r\n56vs2gXH2hOY7EBtzivEwssXfbDC6lw/DWsEz+XJkug8DIMjYvyPYtyqe6xb\r\n8fNCixmfLnJn+/RGu6m+BhNJp8NZ0C1MgaOrfh7K98lXHECmvHxmdPjxBmUP\r\n7FwydrTJ5hR47nKwMp3iU3iOBoz9YfONcAveMkW+sem46roGrh8Yh0lrZgE7\r\nnAp0aHZMB42oNcMZwgP0gtinjDQLACoVbOjscQ/sGNf+Undb668bd5KQVIu9\r\nMykRdJ0gLa93yMQdJCwltiNoi1HoBiB8x5I=\r\n=9h3M\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cb605f8af.0","@material/tab":"15.0.0-canary.cb605f8af.0","@material/base":"15.0.0-canary.cb605f8af.0","@material/animation":"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/tab-scroller_15.0.0-canary.cb605f8af.0_1669285083918_0.0453741618154766","host":"s3://npm-registry-packages"}},"15.0.0-canary.05fb07f9f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.05fb07f9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"74a08252d4c185a588f97547d9d7a91bb9939213","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.05fb07f9f.0.tgz","fileCount":51,"integrity":"sha512-kuVGF6+7zdOceiGHcxV1tN12NxXWJOLQ6dnzupgw9jmCRNM6TuvL9igiGNqKEGn8mDerWSW0YkMUhJdNKPT0xw==","signatures":[{"sig":"MEUCIQCcdY8RcswXt+x6BF8KJPugnu7R02+tkZvHe/8At0mJdwIgdb/nOKu4enMQqbktgvicQK5kJH2bUN4IdsB1hhslSkQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjf6a7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCxw/7B96juNgkuot6/NgZRqjOZZkwJNL6EycETBzvHCSh3Mh1pCMQ\r\n3Z8c/JorsUA6FCIjQOfZfwYtXcM1h7wR2yRo2eSm4j0UbZ8y9Lq3BDfjPALi\r\nA8bbjtGqBzqxzCfvEwmVPQ5Ir/U2uICUB1ws6LBG22K2a7RbrIstjgugp0dp\r\nm3bQ4IsYzvN8DGQJ89aKsE4lvLGAeYoEpuH0k8ntfpdaXjNz9mGp6YTLFwCQ\r\nU1AzeTd5IgK8nyWoDjsEIqVAk+97uteucWgIbhiX/qnZFShp7bJu64lsC5F2\r\nm6aisQky/mY4whkujPKxtjx70lfLUW5OLNGxK/N8StFu7L2ubC42ycvp9v21\r\nLrwA9SZ5BvUaJEqIQUseeYP0mvx8/u9Q20rVj12lbIC9CAuIVZTJANK5Wz30\r\nWTxB+yn132yGC4bCDKbjZfMfsBdJqBlOwnxyqq//ttF50DXyFosUnTyFZ6lk\r\nRDPh1mGajGVACEfltJ7auh/7ksCVIQh+9Kq5Qmfi9MWyMftlOn3uK7Wyr4eK\r\nPZnaq9QX+6D4Up3knoIaXJUnJ6Ku+5JAoyQ2xUGTNgLo0wnzBAcq05Iyt28v\r\n3rVUR9nNh9a57wBahqQd6rU5k68m5pUnMqNWaHemckq65r6NpkylHzWUvo6/\r\nphUH28BPCtSQz0AfvrH4O8QCaOsE7x7L6ho=\r\n=9icl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.05fb07f9f.0","@material/tab":"15.0.0-canary.05fb07f9f.0","@material/base":"15.0.0-canary.05fb07f9f.0","@material/animation":"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/tab-scroller_15.0.0-canary.05fb07f9f.0_1669310139446_0.412425138870429","host":"s3://npm-registry-packages"}},"15.0.0-canary.a911b386b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a911b386b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f5894f14faa5b4517927c470f3628355beac802a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a911b386b.0.tgz","fileCount":51,"integrity":"sha512-zvHZvDqz9Zdu4cl8SNalbrI64EcAMqmivPaTEHT1dpqX7p0UrEwJLtnAm3PQonlDsqYV0HG68dCxbebLzvEsmw==","signatures":[{"sig":"MEQCIBUGjj4K5emqZ2e09hpxOd/rtYXwFqljobx+UolswW58AiBhqoI7Dpk1dW3xMielSeL0F/x7PNWw36JpK7/8GMrebA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhOaNACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoTxBAAkfTjhm8Vf6YQu6kRTwKkVks7IG+gYIcCL8WAGROSoRC+ppw3\r\nnGQd0Z5e5Q691Ws4gZEXgNyrcztqKZK/svH4fHmoWMbHvp79NjHMkHtwXJH4\r\nhSyVm+fu357bZmaUuhs6hGBTaNpmSxyZyUGe+3Za8oLOJDlHDjAcgwq8/xsR\r\n/92ISeIH97BSd/YaLXf1wqU4ZkVkV8mJOszYoWq5DsYLONTHUvPZVZgKd8jk\r\naPQy5FTQSi81jG1v4cvA6GljBW9PrnkLI4rNn0BXNHocygYBeEoGO81KK55K\r\npzMBwmKrPNLfYKuqqVHT+Q4W8pkAXPtIv+tgmm4O53gK8ildQALrN8/Pqhsc\r\n7zI3C2xl1YfalIOfuzyuA4Q2bzF/UtqaMfZS8jGsk1mJlwOJvp9eR1hEedhc\r\n9ZSJxD1mkfJUF9ubu2Aqd/+vyVr632ZFVTRGHrHKm8ALU1Ls389tD20f6Mqv\r\ntMj0Kdaa7dpcRi6kuWz61C+HfqVUoib5A4AbrmTzVv5Z8eGks0WH0BRrH8BC\r\nvI9DCUBrvPRMc3BwPUm6lBTFAheK4cET3bk1rh2gqBHgykv23aw3C20Fv7qk\r\nRc33jZCeOKGE1x8xkEZ+zaFnTPhnw+D+NLKVmKpfoc0m7LCJ3zRz/pW0+FK6\r\n2wvooW0btHSGmcCw1ZW2WTHgidTTx1LknSk=\r\n=u5Bg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a911b386b.0","@material/tab":"15.0.0-canary.a911b386b.0","@material/base":"15.0.0-canary.a911b386b.0","@material/animation":"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/tab-scroller_15.0.0-canary.a911b386b.0_1669654157683_0.21150167419368304","host":"s3://npm-registry-packages"}},"15.0.0-canary.2aa8050b4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2aa8050b4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5e458229a1148e470dcf75878ad9b9a1cdd53f2d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2aa8050b4.0.tgz","fileCount":51,"integrity":"sha512-Bqr1hfG13lPDj0mxscNA0Wg4JGjp01tqktY1YqD8Oeq1xziKbzAutm0g8mnK+Uk63/xJbxk94h3la/X/A+HP0A==","signatures":[{"sig":"MEUCIEXA7a8y7TI8s9X+yC6h1h9l+4UCCTJZCUmULdznC2UBAiEAsWCsQrouA2bmZ+LDqaAXz1+cKuss81D5w5NQizh9N6o=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhQhjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIFQ//ccQTTE78K4cmvdBhZjxktUWbbHfQPdq3sHzU9znsJcxbz9Ao\r\nPG4Ae1dKKty7LnOOPf2NgtGinE1hMP0oI2/ryZrHjnC4jtp50EQLLyTYApyp\r\nkKYJynRJJ5D0Kzb6xVem8ibiUllnqSgh8S2hv0toE4wXEEYaO3kU6RoLM+kg\r\nP8oEITgb0vEcxd4HRAVSxQjeUSiwRhIMhFJRgJGaq336MU8EsQncmwmNBfzd\r\nZi5IKcTlc07zxQFavuPX07n4EcILWGBbvZniRyF8ewf7KYMdI0+tnSXOUNLS\r\ny2KYEq2Dwe7Ed0qrF2V/Xtl90tjFM8wiP4TvSkFS+x2komXVc3JAw8d2s5Id\r\nmjOJ/gHBXt28yWpYnfJWK3IVMlJIAArjvQPyqkjqxOfaJB0YWsxMfus1fyc+\r\nMoNbEoGmLcT/2dhHOUHbXAn2oPi8cKxWIuCzUJzxOpvvrsS1QnwN3s8cii6C\r\nliLr0S3SlkEvWU+4WpnKBfi+5rbcHfNZar5M5w89UODR1V/vjdDitXkm1y+Z\r\nDtJ+6vYiMJp8KXJBWZH3f6iFWz76Ra3HcEkSLhZt67JISg4urEYcZ37Q8+oL\r\nSVERh15IW7A2W34KqXkBUly1HVFCzSWkfCbgSD3s32lw7U5guj1dAuKTizWn\r\nIThkoERrgIRkr8APmG/v/T7zN97+sfYOVLU=\r\n=UHX+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2aa8050b4.0","@material/tab":"15.0.0-canary.2aa8050b4.0","@material/base":"15.0.0-canary.2aa8050b4.0","@material/animation":"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/tab-scroller_15.0.0-canary.2aa8050b4.0_1669662819272_0.5198102453755977","host":"s3://npm-registry-packages"}},"15.0.0-canary.323904a9f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.323904a9f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a5e53a1be668e7abc439c76c8d05d75efd5bfc23","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.323904a9f.0.tgz","fileCount":51,"integrity":"sha512-1IZ303WOgFDkP04QbRpFaN8gFrUZ7zbo8Olibfe3mBQG9Vhb7EhxfTUyYrl5ks8YfQH+S1+BpttHrfUXlbD2lg==","signatures":[{"sig":"MEYCIQDQPgJRyai2cW/ZueP0HSBaCFSzt95g0sY4gRwBgmNxAAIhAM57SBwLPTMJfmtOyzoEjsiqlKFw2oFwqTpRw1icXI/G","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhia3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdgg//bj2+U5buayWiG3vlck/TQ9/YAL2g3PRxrcZo8v9YtMq0wCZr\r\nEj75DcZy4ywpV7PEhOzUddvaxOxlwuKDmR9gEvbd/lFJoX8cRmm1vxswl5hm\r\nzrlcZZyFNcj7e0jL5+vV00kus/qOqJXYJA+mQQV2r2wuQDnILqM3492XQmNi\r\njnPqcqe3swRGyZq1kmr7xPdYbL9ABPA/c11o43lECZjRwhdRuZw3hnEDW1Hf\r\nG/3e+wVHC77vGoCpHcnhwVriIijqJVzyrEN251+nlOMaCwntXpaZr4OMP94q\r\nMlXsDtHIB4PRZcxsDZF6A5cAOUuDmyrqmX2m57WQnL9AYNtu0aey6z6CxVRk\r\npDYsujWgvo8fdDnsOCqd5aLW9GpssXJO4q4mw54CWM/oDoafwg6C/C0PfT63\r\nNmdq17JNtDK3CnJZgxWcmlPJv9z2qgfyGatHiZg4LEMJo9qnE2mso3xgMgdn\r\nLac3ADwyWnhzvyPHbiVMLchYeFNIjCRoVL1py+ugfNaOLSyfUcpf3ucjrvjM\r\nS/fMQyDngo8v7Lx9RiHvGU00pCrQRrbqqK+xZpm8r6A5NkuwAztQKXr3lGOC\r\nEWGmYNMDPoctrQP2SXg+LHKEF2TEB54GBWTTqt2cqLQbGCvVeCY9DTu2OsQx\r\nAqYQa+OTlFll0xJYPDQ0awxkDZjqhdpQSO8=\r\n=U912\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.323904a9f.0","@material/tab":"15.0.0-canary.323904a9f.0","@material/base":"15.0.0-canary.323904a9f.0","@material/animation":"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/tab-scroller_15.0.0-canary.323904a9f.0_1669736119263_0.8580112896829011","host":"s3://npm-registry-packages"}},"15.0.0-canary.168a629a4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.168a629a4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9e52531a9f3883ec32b604469cdfeb88d93353c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.168a629a4.0.tgz","fileCount":51,"integrity":"sha512-jTm09vXS4XyKMe4A2/FcAiOeZEuV+KCBLP3xKk8onq3Gf1auI+xz93gaBCorFcJYcpgBJvA7IUNdF2BHKPGMcw==","signatures":[{"sig":"MEYCIQDBInO5aHKLvZOqlxenLNApaarqF9C5iWKfs5EVFUtotAIhAMrTIFLJpILH38tAgAv9AN/1LusrlAQqeU22O5MMtph6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhjhTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWmA/9GABlqXb00G39TXkv4K57feMkxpanTAmvV4+FhcFJ/NsTn3HC\r\n60DEtn2o6EQ8lTUkNjMU3CaT9LxkVJUTBdtOB5VNRefkNmpXagtViXYlLvu1\r\nvhwAEr0+GT87MeygRFu+G1DWHLgSGYI2w1mUTlRUPO/2K8maf/wdtkBR1B/4\r\n4l9S9PJm8pH/aIL2H/+Rsdm3k3G0fJ3BkCqqe9cl8aLk5oIA3rfN4DrAVdw5\r\nyKs3rTiv5ZIxVe2/U9tS6lpz80OLDdyvDCKsOlhD26DqaeECml3WtdiTYZJB\r\n6b9qe/IZC0BHkrcLWb7NVJ19+t1aBPizQroYpWyehwMOLlLBhS7UdN6hyNRR\r\nHCt4GrTmKrMdIN7rK3m0rfqOKTk1IxTRmVbFFDXdlylwrMc+vw6v8E8JVJNH\r\ntLokn0pRmPvB1zCdniC8XZgdvTbW8rZHuIS04xkk4EcR2ZuoEvFEIsdQZPBW\r\nenVG8KYEWsBlf8pYK4PSGg9IVeYVYXu/VtV5OmOeEDLPne9Nbv4whrTrwtCw\r\nRfG7YU9pr8V4e4X5Q6s99frG/QRfhn1bpnepZozey60ItYCOMIpfMLatAmMT\r\nyoFn/QR+Qb7yIqq+WihQAmfVe6L1lyoXrGyZzglBORj3bjqM5BpaZVyqzJbF\r\nu/1Q+Re2EJFGMEMf5GbCx4enLjbQIKzx+AI=\r\n=Jo8Y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.168a629a4.0","@material/tab":"15.0.0-canary.168a629a4.0","@material/base":"15.0.0-canary.168a629a4.0","@material/animation":"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/tab-scroller_15.0.0-canary.168a629a4.0_1669740627351_0.17051019414753288","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c411674.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.65c411674.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6707bafa475da5a3aff0e6bb640917c64f460dfa","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.65c411674.0.tgz","fileCount":51,"integrity":"sha512-ui/vMvoSt4PUVzuGS7q/V6Qr+6Dfl0Fr4IS49wdeYhqa5Te2ltbwpHnr/lybEBmhy2aPuzd0u92hP7NwU4GZ2A==","signatures":[{"sig":"MEQCIBBwu4KOF/gGN4nir8cVnf6i76uTUVWJB6YJ21Tvzn45AiBXz+3RU53MlMAdukk9TGwOQ2/f7Xa7Kdhp9exsd5+4IA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhkQbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqffg//fR//5gGCxj/gnwf12jyYT969JJDriEhkmqIe1bTSbmLjjFom\r\nIyI2t4bXc3V99K+fHVdfMknrS4LnlCmY+z4+mmYBzGcc1/toZ6qGWemALVR9\r\nNAJXlq6En9C3rXm+/G6GsGMyqZTN4FkS/m12pSE+kiMkarkY2ijKIkrxYOrz\r\nNxEuU4+7/DwwccNoHsvnQMsVftVRjOXQQyKclqX14IqbrBNKmh5Fqx9LBHe5\r\nxaQ34czQDWn8B4rqRK76kruUU5tEAW1/eEQwPg1s0oRIyaN7iKsql00rvUHh\r\nxxCrEsBncer0QnZkLoXCMvSOebyANAZyLzIewkPg9EWJ5KnY/+eN3ddvxlLK\r\nlo5s6VVNkw0me+Fc1KsvXo/wfayrmSzBizBYLz73WSE+xRtcghytHitsUwLc\r\nPabilBdG+YLFhVKaFLLsG1qW9IUqL583KR5iorCY0L/tSEMj6DnLZqj23yBr\r\n/FJzJIV5UzvfiW39TH/1WfSCyx76djtlOvKJlxR8rXVTiyhT3qWG9wmGixVj\r\n8HCzf9/Wq8XzqdfsWSyYRCc8QQxHnjgSkOM/ZbBzNuqLCAOxCf0Gn8UDDgy9\r\nJMTfvF1WdlVeAuQcM/18imuDSa9xVh91/H9S6yJ5KfKV00QWm0fF+loh3N92\r\nmeZ4ng0yV0SubUO0dYLvQBVbSf3Vni00XrU=\r\n=i9hV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c411674.0","@material/tab":"15.0.0-canary.65c411674.0","@material/base":"15.0.0-canary.65c411674.0","@material/animation":"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/tab-scroller_15.0.0-canary.65c411674.0_1669743643262_0.29607660826880045","host":"s3://npm-registry-packages"}},"15.0.0-canary.a86d36fd2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a86d36fd2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0b31c3bba957b1ee6dacd82fa0223b8ed8ae8dbe","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a86d36fd2.0.tgz","fileCount":51,"integrity":"sha512-lHYGU4mZauuTYCNZMkkw4X1BcRth9GauBOAy7sUUGgE1YVFzHIpFUb9ZLaXgvMVKlNGX9JWjG+qD05GwxxulZA==","signatures":[{"sig":"MEUCIQDoKKe8FJ5W6NOLUwZ3l1nSahKRAI1XpNf2aaJbKjY5BwIgYAMinfjx6D/xwtxYnwRCq350g4eJ6JdiQF2zGBEvqy4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjhrzqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeAQ/9HK/gLwpss8NmBZ9jUtvgN74dqLFBLG17BdaugfxNzcuCGqhf\r\n+U6LY79vM/EYgFLc6SK7bnGM/vuzGlft4eLL1RYZCdPIWuXG/z/OqfXP172X\r\n2m+cACR+AZnEZY8/uydo4az7Nro/dCVsHxtLLWNt02F/4FKuhqF7BmQ5G+yb\r\n/0TH6/nog8doiJ2PiIO+ZPa0HmdL+KCw8m1B84YSR5KmTUonXCYNU5JnlAbG\r\ngYq9lnlNodk0F1rPwPmyio04bd940x+DuOW584KvYiE3kmcZ8pU3+lkhutPu\r\nMMp4r38sQDirW5hQoJr8uqtraVAQxq/h57DuaMbNz0x/fbrmuQ1cWOJTwlzt\r\nRg5diEzZm9mSiZtsre+GoLBybg/oDYuyV0tupQyMUum760XlEZ7fLX5A4J04\r\nVNMiR/kqdgOQA0UbSgw8dmdF+Mvm0gz5FPEyGcTRkecrouisptV1wjL52ulX\r\npGbtjhCFBTQeE7bpHHa7K4ZQPPke0mbQdjml1aua8EICe9lpNS1g1GojcE0v\r\namkLc4Uh7R9RDdjM012YaAikeFQkc3b1Uv1e11oZylOY7j4u/qjOGRguCEZA\r\nDFYHVoLkadYsyVXq+JsWxAKcPJ3QgyYTLFyfGTh6pH4U1Ho1cljWv8fgd/2F\r\nhiSZBH1QU9YHlGuf4RorvheU/Q8FXt99Wfc=\r\n=eIrq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a86d36fd2.0","@material/tab":"15.0.0-canary.a86d36fd2.0","@material/base":"15.0.0-canary.a86d36fd2.0","@material/animation":"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/tab-scroller_15.0.0-canary.a86d36fd2.0_1669774569919_0.6182296200324249","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a1f46c66.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3a1f46c66.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3e064a2c56157807c775b5789ff0910e922e2f49","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3a1f46c66.0.tgz","fileCount":51,"integrity":"sha512-5RiX9nGlOe6UqNwiYLSc1jm2/enTjiENZtGHyXtFoF/Sn6XjjG3QOB+7uwiX7YTCJyGafliMKJS/PrC05TXXNA==","signatures":[{"sig":"MEYCIQCSrxjV/zRr6GEkaRtdS05OeIwOyP9jIZ+t3yWRxQJ1fAIhAPw17pEG9V5rkpD/9OEtiG5fIymowwnvJPmcI4nlvWGR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjh0gMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpLHxAAgqhOseMXWVIGBCA91SFG8fTisWHsVUBUuhrb5ibvlZdHbGuQ\r\nYVpUoB1O5I/f7AwoYSglHG04uDvycUgqhvq9agsrAsTrcyZ/Kz6bmzB9ab2G\r\nWPoHgfz2BFJTnRngmYxuKmqFptAYKzchINivvZZsSc8FdI/Bxrf/5HfmUk1W\r\ndu/9voxc9KFwnFJhXP4IE/am/o8Mjw+Y7yyjQZC2z+9BUAeR3F9xjqdcH/mQ\r\nzOnap4lGLPCjmSShKA9PZ6GfkxrWO/TSr68DEsEDZEkujx7e81aBNkplT+45\r\nFGdbns7Dtipg9vCr55/wNYmdtBkS8uE/3PG/eevWpCRtvvWRV2797lGIV54W\r\ndo/0fudKIKNJYZlqrV9JYRYUkg4UxJycrzwFGGSx9oYWNjV+wDjQYIUARGYP\r\nmpj0XQGfs/ulw0AMsY01pZ29O4Ej1D00KuHaKhyKXTglS+Zxpk1+glyUwLzo\r\nhLq+OCHLjwXOgf39CRcO+BehuHhKjO96IRDUqyMuA+50meog2hgPMeRm9ip7\r\n/tOuaz55KRBzLGS4AouupigbGU3r2KAMb88rAtjyuHhbYLCKYvnBqj2zIMgx\r\nKqbxjj3hu+xFN/m0NMYgPjg/azpm62P/g4ACxQ85+jWq0M2pwnlObSRbilif\r\nmQ5tfzMHW9yPcyJelV2sm+miXykfBU1hjtM=\r\n=djxG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a1f46c66.0","@material/tab":"15.0.0-canary.3a1f46c66.0","@material/base":"15.0.0-canary.3a1f46c66.0","@material/animation":"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/tab-scroller_15.0.0-canary.3a1f46c66.0_1669810187850_0.1591292786777656","host":"s3://npm-registry-packages"}},"15.0.0-canary.32d8a9648.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.32d8a9648.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7816dce234674c27e9f7d424891a789363313575","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.32d8a9648.0.tgz","fileCount":51,"integrity":"sha512-FxCAOMxTgBuV9HgBJalw+8DtLSnALen+RP3Gl5jsIFVqpSf5Yp7EOy1g8AIk1dFiq0HimJEgmo6EVIEnWJQImA==","signatures":[{"sig":"MEUCID6qAUOhzjG96AbIPWPQBsZq6kmJ/I9mXsnKs1vUhOgOAiEAyPscVQ4mCeevTXk3515Cj0BGCgxcZRBFVdYeKRYh6Tw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiOTkACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqNbQ//fzDPGSFXfEn62qiN1JDk8YwAd23j/Ug026oOZLv2hrNco8gk\r\nZ8dKqnxeFHN1iTaFT1aPfko/How5x6kObhAD5OeaBbaiPwwf9q2CV3jBo/fz\r\nOO4iWw18Kzw1xZNcXFjtYGjD7oMZpX9QF38y4KDKZiXzcAfVXMNR7ORzBhQO\r\nnjVgQFJOU0DNViVb8PMrsjW+i56Mfk0i95/9OPtJRuxdN8Gvykok1BorvSv6\r\nJD4l+MZ711Hm104lSslBWtqdJdVDO1B6suuvoaujei/ldW2NrZQpQGS0hVoH\r\nXbCM/wrhHzqBb91vkTU4QlpbfRYmlXnGgSiTe/+VDW3NMlIjV96geAVFpLp0\r\nar5uTT1a9j/f5nm7tASETmkKRLuX9AjejhYM9tL6YiUJwstWPklPN+39BB7d\r\nzcvMTdraBHD+yEuFxpPH7OEF80p/2dGWGaJuc1VkDJEbK+WaJWlnwWxIi+Un\r\n7oiDHCLMuBQLt0pwj/2AOBhXsFUiWL++M1PKb2HGYy1B7Aq+O5D+mnB1A05B\r\nyEaOrZbN6tfjmwFkJANi2pjkxxbuf8Sx7FvEbah7IeuWZAorHaMFOPP4uI31\r\nnrx27TDpUYv+pniKd1xOPfgunudMZIuwzYhw0ejm6RKP0XzoiOSGsAl8jaxV\r\nZwgSgTfI6rloy8CTArCGnoCtAChBjMUt9IU=\r\n=ZrkQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.32d8a9648.0","@material/tab":"15.0.0-canary.32d8a9648.0","@material/base":"15.0.0-canary.32d8a9648.0","@material/animation":"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/tab-scroller_15.0.0-canary.32d8a9648.0_1669915875807_0.9582629298018144","host":"s3://npm-registry-packages"}},"15.0.0-canary.03618ab70.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.03618ab70.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"78f0c4a4214e85621ccd207aa1c07b4e41ac7d06","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.03618ab70.0.tgz","fileCount":51,"integrity":"sha512-3wuD9ESqOcQJtMSKQ8U5BRf6aPEHbSW8mdcG0UQ0QcPlk5rCwZRcwgPSw1VlbFwEHsDWYHEs3I29khWVXPot0A==","signatures":[{"sig":"MEUCIQCJasMhrg88qO1od7B+Fk+2Yebd06TjnkCXz8k6oKPVuQIgOIAqoTJtyu4+lKBn1YIGmu2BBZrHwB/+S19BBtPsAb0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRT3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpXkA//ZqWyXwSoz4dsXvHtq8xdxQkAbOqnulHtW1fipQurvumrwJuv\r\nnwXai4UKEEgJbfXP7JXwbAb8lhard/RWVYohdYl7ZoY4oYlu7SXZJat5N2xw\r\nHHYzuWKSIwJPux4vmfTTiQ1n1IWm1D5v5F6Oe/NtCK3c6sCWxRJNd/ESR85w\r\n/jkf/If9JYQSDWKFreTGzFwJqapavpdJoPDpJSzfP5LdTPRMUYX0SVHtt/hn\r\nNvq+mckoragIHmOvqsi1uYtmSqLf5I2PsSCqiRKoCcgALtDaB9Wm1v0M1E3l\r\nkc7Zl45ba9rBrEZm3cY8izBiUrZTbLAQvu5R6QEY4JNaRBUXYEa0nEeu/Dgr\r\nNpZ8m37xTum/L0ZzvCpvB8+Lc+mV6w5sOy7r/ihm0RVr1xuYhmjbkhxWKycy\r\noV3/nzqdY9ShAtDdpeokKbjn/nH8mdOt5eI4kKsM2ABbL4UC8saSu8/eRXn5\r\n7ppolGrYYOicMqFROf3BFUgur6ijtUdmj82wq/3ai6efvENcDAk10Rm/cbtr\r\n7rEV9rOpOcBW5JJFQ4V9QJp9fRLC29qzDLS2UwfwwETUEYt+cXi2Ez1gsBn6\r\nrQ69Ip2OHYFax9suiNO4Cgs8I9T6ZIPnEs3sF9b+KMgqewV+tV4WPFXMpYM+\r\n4sfCxOtfpX3qDlLr8qYW5M6Zvx7G0dHr0Kw=\r\n=hflq\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.03618ab70.0","@material/tab":"15.0.0-canary.03618ab70.0","@material/base":"15.0.0-canary.03618ab70.0","@material/animation":"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/tab-scroller_15.0.0-canary.03618ab70.0_1669928183172_0.010418747836687503","host":"s3://npm-registry-packages"}},"15.0.0-canary.68aaed940.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.68aaed940.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"42b04bef9bf1f9888a001db2d3a09c991cd16415","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.68aaed940.0.tgz","fileCount":51,"integrity":"sha512-mol5qZ03tm59QbG+WtyBaBSLwoBYKKH2/ct9MUnC1b8xQmUNvTn8Yvwv2fMxvxMoUbAKouDxuogqdlJdwR5vdQ==","signatures":[{"sig":"MEUCIEGhtyUpNSDgM4YBXi2Gckl2ci191YLVGKJvKCqq3a+lAiEAjmULbVxmhQVZep4ZlAGWZivnYQKM4u5Y5ZbHb0RrLBw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiRvzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCIg/+O38eOv++VnhJ8V42AYgo9jasXcWeJqQnVzc714HcDbYJrPEc\r\nmX2QaF4KKqR7bccQO0HBD2LiQ3st32vxDp/VhDQoZxt+kOw3Kqy+n8BIqDOL\r\ndrX4C43dCfg13B55l6VQ7a/OqCEi10+DvK+nWfix1eXEjG1rNEwNEcMfY+fW\r\njmZ3z1QTa3D+O0+07xzm7tKPEhtyGda0tYyW73ettUIIGaBqa7jBz/klJ1H9\r\nFnlZvgfBNubmpF0gWGwZGhDJxNuhGu6sIEj4+4hbtinRTn/7Hi+vjBjEZM0e\r\n0OS9NpX0Z+1SyEKghVrtaANYVrlp94GAS+Jc+4am8gaU7QbxXmiLLYKaf+VX\r\n9/LU2qHm1X3o4Hjq4r755IEj4RRMp5WPHIyu3OlP2gv6F1eb7dSBGfqNw8q2\r\nPM7RKik+SdElOoVXgrtmiO48obhEUfz6qBhpQOYc58q5sVz6t6FmiU8kVlH2\r\n57tJ8TbzrBR0qSbO0e+WSIb1D1LeLWF7dhD+RGatCFHFBknwuF0OxwL+Cupy\r\nmEtDxXKSN391N604P+p+reWRnl5YnJtjA2B8IkKt/MbgfNITdmpawaBIVlMd\r\nt4ISWBRM83rME6Pi760WIp2XaFMF6dR62uz0Vr7GqnnNFT5vk6PeE0bdDt8V\r\ncwPlGGHe4aFV+ZmXrizVuLANYbRGrcGuiZ4=\r\n=Unk6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68aaed940.0","@material/tab":"15.0.0-canary.68aaed940.0","@material/base":"15.0.0-canary.68aaed940.0","@material/animation":"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/tab-scroller_15.0.0-canary.68aaed940.0_1669929970872_0.30088881972104087","host":"s3://npm-registry-packages"}},"15.0.0-canary.f0a0bbc75.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f0a0bbc75.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8de121f1af41c325dbb7de94ff329bd2ff51d822","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f0a0bbc75.0.tgz","fileCount":51,"integrity":"sha512-ruF1h1BZQLd/XDRoStJUvqfD4pmBmu1SZnelodZS2ila32+d2W85a05Ud09GyjUDpbLYrtfj3ddzyRPJVFXRQg==","signatures":[{"sig":"MEQCIHXuAyM52v/rBU2Lre8YLt5arfjnT6Uwa2YR/HZIbsnlAiBWAx2xh1uvRKI1JbZAgnNgGwsbKhVK2OiYhLaM9xpeCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjib9QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMcA//WrXTMiFKQ9yFciDsNuDmggNCkLbJMXANjG8PTW9Cph3075oM\r\nY1gUOuUrNgfcQZsLju9WeZ1bUj/FAvzMPWC/kYRRDpUy737rQCBWFCuIHOjp\r\nV+xjKmFANUv1lxtV7ivUMIxpSOvXWsXu980wYMLhaUEU4NpS/ox2zhffkph9\r\nb9VE3XZXxzqlcS9SSgplA35gYGLqM+goafkeMnla0RpOiTS0gooTWOk0e9Ne\r\n/Pl+5qNWpEuzz2zwTLM1K3jc3xgh7ws73PAP7Vp8frl0VixjNlEZHQciRDv+\r\ndbDizcXDRON/cgj6veAkbZ3BS6NjLiucUtjlHZY4Tj6VJHzKi2DQvlc8bALd\r\nbw2ZC45QzfKcQ0r1MK/Y9noo7FHlpt1eff9xSXiDxfO1O1TOGYXWTcgV1QEK\r\nU3AeLls9ZHSsPdEBjidQFns7BVBWKm11RS82QawoqkoD+3mfcq6Pm/FVqqG3\r\nFVUyTpz0FOmy7idIAFqKND3D4f3FwvkBkjQz7jkO6adpNk4sYGv4+lIkbFAH\r\nOYoOzzo9XIg4H4Xyv2ATvF7UY/cHI2qQARWK15DPfWSiEhxM3Epr5e1+qikN\r\ngrIF0rlH53RP/0eywRXCEq5PDf+LowOlF9DbC03AmQ0n3TY9/Xp+42s7dSa8\r\n5VDI/zb3ZG2ycWeRy0wwyZToebFmYQBPkc4=\r\n=qnPn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f0a0bbc75.0","@material/tab":"15.0.0-canary.f0a0bbc75.0","@material/base":"15.0.0-canary.f0a0bbc75.0","@material/animation":"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/tab-scroller_15.0.0-canary.f0a0bbc75.0_1669971791809_0.06950498388793425","host":"s3://npm-registry-packages"}},"15.0.0-canary.dd99c8764.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.dd99c8764.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"880ceb7559b13ec5d891e4626f23ece4b529e532","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.dd99c8764.0.tgz","fileCount":51,"integrity":"sha512-qehHjk4n2WOZpC48qeDwRQdhOf1biIbDnB7TvdYa9x1KjmTASuBwAQ4q1HLTZ5nV/g4BckO3DQ8skIGBHSP1vQ==","signatures":[{"sig":"MEYCIQDHylVTMVgnq4NlsrCN0YiPkROrZ4su05be2LFKJ3HoDAIhAKBPtMkH3M0gJW/d1MCOA8vgLdiwY/gPiGNRUcZzDkj+","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjigWRACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrd0g//XMKmBp9zZk6NG8uraEr0BgSeyYuBKWjQ2igHnnwr7qmEZB58\r\nmV6mzyuYtQL1ncHEx6OIggGKpv9HTHED3aF6/Ss4JKZT/hf1dOEwvTuQZZaT\r\nfT/UfyuhiREYr0mqrxbACr6ksaI0FIVfRBsYBbRmmfvAPJqbMPYkv3Z7q+ah\r\nOogEKmMqaVPbi8MFOKGwi98ZaG4Jkg1AxOiLDxhZDqD7gFHI4i4re3fzCX5i\r\nOJmIb7L77zW0xkx8qkGyBjC/XbOAyXagXdD346vRG3ocz24fkyUIpqQz2vy8\r\nXQyOag+BjL0w9v/S2a3P1oMEQn7nmph+yhpyfENlQvqvn9HIKPTvho7gs7el\r\nMcoVba2rQ/Rc1RJ1WLDe9BON3opAJ0MFpgGao8K10P9QlnAv5X6naa7GNI3E\r\nZxkAikmgrvzR5qhME7DNBme423c/g4pLjGbMX+bZT+t5+SKzGjaicbws7LeZ\r\nsGA4EEkVivyPQkodVWtwnH7/kfHlw4+5gBCLuMr1KOGHdepCyoXk5A9opkTv\r\nF8O15OR4Zff0+5dj0DViAH9CVEUlTz1hE68nAcDugRI/nWigc4PVpHL7Z6ib\r\nT4jK1O1vth1AeipjoGsNeZVjI/x1V9JKY7jtD1iPL+4GWey4Q5Jmd8z+Nqb9\r\n024yVyo/EmnSRvCxm2b1y8/rm/oD7GmlewE=\r\n=mq3I\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.dd99c8764.0","@material/tab":"15.0.0-canary.dd99c8764.0","@material/base":"15.0.0-canary.dd99c8764.0","@material/animation":"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/tab-scroller_15.0.0-canary.dd99c8764.0_1669989777056_0.5741922803871968","host":"s3://npm-registry-packages"}},"15.0.0-canary.fabdcca3a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fabdcca3a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9dd12571354476f520e0fec89cb939afc4f7c84b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fabdcca3a.0.tgz","fileCount":51,"integrity":"sha512-vkAAfXg1THMhkQ079N9XLOun5VQBvtjnExcN3CHRkbtdLIpZ4koCwHQH8B500jQ/qkkkIZLqQEg8xIcQ0rgDOQ==","signatures":[{"sig":"MEQCIFI9jRXnWAy0xrnxBL08u6qIhUEWJlfZk0X4lB27HZwKAiAS4qXha/ShdcLJi5sCkUWaqgSQrc9DaYYriG6XyHkeLw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjihUFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0xg//SrZ/KTJDeUQSiSGp36hQCzb27cK7rc8E+XQ5dCEsRlktYNVK\r\nU6YftbkrTtVzija6pl+UQ8MbtVAhHCROW+YGIZCOniQnopR5jd7LJaWHz6nv\r\nFxLylTbGrhC6958b2YcgRKM/ezh+3S/2J7AzvUm4GDAg4y9ZTHznQrU88QGS\r\nVINAmWTvofstDJ6HmuQnBWIXtcZLgGhrEY315UHn/Heebyva6IJNhKZMZvyB\r\nZEHXXga4wXeVHEuSzrXKmN3RylCE3iLaplsuZIfAc4aheG4yzyHkrHBTwm+q\r\npEJn5d4SbXbH2lo7m8FRxbHgl3vBTWerOF7gkxbzNmXgT4Hz/NHUqne/p611\r\nJKC3dO3mPavo2cV68ov+m27DV2s3VNLeNK6cAC71BBJTBv7zhuUqs7DMET9j\r\n1iCXmA4VMwhfWrngBAT4hGxZcokIzzv8zvyvnmjQbeVwvHNKwA5IVbYGgUD0\r\nPeRM4FnXXQqzUeKMYOtGHOftQWWCysfOZfHGsmx3ANoWlOKWBbbp+4Vgs++F\r\nv1m74mZXwCH0JH4sXz7+TXjJAGkJnp5vZRDKuSNV5dArhFspgo4Zj+0gQDqe\r\nPyWBRTgYB4z/Iz4wKWfQeIZGJgfcEozUPRftCfAZNgPbVqvPiNE8OI7OxGYu\r\nmKyhfAereevuSeMmCsrYtJ0LhB5SXzejcCE=\r\n=dd8g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fabdcca3a.0","@material/tab":"15.0.0-canary.fabdcca3a.0","@material/base":"15.0.0-canary.fabdcca3a.0","@material/animation":"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/tab-scroller_15.0.0-canary.fabdcca3a.0_1669993733476_0.3325828910138213","host":"s3://npm-registry-packages"}},"15.0.0-canary.2d26722d2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2d26722d2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"245f1ed4b43648176ad4bc613848a9efb8aa4f7b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2d26722d2.0.tgz","fileCount":51,"integrity":"sha512-ynJntfb9o9IxGAEVjFcZ9blF624Yd64Ac/9lnHkWnXkFxrpIBrY52Zh10i0J7cZK7xhzEwEywURX+Aoe2kVA+A==","signatures":[{"sig":"MEQCIEeQwql82qzPPZRGNWIoK0OD9iKnu7kmEEhaAAUQWevcAiAdKa7zxH1LyHRIGDp+mtF0711l1LvByO7bLuoZZZ16hg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjiie1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWNQ//eWzmg8C79iV0TtgSOGfXH2qnjKpor8plwmpqkeQ2rJM6GJ50\r\nztrMKje1lcktmgiVnDHNpFxI3q3PB7X8hZPeax4yXP4VTAFTtcf2A9/tXkXs\r\nxKdCn85i/Wi9xbqM86mcAeGsNgaEYn4l+/gmwUu6BkVPIyzgz2ntfw/4LQl9\r\nSckFNekQFcPP/FW1HgLkpDJoyh7aNaGnNI8Vkvpdke3060+0vJby2vrPihsF\r\nNa6M/14WQh12k5cFQDz3f3oKvY5ky39vFMnX6GeGih/lNYbLzFkETNP+UrsD\r\nDZSWZ7i7xPyfMvUG0NpXOZQkDu1MtxD7RGGYgyELhaUQFol+QrtkBSAOlJiu\r\nE2haDV8iXTOrmbjYkXyQnL42cxyWsJd5c6+oyF2bFIy9+GSEzsyi5YXIq7Nr\r\ntsKxc5991aulKUHvmBVX8zExRnK9nBbo0m9VBRgL4gTYWxmO/kiFwtV9/vlU\r\nJc5rgl8TrddR5Mb8nW6M9/QgGBA+MHV46w9Ptay/dR5vKkqu8l9uggjZJqi9\r\nXV2CHJvVXtmpdaYpONDPQpOSSBHSnhwCv10fV7RD7AAW7Tw8UzKEsllB/OAC\r\nOFI/KTyBfuG3cORy0hTvqeh2xBCt/1v8qtyg2QmQWX9CE30JFEfbUkp4Ed0G\r\nZvTnYsefpdyjFVdzzfkVST0X+X8LS05RFJM=\r\n=ZVnF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2d26722d2.0","@material/tab":"15.0.0-canary.2d26722d2.0","@material/base":"15.0.0-canary.2d26722d2.0","@material/animation":"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/tab-scroller_15.0.0-canary.2d26722d2.0_1669998516814_0.45363931139254654","host":"s3://npm-registry-packages"}},"15.0.0-canary.eaa0c3a86.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.eaa0c3a86.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"65a639e135b16a4bb71fff458e8bd987bf560478","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.eaa0c3a86.0.tgz","fileCount":51,"integrity":"sha512-d8/IZt2Z/YO3eAn8P+ooACsYCyazTGF+zhoEkRxC3hm3t283uH/Pr/xaRn9f7FFv35WqCNphXpcl09QcrP00DQ==","signatures":[{"sig":"MEYCIQCBTYJiQeE6fHvNEDYPnqUoVFirL9DJ99aCl4Th4ZSgcgIhAMMHoz0DbPdB3GCR5uS13Wv0YZwTc/Yz248BreAZgt+u","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjijmQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqjA/8DO0NAfbry/wIMgblrOZggHUVXPCcfZkQ4XcP4s+cJWjArAYy\r\nCxcpNjZE/2BVP/+khv6NKi+qTRu1LHYHzV/U00VMJvolPIeBPx0Dywiy7Qtu\r\nFW20cEPQCpx5s8r0DsaiUuGk+GOHuvXM3KtGASD/RC6XBgO5V3JeBp1xLtt6\r\npxsf8UJ2sWCYktQfBp5T6zbNW4Pt5skXPZNmTTBSVC2EMLkZ5oXn90upm7+o\r\nVXyqO5dNRnVXcU7FhjD0P46BEryPu2W21ue4UCvtCOL3do3n/IWx3eqxZDX8\r\nb74OlPp3U5j1B7W/rck72NGZIA4mvfk69m06VX8QEUS+F6UZlz+b9V9N3AW1\r\nvKLlKMY1mEEap03jm2K9OO58uKadi4WHsYRt3q6bkmiXmsZmNnEp0N1IAi7o\r\n8QAzdovnvtUQudh+mAgaOvd2eiuQGx80kjgyLVm3b4ks7tpZIgec0jc7wYp6\r\nUQqQgV/r72ma2eb07KbFECBOHkeDVrAXEcumk2eSsSOwOIKJkAu5D2bv102i\r\nKrPBoIOpQUhrYnwRY1lBM1ZAIH4Oj07l/E7YV7IckpsOaSW3mzJfpXRj3yRa\r\nxtrfi+gyzvN3WsP5erROd033qxTgwJ20JzEOETAc/DKDS3nAyoJWgmGVv7R1\r\nBGdDeB2GDbWDbKJgi+4O0rmMKQzr7G5/t8A=\r\n=APyF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.eaa0c3a86.0","@material/tab":"15.0.0-canary.eaa0c3a86.0","@material/base":"15.0.0-canary.eaa0c3a86.0","@material/animation":"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/tab-scroller_15.0.0-canary.eaa0c3a86.0_1670003087897_0.32811624295527797","host":"s3://npm-registry-packages"}},"15.0.0-canary.79a613bbd.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.79a613bbd.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d858abc78f2386aeabcd853a11ef685d64153c4b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.79a613bbd.0.tgz","fileCount":51,"integrity":"sha512-wtbsc5+veFoEmTRuNdVCJIAaGKkKTgTvgzQ+XSqLfbspH62LE29fJ3c03fFESYSa+qvkV3hMoSx++YFmm75Qcw==","signatures":[{"sig":"MEYCIQCSgI/PBcW9reBYHhIruPd+jS3J6DFOTB+5j1Q4acXyegIhAPtTaWpsh+h369lgJy2UYlnveFnm2hpU+UD2MiYcs/3h","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjj1E+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1qw/+JvnhG/+NcCCWpoeWEr6MOSApav4T8Si/e+d8CQ0RzXWdwfze\r\n9VaWQQ46GKw5rLtxV64deFAyv6kVksIVznk3lnD+VcO+lkHuBH6cYZa155F0\r\n0AMpQWAOjhUla4PR8fJYoD2BftHwm9HfiG42ieBb8G5Jnh416thX/2jtJDmo\r\nW+eCimmWkszVEwNap187TfB2YINjPYsxqJ3W6aKzCPPA0TVPNrirhyCPwCbo\r\n602SuuFJZv00/Yptv6Plynx8UWi10BscqbA64WkmwA6YOfExWELpSclXqgYk\r\n7QZVb9V2MjQIFTPA3918EKKOrNId+nhwoxtkAdW7KlmUwA/NpQ8VrCCHs/SD\r\n52nylCr6diuKD6857xBEAhLX12/NtjggyV0Gjs/5zhYdA/0WQYON4cNkzOb/\r\nIjy2p/zpifrbuc/mo0Id2JnOXln2kHbdv9j3b3yaEWYSe9XpLqYB5tn2XuJI\r\nV9cC6M1GpN/4g0K9NRr+2Gb+tSqRwbg8hjrigLuh6sWp8fuaRkHIuqyHQZYX\r\n4kn30eFAGC3ehMsrtywqLYKcJQjWz8DIqmn8HoZ512KMsIl4zPETTtN+5f9F\r\nwO/4fY7PIQ7lUsEaNYM9btXDSA4PYQz+slEqNW6ntWIFhYN14mAFL8JNuYZO\r\n7IQLeLD4vcDCOCxc8n56hQE8PMfMZs+4HFU=\r\n=ohDG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79a613bbd.0","@material/tab":"15.0.0-canary.79a613bbd.0","@material/base":"15.0.0-canary.79a613bbd.0","@material/animation":"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/tab-scroller_15.0.0-canary.79a613bbd.0_1670336830656_0.48185449418165094","host":"s3://npm-registry-packages"}},"15.0.0-canary.c871fe61e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c871fe61e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"129d4203f1afa3d800bcfe63b740c70929200e20","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c871fe61e.0.tgz","fileCount":51,"integrity":"sha512-UtO6ivlxSaUi3e3CfTeYV+Y5dIEDetHLfISJu/Ao+APWnwqZIRB60Hqx6g8YoN6eeQPJAD3EHvQZolq8BynyHg==","signatures":[{"sig":"MEUCIH5yqqju8R+f4tHdqleN2SmEDsDRZlArVKXXTAycbBehAiEAg79786GDvJx1loSQvf4bElAUnV9ZDZFueXyOVAGxBow=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkEaMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp9YQ/9Fbq0UPJEAnwhX594Ww1P29vD/CxfAC4JKTGfC7rPiFf1DzCn\r\ngfGkAvRDVzzZxf6l7Gla94DegOo26rV+OW4qbeu9PNHH49XQt2nK7cKRLwQG\r\n4+W3NPKyLQRYXORDNRE2o9mQCajPMzXH97IImzvkRImHYgIRkv+NFkbmR441\r\nBkBpQN7rkjPDM2bNGQMyIm8zKStY2xAGKWBwIlTrQNGNyw3S8VLRSIKOPFbh\r\n148ep2mccxHo6h/paxdbsyKFYtgg2idXEmbeiPRok6mmK/DNgmC/MEZQ5bF4\r\nzKotyLm8DME2BRh29I7GIcIsqTnCYLilA5tLLpCcSw7GfxT9WtchKAM404H+\r\nHwrLFRCupbA42jRfZMG++Uki0TFr9TYIng7v0+5CIvpneuC1ZVedn6RCjDvc\r\nVqgPxGnpikYYTlATbjj4AXmMmbjzyPq86TAN56fsKGK6BsQqA1ZiRs7yOfcb\r\nU5R5Eme6fDRThOw/jUc4L+rJW/SwR/B3b+mjEjMHeRwX66XKV57WiO8XjAeF\r\nbPSapfsPWJqHeH6yEc5pqAql9O+sKqDA1NuSoNRzFm39TU0oYOcniNYnuEOY\r\nnSlPgf+TyWqa5OD/ce8wX/+3l1WBDfhMg6WXDhHVitRFtVgxMUpucglspjen\r\ncuoQwLKHdDXmqsEtj6SdFtScG9bsw7QktX0=\r\n=ylii\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c871fe61e.0","@material/tab":"15.0.0-canary.c871fe61e.0","@material/base":"15.0.0-canary.c871fe61e.0","@material/animation":"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/tab-scroller_15.0.0-canary.c871fe61e.0_1670399628526_0.5431330853662406","host":"s3://npm-registry-packages"}},"15.0.0-canary.9eaee7936.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9eaee7936.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b904bd1e55380995e7cbfcd1aa4f32049995766b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9eaee7936.0.tgz","fileCount":51,"integrity":"sha512-AxpRhayq7Xu88vPWR3ieiEE0RCs5bE1LougsJYZ6Zs64GCs65wrBFqHLVq28QLGI1U5inwxZgtmqXAmS2eG7aA==","signatures":[{"sig":"MEQCIAif6dFw9OsXXdoEu2F3eGrI59mOdAz44UT4/P7uXZcFAiAHfz5nToKsZ5uZyt666DIJtin2ON+2pWpLI+UsCIMbmQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPIKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpdWxAAoCqTgeNjQnZNxvPYlpPyGUYG1lFQpqkowckkx3YR1Vsrx+HL\r\n3X0+6nhLMf+E3LEDErCAjeibOeqxLwBzCoBT7enLm8F72sFaO85oU9Wv94vf\r\n9IodfaV15Q47OeRw8RNobkrAEgRe9dRoNk/hNDJp9JC0r+izCSzWQZi6SVto\r\n2/RTD93VK2p9qwgEad46ZThCsEx1WTp80WAO4qV0hecLmlUVz6LKxHL07Yfs\r\nnt3vAZ1iJFj1VX2NKMK7vx0Mrk94quUm9Z5Wv4bgLV22Y71+9bL48CP5b2gr\r\n+rXg4d0d0XMyUPr1MgqzxSq4J+VZ5vBoCMy22d15yuKx8F4dw9iBTCIyNnRz\r\nUkhdi0XIuNC5bU/+VeDU+2I5bieQaxFwWZdJBG3IqMSzqDV0+IiwAHrknUsa\r\nmpcXPEPSoMA6iGqTXcTu3G02/VxZIbNsg9wQ6JfGBsnjwbzNFq2uuJQRt+l7\r\nvf1NTEq0ped2TY4pBnJQyKRMoQYp8QLblfEly86vxIYMytONPKTMcq1E1fYs\r\nPQZRfsOVHRapeD/H7euOh6oRXOHL+MYb7bVpxdDKzCwfNAq6W1WEbwYIUxSI\r\neZ+izTD1cvjTIOGsLaAu4PAhqnqhna/wTx+q3VLKek+YiSUklbsliL/MR/JS\r\n9jMsxre5dcOX3l0VhTmjIMLgvuucaYU56qE=\r\n=9JHm\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9eaee7936.0","@material/tab":"15.0.0-canary.9eaee7936.0","@material/base":"15.0.0-canary.9eaee7936.0","@material/animation":"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/tab-scroller_15.0.0-canary.9eaee7936.0_1670443530582_0.012266375103622718","host":"s3://npm-registry-packages"}},"15.0.0-canary.1d37bf601.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1d37bf601.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2ffbe53ac2675b410ec2adfe3746436ab9428cc9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1d37bf601.0.tgz","fileCount":51,"integrity":"sha512-B0QZdS5gxyU4Os7pm+7Bn051S7UIhT5yaWNP/Ue513MbED9oFM9S0G+CUXtAeEMIKT2ZctWgwd0geG4Eb8xM9Q==","signatures":[{"sig":"MEUCIEkPJXm0HxRTVBae6opRpC8xAhGE9Kbqj9tqpfkw2t0RAiEAzo8tAaaIW9M9lWqzHgELYsF6/2c7MpRHFx4/J1c2hiI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjkPrlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrBDg/6A7qKJeGr+b1oV2RIEiK9OSabDlv+KlfRMLq4cmyw87bozeEo\r\nY5sm+5fLU4jysa0ZH204//haPWdvnZdYM8PdwyFLgvO4fwdTLBhqGqramEXw\r\nFBxcUbg8oOmfVEAMl56JGCrlPkcojlobkwOJv1l2CzgYwZzHqsBGpFkJojif\r\nClGVthonEnega3m9ClIs9jGNTZfyfiia8j8SDgC3ap+zHd0/aYE++IHbUJeQ\r\n4b+Z0yKu9dXCeyofaRJRvQGKL/nJVoMkiozlnO47j5rVYVPHmR+iQGWOD3TR\r\ncpbqZkPQFUmStoTi7v/u/TpDA4zZ5/zTp7/SiZOpaxH/pw7I7dyfRHYB9ljo\r\nknI/310yL4iTUW/Q/lng/Y24D7ce98m1ye0IGzMlrB8jlf2qUzfsyZ5IRcY3\r\np/KVrMtzoVrumFzX6bHmkv0gDA/kqXJA6kbER6Wthi7JluOyYYGqco7dZGYG\r\n79HqeKBoybG+ME188fZ4ICfqNqDE+9uLqRw8hmX4WdtEjQN+ASS0LQncbAnZ\r\nJhBVJ+rgnXoTQ7PZExjlyN5GW1+e+1ntZ8/fjIqbRyfE2WIopP850k8aYaAg\r\nBFQ/NPyEfi6htfHHI3ajTyQK1wdj5De25n5GtuZQK/xFwv75I6VLtslj71h0\r\nQKuvTZgTfQ40QvrLSskJM6w7CtEUblHEJVE=\r\n=tnW5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1d37bf601.0","@material/tab":"15.0.0-canary.1d37bf601.0","@material/base":"15.0.0-canary.1d37bf601.0","@material/animation":"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/tab-scroller_15.0.0-canary.1d37bf601.0_1670445797731_0.20559245592156739","host":"s3://npm-registry-packages"}},"15.0.0-canary.a5fe069d5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a5fe069d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e38d77977eef53c2b043172d6bfb4c18566b1ff1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a5fe069d5.0.tgz","fileCount":51,"integrity":"sha512-3CoNG95A1BC4bPwJ7wBpVHn7RiiFD9ELt3o8z8kiAw4uDhBbvzSXZSTvUqh+GxyRll4gKG2TpdWHHYvDaKPfpA==","signatures":[{"sig":"MEQCICEsBgrGwxDRo9r+OztUfp16tFTg0BzU5WTdYmjEuvHJAiBQfTmsqTS5gTS2gA7ULzeivo2/W+LBjW5/Vv/kK9WzIw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk4KEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzZw/+K99QzmG7I3RtgB/G868HQRnLn3lEphYb32G0nJFbtwMizKRP\r\nA3uXoe52qA+ia/1SQLphqSTkRIVzcc0lzHknehc/lu1jV9pT68/g4CdmXVVj\r\n2tj1ExPYeH9zn51wDL02L/5zQ2LqJ5jMugPTPHyPe0ILl5VQsCovAmUUbRIU\r\nDruYIf1rMJ/PuuvYvgdJuzRag/FG5Iqofaa0L/B+P4nC2fbr0lq/jUtWzqpM\r\nJGtiCV2CrJKBWYm6T1/EHK8bQRMy1XI4axkfQCPYw2th+vNyhb08Qwy1QETz\r\nBbbziz1dVY5zXtjXnzLV0Ye+SNDbBQJMwTd+iIUslpjn9yxOhWerX4Cc4IaA\r\niwmo10jLpUFICGt2T5ELfj0+QTL8+m1V6gKSWKJl92HzPlXQnVHXUyq8YO5Z\r\nsY3sURatYqdcc7vhjT1wfmqjg14J6Tyfv/Q2Vqyyp5Iy1x99UPh7P7/qQu81\r\n5p7LX7IJozgJ6PWum0HD1L/Mpk2lsE2TPZKT2epNsv+HoZJwMjYFI9dZKyqp\r\nkDyA1Q9RYC6NbREscKBVfwK0NGQ1EFRkQq8MVIOcwVj4fGneXLFQDyI4FEty\r\n8SRgzdXQHb4Yj65yIaShknidT58IiaGeeKYHINxuYC6S5BjArWGAPDSXlP7l\r\noM3/6kPA8CUTeyO7nq9KlfB9wm5Atuik7nc=\r\n=qDVw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a5fe069d5.0","@material/tab":"15.0.0-canary.a5fe069d5.0","@material/base":"15.0.0-canary.a5fe069d5.0","@material/animation":"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/tab-scroller_15.0.0-canary.a5fe069d5.0_1670611587844_0.9367229802303974","host":"s3://npm-registry-packages"}},"15.0.0-canary.ce8b5326f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ce8b5326f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5cc70cff8231f86ac73e17c965338d98d71ee095","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ce8b5326f.0.tgz","fileCount":51,"integrity":"sha512-zBd2RRrFaCzFGAB9+xH4ksht7sCHdJQxUDPU1V6lQQhWgligdQMT2/Wex12rnhfDe+hWNHiQEu1oc5DEvVAajQ==","signatures":[{"sig":"MEUCIGjvfqZWcZZ+mHOEcVQ6hj62lAJNKd0lqrEWeJPaQihSAiEA0gJ5ohz59zJT3q05CItebYTLO81WMSOMR93T/70QYsk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjk8WdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGOg//WmG2Kz2YJGQ6I5HOb1gZU6k4b7noxIT9fclofMkYgNhh0+Is\r\nmr+jLGxv9AfuLasGOW74ltqt95O+Vb/BIVAodbTLKPlbOIKGiNRyW6TkCSmV\r\n9qpgRKwXKqlZAZQeaYYdkcxjgqikj6jk6VetXzptGKoGPaBuBVnIxi9Yfcoi\r\n1ngMYcAk1tZZ54/hHsrgSQkCSq73QAxo6dqBrb1Iygz7JgobcvL3IDFOhqp5\r\np0g3kBPwdfBIQg3tPuRvIquYPNyBX4DWTFqUXDU7ef6y5KnFTji2zr7DBIA8\r\n4pc65vlS1/MNL0Itm4RLKbk1yxOkXsy8VtH5H/6HzHlWurrT2XsieILmjmlA\r\n2Bk7L9HCMQLFzB4F03sv/9F/rWPcN/W9Ee/UG76XShQVC8xZb55Jpm/3Y5Cy\r\nhgDilrfL5JwmhjcN4xXUL2M3GdQ+EpvXy7yh8iF55/OTQ5h59XFU1dNNVOAi\r\nXAwfcMu2tHyXSJ+akO3D7afIvkpcCT6u+VqhvELW6SK4N2tUJEkR/y0dXwr/\r\nszlr7PwTaeUejSbB3H6SRFpMeiC/v6g046UQantIT1eGN4iuMfgcEMfVO9m+\r\nSitx5b130QcSG84yoCxoxiLicNL/ePhuxFWJrg9ke16Tzw7Q1TUVxBlxmsmE\r\nkMMBte6Jd2FSNByWOoI1xma4oX/QEc2pF7k=\r\n=PJhh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ce8b5326f.0","@material/tab":"15.0.0-canary.ce8b5326f.0","@material/base":"15.0.0-canary.ce8b5326f.0","@material/animation":"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/tab-scroller_15.0.0-canary.ce8b5326f.0_1670628765154_0.11305112680079676","host":"s3://npm-registry-packages"}},"15.0.0-canary.43f5323bc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.43f5323bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"55000619044a0172cb5eb0783e696dde28c71223","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.43f5323bc.0.tgz","fileCount":51,"integrity":"sha512-eI9Wt7HdwA0DK49Jr8k3xCAiV5z3nByMdZ6w3MDSxyyeLSXb3WYQfpZRYw4Fe8Qgc5lFnwtj+Jxt4FzmDfOcIQ==","signatures":[{"sig":"MEQCIAO3KP56i5ES8wBoqOscnKXzBjUB+LK/fwHKwaPFBRjXAiBN7vubQnzUSspIFQZE8sn/AT4F0pa2wQgty4Khsim2yg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl1syACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr7tRAAnT0i0NNPlDoqbokfahRfjQUA1Bj1EG+/+U57gFqs3zBetVS7\r\nAdHTgnTOasTBwzkRKgYmsUg38ROxgvKm86kYsxIehrRDYLTobDqLU5idGKVO\r\n5CTRTjTlx2yZ1/Wwalc8VCpYCS5S8QHOBmqRxUuV1Guw6QDbh2WAYgAD5695\r\nquGt+5+Ck58XJHaaAF3sh5Kc99IiSD90+59F545c9so9WwxpuTNIEcElahmA\r\nJYzaIhVS4VgiqGwTRmhJSh9nQqZJ8xsdw6vj1tDpStv+rQUoSb/JE7gz1PVe\r\nWM4c/RMQR4CJxFey6sU8FtM8HbpKU9qo8nh4jZL2kWcC4CcRNCBSjgxSoDAk\r\np0f8xy+yPoa/82bVXnymct2MDuS74CKRH/Xi0A4AZI31uncZF5EsgLBoXPP8\r\ni2SM4iGIq4XQHyAGRzpkTIRwIEXL4j5GSNCK/UUSyE9mKSlIs2Dpu/BEjYi1\r\n8G8dNtb7N7aTe8CQ/iwoz0ToWNyBSWfEnqzkK/bkD8ACHliPa1A8DWcg9HW5\r\nqW37gtVaGrs8ySCBs+9oUhv+iYNBfYKIlno7Ae/QJEqCNbPdY6G5AevD78O6\r\nxPHn3gHGRsbMBGzt1UN3Qf0x+qlcLjh4e+epaG/OtqL0NDXM8C8ExtZqd/ue\r\nNCuW4ozbgB/NPtpSNE/Hm45CIHOyBwCPHJg=\r\n=kyKV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.43f5323bc.0","@material/tab":"15.0.0-canary.43f5323bc.0","@material/base":"15.0.0-canary.43f5323bc.0","@material/animation":"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/tab-scroller_15.0.0-canary.43f5323bc.0_1670863666288_0.7733540663212937","host":"s3://npm-registry-packages"}},"15.0.0-canary.5490e32e7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5490e32e7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3ad800efa7fc47330b3af478d812dae9536496b6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5490e32e7.0.tgz","fileCount":51,"integrity":"sha512-xXPn2CgWPd2p1utvJPPxBjtcJ1/y8GG/G50cLqJ0AOUEjsZJVv2+CTxtgEbCME40RJ51HSde1RJ6p/dB1OUplA==","signatures":[{"sig":"MEQCIEaj6FqLDedn6mF+TePIpXHuJ5DM/lq9ln8vu3jEL3jLAiA4IqDpygkhGO8d45H5/KlWFD3ZZF0rbJ1RcRNzigGPSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjl18RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoq9A/5AWg8EgZt+bpBhjwtnocXkNOKYygTN6Wa3v12H0B10mf5JHnD\r\nNGjjWWBqi0AFm2m6y5euqfx0Y6dnFvUeFUzwpKBwNq8/ouhMP88ODT7fl7mS\r\nZ8VbbX+85AGkj41gWaW/R4WWGNEnN/nb1N/yesUhwDf4TuyjJlZJL3aRqgn2\r\nHEfcbwrFkYPWJEWa0nhvIAPOHMyJI9EKEdZW/PuclLyv/t49eSygeH/3FZmi\r\nb9PrQH4LRR1OPB4odubcr3+FqS0uoWdLYSmN3qmANmNDtilOlBi4aiLe9F8/\r\nVN5DI19uhbjhp4ef1pN9GXMF0t5ENLa9HIcNH5sC+DjN8CURVUUyKbLl5dl0\r\neAN0BeBZ2TPKtfDOPfln+V1tbG6YeCmxg6MGUsCCGTHdryvUF+XQDErZt9If\r\nLqZIgFn111dd3+PfBs8/0JF50792mNjIyXwWD1cYk4jCreDO3IYFEO45xqrT\r\nXK4lyzGZJA4O99p6Gzit/JPUEYK02YTnpc7ZeBMiyvD35Ua9mFhRu9fyxCQK\r\nGYnOMqNPWQT5NbV5fXEnvDGEXNz20uWqpFFAMy/TnOoHynrHHt64KgYGyoi0\r\ndW7MvRjXVWcoHjW2O1dkPn6O/LAp8bdrmH/YqpOtZ5iuGhcA3s7zYbvNPK4N\r\nFMonIThSlmOvu1PnNueS9lvrcrGOoG6oO+A=\r\n=w1YS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5490e32e7.0","@material/tab":"15.0.0-canary.5490e32e7.0","@material/base":"15.0.0-canary.5490e32e7.0","@material/animation":"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/tab-scroller_15.0.0-canary.5490e32e7.0_1670864657411_0.5428673560965416","host":"s3://npm-registry-packages"}},"15.0.0-canary.817002c29.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.817002c29.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9f16ee36f81f21ef288c18ca5487605b6ff27d15","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.817002c29.0.tgz","fileCount":51,"integrity":"sha512-r8SQAE7RXQ+WmT5ldG9i3N/zmwDfkgBv3IWMfzsokyjr+2i/0StbEXZYBZQIndtG1HiePXDogj3H5H6qPm0flQ==","signatures":[{"sig":"MEYCIQCN4FcZtfaBOYdTIW9nSHmtRLEr6lDlOLImUR5E9FJSnwIhAOalJqvMiKTUAJgSHZjXwLFgYwZBnNnnTXBWsG0pMDl6","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmPT7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpK/xAAkWYF4/LKLRy7R3dZQyMeHN+w1sgznCi/dqL16CDfz0CT9Nig\r\n0bXMQ+j9COgodyb5N3UKik3o2RnPHRneglOdyef2MC/0io6cQKr+c46G0fOf\r\n0aKIa5VBD0yH3hZ8wxC7qq3fyvX0kX22QvnXLIESnydnt/HlyY28Nz0669fS\r\n2Orqrfx9oaDhqSFH+DHfbDqn6/QWZr2FrB+r2WswZU4zzjUFGFr8lbO9Bfk3\r\nm2E5zkO/o7NLUskwHPV8BAPw52VKvOXCWYwKewmFyTS2fpFVR3s9MddT4xGf\r\niv06o/JcsgaPHVqhecbRWsGlw3lbBinRqoovyJzoh8HepABRpguqs+WqYuHK\r\n+awtbj5ZSeDG+8A9zTEKgYvl1JPPiuwvJeN0Blz6p0Oncf3+EqMfg2s+xzkt\r\nqRYpw3xIGbVok42mNGUMZs8uVO+thdf0X1Cyak1rGlnSVwRXNCs0HNWQm29l\r\n97q+gGCzsOFje1Uv4PvJEeJue/4iZleKlveZko1i3jgwJr8DsnBwXQZsUarR\r\nv07bsC74fgQvJ+4I8jbdHeFDamdsC2DE8YUqYoz+fN05ghkK0IwtUV27FGtq\r\npWveSiN5GQRspVR+8rGayf6YF0BqMhpdO0TqYrFqFGx2cUAiY81M6GWDYCCo\r\nMAEzNKgSstvFMpBJGuge88EJbZWhhpZdowc=\r\n=MX6Q\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.817002c29.0","@material/tab":"15.0.0-canary.817002c29.0","@material/base":"15.0.0-canary.817002c29.0","@material/animation":"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/tab-scroller_15.0.0-canary.817002c29.0_1670968570916_0.7110771908898676","host":"s3://npm-registry-packages"}},"15.0.0-canary.313a1326a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.313a1326a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3fc8d4a96201897602f0dc2156f2b714c6cbe52c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.313a1326a.0.tgz","fileCount":51,"integrity":"sha512-QYKWJ7NbtGre0hewiXOHZL0XvsHcgeoOfJ5lC1/v6y4dZK8YYu8/a0qutHb6zgfaEDMRIZJgVooZ1Iaodo9fzQ==","signatures":[{"sig":"MEYCIQCahncyNdBJiF9aUwkjkuK2d1HiAV+vusElvxADMCbPPwIhAIlvsckZPm+R//VLZlOHJeSDoYFouk0M3p4smniYwd3d","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmaXiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohpA/7BgKFVjJSQjnKH6/VXQyu03XHsYPODyido0BOJ5Ij1XRpdvwK\r\nujP6N+oIzoOcnrKYZ3N6n+1IlCvIB3f2/3rG/1+rOmJ3/6Yl2GXVj6Sg5Lb5\r\nRFXMbX2sSzqnbHWzeYwZ/pD9WS/7h7LTwE0SthtSk7xGX3CrT1E5gDPCmKYS\r\n5FBvsLgZMQbrfWoeXz+PQP5uMiwIAl5jVAR8Tvv/moNyBAeEQkGhVjlheKsU\r\ni9yRSIsO8V7KNCkuilobyQrtmmiNfQygoI9H+Yj+JwS9eaVq17w4seHbai78\r\nE/s/czpuVrWzYm5QNqGCENS0voRzPBkZhPnJjNdCT1dPBGC+qiVTa8eyEG7C\r\n1NqTcQ4eDAew9elLixzuDgvpF2vmDLczyY4FgRlyT38qBFvWdqx7NoxLbDm2\r\nQzlfbEsKOLbpnIboDyTgViTKVbN1sjpzCzf7ApFn8npsn7o83El3PQwbByy6\r\nRJPRl3AqW57ahY3tlxR8eI1Di5u4g8WmCfKx7x56oZl36Sog8QgS5xOgcCM/\r\nvUeXhVZbgC25amzg9lzoU0B5ATl1HGI9AK1XPZZQ1w1HlBJfWxC6395VVDLr\r\ndFC0IdoSgD0Ntm37MzcEzNMzfuQGl9K7yM25cesSijcrAkraj8Mlz6jPhSuf\r\ny2pIr/UBor2DhE2kY1475TBuhPUhKUOZDJY=\r\n=GY36\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.313a1326a.0","@material/tab":"15.0.0-canary.313a1326a.0","@material/base":"15.0.0-canary.313a1326a.0","@material/animation":"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/tab-scroller_15.0.0-canary.313a1326a.0_1671013858495_0.39108313679105144","host":"s3://npm-registry-packages"}},"15.0.0-canary.a69c14e10.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a69c14e10.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8c62e911fc4a459098e65065737bed8e74c85bce","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a69c14e10.0.tgz","fileCount":51,"integrity":"sha512-C7yqDQcl7rq3Jm69A+J0Ou1m6oZgyr0fS9pmW3L7Y6dnm4mZufpcGrUNbR5HW2PmrLvbJCm7B4M4FlnZAm6Sew==","signatures":[{"sig":"MEYCIQCyX3YS52nijIPHTD8ApR29zP+144YX3l7aRk8Hwm4d1wIhALF50TQ1626sd02CDhmIGVFjwjGI4bl4K5vaYNufnEbj","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmbGCACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq7qQ/+PiyDeZhY2kIv7qYHjRp0PB2H3TmS/CBadR1o6LN8MS/Udx4o\r\nCIW4xZhrIV8Od/8anBierLTx37hrmTYxPEqzfeLFdfMdkSgU0YGROFGF+LeH\r\n54COzOpS8knqDn9tcaKytstUT6loAJrP+PY8WSCiBU/4lChiNHVO2hMJWQg6\r\nRycE/pr+Kap6Uwm+FU81FasLz6AEsk+1MsLMLNXr9ViqBI8J9EEL7Crkq1fT\r\ng4hdzFNFRvLq0UltoBOAw7KNJFBFP87nevpWjUkJUpYHnTiKNtVe+5q7f421\r\nt4FOwm0wS/zk3k5xVFS9yL2mq/o9Gp/TbcdGzFWWGVYqYwfJLoeB9tywe73n\r\nY4NQLz5hvGjJ3Qc4kyc41LxX5TmqI0wVy1wvq/W+ClkT0rIKgHUQa5C2rqRh\r\nfa8D+ARd2g/R3cLHojy1D4j+aECkWL7dAuYvPShdKZd6QSMcYif4vUHZP6A8\r\n5Nm7ezj1l6kCKeDOE1FwYvoqbGi3RKEI4To9riMD54Vekt0AhiNbXc12EIiS\r\nZS1DHGDj0f8emdrrfzDwa6VvnBg5s4Gh/FPZe9yYf7LNv9dP+0wElmWjcE4s\r\nErK239zuvIheQbW1QzqI5EJAAXBN7PihdX0w3cxLVwVvItb28HXlax65ITWE\r\nr3lIsndTtCY3ioNthIqbSYPJqr2gsotp0NQ=\r\n=0WPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a69c14e10.0","@material/tab":"15.0.0-canary.a69c14e10.0","@material/base":"15.0.0-canary.a69c14e10.0","@material/animation":"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/tab-scroller_15.0.0-canary.a69c14e10.0_1671016834207_0.947200190113457","host":"s3://npm-registry-packages"}},"15.0.0-canary.f43e0ceb5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f43e0ceb5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"29ed936247bb694b5dda26f06e083acbd4d13cdd","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f43e0ceb5.0.tgz","fileCount":51,"integrity":"sha512-6g6bMe1i8t/wl1mYQc0ke/F2kpBGf7XE3fwpyd3A3E0Dqb/4LPi2iHcEnZkOfwe5VMAM6kW52eQVdyMJHlfpuQ==","signatures":[{"sig":"MEUCIQDv50/xm5yuqKVUq0LEG25NWgQYS/zW3YpcgRSpiQ5JygIgdJ1oJLgBPJ/W9exOo06utI4IIzca/xYfSSayGI9roVI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmf3+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7cg//TxKIWEAkG4PNrQQ4YbGinms4xBB/Dk2oVSP2iYX52SbPHFZV\r\nmbafryRBHr+fGoAIdpVEF1F5fiODAhdHK/KbWCYzzyJiWiEsjWdGrWEDLrLc\r\n+2MNxB8LsWiF0f/zjXLTsy1pANqSByFtPze9UEoPIxEukCVhDxF3kMSkgbeA\r\nZ622NujhYwhwm6n7kJJcgkP21dvltqWHIqgMgEKFVPA2il4vKMiynYFVDhXg\r\nJnF0HG8PdZ3bU3ET/B5Lsl67NtMA7QawsuTnhGsqJDRPls017XRjJ5pWaHEJ\r\n3lA7zqcvqM+pRaaY+d5nifipyJekVKUEBHvhV8BOSLdLMLXke+I0SY7qw/Zu\r\nKAvamNnod5zp/Zz2rH24fcqYIHSwqK+YPwuxuw01KDkjFEFWzSg/idme3a5b\r\nxeYU589D4d8+LBPc9JxNxXLB59i5S/0XLOzIODEt75yylNJz4T8tS1vSs9ca\r\n0pmYlzropHlvj+ELhn+0TXZfleLliyxBXXT3toJaSv/3XXHL9hWXIYrn0FF3\r\nXOtBu9V9eqWzxHy3LYZqdowTyo10wl1SirwWDoDOPrwE31PTWdpTzbZswN3Q\r\n7vq98DgNQ3EohGjF22jTKbP4U7hbrScE2UlpcqzhaYp/wEDtnfT45bs8r4tF\r\nuPibfiPkUjhTS/d9SYQdeLqySNCfhaUUOfk=\r\n=8drs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f43e0ceb5.0","@material/tab":"15.0.0-canary.f43e0ceb5.0","@material/base":"15.0.0-canary.f43e0ceb5.0","@material/animation":"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/tab-scroller_15.0.0-canary.f43e0ceb5.0_1671036414335_0.6507725214064606","host":"s3://npm-registry-packages"}},"15.0.0-canary.34767110.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.34767110.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"34c82a5ca02dbb255867026794d55328b3965d57","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.34767110.0.tgz","fileCount":51,"integrity":"sha512-60mAZe+XkcKo/YuqNm63iT+CfT/94cYSPiOJ+p1mckQEq/1jvk+C/ARZS2/Nu9XyTYj96fqNEfbFcN32QApy6g==","signatures":[{"sig":"MEQCIDH+pspmpoBC6NwFkRZiXajEgUWOAXNF0A/ckjSyipVqAiBEakAYyg9Fj7HA3Xfu17hi07Kq+/1339+sNEDXHigLGA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328097,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmgZYACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo/XA/+O1RJegD+9Q1P0+l6gWkM0hYNMjwA9uLm3dIkzUblXRP8vG9m\r\nYdDQ7mA+vnOkWkSj6LYaDzOLPeAPjzb6WAB6dlujbTSGbV7hzod07PaSnGL8\r\nKKcoCZ6HUrlzJe2FvV4FIroiL3a6zS8+NzbD2xQd/w1brBIvbmHVTKEK8TVr\r\ns23JMBx+YX8ChCJ34JZc7eH9mKa9S1ecdPDVyfb3x4h6zza4BVAuHcCmaKNl\r\n5q0e25ie5YdaI30PcMUrpWfAFIIVumMYsDUiJm7rFVfOwulkDLFwRkQB3rCm\r\n9UbX0hOjLqXVhoAf3YcZys6qqcHbq3c+y16VC2S42+6+sZliROtTuUUjjGGr\r\nRhk8h5uP9j3D23TVdhBn3z5t+Gm633ca+lJSkpybTwEaxR2+GOxP7843syLv\r\n5URhpI07KIFsRnHGcJ0hyWgyD39ZmOI7q+u+lsn18av15OAigTa1oEr1r4GG\r\n3cH6/y439Dp3b/XySu+zuWIG+p6GsgSc+keA2mHc+7+VEQgllPPyZ9xG05NT\r\nPoVDpsYnmMFVgu1eBdBk/rzfH+kJjCQydaEvcX9Gr/BRVHNKEbVvpv279Clv\r\nrEN42u3Ub81LvYR0ah8zsmSqZsv2xSwvc7RBgi4WElHKlOwoa/qHYF2MVJBy\r\noOg3OvAEDj2iNG0XOj8H/BVMtqlROkhCOyM=\r\n=yRJk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.034767110.0","@material/tab":"15.0.0-canary.034767110.0","@material/base":"15.0.0-canary.034767110.0","@material/animation":"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/tab-scroller_15.0.0-canary.34767110.0_1671038551943_0.7155648086177089","host":"s3://npm-registry-packages"}},"15.0.0-canary.1f99f3c50.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1f99f3c50.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8a7439d1df96eaeb8368f0679c9abda417bf7cca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1f99f3c50.0.tgz","fileCount":51,"integrity":"sha512-mWNHAbS8RvlGX1H/aDkgVil+mff85t3wpsen9HSM+p/xICu5YR/3/f2P8RM+PvEzZT8hnAf+02oGqP6x2KSANg==","signatures":[{"sig":"MEYCIQCIQmPWFmfIMs1/1eSDFdMoKFCt0EU6YNCAcAEp7JWhZAIhANKnLgArKt6V/V08The8qnihhAB7CvcOuQ0aA0ANL8TB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjmy7ZACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqOyw/+Il9hq0tqg/MWdtbrCO95ijIqu/6USqwU/f2afKq65nQaATr/\r\nP0KV3F3aTYmppqlZuMt5JtaSJrTXWOdtZbU/NcaDc7mCrLBHwRIJW6sINEBl\r\n74ORITv4wJExfknQ4LW4FQgOioIePNtGhn3Zg/Yv8gv6oAr5E23pXuk8gQqs\r\nhVU3Ok8caqRVGdNw6KC/YtPse5VQw5dbPF+1DNoRj7AMyYPs/Fzrz8VQG9zC\r\nj18C0UQSG5ayxggpwvfyJIK/0UMhy3/n4pEsWOTZXd6abeBk4qcwQ8BeLYc5\r\nxKXPdcgzIsp7C2OjdLVQFplQy3iUeCwrSTQI2kQQ2BjdSlKTWaA9hFA2z2mv\r\n0Xqkxgy4cftndi/nGlURaNDd6iiLADdYO0XOUccJJNQYR1rSvINWkjRn6fvc\r\nEJxzy702zVRCa2o8xNadDUGft8kjxjMMGzcw+7b0qQnaP5tQ0ylaGWi+Qih2\r\nhRBsGgaDRMBVXrY1KKorYexxM/GsfSV3an8LLDo4HI6XdYvQI+ya9E/9SSTq\r\nRcoPaYGzlfxfy+lFNcrsCL94KSwpy05ChU4vn6sqhjVNblQpTvkn0IfpCvsV\r\nJ32YVl1t8cu9HlxgotlQBNZ77S5eJJPECJKteWQnafntIXgj5sZhXdItTtcA\r\nJlVxNcuDR3vWQqcMay5j1Rq0tGAEWKjKRnY=\r\n=Fk+2\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1f99f3c50.0","@material/tab":"15.0.0-canary.1f99f3c50.0","@material/base":"15.0.0-canary.1f99f3c50.0","@material/animation":"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/tab-scroller_15.0.0-canary.1f99f3c50.0_1671114457354_0.9686845586041068","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfd69490f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cfd69490f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"db5aa2ea11fe2912568efdf8ee098b90eb5d5b3d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cfd69490f.0.tgz","fileCount":51,"integrity":"sha512-CWObEq5KAEmc1U+DkH6/YrbP7viLFkoYGM4+weFGfJ5LE7DdLYjX7MbdH7oIpFsVlVRrpfnNZM81FXVnbBxGgw==","signatures":[{"sig":"MEQCIHJFOwagFFqoJ+eIPMor7xnIKAlvome8gCNhjE8fqG/KAiBIguMjLRmBrLR06WZAEGSJ1W4gc7Z1HEdbAjnUgC3l2w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjnNC9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZ5Q/9EPu3QQi/Ky+j7YYybMohB9BzUP+bxUrq5X3OfpKKq4mjwqfB\r\nNkWJ0IRs6sOS9Pumjv6T8KCrYslFmMphFp2G0d9f2CDUr6KFM8kSD+wPFrN7\r\npXBL333pcgd5Oj25n79CC9VkLkOPycpQ9nvc4tCk8BIgo8cDq4NupiWtguuf\r\n8VtP5OCwNLqky4C3P0Gg6xqO5b03pZO0MDWS0e9eJeRRteiHoqq20TQkWl8a\r\nd2hZWYjkGNa7SqwJu7ctn6d4ZAbVKGI7U7gJZcYnFlaQSi2FvqzR8nwmLpH/\r\n1EIZ0Xb9GQgpL9kFar24rdul8oHsuOZVAE6zLuxQiPs45X/gZzjAh/nPQMOA\r\na7pz0eZhOYLe0rQTu8bAhMaSqZZENSFn8VxL+EcoyV0b4MwSVFdMF5EpO9bR\r\n0jDtMedk/TAkz1cYo2SBrhKHqLXeaPh+uCqlWsluTKI5pmYIa+qpQOWjSCQB\r\n84b58vM1vOapUnKvqUyy0tve+TCYsll5AMWkqeWSDNnMGIJCtwssc7YQ+MEQ\r\nmDxIQNQZOojAvOIhvXYD+jOfrH6S6N8m8W1pschHmMt1MZepzWR/ofoMbVR0\r\nBgTgpNgqTSGDHz125iLPZvqyl713H7LMmVM9gOUK7hO4YFRn5TX3IdUvLcdV\r\nxxegzhrxcuooAfwob+/PK3ZX9iSiqWDBrSg=\r\n=eo1c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfd69490f.0","@material/tab":"15.0.0-canary.cfd69490f.0","@material/base":"15.0.0-canary.cfd69490f.0","@material/animation":"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/tab-scroller_15.0.0-canary.cfd69490f.0_1671221437228_0.8193518040652346","host":"s3://npm-registry-packages"}},"15.0.0-canary.94ad8d986.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.94ad8d986.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f5311e24bfd9fe3ed14d8218206140d5aa7463cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.94ad8d986.0.tgz","fileCount":51,"integrity":"sha512-tMsCK4MhjX8IuUx2vd8crnN8WwrdfXzfFbH1fAfICjEgP1xgPMT76Tc61GYXtRhmN9YyZmUcNnEE2oQ9LP8QVQ==","signatures":[{"sig":"MEQCIDfZtYO78JvHRnnN7sRPMfW3B5GqOwOiwdEnoMU8HN1tAiAWWlikRMk2abBZg1zFeb4ugrUJzWHQQr+uDstjAcENQw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjoLuLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqmyg/+IU6yAtpDgBbIJkKeVPD9XZtdb9It2L5XJn/Qngha6+KsaTg1\r\n73+DitL7h+XG5jMfbYYSKs650heVn+OBLaAvQx11beTwcZ3esm+gByBXvwNq\r\nKtFSfP7df36JLGzwz9JySgs9wNg1Jz21mht81ifIQP9+rVscQ/WgyeUGPUrw\r\nJ0V8kDWUJD+vQjFEFZ07M4MOydVdlzob7+0iP50Ldd5QEtzqXTZf/2VMn5BU\r\nIC7dTswHzIeCaf5dPlfP4hf2CCpAfi4XHcLIxP+pfsUrbYRfZYW3K+NOVT8X\r\nc7V9iUx65Q8dLyXdiasjcrIuwMSR4VhoVAXkwbR3d43AJ3BTIppQl4nOTuCJ\r\nfBzHis7G385MquwdLwNYlK+l5SXCvZowoXfrIAtwCylrWAym6oBmDi+mgtya\r\naFWTNyNJVrdceNZtuSRnf/GeN/xWqmrK6WNGviTf86wY3vVdBMf1TdtT05Jp\r\nKiA+9iIkBVuV30NwQJ02PHXIzw8JHiRfYMbY/+bZxsF7fk+F/HnnqECo+yI4\r\n4KJx77gXGvgvVA36r1jgsX9nJoO1R4oQFdg7X7NicCc4KKQTm+pH5xBp79Ss\r\nt6MyKEoeuUdNujGE8h0l/xQ7lSlJIq8dWheoan3n22TyuiEc3w8l9ili279C\r\nNBZpZW48ficbvyqKvcaUfU//Z6+eys7tVB4=\r\n=Cb3b\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.94ad8d986.0","@material/tab":"15.0.0-canary.94ad8d986.0","@material/base":"15.0.0-canary.94ad8d986.0","@material/animation":"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/tab-scroller_15.0.0-canary.94ad8d986.0_1671478154970_0.6170397599130424","host":"s3://npm-registry-packages"}},"15.0.0-canary.604264203.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.604264203.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"287dbf873ada331f37bf0a2b83ee17271ae71a37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.604264203.0.tgz","fileCount":51,"integrity":"sha512-3eP44TFnaseGvYsDcIDjtY+I6/LkA6aunDEVeuzCQhzGMH5W1/GXeDUwTQhB61J65fys6YE2rKHy3mTc/wIfEg==","signatures":[{"sig":"MEYCIQDyRlK5FQiWAm6amz1dTDCTnnMKqMNLT7RSUAFmPMJkTAIhANWJHND0hRHgJjupOynfxjtyiryhURWkVbgv2oJVL1wZ","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjo33UACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmokKA/8CRAujPF+xhK2gfgh3zUEevtswlmnh9WCSo1pMWAs0jwSwZDI\r\nlUrjgFKno0w9fA6LUF+wN9NgJmV8NxYBguu1T+TjIb1PdEufQKNtQluXhLS9\r\nxwb7byiwwFKzkK/zJDnd555pej7mNG8VeWzyprSsxySNLle20mfYyfb00XXR\r\nV2JkCa61LkXl2ApETwezWPGujF7/DshxA+o4z+aw2hXpikBQwykLWEso+X+o\r\nIK3pijwumVQA5T4LWVyG7JkKXJK/PV/jFmdyo4XmVexhINa9v/eiJVVUTjLS\r\nAr7oN0DNCyLqfdeGzmRPuYuhSGx4AJ1XOHeYTKRoIDEN6KLuxSMmTCyxEahc\r\nT36D09w1MKYvonOfQKLcdQiYGYhdJGyjaQoA6hv2Ea1ulFYnlSILdIcxwIOp\r\ngMtfMGWLCHUPzDm8OlPiGpx/IZlXe49EmJGPY41JSsfuWscJwVQthGCzqKQL\r\noubEgl9zHgPj1xoWgIu7W/JkYLW/YDwWlgbQxySoHDTXpq3oCWV7GcC+Ffqu\r\nEjtgp5Oq6e4/fFM2W9E9Qxc5N4cDSGCK7d4J4Y0JjBHOcjbWG/+CCvj+lp56\r\ncn7rzybX0Z5qtuGvStrqJIn6telf/4fPyCSOOfkOyICkPbxf5ppXZ0rl4Wor\r\nFWzSDCZFIXqbwSbjPmzazmzXiiSaW23XVNg=\r\n=Kd2i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.604264203.0","@material/tab":"15.0.0-canary.604264203.0","@material/base":"15.0.0-canary.604264203.0","@material/animation":"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/tab-scroller_15.0.0-canary.604264203.0_1671658964540_0.32836807833292214","host":"s3://npm-registry-packages"}},"15.0.0-canary.85bcff6af.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.85bcff6af.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c3706958e3cb4e25bd8fb11afd72ae18efb05b45","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.85bcff6af.0.tgz","fileCount":51,"integrity":"sha512-PPjnKMIEGfanmxnbIOvHJlkVKIRGZKpI/I2EQBI0m19NN48XBbTOtfW0Cvl5fPH7Dq4cbNlx1POutbebEe2M2Q==","signatures":[{"sig":"MEQCIFzaoeKl8OAmoZadmK5eieAk2sfxUREw2gfJlLhYi2loAiAjfYfNGjQUemD7FBoTShhGsErqFXjCWD8O+S2k4oNNtw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpDEMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp6bQ//XKrTt3LRYv4EGWQkahR/7v7DhZfG1s7TMG2ksH9WKDewhOBs\r\nTTi1vmUDUW0X7S5o/wU7Cy1Qj3jHNaO/gSYRAijzLIO8bvzQ/XYRCAvUyYaA\r\nFyHj6xVZcCbONHL9cwvTjje3Mv4D0SYjy+RmWoqzaBs3CQu9MpzrkcihhMRU\r\ndDKSX55Q2vprGRpG/qTuAWRGfq92glAeFGs8k4pj3GIGL3LoyHMxCvx8M4OX\r\nf/yQpHF+LX2mlwZXIxCvsMpO2l2cF4o/LPffeJ4JOhRESs4tFHPZ0T8rb9Jm\r\nj6UV9qkTFOfe6sS9DHPtEMDbfceYU9neE0tanXZ+EudRS1PfV1enr2twv2Mt\r\nkDUYJeMlQzqHdd2w7PREgTJFbE74LXwC2JUqNrgL07min3Fw/lbKdJeMDafC\r\n0tcPouZFBSykf+xK+TFptRhKgOcGpghpIbK4JRsqCDIreqgYvZC5UJT3EgjY\r\nHhELe7p5xXksjrBRncKnTWZ949Ci3L4EDaGzdaeS/nJ7iz7Gd+oknZaLlGxy\r\nL0IUUq5Wsyi5zMTUspnh974DK6lVCzlK4j1ItnBOO1Wl7YGvDiU0HbH0XXx0\r\nEkVtPask3wC6IjD7F9N62QpuwwPObGZ2hm0268p7aSkLi3xSEvveK81fueXX\r\nQkDYATR6Zh1EwnbBANcQeSOtadHaEX2uz+0=\r\n=nO7G\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.85bcff6af.0","@material/tab":"15.0.0-canary.85bcff6af.0","@material/base":"15.0.0-canary.85bcff6af.0","@material/animation":"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/tab-scroller_15.0.0-canary.85bcff6af.0_1671704844346_0.9364416712226875","host":"s3://npm-registry-packages"}},"15.0.0-canary.ece3e8d21.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ece3e8d21.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9ce63fc840190004e625cc85e31192f7fb953353","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ece3e8d21.0.tgz","fileCount":51,"integrity":"sha512-u7MLdG3dUjDRM7tVCCCS14VLcaKt6qTDGzcwlyWlXmkFlSD/h8kL93gbp7qffbFSZ2B8c1P91CeJK8b4fN++yw==","signatures":[{"sig":"MEQCIAs4MdhK+tRGLyWWmwslB2TTE1tXdXkT5TeretsBnPdCAiBHsWnEVAnkHUH9dWXMsuAK34lggnvddfQK9cYCXmsSCA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjpJBmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrl8w/9FiDl+j8bxHQ3P9Sm+N3fcjnD7LYdQVE/1+qxwHf5nda9/kSv\r\nm2w+WV6xu0mnsPNzx3/FGcg2FRYnB5Wzdg8iXghNQ1WBzSaV7/G7xVHy7k6e\r\nJfpYbhMSr4/KKKfRuh5Xnjz+bSZTBy7kCGlRsBz0GgBcp0fxLn1W/VJpfDwu\r\nY2aKVFcNZJLQTswHXcSr2iDDyb9Gdqn0qebuavtcuJuzDypHOGXIaI7HorFJ\r\nMusl+rB7C6LYkOeqTBjP3FOB+MP1/3pdYrtVh9+ESc5m+XxFUArkRTm+eSZ2\r\nLNoR9Bj/lioAvDCrceD62fAjv4jizDFdDALwbgdDj14eS1I2Ai4Of1INxpVq\r\n9xKTnLtggLxJY9zoiyALNhZGkjxEYyY/Dy7d5UFDTeKcV307YrtjrUzcMDES\r\nNlPU/p854mBupv5Pg0vY1YDhAFxwya2xHJbJwPFICW/rgfLTl6yvvptPqA9J\r\noCC3Fv04PVulOmYlHgQWPTzSSshTry9IzgnRvJhbCmylfDih5xGeVDUGA8QG\r\nhaTHDY1c6b/mc6axPMQuvlkzRT7Ndtuk/8GN+CieBxqsPgYkA79yHEBpeiQI\r\nyg8/9Z6eAXnBca28GF3rvlRvXVMfVowhN0Zl9LALc60MYrWVtSxnUh5i1csQ\r\n+Wj9QE56QxFgHcLSmfGjx4DHjo333bMLGCQ=\r\n=rqmh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ece3e8d21.0","@material/tab":"15.0.0-canary.ece3e8d21.0","@material/base":"15.0.0-canary.ece3e8d21.0","@material/animation":"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/tab-scroller_15.0.0-canary.ece3e8d21.0_1671729254085_0.9038754847106099","host":"s3://npm-registry-packages"}},"15.0.0-canary.278ad53d1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.278ad53d1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ad95fb8b4735cbd926612da8b651d892f14daf5f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.278ad53d1.0.tgz","fileCount":51,"integrity":"sha512-DkOwbcftflYRpZ4z97A0RsP9buA0scfLAjt5W2tuC02cotkbUoJ2Susi23jnRgkrhZPlwU8TlVhmRaD7xSgeoQ==","signatures":[{"sig":"MEQCIEStTBm32P8GSAeLyVZ824D5FuXw8QlLb1grxqVM5u5sAiBDnLZ8A5XKm5mNxK/2xshyj8xpqbYNfOOQoaKaxqQW7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjqyZEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMRBAAibM63+JeCx6sTkioFvcQCNWB8aSo3agSeBdDmBIEaVsgvZ8S\r\n3sRqRCOy7ZlShCuhcYs27FZpVmijJ4rzd992n5/DukQqmenwKjt18ovk9dUZ\r\nut4HvA/ajkKSzDVhnmGxKP+dNg8yk27xmCfhl92oVJ3UG5HhxwwlbtC0WMvP\r\nEfBcWU/az34dqO1n8EoZdNfYpexq5SeJhrahkl1mQDIemL+hUOhD6iEwAL/4\r\ndjXORAs1YtI8ENm7UeWew8iT8+l8KTzoHruP0NRZ3468rqdOkuBVWU5EcjQ8\r\nySmVeM3+K/uiHF4dyDRbZKD1jI7RrUbhb8CzkS2OfWPFEZQxEGhNniCGLSoJ\r\nDznOZ1Ek9oxXKqXQ6yKPieCmAT0NMdS+TsMuXkWZ7Po+l5/Bk3kWGJHfBnDF\r\nf3ixrHbSZx+9dul+mbPnNRtT2u1ooHIffy2mbK1bEe75mKTtBDb1HzX3AbpO\r\npMYtdvED9d6hsuDMcJt6Z1HyfI/ypY09RZizIwGWLAvzClbOGP7/hxQ3xk03\r\nwXI2F7LXbfLU/+zODq6eCO0FGbOY0QMHx5S72pZV+VAAs+4h/bpqNmcl16M9\r\n2evpJjZjLKfQlQ7du9z0cLvah8AYoFHL9Hb8P2vJKC7sfYnD5ZaPHcSgDM/X\r\nJChM9C+PCt6lbS/4CkUXSgRlLMcbCaXZ5tA=\r\n=uoYv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.278ad53d1.0","@material/tab":"15.0.0-canary.278ad53d1.0","@material/base":"15.0.0-canary.278ad53d1.0","@material/animation":"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/tab-scroller_15.0.0-canary.278ad53d1.0_1672160836712_0.27454774639441726","host":"s3://npm-registry-packages"}},"15.0.0-canary.a7d8389e1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a7d8389e1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"14df548a60e95cc3f80baf3ab56f997987d893c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a7d8389e1.0.tgz","fileCount":51,"integrity":"sha512-LGFJJwR5ExmY5g2eBg+bnBdtCWK7eHCE63TL8+eHg1h6XHlhU0Yqu7aEFLwiVyq5WqoNr/nHM0pol3AkcHbiTw==","signatures":[{"sig":"MEUCIQC48xuGoCpk+j6XK15dH2xHVyystHoaOwzLyvOHjlMIRgIgeh9bmxBtwpCglDNt2fKM1FJBVTjsPg9hS0e5yH5tyF4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":328098,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq0IbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwJQ/+KWnKk+JHNf2XqRnAlofpFog/h271AYaD2gqYOZF7hR0liHI9\r\nA0XfXv1igl24XnP2UcxRhk5qnJ7HNHkWTm3HdlsRK4LnxA+k62EyBmUARXcl\r\ncfEfGsc20HokH/Yug0iXRaFqJ/L3Lu+O3Q2nvahbbBWnJt+qMkP+iFE0BcaD\r\nx6glBRV1lG0HXIyhVJfq0I4hEg6TOCfZpE7ojsPWR3zwNhQk19x6hRtGodfh\r\nW+nok9JEL4C27AotDKLBE0S5s3Ioq2MXRgNyX1aVUj7BTgKSFu3J5pskZaCh\r\n6rINO/ZtgilEPfOqQ+hXo+l4hNgfeeblnKZd0xfo6D5le5kf4onKit7xJVwr\r\nMsSCa9e7HSCXL/o8Upz2QshnKFC+TCFzeBvyrL7oqL/sk/Dn/xL4DbLRQqvE\r\n2DBNNen4Bhz2jGTqQU2Lvim394T2OYLzQft8A/oUq3zC8b8D48L4GMgKeVlU\r\n4mHnrlF5CY9bdHvL0kE+oEA0YoxKBdApAF5Y/cHYC2m9Sr5C7tHhYxXiZkLC\r\nf2TPVw5MANWyN2TOZis/9AJb/84tzqcCcb6LkrBwxsS09irc67tROBLDF1GW\r\ntaPTM9mbPhQ3Ui91r09EVJKlj1NPnUptfbn+LKD46+pRriqUhWa4kxu0UlFV\r\nsGTMZZTPGtGkct3qxPjdquRSCKqH1IPCp2A=\r\n=LiqX\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a7d8389e1.0","@material/tab":"15.0.0-canary.a7d8389e1.0","@material/base":"15.0.0-canary.a7d8389e1.0","@material/animation":"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/tab-scroller_15.0.0-canary.a7d8389e1.0_1672167963390_0.5162743945061157","host":"s3://npm-registry-packages"}},"15.0.0-canary.8175d5eff.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8175d5eff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4a3dd1dc18012af5786c1af64275857356d6563a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8175d5eff.0.tgz","fileCount":51,"integrity":"sha512-X+O7GoIiY7qBlNy/Xal6AA7HU79a4Er2ujUC5g41M4KAY+qvfqTX3tcQEOSd2W8fzPbNij/zWHBFug1rZgO+sQ==","signatures":[{"sig":"MEUCIQC5ifQNbKTglnZ9mVO0XXHPs+C7FMucbRA6RrxNYMjvbAIgI9xdLoo/5p1kWYHT9OZjox+80q3QWaspXpN8BGOC6UU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":329979,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjq6GiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpUFw/9FW2uyTdc+GIfUxagZ2+JQBJF40hC/HFFoCmRPzGZoFsbegwI\r\ncWDKnAO9rdolqk6B3uyNxy0xAMGye/POiHPHE6u1oiJ15r7YN9MSXPc/JZ7e\r\nz7p1AcdRpdWk4JbserZPEsezD+LQjgt65z8cj9q+v3FhZXfE/9anBXuODH3G\r\natBRScWGETozr4GtmbL8384rN9Gr59DgIF3QnGGPIgRPAYLGbDG3WIxgyrQN\r\n1eNAZhMwPJZYTgd5uixHrUjyVHwbR4Mn7c3CcxlmwuQt7vOPPdsAsssheJka\r\niEMiaqH6zGcZqfib6Xj7Kbrke3uVZ/GuLBNQAY5qCJU7OlDUclqr3immpn8z\r\nt+zkdHGLlk7Zt3Jk/kWFMOeib8PlvJ3NSjUxd/sSTOL9yRfTzayMRqVh+oMO\r\nenIxmcke3mqbP5Rrt+tWNoJGvYgScQ3Wt2mbBZWp2NB8Gb8s8SZE1BlYe1ub\r\nnRn3UYPuKfzlR1SjVz48Vzzc78FAmHUToHjDnk77K7Lu8YizdCYkBtfIJc5Q\r\nWSr7f9GVelQSGtKUmglot7fNPFEtDloRDGcMOmtIQahqqd5x+vugLo5kz7Fk\r\nnsKzEAKC2aYh/UwlQIcIsd1iV0F/0KBPmxzQ4v6a+xxliaYy4EgU+bWJ/Csy\r\nDa9/5+y0iEp/E92cK/ueufnjDeC5G+vmkMY=\r\n=nFnT\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8175d5eff.0","@material/tab":"15.0.0-canary.8175d5eff.0","@material/base":"15.0.0-canary.8175d5eff.0","@material/animation":"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/tab-scroller_15.0.0-canary.8175d5eff.0_1672192418145_0.9875071262761961","host":"s3://npm-registry-packages"}},"15.0.0-canary.e21dcb86d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e21dcb86d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0478f1b44f426935e6cf5069009437cb4e5b4652","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e21dcb86d.0.tgz","fileCount":51,"integrity":"sha512-HobozuTWIPViBQLi4lWK1IxAtpO0PnToSipjlILZFnDQbZeZ8/JVW8xPhhc8bXm0vhwydC1zTKFOB2qCBWQxnQ==","signatures":[{"sig":"MEQCIF0NZB9RS2Z6Xbkc8ZHuKwPeY1drXVh4Wea7IG3WDLlBAiAH6ttAMTk7Z4qYg+x+cX8b9+s/JIrVJIYeJG1H7MmifQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrZ5jACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpOahAAhic7uxqI8NU2wcQuvjUMv/LLo889snbG9dxOnBmk5Z8uCjrV\r\nTAE2a3buTDrXbuUxn9PVivBrPyC9c7bpZ9ECVC/nI4I4M+QTN2dgqGI733Pp\r\nJVuIoD7qxDSVF1k+zurbu5Mv5FTi72SUt74kuwsjY3FPnbz4QynJZwIy6Lii\r\n5R5qyyORxFboXHXJPzm1rzIQySkuDDFJSfdwoPq3mCDHPUBTPVymSxC6YSoK\r\nUTxHXUXnulA/IBw/nbcI4W7hsz7r81caVPpIaeUbIWwsitpdiFWxwna/ZPAo\r\nWy4JiVgv3PLrsx0Wdy0CQjRg8jJqb3My+2RJp6gFXZsofTbkPjMZLxSj5spL\r\npOYxXtgkai1dOScjJCTZITsZXgn4sQkkTLikORAmWTGDrqDBAh/exfuGHH/J\r\nEBAf2g5zbvkT+IKL0jdFZ2hBZuAtUeKmnUCNCaHOd0m/mO4FFNOJ3FznHqtN\r\nj4F5gUAZqifVx8jpSeDFvwMh+/3sTAvXsKgiAcsWbpSxi81pH0xN1TQGZCaH\r\n2oYksju64+QBSGMHFXkSkURy76b1eV3IXmAuSIrCAaAxZQlZHIM2Fu2GbI7n\r\nZ9Wfv6f9SOq5FtPBxbhdqjutB/NFRAdhRh40lp7MFK+ABqBqRHlgwekjQnCx\r\n/hp5q39u7whvizu5WVVyr46/CzgPUUb8pMk=\r\n=bjPx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e21dcb86d.0","@material/tab":"15.0.0-canary.e21dcb86d.0","@material/base":"15.0.0-canary.e21dcb86d.0","@material/animation":"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/tab-scroller_15.0.0-canary.e21dcb86d.0_1672322659702_0.8870234275346573","host":"s3://npm-registry-packages"}},"15.0.0-canary.20ab6f5a8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.20ab6f5a8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0549c90ae6dcf56946cf47bd8dfd685743705590","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.20ab6f5a8.0.tgz","fileCount":51,"integrity":"sha512-K7W+hsi2HwHmLHfxm4ya9soOFYAUZRjD5P9jna91UAwuXxEO5cfKRZWqzQAmjxpfGugXVAqo6YMwdcphjPoRjw==","signatures":[{"sig":"MEQCIH4DlTnOI4ayriH/JOkVvHCtt94mrhstjLdOocgImuumAiA9JknGlWSSKb67md2vaglVgKigGksp8/lU012sbfbjBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330080,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjre3CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrz5A//bvzvhfg/nNiHawg1y/wi8Xc9JNun334Hkn0NJsOT1gov/yT6\r\n0H/qlvJv/9hxkqCxOY4VeofRllhtdXta37yqG+S07zGWTzKQTfMzkw4bGySz\r\njL/WTdQqD+X0HfmW6ahNm1EP+63/j+MF8CGLDYGchxSz0ghX+TFT7a5JLRW2\r\nqfuM0iNyg2q/cQW4hlZ2yqdhNJkPS8BLYGl13c0Wqf1610Q7VuoJXRXVFTQe\r\nDq7W2LXpCgaysxywf6/JwZoqqB4GjxaJEWxevA30QoN6Oir4yaXXU/ZteoC/\r\nKYdsxvj4yV1YpplDdhWSGr4yOLbxP+WNLE3ch62TFm4RyDK8+cOS+F1PtyHx\r\npo7iUagKucRsiRphvlyKjBA/0C75EDNR4c8vEID/cI4QbKIsMEcD4GNjhZKr\r\nTcYreGCb9JFlIElPVo+2rjwhhfhqlXKk598Jj4lSvm/JcQaVST35vTs6IjKj\r\nLKVJ1PlpGCVFVSXDyOc97o73rFLrmZnknOWaz8uIf0dmmbN4y2eTvWhJz2K1\r\nFtk2sZ9U1UuHU35blJve9u5aKlp2raEQI9OYbrVML6f1U3KV9plKWMjJXO5t\r\nVRGVZ41Es/nEB/bkbn+Z8ffFFLT9WeysCAJooX/lDhTtIgV3FvRUDy0fmfOI\r\nwJFPMmluciAXKkWvdTjlPQ+mLUmhoEDX9vk=\r\n=B4n/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.20ab6f5a8.0","@material/tab":"15.0.0-canary.20ab6f5a8.0","@material/base":"15.0.0-canary.20ab6f5a8.0","@material/animation":"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/tab-scroller_15.0.0-canary.20ab6f5a8.0_1672342978243_0.5360200883875481","host":"s3://npm-registry-packages"}},"15.0.0-canary.b9806f623.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b9806f623.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2e51f1e2b03a395dc0f8d686137c81399f8628d6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b9806f623.0.tgz","fileCount":51,"integrity":"sha512-rkOnaXa+5h6RZ32hkkKuJT4DPcB6M56/Qzf/5kCuZnGm9Wy3hncvgXfkv/dLLNmLjmw1hPnzTlg45gpV+lIw/Q==","signatures":[{"sig":"MEQCIEJ1dYpFhcTPFTKf7gEkHBLjHYrELqwey1uzTM66rgH+AiAWPUo/VL/T7NFuijbFAvbeDnJ5FSeLf04e3yfWnbu+bw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjrh3MACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmohSA/9HziZn25ZNGV1couM7FE2HQdrNvgzq4ZCoN8U9yYtA3lRTe1p\r\nh532GUl0wlOAovE50sVWA1oBENbE3aak0gpg+nwvzSWNJ7igHg1EI8UboPsc\r\nvaZqfZY5EXF9fSRGX/9NgbgwDutj1HF1OGmkYjuV1DEhS/pJJp9F4Kjl8oX/\r\niHFq1UWnFYQBmX1ry+Oobzzqe6Tiw3PYEtskr9JIO6b8axyePkMSBXnr5Mpe\r\nSqYMig2cX7JMu4s9HAUMbH78YywSDm9110Rk39eQp6QtH1n5HPUPj9FvAIyb\r\nw1HG97RKOdkwksQxHCK5ziSViO3scpnp3x1b2ulbelpP0tlRiCsNhxQzTJp1\r\n+LxBtKn3JmuJhIYR/AY0Tl1wUgosKWhMeBSvVfFCO42kBzoFQ/CW6M0V+O4C\r\nSMAmOAyNbV32nS57yXl0C0Jy2kVP2taG/YWtBdgueABRbIY9vTH7ZUt68a8S\r\nhsAbl3Eqb9qIWLHauRlQUrZbDCxcSZ/BKTHJsedEk4i+ozVWEDTJmD+qcTWt\r\n+SEwqtnEUYELODAU7UHTQKu/q6eg5D23c8JiSeSR4TRCAQfpaumwIIY5QRSB\r\nTu4f6r1w5WArf6tVcvDBt4J3Qsvg7WN3/AM9KdZ3rQF/owpdmiwi1mNJX0ge\r\nyHAgtoCN/9ouFd0f4/SQAsQoMsutbeRLFP4=\r\n=t400\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b9806f623.0","@material/tab":"15.0.0-canary.b9806f623.0","@material/base":"15.0.0-canary.b9806f623.0","@material/animation":"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/tab-scroller_15.0.0-canary.b9806f623.0_1672355275905_0.5272945163419702","host":"s3://npm-registry-packages"}},"15.0.0-canary.50c9f550e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.50c9f550e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a77556070de53798c17e7afb7c70053d47c29ed0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.50c9f550e.0.tgz","fileCount":51,"integrity":"sha512-YZPTrKVyaecj/Ff4CpjzS1JnY7Pr84oe/cuaBBIscYKOsCSM257TkHmLTcyjsVdLivyWQNaYMWTLSG74TbQ3Ug==","signatures":[{"sig":"MEYCIQCv4F8Yrua2MjMfDYMm+pOvp5qkYGR14iWBTHlNrsZoswIhAK80zkzY7ZdGHMj42kB7xu1dVpUhu8nVdiic15lktEPg","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtE6XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqmWw/9HEC+encoE1IQCz8CBwYE7CEBPmnVolTUKiwRZlief2xpN0+R\r\ncxurJOw40HKURRht0La8v5N3rLyahbz/my+qWG1KSECW6h5xKjCb4i0OHVPa\r\nVZnSv/aipanV63pL7F8YSbusg33Exov6qbmNms0lMnbZdlwigSE8G1QdyDIc\r\ntoUiD+BeVNqLsPvVwDq5GiCXx5U94l1Oy6/28Rc6pzvv/3VB688mtZnVdPXU\r\nG+eCJ+rAhubdNK/AFbw4z9JNzY9j5RoPWksbIZbdmIJPx+QlGJxZZfrxgaTw\r\nqr5xkZFqKi27rC0EtSkg5H2GecwZ1rHYjp+Bx2F7s6d2jQfFfpuP60U3bhmH\r\ndG/xeA/CWngwI1MoFaHyk9s2tESCsOBD7weNSgWABiplF5SEmZuqMFbOsoNL\r\nmFyhxq1CKxe6rl2sIjFp4lWr3avb8M6dGsu/6U/aYTUF8ilL/kwmg5KdhF1g\r\n5KsxsYjUkrse54kv4OSyVk/Heo9ZyajZjxVaEbbOXOqEuWEZBZFTr93vHhyN\r\nXHR8PhuaJgSzRogIF6S1ieEjTx8m8UiCPERq6gBolNXEBH8KwyCKeEDhXOPJ\r\noWK7BX7myel0OTzJzjky5PSGsjuHuexpJD41O2x8kEWRG064OWqyiSnUkEnD\r\nOasjO26tV/E10uSdlgo5u1Xdp4YjtjSKl2w=\r\n=sRtf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50c9f550e.0","@material/tab":"15.0.0-canary.50c9f550e.0","@material/base":"15.0.0-canary.50c9f550e.0","@material/animation":"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/tab-scroller_15.0.0-canary.50c9f550e.0_1672760983382_0.2713398662369517","host":"s3://npm-registry-packages"}},"15.0.0-canary.af490a848.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.af490a848.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b3f55e9ba78fa20cb428dc3a8c2d6704442a014b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.af490a848.0.tgz","fileCount":51,"integrity":"sha512-oBgFdD3aVmn/trKLLvrCU+JEoDCBgX6MTsRfz83kRtS1WMbilKJHi4DbdBTP2nXsRoM3HXCNCleZM3jLMkessQ==","signatures":[{"sig":"MEQCIBx8lX5kQXS5i5GG6gdYnmN6E7bS83karJdXdKo6tlBaAiB+RAlf0Gokfo1Vagk9ncnbPUWNqXK84zETlIK+x48v5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtFEIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmprzw//bYAfPRL2UFMa13dfHI6R/wrO2joG4riiCONRtKd8POBFdFJ7\r\nx4UR0b8aFNN8/4P/+9lA5aiX3070RxwwXEIY2mMAOUsLsffnKZGxaPeQqaSa\r\n96n9GT6dK6lG+mjS0XWjSAKt9UipE52Hu64ZTK3JkrwqAkFYyxV2Z5aUcvQR\r\n0ehUXI8CBrhVjTCTRyVVYeYXG+15q+cZ8wsc5Sy6Xxg4VPdRY+NSqOcfqywd\r\ngN9O9+Ggb1uUeojO6yXppZmhrTD7tFfLYy6G/JdikBIozbDLb+PVKpHqBjl9\r\nVWnWX17d1y58TczTIT2f5nL7+gnutoKhx9WlVssle5UUkWsEC0P7OzGBs39o\r\nvNVx8Xwi19ujeCx2tfpS4mkYSsPWO5XTXOZix4uXC8YVrt3qX5Zmtcipm/tW\r\nxAa5O/aerSqg6U9tZZP4wyg74DUsYxQKLNiAKACMld0OwJ2z6iW66pKmDhxH\r\nBOZyxkLLrSLAAMeQ14klDtnqRTiPXFXjhiGrTmM3J3N7kv8meg1gz6TW55q1\r\nantAMy7uBCledc0Zj3FlT70PhobuvCfHZc26vvIH6kBv4rLq8+363Wm+KxQ0\r\n0VlvBbHirONugJ+Ht5DapUnPVSDRCls5V/cDyP0pYd+jQA17gTpR+RoF0nNx\r\n+RUEsz/8zwVjnRAnCPzLrVBQnLH3WgDLGUg=\r\n=67IS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.af490a848.0","@material/tab":"15.0.0-canary.af490a848.0","@material/base":"15.0.0-canary.af490a848.0","@material/animation":"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/tab-scroller_15.0.0-canary.af490a848.0_1672761608311_0.09069136376870368","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cf487c98.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7cf487c98.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"895146d1870efc8ef57fd861df1131f438444193","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7cf487c98.0.tgz","fileCount":51,"integrity":"sha512-eBloUxBEfIQbKBfEDY5Fv1+YMOrR4KEuYt7mSyt04V0moLgAVDSrzKVC23NBcPmHKVOxXDVEcKHXexQ1yZ5oBw==","signatures":[{"sig":"MEUCIQC9sO1tB1xc+jgmp2aCIH++9H3t92uUDog1WgdZTXIQ+wIgRglJ991XsetOI5B6KbSdKdIGXeB6oaXWjWAET+3wuSM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":330786,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtGipACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoikhAAmhb8tX1CYXW9fSCl0r6E6EQD2dtVVOzcCQVgKz2YyflH84GE\r\nFUjFBkPsc7FfpOQPo0xTvesxoNomyEoMrxK6liVtNAL1u4LMKRnD5cYZaUTO\r\nqReNj6zsYj1Oy9S6VqjyFvPUHkkiRjNvFNefdWa+ytjYXfKuL9dHH7FwCcXs\r\nAb7dFDr5cB6TdbBV7EOQCgB+nQcuTyeSrdy5Rx0g78RMTr/aavC6cPNGxUb5\r\noTKXwSQ88ZIUzihQw52SfbjElfi+2KYyhPWbdc/jlaxhmN8q27aUCsuZ5v+j\r\n/rRwl2xkeENHSktUNlTcuRIne/uE/cH8shgjQM/xv3hQdeMJTa49JRty34GR\r\noqm5+vsjx/wF4mnWg71E7yY4gA/983PDOkg0zH2gT8zXgauKJR1x6nudoDUB\r\nHInfTZGSf4tAskTryeLM3cQW18frv9LmNyn//WOo8fSyBqpgD14ZMt1FpvGc\r\nCNVqyXV8CHvnWyJbzFrSpha//zuletsahPvSXRcyqoLsnmrtObjak5Ld2btI\r\nfmeMFqhstBUpqpbAys/IzAXrAZ/Uj5WHXDE7E9ET62vJQG9lwraB9nE1uNIk\r\nnEB2+G3aWcrCi5ff8m9iFJxUkRcxgjDrwTDr15EB2tT4hznfKahCaCYDhhoO\r\na0/DNgwuanHoMqtTxtialU20j2owFuemhA8=\r\n=UOgk\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cf487c98.0","@material/tab":"15.0.0-canary.7cf487c98.0","@material/base":"15.0.0-canary.7cf487c98.0","@material/animation":"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/tab-scroller_15.0.0-canary.7cf487c98.0_1672767657004_0.510469187098801","host":"s3://npm-registry-packages"}},"15.0.0-canary.a52be2d5e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a52be2d5e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"310786c716f0840228b2207c3cc71077d7a8a67c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a52be2d5e.0.tgz","fileCount":51,"integrity":"sha512-cQ/t8tQWSZOhpMP24Z+1AQMp2QwfJb1xCcbcWHivrTpoczjxTaixG/1hvfEEaSVBbLMH4hm1j3cyWOK5BnDJjA==","signatures":[{"sig":"MEUCIQC4QIfNXLCjuOjtPgAN27fE0vOqie6XJYSw7PvomPKxOAIgNVwh1yO6zuEHcBnTEX8dXIczNSdRb21QDrlcGFAC2G4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668747,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtH7BACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqIQQ//VTCTpb5ZeLLRE2R69wy1xSDGpaRDq5CIFojVUto5DGh+jL6n\r\niZr6HosNRQcynB0lxodbUA1rqanETMJJ3TYB1BcYYjsv0Ql2nC0xz0l+i1M9\r\nviwqu3zI1+b82QtOoo3RqDj3fBp4ZA5YzlToatttDPwcHXNRN7lgydU6CQXq\r\nsYvw+5LW+QNU/iq77OAUmT2YdBcqI/QBAIQfW+pnmgTzS8ig0zDoZ+pzKPa0\r\nv1oL6FhxyidtqnNFIRrsSbkyPRKaA5r2RbbGshpdsKVjAEPk2D9JKlgRLNTV\r\n2hfLF9pNYNYGy2vrNkC1G4sjVwqEcZaY7SWQR32lNGRtXgt4WtdgY1LMTBMP\r\n4+hpvDqCjj2MRP+BhghN0h9CUNStRbSvWk+oMgdNC8OPPUgbSSWK9Ccjg/ZV\r\n5DJJw3W7SQ/1+yyMCXwELCHAZvIJp6IEVYpLTu2ntqUJfXz45w0zHONmtmNJ\r\npBx59fWQcJO1BzZnzq0RIGY7ZKxoWmFroVauTTXWGSdLIuyPiQ5zAKUPtHke\r\n40BuvuXZKWlQz5ZRV2lQ7tKVyrBVIvgk157J9EpduxOSSkUzEfoBfAyWKb9W\r\nuJrHJz4GM+VvkmdmPbAyJh7YaZkNaup5EbHNUmC5gcebcH7MQeZhQiRNwQE7\r\nFssv8SoLJ0FuIrwz09mCJnmhJZrdlccVoYc=\r\n=jP5k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a52be2d5e.0","@material/tab":"15.0.0-canary.a52be2d5e.0","@material/base":"15.0.0-canary.a52be2d5e.0","@material/animation":"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/tab-scroller_15.0.0-canary.a52be2d5e.0_1672773313135_0.3877334422189449","host":"s3://npm-registry-packages"}},"15.0.0-canary.e38ba17c5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e38ba17c5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8f90b43801fefdefc70a899fd518a9a46bbae868","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e38ba17c5.0.tgz","fileCount":51,"integrity":"sha512-wRL/xVpMgifhuJ1jfVyraRmTRbypT4naHZI6ph+kucS8PKUz8VJ4QIkrCsqu5B2d44M4sx15JNISs0DwD96IIg==","signatures":[{"sig":"MEUCIHCdaJ13ThMdfPoUQHmKHNMd2fCsgxEwqHQ6pcAhmH24AiEA+gU68/IdMEZT5gChhh4GjRb4HQaK+4YtNwaKx4wxHnk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtK13ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqWgQ/+NzHqPPbe4AkAZxCKEDYzdFPXySZeGX69qmZN0cztDTy1Q4mB\r\nFyXkSE8ICSncX4KBlDwE1Eb65b8nz6HYOB+yX7dxjKhnJGeKSbLMdTMju7BG\r\nn6NEiz0Agdwsm8tMYC/oA600Oge/aG3TDIw+g6gN2JQvbKxvSX0qAG7ccmqU\r\n9p2IhZEqXbcSm6xlpXekSC2xgIukzJfWFfWLuZpZ8SepfdOFQ7qrY6KUEyap\r\n3BJQwlppZPt0r4qpUPwt1KO+xaXTXo+W81TGBICie+searU4BrBPx2rAgF5f\r\njsaa983eaJF8ysQ69LG2QxUhrpjlVHzmScF7q9e61V2eOUm8Uv4LkxuHyyvH\r\n0ao2DgmZjzL+fRxG7NX+4F33dCax99OTr8lqCMTtf7WIL3xhQtRjOXIAKqxM\r\nYx9iEdBSAk5XukGcFbd1dMa6Jiiq6Vb6GrnwaBMRtLdQ7O24M26mVPGSGKp+\r\n/pKTRoxg4pfaMluiFpHUMrE+GD+jZhjLZ+BTJDeGEcHu08HFLqOTbhf0Xio7\r\n2NLfBqu7k+5DQR1k0nwTyME0nYUwc6dfsE00TW1Fta4SamD7YyNJ/lpV3+IM\r\n0y8Rta9UYYj1FcKZzBMyE1Z/oqqXwMVkDKtKXP2y1LlNbuGgfLRuCc+EKo1S\r\nF74DnoCR39l1TNUbhyWvwZgX1LBDD1O9kJI=\r\n=cMQx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e38ba17c5.0","@material/tab":"15.0.0-canary.e38ba17c5.0","@material/base":"15.0.0-canary.e38ba17c5.0","@material/animation":"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/tab-scroller_15.0.0-canary.e38ba17c5.0_1672785271241_0.40939603573781613","host":"s3://npm-registry-packages"}},"15.0.0-canary.49041a6c3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.49041a6c3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9a2f31e5aa78f1e709b16fa4d15b0b4273c52613","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.49041a6c3.0.tgz","fileCount":51,"integrity":"sha512-VeSRlygRy60OXlWW1xiTJbHXisqaEjALQtLUv0mPaP24Yozzl2S5Zc2TFNL0pJdgXPDpO/mVG8FrH2E5KAnaIw==","signatures":[{"sig":"MEQCIAjey1UXi28F/cyI56SjewnN5c147KVkM7mUIv9VL/IMAiBMlfuwwIqIK1qAuUHffW8OYP9C7Mw0yXxUE7JdarzL1A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtZkWACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpjUQ//b3EeaQPKRMp+KtstRErDqgnujF62nS+5HfjCVkX8H+9+EVy8\r\nKTIoe/oBkBxGmSlj4mwQC5QIfWnRBA2InoSAJUW/GPnvTLjSUx2J09IqelYT\r\nK3EfDSQkTCMl2/tbyZ+P0J0F62M/pEearZKxOswj2dtzVqF/8r/a0RhG2uif\r\nnz1D0tqoPtTeb1IEc4g0S9xrR7qcuY6HoTqGld58v1R5mCCZxfd0B83WE/be\r\nx8+oP6yL+IdIaMkLOOIl2YIsG7mRIW9JKpzCDTjgubmoMnnHz9KsjBZihPSG\r\nBRNaIa+Fr/nX0kJU5NobMnNNC2Y/6t+h0rrrciobL07iOQs0tuIiPTpVXXle\r\nUC/GsorqrWz6X+bMx2EGk0QO6fPIUQLZHPKZxJ1HJ8j+Qm4F/3QBfTvd7HUI\r\nq5KCifzXgoRj2MoXXoZGekH5Q+caPfOGwA7ow6y9zU/vcElyIg5Nh2EI/5OZ\r\n5yPWg1NglkBmlq7FObC1LOOV24HLeR01E9SydbNLaqASj4vb4YBUDgv8mHtw\r\nSthcGXoUzBmS1QLLS0AEHySDKIW7sTMPeyzVQBcur2T91twWhG9+4bt6Loch\r\n5VZ72i6cmcHwM1cKCUn86Vj3bnf2V5qLKSBFLOkT52y5Y3qHUlNY7141g6VN\r\nRbOkoBbDijeHhOAST3xscBY0qZqmJcrh6hQ=\r\n=QYsb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49041a6c3.0","@material/tab":"15.0.0-canary.49041a6c3.0","@material/base":"15.0.0-canary.49041a6c3.0","@material/animation":"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/tab-scroller_15.0.0-canary.49041a6c3.0_1672845590644_0.716577237163923","host":"s3://npm-registry-packages"}},"15.0.0-canary.d7a2277de.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d7a2277de.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fe526dc5f00ec3fec44eb2fd98816c4738c1ea27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d7a2277de.0.tgz","fileCount":51,"integrity":"sha512-GgcBHKVrnwPIZb1zGxmaq9ltvYjnVtnqYLG5hd72UYR0pW1oTBcA1s8j5bDkqdB8Sq5izzqmV/X4IqY1AoI2wg==","signatures":[{"sig":"MEUCIQDGrcfcM4ka+wgcPRIUeE2bZP4ca2GLv63KaQeuzNHgmwIgHjLf3ANFyUHyUxlPAWMPzPFVDUpCCWcnE2MfdDHo7xc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668073,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtfGtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpIHw//b6+SqZNGOWDopU5X/uqPZhkXoLE6pwfgFku2ZxF+9JDU19CV\r\n7wFGJ7iMJ2N/q+1c7hHj6dNfdV5f5uLW2eToDqHG/84GAVPP8d/iF1pB9gr5\r\nSO6NgN/j94G1sOfK43xFnOFIlIDRlwXwE1Hu+LrXjSiS666pR5hYDX74h3TX\r\naFHrEWG/5VmZYIa8TOy7LLEY/6gr24pQLZ4YBZ5EYE9N6PEWRvHL/XobR8dq\r\njhO26NeamOrbfG7Y/UQEXMY9aDMUNePx9JSnHJVAkr7zpuigEFpAJN4Ya5Hy\r\nFixzG/cy84LAW1IF9Yh6lUJY/VglmU5pwT6LDSQEfCEYg4or8LLSzzpQkmNX\r\n4TyPpGJkQ0QDQlVcbD2AV5Jr4uWvr5I9fXMkXAr5+1Uz3IWjH+/UBqme8Hb/\r\n7IhxHOcxaJqKlaFUBYTGaVdPoh4WI+Lt6+6Ae9vBkN277FSK8NkuajfLxJhv\r\ndgYRU/BXGOKpsfUQ1v/EZz4bP2ajt9RguuIfgElFHlySIln2qwNnHrMzKohK\r\nRqizrepZmdXe7vXn4Equy7MNFqqzlhKjMJf4mB+qaclLOw72SMjdCeeFdXTg\r\neP7ENy/vtsfUBOECu/FcCf1YypJBTdYqgeB867TbxxcUwaFLEhpKuediZrRC\r\n2fWBAFW9kSPqL1TUMPkns3bC0PHcTVqZalk=\r\n=5BPV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d7a2277de.0","@material/tab":"15.0.0-canary.d7a2277de.0","@material/base":"15.0.0-canary.d7a2277de.0","@material/animation":"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/tab-scroller_15.0.0-canary.d7a2277de.0_1672868269469_0.14021670930071473","host":"s3://npm-registry-packages"}},"15.0.0-canary.fd95ca7ef.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fd95ca7ef.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f12b1a21e59572e5faa64ed8b4dbf330bc2e10ce","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fd95ca7ef.0.tgz","fileCount":51,"integrity":"sha512-xb/o8MOw5gHCwlCr9gA2Z7pRrqjYIxj+6a62PMe75h9avm5kHG+h38LbdaNIjPpCeNbvhpoPRUUpAMAyHHcuGA==","signatures":[{"sig":"MEQCIB5ECKG8ju3QDN4TZGb13Jrxdd7gQGHrY+8u7MfNibfnAiAPXgcRQwhqBrX05aAA1q7FrWWOievQXaE+b4NFHxtFFg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtiIxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqMnA//V5oo3s5MTjzlAt5TbReRtWSAtgfEFZb4hfqeAaOUEQFK6yVd\r\nsDan++r5eTeOk9TIqiNMaWlo+lB/flwNxh/hPfeocJIQ/A7jw5olgY3Ui7uT\r\nirYxk37jTr15dq3hUh+3V+aLsCzUuzSmIR7rHV4EURMLaOkPvPgQJlwSm+cC\r\nz30FYIMxWONoMgphvz2SxaqN5Ge1iMfnK6xEl2gowdvT8xse+4fv8nk2BUBx\r\ngAm5yZwgC6CCpm+jBgB1HG7ay1Gm/nrefRUhLtD1Kh7HevcIXFKFhCDoUCnk\r\n0p978W3D8fBmf8mfdJKmh8k0jpRsnAEmjrLyjVhSsFPUf8E5850rzZ6WsreI\r\nCTELbrmhkGMmhDmVVkKWTO9olXqmOFIVbu9q9nlof9V0Y2ZzQqVeCJGxr7PD\r\n0EJoJhwQCQKoU4FK7DFGId/J0NtKOH05aMYeJX8H7bBWVsM7d071PI7h6s0i\r\nJ5ANJCz5IXBrb12J8nFtcNt4Ted3z7goXilIgZYPn55DoF+4djCij4RcHsR7\r\nLve8J7mjY0oJ1JC1xUUiXGqvHfy5AHobUzFcHPiwcyBUA+dHAlQ9feD39XiO\r\n3/Wb0yADtTLYCQIGUc4S4M98bFOdJDZg370jApvYiMoc+vfiGt5R2ht5cqTt\r\nA9fhjJUdDduhKBui0N30vo1B/CulYezKOpM=\r\n=Wubp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fd95ca7ef.0","@material/tab":"15.0.0-canary.fd95ca7ef.0","@material/base":"15.0.0-canary.fd95ca7ef.0","@material/animation":"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/tab-scroller_15.0.0-canary.fd95ca7ef.0_1672880688998_0.25522126121558664","host":"s3://npm-registry-packages"}},"15.0.0-canary.1eb44faf9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1eb44faf9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b6b26e1b63a4a12edd5c5b48812dcc7bed2b1cb0","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1eb44faf9.0.tgz","fileCount":51,"integrity":"sha512-3LBfVveFulkgNAjFU2BDJeZJlabcWc+XpLFt40FE8WYtMRTQsfVdSssdaBxhJ6i2GzAMI+YMPdA+cT1IT9s3Uw==","signatures":[{"sig":"MEYCIQD/MM1Ribj03U+FdDvNhDM5N5MkMUBF9vFyhR35kilhiwIhAPrqls8lfePCsZvYBEo3IEiJEjbG2i5AWPemU+Ofh1pF","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtpQ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpD6A//Yi7VEB7uyQdyMxrQ1BlRVgEisf2UsRqY8AhMRmqi+AbAGShc\r\nbBCtZxaWKazlvNBgqVyXxJdSwKDuW4O3FBvzxoqPvcYYXf1EK9TseOcJ8eYH\r\nWEWmXF4rSGsvw5YCU4OuX0p3ZVcwZ/aqWWulIvzyuHea7/4p0EmTISUe5mwb\r\ng5a0AEDQx3211uwmCchKdycgTPecSfR35rKHCpceh1vIBRgle3ktXLN8rtIp\r\nC4PLrwdOftcYgbn0EP/dOxEdRi3EIKuXcp8FQiyW9SV2fsOlW39oIfZuC9Jm\r\nRvqhjZUru77hUjMjDdxmHk01pSj6vpvEdVIZWfz6uzTjUsGzDO+ekHUur2sE\r\neFhuzILcDwBxB6mdmJr8AQRvIdP/6LAa9wFIAr1oWveU+reY877/e+V4j3+h\r\nK8f7Hi73b+x6ah5Ra76iVSC8HGMDLW79GQdbIdQ3yFC8b8aWbFRR5v/1J9Hd\r\nwOCWythJpmLSw+OfQFR5nO5VVsOBcV1jU52e+Kn2bZg32eMY1Wmv4g2jTK0L\r\nNe0epa/+k40sSh9OimcsmjLuH6fpUks475pln33G55pwgnTVmQWfNjsYMwcD\r\n+7cb0ipvLG6pxI7IeBXe8q26pPHzMRiAJh1zq3m2fcGm7qvhHOOemRqn3kog\r\nyAdEus2vtOuCBKpRfpgYlfjLg60yxYYBnuY=\r\n=NK7W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1eb44faf9.0","@material/tab":"15.0.0-canary.1eb44faf9.0","@material/base":"15.0.0-canary.1eb44faf9.0","@material/animation":"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/tab-scroller_15.0.0-canary.1eb44faf9.0_1672909886806_0.47118909508646967","host":"s3://npm-registry-packages"}},"15.0.0-canary.adcdb7db9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.adcdb7db9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ff1e32cc5399abf3941aa77b70d19b8363ce7fd3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.adcdb7db9.0.tgz","fileCount":51,"integrity":"sha512-wIlsB41D6c2LoFhDoOAeDDsRoMRShUGyaQ++sYteA8/2FIXc6oKS7bwTvGgDDpZrcBbG6w59cWqw9+Y3NkLlfg==","signatures":[{"sig":"MEQCIBRIi3gC89Bhwel6O+gRL4YnFlOxFFdtckFHDGpMFbA5AiBqSP431cOV5EB1Z3tGzAWIoa9CPd/unZP35/RofNrOLA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjtvmhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqH3A//dcHz0vq/D2IX+/4QNLy/7tNHuheAE2KFBlX6iS785LGWJKVx\r\nFfoybAx88iboz+4r7GtEKox8qQV7xrcJC4hr7wKvQwGr8CdI3X/+sivFHt8n\r\n6sJxGC2nLKOYwCRTzxKkIkkeTg/gc/oAbhlG7aD1+wyo0Mt8dpKkwkFuGyfG\r\ny3j993CTtUjsoeo3ceZWPyoHZELg9cAUbq0HfFxkCJjNQeteOX4iEFqhfW/A\r\n2haOSuY0wSR3VJOuZSj+mG4a1OXl10wMCsKR8+YCZUIzf8LkA+Dxp6/GBghR\r\nXDYLKw1OVCxtgfLP4fnYgATF+KxyqDkGOfDjw8TLqdHovw7VsuFJikWGbkBK\r\n+T5YtWGA3cjkcJzkOmsno5vvYQFgOZxy8gqce3bdIqv/b7tvQFJ3ylSh4GxS\r\nM7sGso9qxYt/uRZsT95EWjlkSfYfbzHmsBi4wPK8LBAvazYf62uJCY4s5CE1\r\npvmR8Xg9CoOP3MBkXWdsFNySbQIbXTRlthZvyONPyLFCzG6TGixJWoPlQlRS\r\n2UYhQixNX9YEuGcNgGOq0znEjOoXTCktaSr4BarTZebbrgHqfk67OGTlYDhO\r\nvC9qUbr68y6dy7K3L+yNTHr8JNtsM1FGYInRHmoNzXINwf6X1uD4wThaUcZE\r\nViJOBOqDYRxp0rhbSJM66ANPLcMYTXmjda4=\r\n=VaQQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.adcdb7db9.0","@material/tab":"15.0.0-canary.adcdb7db9.0","@material/base":"15.0.0-canary.adcdb7db9.0","@material/animation":"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/tab-scroller_15.0.0-canary.adcdb7db9.0_1672935841583_0.3318432592688336","host":"s3://npm-registry-packages"}},"15.0.0-canary.067af7eff.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.067af7eff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"52887755f145898d390b65206873554013c83d26","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.067af7eff.0.tgz","fileCount":51,"integrity":"sha512-XMN73cXO7vzEi6lfg1NWy75DMIRaPN9QbOMru7LXM/m3eJ1raNID7pQbrZ4qPo9FqsdEHTutSwYR0ftA6r25dg==","signatures":[{"sig":"MEUCIQDDAbVABOoytAXcvah2CcGZrE+a3LpILhMiDzLXK5e8EwIgP+9D8EM6pCJy15ySQ2ro65UlCEORl0YocOHF3kd8A4c=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjuKwoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxpBAAmEKnUdkpDVqqDXH3wPqBZPeEdpOnPnJzJjc1Yxm0Myq1MElK\r\nM4ifcVGP6LyZVqY+fp0+Y6OvaatLn44uGC/lNUIALFU0q0/1E0BFpZMdrz/f\r\nxRfRzgVKXxarLKyVu/8g/G/3t6SduQAJr0CsB7xxs7Hj+ed1E2pZ26c3YQxO\r\n5MDcdod0BDgrnH6MmQ4IbpXfzS6knhN/9ZRU4hP5duxwZGXAfyq8VkRYCabt\r\nHL4m1Yy2ytVtGzLtDOjRNd1r8DuhBZnmvv4vMkqMHgGw6CIz9WQ5DVmzDf6p\r\nNsAezljOTDuSIE4/KU/uhuuGtKY2fl90s/PuBafBbQdCpbwfvQ9G2VSaZDAq\r\n7cPsAeqZWpiu3nwTAf+VrL5O7AcLhBVHjOF7wNpluyAitU4W3790wtGjb1Xd\r\nn+yBL56H39aedyfaGYpK3SfKUJDtgweCM2oUL8zGW60WQndKAR530sUrbaeD\r\nQrPFQmk/yb7qZF1g00e9Kz7TEGBsF6vX7b7u3kCMG1h+J6Q172UD4ytT0kTs\r\nzDN/5c5KLQoDP3LACu9ovueq/eMdiMcmI0dFu0eO6iXTn9lrorXkHewvN6oU\r\nGquNL5c3h5TA8EBC2RbYfhDWrJCZj5Itdc6MasawtCBzcp0AxjLoYRVdrkQ6\r\nH6HoYq9OFRmdqQjgN8uJsEBuszc3aOyV/Bo=\r\n=d02m\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.067af7eff.0","@material/tab":"15.0.0-canary.067af7eff.0","@material/base":"15.0.0-canary.067af7eff.0","@material/animation":"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/tab-scroller_15.0.0-canary.067af7eff.0_1673047080330_0.13362736229215488","host":"s3://npm-registry-packages"}},"15.0.0-canary.21d1196a7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.21d1196a7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cc508ca92a22f0bf3101b101157a9d848c44394f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.21d1196a7.0.tgz","fileCount":51,"integrity":"sha512-nJ3O5iAlZw1xdv8PI/OW+Yh8cFD6IaVHBP6QzaR6KZ6Y8OXJq+bbc0Ny7ibLLtOmJCG8BPz5W52xI5S2PlDMoQ==","signatures":[{"sig":"MEQCIAxuo8rbspuvmcqC0iDHi1dXQdG0vvoerNeJzoFeYjkSAiArzCcRbs+x6S5DWdU0QLzHZmGtYUajwzFIepfBUCG15A==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJju/BAACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmot2BAAn/kwotPh17oNNiuAwKZe2xmJmQWDzal/hAUb3ek5MEQcNahy\r\n4qPz1ob+LdDcZf7m8Tz0JK8sKEqIbsMso3leMgBwBsjKK+xfbuOeh8DuOo52\r\nkePHyV+6tcSVtwqDmxtpj2srltwlDvQeFAGHcFypLx/CLxFps5wpGOClmgq9\r\nr1p8O+7BraohG2dEArN+zR8LEHlHowQRnyQQNV8K4RoN0lHnZyYcew3+80GX\r\nUSo5JlMalPbgMA1OoyQSevpF19Kpy6Xqfw6nqywLZ+2TExfWlNaz1TA1bbZC\r\n7gge5QCOVd7VfWvifqHQLPQJOcvfBNCU/Kf/splnU1o0ZPHRtr24bh9pCKzh\r\nz3QA4RrOWHg0c/h/8i4Ii38L1lkNjx4u4+6DChYt4YKkA7s1950CIAC66WOy\r\nSK9d+JeM3fFHUGWO1hbt8Wdh72G6EE8ncQ6lii6sE1yog6YxublQ+Tui97MR\r\nxvtyJjwf/pSFvSNkw12mkUJNHXxy5qCr0bfouc18Z570/oyHVmccQBRnwyq1\r\nal1lKO18vItMvEMjS5mmHSGvbgMWmye976mhhwCpWiDQtTvmlFkk7UkYfw/w\r\niqzVxImMGDvRrabnVgl6Sck+i2B2IsuN+4bCF4zieS1iC5ieSp7cccDM1T4P\r\nhgYcU+1Mv56iquPxVNJvTu3C/ap/9Iw6kAA=\r\n=hrJt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.21d1196a7.0","@material/tab":"15.0.0-canary.21d1196a7.0","@material/base":"15.0.0-canary.21d1196a7.0","@material/animation":"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/tab-scroller_15.0.0-canary.21d1196a7.0_1673261120611_0.7411858583805819","host":"s3://npm-registry-packages"}},"15.0.0-canary.8d2d8d3c4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8d2d8d3c4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ec1e8a46e9d6b6103c0935925b2948a5f98f5739","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8d2d8d3c4.0.tgz","fileCount":51,"integrity":"sha512-I4j3BLpLks96UVeB7nmk3gvLICODPdYd3zwcY4cZHNrv8cmPv7yWGpREeUVw8VfnE8TE8xPnrii5ArtZKiAkyQ==","signatures":[{"sig":"MEYCIQC8kZiErLpqiLZsB7qx2dNQhf3FQ7Otx2Bclha8DI5GYQIhAKCKL+RjFjgpu+7TFGotv63jLA65UJgkLL1wN4erWKqt","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvJR9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqFyg//ZewK+yrFjBW8pz1fcJCQVkXl4NeYugLp9rnGepb01ZlaVN5Q\r\n75GxpIYWH0x36HHgOGnfSAg8rYXWHk2tQ0RT/uu0TLp58F/xi8WLRt+d+IT5\r\nQdUMcnFQaijFy1At+kdTzPVWeWYvvXB2Wjg4cluL+nSjDRMdAk7NpIDhSFKu\r\nB6Kn4KtGUNgJprlHs5wNMtwgKf/S8j5CKn7f6+SXzEfE4MT60TLj9KeVXWwd\r\nrq2PERxB9C7Az9jT5PQYuPfSGZE435BNgA4usg3KkTOQY0pt/L+7bauikNoW\r\nNVG0lZspKLRUMyNTMxipnYJ7ZQsqwyiOo7fOT0IgbP71khWvyaOsxVVNl7kP\r\netG9sDm7YsCjDGHagtGFY5b2pM2GGU8+Q3gmnzrp0d6N2nA0pfEI9RQd46lc\r\nEalnWYpygnWaSAyiqhUjC1a2b7E1ion8mJAngQOpT5Vwz4UqIKLk4z39BgxM\r\nVzCZF9YMAjWCs/9dOM2EpbSnJrxjWnBv3B7P1NOWSuGiHTDkjJTNf8hAgQ9Q\r\nlSdGrGgBITiPGJFBGZBr2K+L9c63rcPpSrwNLSdZMdnnC3DXCWeLfhnswLR5\r\nRrSIc7vF+O6mdtD2Ok0zNWcQo+KW6LUMAHVNiR6ntEHjaypJSILgJebwy4ld\r\nANyO7vXB5v+8hMLHh0Wo6Yc2GNVarksaCiQ=\r\n=aRFo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8d2d8d3c4.0","@material/tab":"15.0.0-canary.8d2d8d3c4.0","@material/base":"15.0.0-canary.8d2d8d3c4.0","@material/animation":"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/tab-scroller_15.0.0-canary.8d2d8d3c4.0_1673303165804_0.9655642323920111","host":"s3://npm-registry-packages"}},"15.0.0-canary.fc6ee6c32.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fc6ee6c32.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d150af5850b747f63e2d4f82d32089430aa7c425","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fc6ee6c32.0.tgz","fileCount":51,"integrity":"sha512-JcfkTQJy2EFVIcph2mlGK1u4pbVKLXgsw5Mi/gA8CsiSfmvBiq2NYAhcYYnUiCAifjNzSXXSa/QgZ4OYYVoWng==","signatures":[{"sig":"MEQCIG0HcJIj3duQG2UiGmJfoF/tEkYFD1B/Zhaec9wkD87HAiAxjlta0mOUz63B+VLpLKbolLLsa2OmQX9sJYmuzBGo6g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvZKcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqLA//XbZ3IbGUhS/LhzKQtViLHmwsm9Znd8GhkLQki+vmc4HfLAzT\r\nAh2RMCq41B9wizXv0VlhfJQEGYB/9DjeEchPO8z35yL54UpO+eJwm3ZxMvTL\r\nlOlbL4NzP/e4l/MQvT/cIzbO5RDZinyxUa6UlITEEy9//jGWxGfGMXRYd/Gf\r\nSvPXoWfUYVGVO0io66C0tAbymU3cyeSnfZf5vfDYX3mzwk4Up7r0cDB0gHce\r\nLNzpDnbFGPPSf0kGTq2tuE1FYqBJlTw09wq2RFGspB9QhRhj4Pj0aX8AomRm\r\n2kewolUtW6k8DZZAYYPtY4JgSgWXEYvwLkHypULJhfLoE8VieWnifqn/iMhg\r\nO70ZwER0iXTnwvPoR3KvGm2v2UtwMQcNjfBIMhXMooWtcewC0OjSUhqfFwFQ\r\n22mDiaKg0r9NUijQtimCaA9bBJHKMzpcIvrW8jcvM8/5JzlUiBbrFVHjC2tV\r\nyRwjJLCXzYmBBE+DMr29HH3l6hezlzXg2D20dFW4jc2sN4gZIWOyrvpfszGU\r\n238INuXmsBgplxINe6Sd8eYBQuPEtUgDKG3kB4o9gMq4EnU/N3JCQgkn45pt\r\ni88LY4QXJnpLUICWR363/yFcmJAX/gSwqrYH2PZm/8LZrM+9AUu9EJ2O+VoX\r\nhH4vfI3vrfK4yivUkuU5ezBs4neW3a2etF0=\r\n=WDiS\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fc6ee6c32.0","@material/tab":"15.0.0-canary.fc6ee6c32.0","@material/base":"15.0.0-canary.fc6ee6c32.0","@material/animation":"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/tab-scroller_15.0.0-canary.fc6ee6c32.0_1673368220423_0.9375294647142822","host":"s3://npm-registry-packages"}},"15.0.0-canary.73537ab0f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.73537ab0f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3a2907784c0fb70ba33a9ab722e276ff646981b5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.73537ab0f.0.tgz","fileCount":51,"integrity":"sha512-yvPRII39qqWiFFNcR8aa5q7Loh7ivuvTaI7/wWq4Zf1bmpwTaGvG7tIw0nouWFaj0beFlsU4W6vAB0vT3oXtlw==","signatures":[{"sig":"MEUCIDRG+rshkQUii7lJ16/Y9jy3AtoCm5lCF5LLzexKs3a2AiEAvI9pPtgd1jmSN6uCY6mJUtHMAbG/O28jz2qBdMI1nOs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvarUACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq5Ww/9HXbGwemRbne0FKWkisWJBKIHbVf/Zn5jp5ihi5I23BJ1Xp2p\r\nF4x6eKpt3kgXLJVmQL+v47wjkaCvstIvUP2M9DgfWhEm6uqd9n8uwJrZ6ZPS\r\nH4bZexY0vyqh3Ezj5Er31GgqvEkS2ZHuIXb1gy00oatYGKRpyXY8zED/JxuV\r\nnkcZTmI3m/x8sMm4dEj5PSUTeYUZcO8qi4SIIUdmJMqutd7uSHYBgTboOtUI\r\nLLRWq5rtPjc1mzYJm7oK6P3lsibcZInfcC2LhqSka28IGjp3e/iOIe8qiuRw\r\nmLp8DztA8tjBfc8mcyPwagnBHW3CiDesETgR2M2/YH7AkGrDdZ1OWVd/a6zL\r\nYNg9o5Z3lb+egUqYHudnVoPyKac0/S3+ShteT/XrqASFKCT+0xL4dMhy7jj/\r\nv2VCTHt50lcPjiV/0/xO9CLCdjVbIcY+QGQf01igRTEsEakca+N8wUcNSsDK\r\nOV+7UeQ+o1d4EMQ+5z8bAJz7Ax9urT7H+0/gDJANrP6zE4tVlvA0CdVedaVm\r\n/KKxH2TcAd8AcgiajOVvF7NI2EpDl/yWa0E7zWfwzpP1sPWR/gc8esDB+PX7\r\n05ouzNeGsyw7xCFdIP92eegT4w5pfvsEt4qoZFGzAmAdGuloaEVcUzZ7ZoYi\r\nnPPu/8zqtSa/u4+/AU10W0QspNe5OU7v8kg=\r\n=GiKZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.73537ab0f.0","@material/tab":"15.0.0-canary.73537ab0f.0","@material/base":"15.0.0-canary.73537ab0f.0","@material/animation":"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/tab-scroller_15.0.0-canary.73537ab0f.0_1673374420732_0.048410540401969016","host":"s3://npm-registry-packages"}},"15.0.0-canary.684e33d25.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.684e33d25.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ffe730dcca4fa1831fb541e9cdee9c566fff14ab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.684e33d25.0.tgz","fileCount":51,"integrity":"sha512-H6EU/TSiK/M2DyyORX5GEtXD9rKYxTMHC2VxsNWARPMFJGzgeW2ugYkFv+rKI1/c0bs0CJ4e+qFnOlBsQXZvyQ==","signatures":[{"sig":"MEUCICGMAilsUQsiO1UMFUw9CpgALUitS2W07kSXW//TriZWAiEA2/PpPhXmMj/38TH/ccU7PUcsY/aRHZNymf5vR+ZA72E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvbqFACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqwfw/7BWG9GvYccHXGj+o8m0LSmjo6Jcm2idf+9/5MxMaoYm/QugDy\r\nD6kk272Cgi0VkXRsq3XUJPnouJVS1WdB+Zzvqj0dujbsrqj5ZrrSyAXFF7QP\r\n0uKlmVK9P9TB4canqorhu1T4xuZehwOaonHQkGOZopmllJUL5qKVpdzKidFo\r\noG3D1ElOKMHlJcEndjtoeZxEk18zfMKkPCHwz5Ej8pmL36ZFnapqQnUZHVjR\r\nBxX7EnagtNSasqz6SE/cxqh+m1BDPHsMrgDKJtjgkr3bp+L7OsW7N/cBNyX1\r\nWLZZjz2hLZt+X0WU6VkUvfODy2jPLBuEMZRARJ6YSjj7nP79ROXzMc3Vi/6I\r\n3zs/SYQHS1/C5JFYdu/n8aa6tT0VA17Fi5cS39VDfxW+FyMn2LWlyv1quKRY\r\ntqaqFEIhQUiM58uZ+fMYgNwNyhvayp0wVOWqD7iLy5fJDLdjdWNXRXbwHBI9\r\nevv+EszbYrcYg8gFRqXpLcJxaDX3EJuqmchuv3l+JbjZ9pyIlFi+VwpEBGX1\r\nlN5R5yAN+cOU4A1AUunKFcc6Hxcgz76EXa/ag8HOWCRqoj0e9V+ZLw3lK7os\r\nO4ZuwZ8CnmrC7ufCcScnVNHrZWXTrCZ8IO0MOLdw319iZ7jMT7lTvPxwuYFY\r\nvAOunKLPzuR2mhGPEY2yBx/68Bnn2NK20Fg=\r\n=Dv4i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.684e33d25.0","@material/tab":"15.0.0-canary.684e33d25.0","@material/base":"15.0.0-canary.684e33d25.0","@material/animation":"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/tab-scroller_15.0.0-canary.684e33d25.0_1673378437356_0.017298376074073474","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e89aab6b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0e89aab6b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bf6ac9674860cedbec352b74b6369cf953f9ec6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0e89aab6b.0.tgz","fileCount":51,"integrity":"sha512-l4Njx13SWYbFjejV7FT1anhjoS/SnLSfQnjReMI+hL+2B9kXjwGTuvbPdebleQt006umO2SceoD+5WVfjBrq0A==","signatures":[{"sig":"MEUCIQCBiDDDs5K/jDz+v2FE6BhAMrQd9FzFy6hOb5o9Zf3X3AIgK/qvPE4qrTXNZHd7ps6Bs4OJB83ei3CROq2l9pe1Zl0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvuG+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqcwg//Rb7LMd8uBEIft1hs7aB5vLMYcIZhbEu5VQLjRicLkvEDB53L\r\nhb03DPZckMAGvQFlro0Shd9S8ZH7PYWzREkrdlmpZF8lR87ZPDf8QIrS7X+S\r\nC4j3bPHpFiv0TdK1i7yIGlDasfrDWVdRMVTjg/Yy9GzzuOQhOtDNaDrclkiW\r\nnRYPYL7Y7u+wjD6vaSPNYeTOS396CEyFjCXXbQ/a87s9AaLnRxvrJsyoc3pk\r\nrrlpByU4lW3rLn8G+hWpPn0ODN3dNSMZxdp0x+gt3AtIYLriTJ+yBibnogGE\r\nCdtyeDzPS2BwW5v41tmPOjGgy97T5bJriVAzCRymeyJ46tAR+d2KaPzSh46J\r\nyG6DyGoIPNGq6QaxgaWNqnw7WPMkSbmlO17KdYnxT2YOOMpbtpRcFI5EiwdM\r\nG++Yegd7IyFQPLapHsXuuwTHfah7UG4w0Sp0pgGU32rMLK+gWe/cf7kxvTlk\r\nfLKrNsJvqTahZRGAkiYoSlstZWQkwEE9JeVxe4YnHmVTWYmC17AHT+MR2ohn\r\nFjh3t9i2XeSH89YbSlQ1Dq81443QBp5G7PNgR9F1W/I7s8TeUjFSKCz/+dk3\r\nnGhb+yCPsfYMtafC1DJ9Gto19bHtS/Qj3585XqF0GtwAqfSGwd+nS5tatNPh\r\n2eGny58S74RxTImBKdhxkZ5OcQtVt1jUgVI=\r\n=JV/H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e89aab6b.0","@material/tab":"15.0.0-canary.0e89aab6b.0","@material/base":"15.0.0-canary.0e89aab6b.0","@material/animation":"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/tab-scroller_15.0.0-canary.0e89aab6b.0_1673454014749_0.19891502635986047","host":"s3://npm-registry-packages"}},"15.0.0-canary.b0103d10a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b0103d10a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c83ef97966aed49e5b877a66d08d517c93e974a3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b0103d10a.0.tgz","fileCount":51,"integrity":"sha512-QPu87cMVJKHTHPjJWWw5H3LVoVk+LxdiYKn9ADS0Go2x0fOT48Y22r5Qp+GTn2C82yO0K7R3mkZ+qvQk8MdH0g==","signatures":[{"sig":"MEQCIFhfsXbW3Fx6pzdF327g+PzcgCPyvghX5bAM/Tm40f9RAiAnNnzFmZH+KWhDz5Y9xUkoDgbMoaTNK+Iyix7MLZF8uA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvwqsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+TRAAlKwP7+NAQPRFs59wGXIoh9SpMeRDCJR+kvCpYXVddVewgenS\r\neLTpdqnID/jxmPQM2bEb8ZapcUAO/FZcm9JyrJGeFj49J4NffFaGb61pZU+H\r\nCAM9XODCPofsKnRSvgUppTlfj7SansHy47p3h4CpRBeEdYsWpobCwaemuI7P\r\ny0m6kyUADOHl8mgJ1H4P4ejY0c0LvqrwNoqQzpbTq2UjoNHgweFQzzzr34CF\r\nl0J6SkOvGj1ruAI2jv6XTWNgkEOgDa4dYLeG1odFH7tdkt2G4GPFNA2vxyyQ\r\n/l5kEXGvR4KViDa9jghWXiPZyUJM+ovNGXzPDbC3siUdw/Go8UeAMW5SxT2Q\r\nQmfbpLAVgTmg5K15XyrJ959vVFTX+3uijUBGc/VL2yvXvEzyl3bWgLKesIV5\r\nfeL9qMWh2n18RP48Ksbgg/k5xL5oymLWxY8GoOh0wVKZfUuF4rc/SD26OsK8\r\n5FFcf6FOkpaRqnrUxxmQ7IILl/BRHkjY40r5TEiVGM9HyRNovygJ5mrZhAA9\r\nrfPUvQpaHxeIC9hzOll7YVY+hqT8M79xVtGWBnI/xnanle45JRuN71GPoy5g\r\ntGEbqpUbrKllqFib+/Wv8i4QYF/8BOEB2NopQq7fPiPqDno8DRZ9T7sncUMF\r\nhLsg5o3VWfojf79Z0X/KvtTD056vzLQXxgY=\r\n=1xZN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b0103d10a.0","@material/tab":"15.0.0-canary.b0103d10a.0","@material/base":"15.0.0-canary.b0103d10a.0","@material/animation":"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/tab-scroller_15.0.0-canary.b0103d10a.0_1673464492321_0.4113410235500381","host":"s3://npm-registry-packages"}},"15.0.0-canary.50e7a5312.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.50e7a5312.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"185e0d4082e74ab32fb39bcd531cd1646541a021","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.50e7a5312.0.tgz","fileCount":51,"integrity":"sha512-n7e69W/ij08MPP/MlgepZCc9YEklBmdHpJSQvj2h8lniEDZOITfbyxtGK3dAAkIzVPTyGSfbZ4788zfCN7YBlQ==","signatures":[{"sig":"MEQCIDWUew7K7XBjHWBeigc9PYVHQnvR0PWdaQs6SssRws81AiAxVCMvfKt6BMB6EfpE0KX0gFrX+382nB6Lhp5NLiw9Dg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvyJvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqT0Q/+Mz2nmOSJv0qihiWFZb2Gfz/hgl3SI/zplCMbxcfOjbehR6N3\r\nk3+e9e+1rF62BjI3BNjcCCM7/PeBJnUKt6M8xUiqWTjO9AUtrNHN9PLfOfX+\r\nueGchs3QA0bYSpgBcHbmW3Sq72wbXlhP1/TDwwfN2PPhICzTVkGf8tuV/CcV\r\niN9i24sqXOFcC8QloEQqvelQB2Zoji2y+iOq0ikPJ74GYteRuYRR5aBw0nqs\r\np67/hZxcaE8gIrPARMaOnqC9CMVgB8oeXkUd0b2xgo0LXjYEabaAjnTtMXS8\r\n9hU0k6PL/CQfpxdoMhPRPC6XAQpO6EcerM4rO1GDUfva8jpX7GYrWyGJwItT\r\nCLEujUVMkwR7I26V7LLLYXPC0BdA4ohyeSIoAse2X4GSeo3Fdp5qY0/PRLLN\r\nPwtor/Lc+Mqedz38Nb4lO+rWrPFSkJ+w6CBBMl6AWMdNTTOsb2KIfmKsrzsJ\r\nKs0AwN6coks4Thg+KO4IzdyL2yhUqsvG3F8B5JPVs4uuSeQTWD1JpNWLQu8x\r\n9kdudtYOU89548PBqQ4w/rPrwtdzhrSNSu6bDI9Yl2SfC7ecP6ZQhlEYfaeW\r\nAUV3NPslSjJmpxZd4Ld/n2JS2P0cbfzSWqfiiwxbziwqFGyabd473ntbod+d\r\nkA6RWYgNOSagJfNTjm+enhex+n6l+FTt9Oo=\r\n=aay/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50e7a5312.0","@material/tab":"15.0.0-canary.50e7a5312.0","@material/base":"15.0.0-canary.50e7a5312.0","@material/animation":"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/tab-scroller_15.0.0-canary.50e7a5312.0_1673470574870_0.6195662826181003","host":"s3://npm-registry-packages"}},"15.0.0-canary.202823f54.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.202823f54.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5cf08fa004cb7f9b968b384bc1bc826a343102f9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.202823f54.0.tgz","fileCount":51,"integrity":"sha512-6LLVvyvaY9j5dm7sFUQSU1iiuUJIGPPH5eQdh4YET4QAfXqBQhvFMrzCdTW/O++Zcz4cTog56cF+kyLZBEB1KA==","signatures":[{"sig":"MEYCIQCiC9I0CWD50XtHD7K6+XRJaJ4BBQQA+FDXO2fxXBDYagIhAKIbEa7hp7hdfGux5r9Mft4Rfpo0E+mVG6s7t5zcT9KH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvywtACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqngBAAke1IL8BYhQ8OTluAlZe4qTJIa4yzadMavz9jCyd2yLTlsFVI\r\nyBxjkZTgiRnpPbTWDUH38pqzDvtUZaJoxvbHZYvJmupvlZ2ulxBzNsDeZ7tC\r\nOhre1SqGg8WgHnQJmnwbVPBOXoOFHjcm+Ba/pggn75GFl8XnyxmPhWDkWsbr\r\n+p0H2vb54PCkpMBLLOHRQ1xJYtCaVyC+T9ylb7ppHW1Oz8M9+nmMF/elK3Ra\r\nsuaeqDdml0Iz+5SRPD8nK8ph1pjkuGvxGFIwRboKy8GeRskB2MpomiiO0F81\r\nSHREDRK+3GsBZBTLfF6VZjRB67LjiqVNFhPk1wrmRw0OP42wiY5YnRVUzn46\r\nH4wn05cSIVai1qGj7EjLoPKl3iIdOGEBPYI/kTKLFrW224AXZN5Ar8gF+5wQ\r\nA5DQNm1kJxw3kMh8A99Qkt1KTloSDgosyIYZDFZTajUtedEK3H71uvmWDONI\r\nLyKN6cNNGFNDhcLC+wLZj8HuOhmBau9TC/OyqMjf4zo6NOfxm0ncJfSPYtCa\r\n5un8B1RmzyfqIqC4GfbtJWJobFk9sgWpEasc8i4urd+YcmiWLMr4cgA1XflS\r\nl0DNeTZh+poiiN6HkjzxxRonv1a/WZLL5S6cZAB6uEFcP6uc/whf1kacg8DX\r\n2SYVnUKVsYGC9jFH6DqhcHNT08QUN+svk/Y=\r\n=WbGR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.202823f54.0","@material/tab":"15.0.0-canary.202823f54.0","@material/base":"15.0.0-canary.202823f54.0","@material/animation":"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/tab-scroller_15.0.0-canary.202823f54.0_1673473068819_0.360870790666157","host":"s3://npm-registry-packages"}},"15.0.0-canary.199fe2a2a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.199fe2a2a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e7980483e0eef635810bdd700a162387e3c47d27","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.199fe2a2a.0.tgz","fileCount":51,"integrity":"sha512-cwsU8aHYOT0/unLl0mawObS0X1yMnoZGN4KdQIs5czmrkxBvccYV/V1e5BoHP/PascFIUHcNBdLri2pAL5QOEw==","signatures":[{"sig":"MEQCIBCwehk7FSlGPSVYCGcsjp74fnu4mI/TQm8/n90NolpbAiAvaTYzs4IaKzVvzKsPtwyWepJG5dhks+/CWpEv69kesw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjvzDlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmojBg/8D1uGhHfQwTET8hnLffilWVQjjWK1jkXHCDVuQKfpn98RMZgJ\r\nuMNDuViGow6uVdIgjg58tfH352jdtFCVak6Fo7GbMP3OnHUXHPEXgPWg9UbG\r\n+3ENi7thNcWOclUGv2Io02mYpLx1PWujpkItKt5Ld0TwDFBLZbxHd0l0g4ox\r\nX62pIAG72fZaXO4syZl9HmSJ367UecYNf0+sqhyYbARKhe01XnlflvNl9kia\r\nH4vWRTje6IfUlhYZEUPAy2zjhcQNWNJ0NtyVcjEyFKLnjWGZwVTOtHjkt4i5\r\nOldbmsAcrCVlXSbhfMG0wFcyWSE3MPa25Oo7fte6OFt3ofAN/thuiU1sIitg\r\ncEXb4UM3EVUxjogmjP22PlUnLBw8dnhlJtNbTxu8oKBZQSQk6duGEBNLTjNR\r\nKoggkMXQJeEMk0lP+AmwPuxJhw0ve99vauM0fSViCvlIO3+yl8uJLEQ2uwRU\r\nVfxgXknf7/qxl/ReVbSMexyQVpRml+R/k0UCOIH3W5XUgyLEXDTnwZpJM+4S\r\nO2RBiANsj+Iwlk4GuFNmBth/5R9dyXj5ZU2FuOtVLtJCp4OOLFIZ4uFrmQZR\r\nwCa0QNYxunBMG50jDXqAiiK/Cj/scWPJtfy+4OvPHY9cr4pU8dQUsWTn6GFr\r\n74lAOA03Lhf7HKMc4n6l/pWf7ccZwr6RMDI=\r\n=78Ri\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.1+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.1","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.199fe2a2a.0","@material/tab":"15.0.0-canary.199fe2a2a.0","@material/base":"15.0.0-canary.199fe2a2a.0","@material/animation":"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/tab-scroller_15.0.0-canary.199fe2a2a.0_1673474277162_0.4518140021728303","host":"s3://npm-registry-packages"}},"15.0.0-canary.8c0786d6f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8c0786d6f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"55651fb621574c87924031f5b3c6384864b79a09","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8c0786d6f.0.tgz","fileCount":51,"integrity":"sha512-hbs1i27k9SlhD3JEhdDbwI/541+BKD7wzPFLKjV5ARCAHdPNsSLhBDVR5GhfmsNseARkZqVXvzmroM+5BrStDg==","signatures":[{"sig":"MEYCIQCvbOlWPT9PhlOsCi9ptfjf3JZ7oTRuKjSmTOiqFw9QMQIhAKgZhYryD1k5ED95S2YXLjume6DSyhtwQZpNMTqzfuJR","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjwBtsACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrMVxAAg8irFHdb8SvkOdX1JTK9Po7m5aToaSj3sTuhLWjpjljIYROc\r\nMpzp7MJiokOaeKonXSDXj6U7lzNIVOtIbErMDRFo582yV6P2YmCfQ+cRZxFq\r\nRkguD2qdhoNf5NdhRjtPblpOZX/gE4jw1M4Qljf8I0j8boF/epcWjFBzZliM\r\n6pEJAclwZk+4fmcPa+oKk+R3LHpXh3FxKv/hRiSjJn8LTUII+PtCAIIsGKUi\r\nlrPRr1iWwRo4N8vZ/PBnlF3LcthaCMZxkojaIlukBsDFM49UxFmo1zhzYppV\r\no3Vb9ZOCOVT2dOHzjvCKmIyxVfHHTpl9nBLWznESFedvo6EPk41VRRBqZO2q\r\nJ6xXSt/IBpux/yfTJdUskYc4qInijeBzFV08CKnYnnT01vhC92UVW16XVcBC\r\nqsE7kbf5nwUvryP6SdCAcgSbTaRhDi3SIHPRD8BXaQV6wwFaw23ZXAJt6xyj\r\nqtpOQzJmr7G696bW+YNXXPkPJrxa6MKi+KCNcC8BCSMaVLqvFihjVvZSm3kA\r\nMYOUyPR3V+GttrlKi0gbgn6b93ZpQ9ruc8xt7jWX0FC+pXzKxU2g9FcPPS5Y\r\njS60BKQlLl9lwuzf8nI/AMLcqCPUiZXrFCyP86kLBrLdISGbj+pAv+G7YCR2\r\nDqzcCljxuZkWmkXcihcO42LgsbCOyouMHaA=\r\n=ANgp\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8c0786d6f.0","@material/tab":"15.0.0-canary.8c0786d6f.0","@material/base":"15.0.0-canary.8c0786d6f.0","@material/animation":"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/tab-scroller_15.0.0-canary.8c0786d6f.0_1673534316241_0.9318194727563744","host":"s3://npm-registry-packages"}},"15.0.0-canary.8a74f7c6d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8a74f7c6d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"46ad1bc894a65b3cf7c9dd006d354293e456ddf6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8a74f7c6d.0.tgz","fileCount":51,"integrity":"sha512-nMb5tHy0IY5LdqFFOQQi+IzoyPeBhIvayiUrQNLUClIeh5k+0kEoUy08NaJcCYPWd50D25FUW1jftXJ4HRRkdA==","signatures":[{"sig":"MEUCIDiBuSCI7eyD58gMD507olDSXeeBqf07p8qnDaEwNwDTAiEAypuBPgddzb+a1I6njZQUU3fbM6O1oAbe/r4bR8UM1f4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjxvZ/ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpNdw//TElA3NYnjI8p16d37vMngWlpq4V7l3U415eyO0U117LDSXU7\r\ny5FDgpfe3QB6iu3QWVaSknlai/tsLzAjpZo+Hl+d4g3/OmY+22UkywtU2TLY\r\nwXVzUji9TyZv7DCm2uTLDKCfYM+s5qEUhY9Wf96z5mnOYaHe6S0AewR7SAOy\r\nSSTznaDS40sQ1g6247uTaCVgWPUQ9CLHAHCGt5v7fOkdAUa3TXfzZSHhebJf\r\nieemnVjqYOtucfOho0uCG/DenTsVa1sNnFIMBsrqvdyFwNUMUjw5OiuXSaLR\r\nli7d7Ww14FPGz1PZUsSm5cbH6rh8lxnJOpe8GTAy7llxiDu0HrxqII0ERn60\r\n6+VnyonhPrccNy/gxNn4c3657SdRt8caGu/09KsjhWYc08cfCVotLi65OIVF\r\nQNp6i6LIrZVWWtK0Q45hCnUPLfSqJ96qkB6xRXSxOGcnx26SRYUhjSDnKcwG\r\njNam44CUBvamVUt9XXTrY8CYpKwOgPgcQFcq6xuYBu2KRBziNRkz1m64VkDQ\r\nV2kGS/haHA10eJjmOhJo7g4PJt5AxJ108TOpKnP99ZygRdMny8UHuPCvjRAt\r\nrQhQyLoJN/7cvL+DSVoOhWs+HX363opH9Uv1eQFVYD80qmbTuTZmbAliwjXR\r\nB/lo0oqzH/TbW7oS4Dg8ru1oG1soxxS++48=\r\n=alGc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8a74f7c6d.0","@material/tab":"15.0.0-canary.8a74f7c6d.0","@material/base":"15.0.0-canary.8a74f7c6d.0","@material/animation":"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/tab-scroller_15.0.0-canary.8a74f7c6d.0_1673983615141_0.7837074034537876","host":"s3://npm-registry-packages"}},"15.0.0-canary.b4687fdc1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b4687fdc1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"260294ef9d61f6a79ba5ffd6aeec1e3e2daca0ee","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b4687fdc1.0.tgz","fileCount":51,"integrity":"sha512-XhvH9RHOYYcsq5zizQ1K1efUvngzwXxI/m6Fyw5H9+meYjDYQSxn0TYcJQUI7hknCpAIXJinhDPPwBMLcGHTrA==","signatures":[{"sig":"MEYCIQCLO6USNWn+zpkIb+j/A/JWXAV6dYl4jfoc/CjGLKaFAQIhAJNiFLUwFYh1t5gVdc4wlMk8H9olF1ur8gTg9lKVo07v","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJjyZ9RACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqHKA//YT6hNrfAkduxzPTv4nRet+IKAB69SPpKtsQ4AAjFCUaf4lHz\r\nExhYkSvStY345dhoaZLaXGpq8zpPOet1taKzZTm6sn0woZ7zdRSasGzsP/1F\r\nJwbVmo/fJE9OltUTP+GSRTmI/NRvOef5TaVm7WO8RkvBGcN+yzYvHE2qR2Pn\r\ny2P16ic38AWbhyEd0qimKlLnlqco0ewh5YIb0UBzGwzRhwQiThUQJuL3GDwR\r\nKISY0QpyssnXC+RExh2nI5gaQEql2IpowkMFkrr7BRs7wyqcJ87EXEVXwgk7\r\nskzUHo0V2s3cl/pNMTsx9tQKC8bb3tol+c+SViQDEaEclJCI3/hZbvvhP+29\r\n/PgDcJgN4NR9g8+XAZNwxLAeMl5X+x+H+DF9HZKuoYKL5C0Rk3oiZpyaa1kP\r\nki92rhAjm4XnYp8xXaXbi08YYCPGrQUDXJ+Ehjp1Vj6MnFvoyFXQlO7VAOPF\r\nXENbb/hlHPrlB8esPVxHXhXC9pmW3bPk9lI6yisozvlG5lmAnHaQQMBxqWRW\r\ni13pfMi7p9j94P+8/PeL1f1BLjkCz1TND432nHgzk2CzNzgu4YJH4yqv65Uq\r\n5hTTjcb+btn43k/sWLTtWyTUgaCr850k/4RVXbfiGTlZQAHF3/VEnhQPsf3q\r\nSyQ+UOfFtTArIiQor2Y2eUr4L1KXvuiGe+8=\r\n=AKsQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b4687fdc1.0","@material/tab":"15.0.0-canary.b4687fdc1.0","@material/base":"15.0.0-canary.b4687fdc1.0","@material/animation":"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/tab-scroller_15.0.0-canary.b4687fdc1.0_1674157904966_0.9702834455345837","host":"s3://npm-registry-packages"}},"15.0.0-canary.b836b9892.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b836b9892.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"894bb31038d63663f03230285ed049c894b64dc9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b836b9892.0.tgz","fileCount":51,"integrity":"sha512-+ZTxDK/0whQSciNsOUE65kJYZL/M/IM5XJ6+GUzX3aMwdZX0+grdsbfZxIpx0TO/+Sf8g+NvGuDrMJa+RgbSXQ==","signatures":[{"sig":"MEYCIQCfYlhIVapYMZuc8blwHe7qdq7JWP/QCimr2LjepasS7wIhAKgg8eMZejgfyHwCHDn/fEC9DX8ibUDvGyxdURBv/ypx","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0F6HACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqCXw/9Gs2OqU1lEibw3Hs4prsQr5aZZlXZbRCa5sBCGJeLHhss8oaU\r\nUpMyWImu+dpOn/G0Cv67JZAJbNmKd6aauN4h1F8tzTKfETdBzk32UqDHovFf\r\nqtjP0qx4fJTm4/XoEpG2IT4CeRHUvocBJvfJeQlcjyJBQl76O87b+SAq2Gdw\r\noUw4PyDaR8rEpxsPYQ/e7tTwqKJdy0DOeRti1LWW2mOj2FHLwxPHIZCQ8gYq\r\nnoRsmUS79LQpeKb0W6g4w4PXujr+pvbAgb+L6fyl1Xqww8mfSHuEwto6dDz1\r\nlh/v+mFjP8qpf9HBt3jk18NcnPw4xN7AxywRMx24YTAwkIKbApXxT86Oi2/5\r\nWXnoa18+HW9lBAXkOtGGgBPeCw6Nil3cFTXg6r7nw76+t5fbXpzA8KLgPox9\r\nMWTAcbq7OTeH48WjF//Q0szCdo7QGXkM++J3VA7JW4QmaLBBZHp6HWB+yePh\r\nRM23nLBvmwjl1RtwqFv4J4OeEb/GN0kvdTAm6DX0JW87MjXnWUVbm3LaS24F\r\nZEj9qmdBlHNKU8MDNDm3AMfWnq+jXhlanRtCjiHO1h2PL4krlDcJGX3ve+fD\r\nEoBLw/CFae9qY/a1guQrhm9gY7983PsKNE9ZEGZ3X8VpGIsKRFLw22DTh/Xf\r\nLtcAT9Djz/JUyQof7v064khtD5dmf2fiw68=\r\n=Tvp6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b836b9892.0","@material/tab":"15.0.0-canary.b836b9892.0","@material/base":"15.0.0-canary.b836b9892.0","@material/animation":"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/tab-scroller_15.0.0-canary.b836b9892.0_1674600071287_0.3516813605349154","host":"s3://npm-registry-packages"}},"15.0.0-canary.e8912fd37.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e8912fd37.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f21aa458c64758f394a9e8ecb72c807fd5949a61","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e8912fd37.0.tgz","fileCount":51,"integrity":"sha512-3wNVUZI9f+Z42ykZJHFbNGpZ+YSqXj+BDUWDKKR3+uJD5BRMvxvY3R4nXt175VH6pCqeZuVr3aWpHpUGhF5lEQ==","signatures":[{"sig":"MEQCIB2lZ1c1JZ9TsvdqWlaDvzUdB2WH5aP6WCqfn0+JLvJoAiBgnPfpyzEKzCCQkYVK1AIKeZs98dBnHsWYpPPEFLp89Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0scXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp2KA/5AFWP1B9O1MaszPuKymaRenEDyg8eaBPNqU+jfa/3fzVY6py8\r\n4L1fZqCk5JUBAehDkeSkjX1MWzlyjzjdC/RsmmOsIK8Wnv2hBlDAl/ZNoK//\r\nKxTEB8iWFEog9T1pZMZ73+OPv86d5vEP2FPbhqkk4H6vHlvlnVYqy/bOvoYA\r\n6/Irds5aVZjo+Hi5Y+5pspLfuV2WjJpFj91WaEQCpqXgciRrG9hsxEvT/Z9G\r\n8sFe4GTGb7DA8TbWLaDL4lDRW4GtDhRkcHDdPw/d21/Yw81jcFgB7JjtenCK\r\nqxgUSTwSlDpLkkeMMMrtgRS6u0rGxN1NkE6qW8alWe2LjNh1B+FHhXKlhuQD\r\nAr0BaHptyEcTg7lJTQX7uY1ARRvL2JwEB6L9t2Ij9Bcb2rPgAQ891U2I3RFT\r\nScowKkMTGYiL9vXzpBDM0eZYNgs6wI6vIvIu27kglVY0d6ZP4UcfHhOJpizV\r\nLkSiyASz35WIxxdhkbkOtBqlU/gUUGMvDMkwAAj/fSpfpeAwqSA6BwOiXMXU\r\nLqrhjws32eP01Ox3RHG1jQGy9oIdzylG8K/ywMGavKv1RcE6kOAz6dUdFICa\r\nABQUm5eU/orYQVQXEIIwMY+InNw2y56jay5oPe8NFYRm+FtaC1xVJPCCrRzx\r\nH7Pwdw1t5hfmoeZNtjMGj+DP7xN6685URxI=\r\n=wJdw\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e8912fd37.0","@material/tab":"15.0.0-canary.e8912fd37.0","@material/base":"15.0.0-canary.e8912fd37.0","@material/animation":"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/tab-scroller_15.0.0-canary.e8912fd37.0_1674757911349_0.8397195864035527","host":"s3://npm-registry-packages"}},"15.0.0-canary.16fbd30ff.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.16fbd30ff.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"feeb98372cb8727c97c1c1552e5dfde16bce93db","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.16fbd30ff.0.tgz","fileCount":51,"integrity":"sha512-cf8HVzcoxv4YZtmxhgaMQ2oLZqX097xi1wgfzSejDGqffRR/E4a0x1aG4vA65MvwJKC4ht6uK8WRva+ukPaa2A==","signatures":[{"sig":"MEYCIQClxYfSJlgU3oK9YoX74BLoi35EogIB0phAsc7dwOJnVwIhANUtw7566hcVcyM+YaaxOoHaiEtWXF+ljEG3EocJE9RC","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0shKACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoWpQ/6AtHhBvZPnLTN9F2uNqE9BJ84qzHdLBayC68VrP0dLgY40VO9\r\ncH9/aPVYl304jXrydFydOiF6qW56gZOm1FVQGNzjSUMf3upeU/zumrmFqzd2\r\n2DVKSqYWwDom/3HOTe6VqurmbF/1kRf4I10NsKgcVL2DwMJfFXoyqAvygon0\r\npGpCHQu4Iew5i8+IovP1FY6jCV7DmKit2vuqx3pQDGSj+I2WzpPlgfhayzaS\r\nBNuXUXR96wdKbdpKLogDDie5hWIBQyjCZs2epB5Lso1rd9Rnk8GfyN+6xE9E\r\ncmMxgsOt20kcT4b2MQG9PCwjOELakr6kDuSpn1G4+tHCnB1mi8wyc7EnvzNU\r\nqCbrXjWOmZiDuACENlAlQjM13BGwavCWsSBzr9FyNc+ubXM6dxE+q+BAPPzT\r\nsluvk9KJUEb9DLP4/AzCoVqkPJK2B9B72ZkTLVpao7GFQ3yTaUBZ3aMmaMpL\r\nStEnt7625sVyd6+GIHlkjVk3Y0qFgG/SWYpCzFxsSmbeHH6pJ3zE+RUzj1pg\r\nrsTu++kVcG3BSoJsQCcpaOCS9jm7wQ/Hc7dIw502eRCLLKkuK8cntA6KQxAO\r\nn8BgBOUIaQ8UA7z/5vA1Fgoqf9mPJEsd1MBJZweNnWo29kpY51Dmjm/rjUNB\r\nu34rTp5cW5My0b9o3uYGwKbIev+f9P6z0uo=\r\n=/7Yl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.16fbd30ff.0","@material/tab":"15.0.0-canary.16fbd30ff.0","@material/base":"15.0.0-canary.16fbd30ff.0","@material/animation":"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/tab-scroller_15.0.0-canary.16fbd30ff.0_1674758218070_0.45715449235653915","host":"s3://npm-registry-packages"}},"15.0.0-canary.033ae083a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.033ae083a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d18ca40fe7c488c7d8dabba9d3d94ae8fbfd9818","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.033ae083a.0.tgz","fileCount":51,"integrity":"sha512-SD4LIoY9ZGfLk6I/D8bujHcp2GWIZVulMJHm6i+JMde/JLLDHPoGQR3cfsGofL0YEKvILpk9AAsptDiesioGsQ==","signatures":[{"sig":"MEYCIQCPN+OL66k246J5PfsH9lVad6IIGfb3AbDZKm7Nq7KKcAIhANIqIMI+yCspHNHaoh7cu7TPEqMIdTZZqoOodoZk6cES","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj0tR+ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmrq6Q//bnaI+dJH0sSyFdIC5yx/8kKqajdyPP5BzQkQezZwdqqCfG3u\r\n+HShGLoqPtUgrSYzKAQNvqp9OV5KlMqn8qw5RO0CUlCCXKQeVXy5ZZ5MqC1M\r\nQvUfNdXuZvYGM8x7WavklEQCsmuEkmsgyrmWFsJ8xPWRS09QbDzaEuv0BRlr\r\nG3vNNho9yG/PwQP7jqCsJLO/XrJbAHrZIYJWi1SPrYNNqPh0JINzEsujtKr5\r\nVcOh51D1LFZURbsHXaEfKhlMAMnL9mlPewxGMQBN/SvZDItQCAQ+lu1c5t+q\r\nOHyp5IDvO03sZzAz2CWaOYRNJbo0Rt+cNBCNJYlrErIgp3cMcbqYgH3zGUG/\r\nY9dx9v6U+cww4o8mKWDDp42my4IPHAQkQaVFx7963hILJdB5rKQrgwtukX60\r\nMiSmcX/Vesr/O6yAY3w3vRM/JiOmpMMt/4nh+S+IcPcNWGmaP3lkwuWt4Dry\r\nahowEyoIx206FwZeVVVbG5CDKNuZgSP9pi//fPyffA23ZHNW0fMI2hjiK8XG\r\nFo/anXZHU+P0OeTGAQcDTSb7s4bKgVJ6inudzEmxmOMGvBDSWWPZqvWMVTQN\r\noIuXesOUZ104b2UD4+43EIcxs4ainGkjETNq5Qr5GFp50uMuMMYozW0CIpR5\r\nSsMSS3QvnRN7EVCDMrtCsn/tCk24l3n49Os=\r\n=qyn7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.033ae083a.0","@material/tab":"15.0.0-canary.033ae083a.0","@material/base":"15.0.0-canary.033ae083a.0","@material/animation":"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/tab-scroller_15.0.0-canary.033ae083a.0_1674761342106_0.8388999641022592","host":"s3://npm-registry-packages"}},"15.0.0-canary.3a705fa1d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3a705fa1d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"48443225a51bd20ec6cd194e7bc6b131e2a8c0af","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3a705fa1d.0.tgz","fileCount":51,"integrity":"sha512-AkQe9lVX352jIxPYvUnu9cBpHOYbV+T9ynW3GnwjvrZbLnpGlMs1hY/RCI3wwWJi9ohK0U7Veq0ox1sj2aY1Qg==","signatures":[{"sig":"MEQCICvPnleZp2Sh3Y66bixdPSD+jGWgZyvzMMQNVK7xn+rpAiAJIK1qkwm1p1WKDq2Tqp7gEWLv+119v2upDCSYXqE0WA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj1FQIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpX7Q/8D7qn4WgsMSPY8px4ub88gmyVERKOqgij5e4Fmr+tZ58OcGkx\r\nWtrbzzfMF2hABSf7tQAhd0I/Xdflz0p6nEiuB9M9WXyUjAWZHmragUNQBc2l\r\nejIed6Eiw4pO8s/gQnKQDYWEInFCH5jiBhfANFWqN1imZwvszo0wyoc7/UHp\r\n2o/RxkFaiAT6ve+AAKCA2F0rExcg+w7bEGVGGhKXia0t6eFmTYAuVl+n2zK6\r\nSs7NxjU5WT/JD7IiMNI29zsyyqKB/Nmvg3REls8M9kxf65TdDdW8IQsXlO4m\r\nG9GsyjXY37qlUqQErOTFLnbsEdF5OwQcTYFKXteTQxydxcerw9vrb4XlMo/Y\r\nN0bDSfNa+f3+H0DGH8k/hY/M57vSi0iSlo79RYun1HfP53MujEBHM1DnlpYP\r\ng8qwOMlyt2cYecyvaYFKrNKe7TEdNtBsyWZwrxtPWGg0xX2PZkGkT2DDoUtO\r\ntIWMxAYlp2BfndYWz2ggdL5c6Cb0dOEWbbnqv3RD5RYCzrydXmhtUwXZc2kB\r\n4rCbfvPR8LyPxPBqXcQQa4g9+biikWwzPnsCHwsRbYvqjEsfUdgJAVyT6w6I\r\n3Yy8HWpF2ovgMlaNGWYHcDo2DbRNBz3NiNo/OfEQh8t67XXbVTdAwu/8MxIl\r\ne9jb3rOY+nab2vWI7+PmAKlyZAx//Jm0BRo=\r\n=bfrb\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3a705fa1d.0","@material/tab":"15.0.0-canary.3a705fa1d.0","@material/base":"15.0.0-canary.3a705fa1d.0","@material/animation":"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/tab-scroller_15.0.0-canary.3a705fa1d.0_1674859528660_0.8366515364734903","host":"s3://npm-registry-packages"}},"15.0.0-canary.d6bea2ff2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d6bea2ff2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"911668a5a82bec3ec7d1c28cb9f92f6b2aeff59f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d6bea2ff2.0.tgz","fileCount":51,"integrity":"sha512-mf1bXsh9ZBCzXmamedmQ3+7QFEHE/Y19uuszjzFXalCmogoZmK+n7aT7ExYPx/L5auw+P+w2u9QLdXDOiFylrw==","signatures":[{"sig":"MEUCIQDb9dM4WKTBzR2JsGuFlIZVSwIN/kNjwROafBjOANZDvQIgagquIK6v9CQvgI3cOd6HFKyX7gwJ7OWMiUTklSqZL7E=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2TR6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoH3Q/7BJxZ3Z4jVJzKdWtup6t8LVwu27+44wPqrDXlsvU0WjFjKqXr\r\nJRJy9PP/5zAJnByTgOI4Kf5H+auWedRo6a37cfSX6UjF5VfEd1KU7+TyzACQ\r\n5ROZK16k5NmV4ygGID6LHLSW/nL5VurF1byFjGkmcY5OkJ8IgfaAnOHAWW7W\r\nsD/MTANlv6h7UmVa9ZnfAoi363HOH0t+lQMlreMQ6DRSTVYYcd37To/KpY9P\r\n4dl9lxTPZ4oWayMXOFUZUwr+u+JRC7/P0TG8yosImMWqVwyNkeslZxB2jmmB\r\n0H2kRRElmsacMfBCXXQWsx3UnZAM4q8lFE6uM3KrP8Lf0nCYxriaDrLJdXYX\r\nY3IPqK4sf7Ok0eYpSu1qWkJVEoHrhA4xcvB2+bewJqvVHnSlI2aratDsuXXS\r\nNbheVIrjVt6uz0YeJP4CQXQ6VuATIWE3ag59oa2V3iiZVnhi2TbrgpUKpGr+\r\ngt5I9Qw2IqtslhLQx78zX+w+NEcVebGqX937lMkGYB4HK2S4TxVP9SFR53pd\r\nXO4to9cx3nZhix+R7kla8UmXIHt8UXOOOfam0iDq6hdWQ5MZ+eAwPps0ZfUr\r\nvhujTxETOC2FnOUzBwtxH+2wImDP7orNQLlAB+MJdjK8u121RUfdFvevE3ne\r\nSZMwFT4mIVuvaGJwhV5iFJtIogmKTJpwbFI=\r\n=E6TG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d6bea2ff2.0","@material/tab":"15.0.0-canary.d6bea2ff2.0","@material/base":"15.0.0-canary.d6bea2ff2.0","@material/animation":"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/tab-scroller_15.0.0-canary.d6bea2ff2.0_1675179130784_0.9071057766629209","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c94182c8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0c94182c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2f13703a31b91281fe7d4bf8f63de80eb66a709e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0c94182c8.0.tgz","fileCount":51,"integrity":"sha512-U8/6/oM+1UvwvSvSOp5tNL7qxshCm5N4TL12a9Xc/BhzI4HE3xeS2DdaRKn4Riwbx/YYqk+GhIXW/J8Q4wZCrA==","signatures":[{"sig":"MEQCIES+KRSNe8IWpda5NY6zMglKAycdBT5t0pa/+xURsUd9AiBoisI/h9T2h4yyX7VuM16h9Zbs0vVu/2JA3WoX58FbAA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qVwACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqBWQ/+NOnkRbZoCjQ7GXelOecbSlgj95V2WaMS6OytuEj6EAFwE86W\r\nfzYvO/jzISr5QuRfLFSQiX1khD8WSjULoESUk++rPBggnbH/inXtHJCZUc0h\r\nnFACl6fjuD+tgeR3NPRBXpB6POQyvRxUGIW0nwKyb3FgpzwK5kndSOOME2n/\r\neS0SClcTjw9JMwFHQJLGCXTNCYZ5FZCF641mxFhyCCe4r7xkzQzLFoV2vGvj\r\nz2GpUW45r6RrfF77H3Gq4T4Dz2n645tUwCh456X9nsIQLI1d5pW73zRu9i+U\r\nooaqNWN2XM5TrnerKyvI5Dr0b/EAFAVcF15KbJrIBCr0d9ACOG0dBi1HesI3\r\nFSai0AyRA7ImCOZTOYk4Rf6vBNVJdW02HqNqV/Rg05wS8mj7HKVQ4JovJxFQ\r\nxuU2DIoMPDlYnPUQuTJGGLrHb/u8eF8HxaNeR0a1PGiWnlYHW/8HVBzStWaE\r\nodpUZ2iq6vAabmMtSyqdKuhNxnjWZyWGTlSBvyNRkzPsgcsH/cJpsmsywdlh\r\nkIFCe9NAk0Ncu9mnn0oA4Jw9ltmTU3k0WJzFUOtK96tSjsfb3vTgQ3SvJ81b\r\nReba+pzKXoDzhQ27eg/fl29dk85Fxn8Jlg2SzTFO8FO28WpreHSxq/RAkbQ5\r\nG7EZlJ7n87DeNs8JB1MGr6yt3fN8bUEfqys=\r\n=wQPa\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c94182c8.0","@material/tab":"15.0.0-canary.0c94182c8.0","@material/base":"15.0.0-canary.0c94182c8.0","@material/animation":"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/tab-scroller_15.0.0-canary.0c94182c8.0_1675273583885_0.9169897359039596","host":"s3://npm-registry-packages"}},"15.0.0-canary.15b221540.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.15b221540.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"49ed767b29ac1128d9c1a162281393558bd432b1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.15b221540.0.tgz","fileCount":51,"integrity":"sha512-xVme/Gi/aF6jhuspaW+QrcOX1ei89xAwSoV1bACF3prmlEjzGMlq7Z2DvIf03Ht44JfO7ZkyUjdp2P8ca2VRiw==","signatures":[{"sig":"MEYCIQCkAKTwsCQOB9IS6bWuk14l7wxx+n0H2vf0giS7cDYWHAIhAOmRRw1qAR2yqcq8oKKav2TFJwdOuZO78Kwh5i/nj1en","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2qdmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrKWBAAmf73yD/13V7FxHmNUsbQrwZsFqAwUetXruMBgDr6epL3xhrO\r\n6pHRoteEjuXsPtBtjo1ioUflQ5qW5FT6S0HjEu/o+KtajPs9Su3SJLsIcSsp\r\nNwIUza/uqq6OD1PVhhI6CnNMq7A34AmOl0V9Fu3jOaCBoWRA6CqqOosih1Nq\r\n5UZ6HOBBzV7DCekZet6eC5tPWFCIA6831o7YlHdLTocKmjLUzViey3AnfOg5\r\nYzEkuGMtJTnuOxzPa8oMnRlI9SCgvhFVk9Sn8Rl+ak3kXvaAuKSdRmKNdNJM\r\nD53PjjZAtEV13CgRiSJGG8ZybnL4WvX4XIytSpP8fx4q5SeB72jUKV1TwxT6\r\nkN8iVoo4Vi1L+XYXLy5ZBkAqCYcI17GAWAowiLg4GOoxEB/jJC4FOyjIC9H6\r\nLWUIL6ii0ftiQ2JiyzK4XYJKYzYo45Yo4DE9MKiaBVAdoj4KniU6Ywks5wtm\r\nx4hrvkWoOmM1sl0sj9cQfjA0JRPn7MQy7VitOfSIo8hmRKyBh5rpu7lUPDkd\r\nDtmsZzpRcxDYcOJE1z8RLNaqADwUiCP5hapln7l/uqHDl4kzait/IPN/YAps\r\nfZRNMbMLhptTx/fnIrWEPlUZGbLIM0TSsmdSBsGTr1nM2G33suKsiBS/cloG\r\nw40XXTn1sSp8BNVPeZm2If5SBygwI5pQGZg=\r\n=KmyG\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.15b221540.0","@material/tab":"15.0.0-canary.15b221540.0","@material/base":"15.0.0-canary.15b221540.0","@material/animation":"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/tab-scroller_15.0.0-canary.15b221540.0_1675274085947_0.24748718783852852","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a4b3f834.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6a4b3f834.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bac9c562f0503a4da42be077c08132d6e1065df1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6a4b3f834.0.tgz","fileCount":51,"integrity":"sha512-0UCV9EI2vtpN2q8/W5XJDRR1TExidRAQgmiAPC84bXu1b+4E9NEDTxDf/FiL+tOKNEwsJBqkYc779vN1uRkB5Q==","signatures":[{"sig":"MEQCIARILatygOZGz7IuB+M/YwqZNzangmnnp1xtZpOESu34AiA0buWAV3LXKpF0DD8+IF4K1kiQaa8cW1+mYlEK2/M+IQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2rbVACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq+9w//bgN3bawz/mYwOkrPB3P/V4Z4psfCGweAbd9AoiNu+hYwkeHr\r\nmLFZizn2j+6TQEcRTo6TboviUnOnDNptH2BEvqayCV1tN8gceZzgFxBZl/rn\r\nOxu6ra6RVJUH84a1d9SkMoEK1faVjWqy/cRKHhapq7gZB19yb9zRLdT7iQtA\r\nEn+aZMOJgKA5xeNZeAUfI4qx1Tb558N3o3klDu0Vi9XLPwtTZML/t9u4KKlI\r\nMMDOemAVUcrKDKrf5wallR0IFCMPMJV0NwhwbwiFlJBLEnEGPewgjS3VynKk\r\nO0AQldWHNRChQpxhU0tM2WJMfVzp6gVLmljHDcgam2yLbPOuffz/KBSZeMDe\r\nDMWwnZ8Mfc3UiFad+3TK6JpqA9LCDD+p5f2/gaXLNymFuYdSL4KEVxmGnhE0\r\nyClD1Pu2wwxVAI1IjC7RvXj/o/edieC49w1NsBcir0iUF6lKNxqc+T/Aab/0\r\nlUs8VJnbvNydCVp14iMRyh/GNX2lspACSANwGXHtAxN62ccuBRu8BVsGM0BY\r\nR+ZLbuQBUp2OVg1mp5BScCc0XsTy3ectE0LBLrjWzSMaMbAbrLVnFEQM7u/s\r\nvfhqvHuuWtN/Er9J1GTQjaf2HJ6TkxOSpBEqmXFoEhnK/t9W4IH5OBCPA3zE\r\neiNL8hVuGGhpTo7MCrfiq0sryx6gRnYDsjk=\r\n=uh/+\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a4b3f834.0","@material/tab":"15.0.0-canary.6a4b3f834.0","@material/base":"15.0.0-canary.6a4b3f834.0","@material/animation":"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/tab-scroller_15.0.0-canary.6a4b3f834.0_1675278036839_0.6198932944102407","host":"s3://npm-registry-packages"}},"15.0.0-canary.b177b40e2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b177b40e2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f9d1894a15f44fef6060a452ec37d13910e7c0f6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b177b40e2.0.tgz","fileCount":51,"integrity":"sha512-nwSRXDoKYn89lkJfAVeBRvXxxwFsSLFEl9FfqBPU0kVAz2hfI7HPUxn+Wxc+inUg2gPtJkMQzzNraPwnMFyJMQ==","signatures":[{"sig":"MEQCIDOSIqTwsQxChrgEvLUGxPOcRbhLxIDv+WY438gRjMzQAiBM5VoIg/0mjMh5gsVBAOuO2KfsFKAve27LODnL6ppelA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2y+4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpCVA/+M42pLmA2hhrekk0a/GrBELajgccdovB5lMniMBtDqGZLfjWJ\r\nWDogeZLI6lXfxZCLoS73ZzSPrLvqM1Pe76XV6kJaLU53cu1MK5mfUEqWW2dE\r\ndfvIqSAP5rX4Bwn3c7NHn0oKLRJnloXV4PHpb0pw8eC2SqHuMRQJrjm9CuMx\r\nYexuOKGgdNFDYotAFla6gg3rvhOL0ZmeOHhOMB9ojX9nyGeDjOB4fRnjZug1\r\nUZVVKqmnjwSoZCO4Sz+gtSPfCkf9ddhgIDR7ZSh9Ub3a37YcnNZIJ304Beq1\r\nyEKGNphhlO0g+T4hEKtPW3+uVVOYLm0x5R12uF8uSjSBCHCkT/+ZpU2KxQPm\r\nAhLXnhpO9ZWYD/6Az2deUP7o40bN+DTdR2EuGZqsO4eHXmFVKzf+C2H7PpRu\r\nwoaztynYcaUJLBvdHjeQCjJZO+ArTWeqTQ/CB3B0hLMVO92AFbOOH2sd7Kr/\r\n4g1WEdy+nr6AN0KDqlGJKYsot4OxNe9fz/XJGg1a9tc+4atZbehdIiiaKzCh\r\nC+1WkE2tlPNJgJi2gJ0htclhnvUWrg8LZMJ94yvKV38stG976o0vLV6+dMHg\r\nB3QEnLZMSYNUQowIExbjsj3ri76K2UJnrQk8hDCEqPEl2UC4DoeZDs7uz1+S\r\n3CIzFaRFdNFY0vEYcL1vrv6r2TVQGz3ITO8=\r\n=1J4g\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b177b40e2.0","@material/tab":"15.0.0-canary.b177b40e2.0","@material/base":"15.0.0-canary.b177b40e2.0","@material/animation":"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/tab-scroller_15.0.0-canary.b177b40e2.0_1675308984681_0.6200957131529716","host":"s3://npm-registry-packages"}},"15.0.0-canary.d9f821042.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d9f821042.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a218ef5008e33c8e83dacd22e9f749cd1b5ad3e9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d9f821042.0.tgz","fileCount":51,"integrity":"sha512-d5IASm+bwt1q/e9+n2h4Nc/nX722S8bFRqARhtC5uhN86IzTKUGTzQe6m/YlCgaPd4PKuiXyRns6W4U64/Nj7Q==","signatures":[{"sig":"MEQCIEMVsnoaR9nbYXGUdsRcD/XtaJL2LYaX7NciagNir7ikAiAk8wTqjwNVzfUQpW+ke2npd7ROqM+9HS9pMvgNlSejPg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj2/WLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoMlBAAgwoc0/xNXKh6Ldy1QyD9JZlwsaVofpMosEexaTK1Dz/yzPTt\r\nq7yRyY9mmTaOZGPZR1lDaWL8du4QcQbReZmzOK+7Hr0MDpuh5IuE6Q3cxetn\r\nH04DEnPXlV+qezMhQ9jhWeClN52cB/taq3zUUJk80qa6f82C1Ef/bXGKunre\r\nYg7pKbBWv39BcDi7A6dwrtPYFlSUP9jW1I3FMamiUl9dKQMKYSqoE9igTBx5\r\nbfszKZCJvF3EBLiUI8l3/n5ro4NgBEpNDhZGWmNf/xfz+uAPbBZ1ulU/gNY4\r\nnFwYEXOQ3nrl8vrb3M1buOQ4gafgE+p38HYxw0kikodAiWI5RvC2Z84FTO/t\r\nRLUGwQY8EC+zJYa0Pzq5pxMrG+ntLVl1FhrherSSpTHDHsgvg0j5ogltvC0n\r\nT0GJXIa6jOay96OtV7UlfY0Hrm+Sf6MIF1DYacimwJXT+Q4qzhkZD/1JLd2O\r\n91YiIQrWBczPm7PUT8U8mmidrYUmA5shBYj/NClWDqyv98QArZF+I9V3EvFF\r\nAAtHY/IrUxtH0VFjE4crOrY3BTsT/YC1nKQVmECWkHlcGXszsk+UgpXsBqdj\r\ndIQ/W5uOecflRECd9jQJMFJAtBad6Gz5CTI34ah2W6dfpw9nD9EU5RqGvQIp\r\nTp3hAYaNT79tS4A1O0N4LMUD0D204jWQ2Qg=\r\n=yCYg\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d9f821042.0","@material/tab":"15.0.0-canary.d9f821042.0","@material/base":"15.0.0-canary.d9f821042.0","@material/animation":"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/tab-scroller_15.0.0-canary.d9f821042.0_1675359626956_0.20414085757648914","host":"s3://npm-registry-packages"}},"15.0.0-canary.47c7deb19.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.47c7deb19.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e85d04af354e6704ffbc0746ffbec5067d059df4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.47c7deb19.0.tgz","fileCount":51,"integrity":"sha512-c5GcLwGgQmJBxhigNrte03hxVtsiEXCufiJtKw0S1t0aqf+4R42Hykz9gctQqWHBryWc5RDfBYIu+ayxOx2KBw==","signatures":[{"sig":"MEUCIQCXuv4PX22cpBLEB3np2ejWmVoXKSsXtjXAKimxOEiTMAIgS6eNy47awdP1/oPzGl/aY9Mmz2RmOnZp7wgnm45z0VQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3M+mACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqeZA/8CqfVKLQk3CTp7OO4Ji/djcebIPYS6MUYEbQB1T/ysjDDN6UM\r\nevxlhkUuS/DNXs/EW/SVgF+37V4VREd6wWIvKPJY+lobNAZJj5o5S+OGHUCc\r\n+2qwxhMxoHGYtHhzSG425gE7dBi25jHKyYzZ9nyc+FlzJYsUm2B2ypqtO5RD\r\nM2kPVTyTlV4y+Ko99FXXFOB2jAl84PZMidR2ttVFh05YAD+rDXh3pswwz/y8\r\n5p8EW7KbWNB0B2Ttunw4MJ6R8TWHbUQIy9oNQj/41lIJw32kPf4BnwdSo469\r\n0KBjrYCYgxl0s5hmwLtp694XK9qNOBTZI8RFaUaj6HEI2pi6x3O0i2KKE4xF\r\n5MhegtpQa2/s26djj2zST3gQ9KsbrsndXFMqvO69gUNSoZkTETlgVgiyRebg\r\n3hCIn0AaEqar0GmgFHrI2l2C1nadxsbgO6vqJxiqa+40FpjvNmJoIEHBgSvT\r\n6EpeahX5/c1IwGc42svoqIq2/CUvXczU7jOg8eWOgbd2N/MbPCZ2ti87wwB5\r\nEWzSnswkeIVZ0fY/0biNM8kcIFJ5mjQkt4Tg/xIMhzjxynnqWw1m25+9VK4J\r\nw/V68yTh8MEi2hzy3e06199iVGRr4qGAIo5E1+5dGHBjftDEW5djA6lkhtLl\r\nFtskKWmaRAOqEgszNwH4xHb4Q4y46eKfPYU=\r\n=q1Yn\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.47c7deb19.0","@material/tab":"15.0.0-canary.47c7deb19.0","@material/base":"15.0.0-canary.47c7deb19.0","@material/animation":"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/tab-scroller_15.0.0-canary.47c7deb19.0_1675415462120_0.9958436339444741","host":"s3://npm-registry-packages"}},"15.0.0-canary.a16dbd1a6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a16dbd1a6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a2582c8f28deb0df0f2d92d4ed2aab64582f6dea","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a16dbd1a6.0.tgz","fileCount":51,"integrity":"sha512-EvAvicXB42a3fHM0f/3gq9dPh+4EFmAxIjoNE7p1GkTzWpaEt73FP0v3zrEo08cN5nOY7UnsyL6ist+sA9HjXw==","signatures":[{"sig":"MEYCIQDrRBG8CG6Ojz97yGZ1/2NYtes5M69eQvLVm+BFJRrlRwIhAMJxKYRhajmVZpsHTJCBnazNuHFFt2GxkSVBPFctTFT0","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj3fhBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrzUA//aLHF0m00PRdx5s2TAPNfM8jlPQrvRacRHMSgeuNIFaL0iBDF\r\nAoLGpE6u3E3VTOBb4yRdvU0atqXJ8AldQ8Iv/SbDP+i3qcwWE4BTvRvYMrSU\r\nlfEd2UY0DtuCXJ1+LhmrAumwHxZdBfqmZonCXyUyHuzHvEmim1MTMjdWfymo\r\n0JSBbwAxZgViuOgBKUpd09D2LkIWWLurdHxqQ9SMn5J9hyVxPXNy5zvQgM1H\r\nIh/HJfrKt19KFEcbuZqgE/0CzzvrvIeJJeJcZzEBlazskE82tNgWxK7ztBYP\r\npHhp/kA31RYknYDol+yAfWgrsd0LdnobDu3NLKDBXWKQTZR+hjbpB67HQpqP\r\nScespHYNavGAn/y/fPqDV8hKbF7cMWCLGQiwGXPYxFjp0VayDIwTh9pTdaom\r\njnV4JI9IqqbcTtJ9NjM6d3D1wjxdxErvQbp5DnUX6UeaKAD1Mf1kKE5OlvwK\r\nrmaPIxHFe+hAGgbMtIveBhABbNyduCXorf5P1THCPE83FSMhqs6VM4PDNtsI\r\n64msikdkkCC6sddyCmw/45FsRel8NXUTo6AyTY/nzvBQdEAR17faiST1mGm5\r\n5G+wTURV5WehrCaekeYd7iKDFDkXLy0Hwo/wrsZyH4h01T8V72U4UqcgvHUl\r\nIymJ986CZAjCOat82eetKXZplu6/Y0OxRm4=\r\n=9S/T\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a16dbd1a6.0","@material/tab":"15.0.0-canary.a16dbd1a6.0","@material/base":"15.0.0-canary.a16dbd1a6.0","@material/animation":"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/tab-scroller_15.0.0-canary.a16dbd1a6.0_1675491393129_0.3314137971300437","host":"s3://npm-registry-packages"}},"15.0.0-canary.93416f87a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.93416f87a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"860cc3e2b940379d3beb49e85e3a026bdb1d1f8d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.93416f87a.0.tgz","fileCount":51,"integrity":"sha512-s1nPR0rTsVjY5pjUFt/aQEkkUWKK2NtI/HaY5+FufgHLU+H/fcT5v/gwh57WkiEtNnDFbyeIxcAibQREjgBoiA==","signatures":[{"sig":"MEUCIG1bAPYZrpR8KRAlRBN4R6WBdpF5ufiNWGS59hvXDs0LAiEAhJJTT+FGt1DvsybSOrtmD4toM+4BRDtKOuNvUr6T7lI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4lF5ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr3IxAAoZFscP4v3xFfLq/TiE9qLIiKobX+XjhAuJyxGJLYSuBOB9Lv\r\n2FV5kuwH8t36B/KqPq2Fl+wqDZp5X9T2eV256fgdyl43YiSAMUZdU/E8FdV0\r\nmLdIUBbd4lISg0S7sqK5Si6qNTlr9RM3W3xNDi6L8YjRS+9xYcae22JqAE2F\r\nVihmQQOqaGnHamM+KRAWo3AF/wnOS8OY80R7oOctaY+Nf2OehALAMPsUQZAP\r\nkVBEWjHu6U4uRzPTiU79xbLNeVZe8E4onQRNCnrlMOCHHbJHduhfLVV1rAOA\r\nB4nG1ETH76RAcsY8q9NKW99Bq5DJvKX3pusb4DxD3oIQqYNqbe+NEhT1L6Ri\r\nHGKKcQUcYSQcVfRjQ9bj+tzqFKQvxzGXAqSaqkkrhrFQAwBWeGIWmG7i8Ym/\r\nB03g/Gg5TgQ7aVfJOvEjwU/ODdEx+0BQWxZqRuP3fldYN3Dd86ufq0zV8Yzk\r\nTzJCeEklmVxRKs0r7JJrKwYwT//cAXiwx6w0S7uktgtk6pO1uYIi+XhDZ8Gn\r\nKqy9T0UKelvzb3qvUotkPsWDCiySTAPMUHdOY7ArcPLs/kRwWSa20h4teS/g\r\nNlmuYq+yyiKRpqahw7nT8Bv5HNSBVtteJZXYfS6c/xCQKkpgznvK5Cs5/WmT\r\n18My4AOO2SI0TaPImvB+zwmTuaN8U4GxBYI=\r\n=KakV\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93416f87a.0","@material/tab":"15.0.0-canary.93416f87a.0","@material/base":"15.0.0-canary.93416f87a.0","@material/animation":"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/tab-scroller_15.0.0-canary.93416f87a.0_1675776377190_0.7353250889029419","host":"s3://npm-registry-packages"}},"15.0.0-canary.49b8e7442.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.49b8e7442.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5fdf9953f2d0161a2323a89089a668b4843b1661","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.49b8e7442.0.tgz","fileCount":51,"integrity":"sha512-rWEpiUu0T094fXsEEBk6snk/tCvFBV8QKRR1QxbTqqw9iFTpnh4buwhB3vrIeFg6U2I7LUSO2WrQonkRVtJb2w==","signatures":[{"sig":"MEUCIQDY2/tlddx0ysofeP0PK0jBaSe5N696bxzZtVLvgKGIlAIgNOvUI/49+RmchNPv4Q/TQ+ScBL8lsOwjvg+iZ5McXxI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj4tqmACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxrBAAnxOUaMfV3/ihbMo+AAosgDmAVPKY86JQOdat8n3DH5ITOvp7\r\nneHhpVhnyfHdABsC2rC4xemBNSzpXzN4DLo/tr6dTZurlH0kaB1L04+xTPKS\r\nfcfrB/oUsXpYxyP7pCs9gfXemmwvG5WY9tkZldv5nr3Nm8wP3+cJ1S31KCwY\r\ndKiwhMZlcSqPlz1ICBonueXmKS0VeiXXyo/kOAWQEsH0fLKezRYbrT7bOgka\r\n7+4P1TEjS5UVZL843ERjLqlyNyKGhQzAsUuYHm+AlgpAL/XMxprUR9NSBDQm\r\nXqlBPZxNA9PI0F9lKDwdadKmPLW74fkhdq2j22xz8jbLFoqIrY99Tsqwcyhe\r\nYp/cipBCLofhgr4kVbmFzkGf9/mdz9nZAlK5TRLWYGQwttxQ6SLg8EDHlqk+\r\nCv6+2pnUtep5cTxLdiLCO2k+oOgRenDbdTHGW3MHwLv/5eAKlXw9vTKanw4G\r\n4/b7dqiMD7Gv8bRrOTQru7nSzLLADawBeMYgZuWn0rZcio5zWZBOiUJOEZxK\r\n0JZu3Edf9YdCEI4BJ/eNhp09dHm6QnBxV04DPHTC+fYXJBwm07YQO+uUbe8+\r\nTmRoJW15Lszz1IZ0/w4cumRs0ZvM/l/yEO/t6QCILPoxn6Y5HL/bZHMYMZ8g\r\nYOimOMIOyIPEVaX6guDltE0c42pRxbHXM8U=\r\n=/qno\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.49b8e7442.0","@material/tab":"15.0.0-canary.49b8e7442.0","@material/base":"15.0.0-canary.49b8e7442.0","@material/animation":"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/tab-scroller_15.0.0-canary.49b8e7442.0_1675811494515_0.1477594010165466","host":"s3://npm-registry-packages"}},"15.0.0-canary.de38de758.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.de38de758.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"566b469b5c05ce8760b30e18a04944d3b63fada8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.de38de758.0.tgz","fileCount":51,"integrity":"sha512-j3z0XjP8s8Szwwarsg8p2a80TQ7mb+retI89T+J/BsUGLNhC5FwDSNyFNuwLPVWpwxpxZlp5qK+OCH8BHT1bgA==","signatures":[{"sig":"MEYCIQD+rY32I2mzV9lnC0K9Q2+Gkvz64dmsdb+pvh/wwmuPEAIhAPflFAFgL6KYqjs6z1WZsX/zmtk0DQufOVWlaP6Hxk8Q","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5RTdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodZg/9Ei4wB42z8r31xzQg19UohpzjY8O4j+OAYTpcOFh0zArxXAUe\r\nEUw40g5kT0TKgZrSiAp4phpI05LoXr/rSqfdMIJXE0QorkQnt/0idT54A3We\r\nroIzESwO8ZOl9D65JDQVhnBknUXKM1Sh86tLeOu4gy8yvlphD7EKAweGR2S/\r\n13ZawXrRCZaMlmiBf+OkVaCk7+OUESncnu2Q8PlEOz0+H89UZjQGc9adBjy7\r\nzQF2C/6nGA1FwsZqquGeWaU27wl/cqOs/zE/ZWx5zS2tbjNnKZ/paSDoBJ4+\r\nwyVmZZabKIVyDBXQB8ZlWdUlUCx8gV6nZsfNELnWBrdN+ixCExRTzkPFY/GO\r\nrfGhiFU5KJitcOjFsOKdyaA7JWZU0fCZGAgI5xhnvQevQ/T8veZ1CZLOirPu\r\nahnOI4Qk/d3Opr0V8+AzInR+rsmVL3dlaIfVBUwaj/SVR02y98KIO27dRqsL\r\n7PL7FdKqQst/GVXtE3PuQnFhYIDwQ8ZvJKa8A5hhJqh1K+tkH4cFI1MI7/nz\r\nUu9On4kdOxCm8/IBxSVsOliYauF1NXNq7XitY+AGaxJ79CesmkjnWKgECRWQ\r\n5FTapsr4MJbAfdvsTxOZjJcvyzRkwQ2Thxq0DwPdqjUafQrpamiNsg4Weydq\r\n6Oagt5sH15UNsul9dM1yN/rhBYDEWx0T+8w=\r\n=14Eh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de38de758.0","@material/tab":"15.0.0-canary.de38de758.0","@material/base":"15.0.0-canary.de38de758.0","@material/animation":"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/tab-scroller_15.0.0-canary.de38de758.0_1675957469045_0.8883742111645037","host":"s3://npm-registry-packages"}},"15.0.0-canary.4d62de70c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4d62de70c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"615ff3b3f8cca9c5fc582ada0d1ebd2917978625","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4d62de70c.0.tgz","fileCount":51,"integrity":"sha512-wHN1XOFyypl0SCApd2ACyH/6akBnxSdNyr0O9/VlyIGjPZcfYMtXNkGk0eVU/TfCqGaLE0qBJw3eogmhxjPaxQ==","signatures":[{"sig":"MEUCIBe99pWNzv6SdQRJsOz4GKOOwcsjn0JWWKr3mFmiOW4uAiEAp+ize26OMYo/dblSx7KOCchgdRHf2LZnC/++HmpJvMs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj5W4iACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrV1g/+NcsduwRTeHOGf/TSE3VCx4H4/MIf+nf5PBsuWzGhaHSoW+VO\r\nag5mJb8WYTNwRfzr7TmQO01ZEmgY0qIX4W26QvN6nF5s8EhxEewULpGyAYQG\r\nzz6vuJbEn/3rxZJghuYkJCPSNF+fY1pqYoD4v6Zy5B2joGywBJNXwlo1y1V8\r\nymJMH4QO2dtH0D1fDJMwyfEW90+X7pENNdJOe+XYuQrMrUqs1bqyKQ1fchSl\r\nNc4itjH9MAFka9RR++dcP4m4c6tgTghC3+N4Qn8jF/nS5ZlHIGa/R9MlReaC\r\n9CF/hAKIehQ5bm5XwMtdFKL04uRtfxGSj+IWwttmGq9a+SUfNb7+NzaLzq7j\r\nHc/1eujyHNU8bZcBN8i021AyAovBZaS6PsDcB+yAZgMZ08obZOxzXzQ03Y4Q\r\nuCgz7EwGc2WwomYeg+nEWOj+PjSCnZkOdfGOv7npPWEzYVzHhEafrdSEzdjL\r\njmhshGfO5o83Ljr4BM7yj4oM2C+IKhJbRzdfiqP3yVtqM+cv1NZiXLgQq3iw\r\nx3ebXqeMIRsClSNSmanM40IMaopdaoUNhsTuzXgWNJaI99ETK1PAjaH6nnZh\r\nkVoSu34J5vDlMRntXJanLVbskAebCY1KAIDoH7yiOkK5IbkR3phyI5YmeuJf\r\n4ZtKGmtyg2L7z6PbLqh7kBDEcAaBs58nARg=\r\n=lP+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4d62de70c.0","@material/tab":"15.0.0-canary.4d62de70c.0","@material/base":"15.0.0-canary.4d62de70c.0","@material/animation":"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/tab-scroller_15.0.0-canary.4d62de70c.0_1675980322224_0.32235300428664604","host":"s3://npm-registry-packages"}},"15.0.0-canary.6fcd8d418.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6fcd8d418.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"80ae6e18943a9d089b63c480257b88b94cfe106b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6fcd8d418.0.tgz","fileCount":51,"integrity":"sha512-9uQ9EDjtp/BlHJFPFlGBKtLYz1l5I1UICvXQewlRlymCEPjXBRQH0AxfjKDWGd94Qj1GdUNNBahA+ZHsDohAgw==","signatures":[{"sig":"MEUCIAVW3hW8EbuS3BwEYSna4OCYjuEbB/ESXxcumn5XXo42AiEApdItdE+pGL6tWwTadnW2yR89FzG29G/mBPejO8EMoYU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj6iRXACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo4GQ/+K2HVhAar5JuoTEBYCA6HY/ewjawhyen8i+dOue4MWISRVIyd\r\nFHHTX07E+MkSLjOBUdNzXprsWo9tVHAyHc6rtnWYlz9i1XdUJeuUHoC6Q/8e\r\nu04hRLoW9+oCfew6/hj97qVeHJR5XBEaZWjFljjAssjTEMCvr7Io3verLo0E\r\npBz4PxkVJawmkU0OxQPnnSfh1Xr6i29ldYrH6K63Dn6Z+h6Bw47sWwPhVTcs\r\n0dYeBhxv1n+KqsSVHBV/S3oUYcjeHHcV6Od5kppmweM4AXBYJ5LtIcRq9lD5\r\nXIXGRrqrEELzVEprtmErUHGU8rvCFUiHGzTjiQIzf65MTvRrAcMN2EOKA1SH\r\ngfAd2mT/IAhuUZPVrZeOeiAKKzRI2d7flgVU+61mSUlTvhTzqPHFq7DNUG2t\r\n3epkyddd9ZoHmQYIMA0avn2F+bNubZSlJcIAoflkNXqP8v4exSfAWa2I/z/x\r\n96Ev6qkzndw6HCIMr53mdAIAgvtbJEKcaT+en3llOfQs3zhlXNfP1NZJ6tlE\r\nyL4LPAF8HimC+TgIxVcbRzAXEb5bp5MN7AEW3U9OsCc6yz6whpUSdHCmGGgZ\r\nn61nDQKYIXW6FhLeYL3VVnYE6tvCNdhDWo+EUyOo7BkJzVGDUbMVPLmowons\r\nIfy0F5V7yYXqmELkyTMWAcCUAdbVL8LFq+Q=\r\n=DMz7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6fcd8d418.0","@material/tab":"15.0.0-canary.6fcd8d418.0","@material/base":"15.0.0-canary.6fcd8d418.0","@material/animation":"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/tab-scroller_15.0.0-canary.6fcd8d418.0_1676289111481_0.19193958285016066","host":"s3://npm-registry-packages"}},"15.0.0-canary.066d9439b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.066d9439b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2dcf60ade5f14a331614e1933eec1930b3913493","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.066d9439b.0.tgz","fileCount":51,"integrity":"sha512-oN2CMODHPaqS4NtFwfXNpqAUGv61YX4ES2qr6FnVpgclxDkQU/1issUbJeTmtLSLc6WOBHb75HjMP+Goh3zBcw==","signatures":[{"sig":"MEUCIQCBOwJCxIOemYmQrswVVeGFnVTONXxtH3fcvZwfw9641wIgNkRXvVEHVygX+95gTP91zRRzdrYoKgzPGvu591tzv0s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj7TnSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqcXxAAo/9oifmO+JarqtO9JHoSsRLcTkuPXMBfQVB3+M3XTuJtg+QS\r\nv7PWHSoAg/7cDBb+/tNK6k0MKd/Vcviyac09nX7Xmy8cPTZTqfAxGi/BITB3\r\nifQs8sEoAX2q5MipRboz2say74/29Qpg1+5U1s1ndgjOaalUrBjNmW6b9jwV\r\nzloeGBfG6E3Kpc6dOXRVrmwwA3790eCSXqOMwtvRHImaEKtNhX1KWMj8ion+\r\nsRe5UAd2f4YtYD+KAqr3KV9NW1ncrH3PWkcO4/+TvRwXWtLp2UdbVdqw5t/2\r\npgFcHdTQIXaJPc1LTgSgAgQ9xezzG1URfkuIxDo8xaMSZSH1LIfNCKLSYnx1\r\np8CJn9ZRShGr1Ltkew8nHZay14ArhT8lOk4RgAGqP+kT/sFcQNyEpwgQiuaK\r\nnvnAyNnGKG68h4xM/4PgJ+asSAO+v0zl4JOMaNe2GH3TSegqFaefih+EoTXO\r\n/zh+hvuNcSH0EBmNNqvOW81BnCmoBM60flEl92Ri4jM/k5SwxtM/S3DCZWlg\r\nniltSUhrxHkauQdQAKZ4DYH+3WFpZMArwzmOUYRN3HCj+d2ZzD1IIGFSLzNa\r\n0gyth/prWJW9nQPZaHcOmXzJy+yD39HrwirmgJBVzzSn7NKA6G7Zm8dvKM1T\r\nl7A2/LA+l7SzyfKNMsQJb+F+6H+oDCyLGA8=\r\n=wt3W\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.066d9439b.0","@material/tab":"15.0.0-canary.066d9439b.0","@material/base":"15.0.0-canary.066d9439b.0","@material/animation":"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/tab-scroller_15.0.0-canary.066d9439b.0_1676491218596_0.244844003201935","host":"s3://npm-registry-packages"}},"15.0.0-canary.7ab32468c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7ab32468c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"302b36635232c3c83955b4a2036ffddfc9050c43","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7ab32468c.0.tgz","fileCount":51,"integrity":"sha512-EjhGJt/7Jd6Jf0GDlYbePXE91SOA4/hbhOTOVJFk240kMlvHN706I8W+YQWK20aK0erONnxv7b7b+WY/c/1yxQ==","signatures":[{"sig":"MEQCIBxTO11aTn8G3eqz3B4QQIkX32757Ydw5KFEtoz6P/klAiB945kgk3Cst0Xd9yTnnlQh/ct0nWx6TkpZTdxt8QVHFA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj9Q8kACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpf2A/+P4uk87xSWmWslcKkTAnDItezqCzErZXSMuIwWZsTbjuLkNdb\r\n1j9FUIaFjfhWCDOH+rdFE5mK3UC0pIXmZ1z4w1EbAXpUT5IEKPLIEDMbDO9C\r\n+uPqloxCmO2sLQPKmAmDCKKT7BrCSEvE9y2b+hwQ8FdSXd8qnu7bE9UHGklq\r\ndMVaODzRoZRWkbBvo05GWiutkSXX2WCGI6kT5QejBR2n4+E4L+SnoQbkbNsm\r\nPgb0Tkq2h2gzYhAWDHpQwcBBa32wMh6EgOpr8mRXximk78xXV3PNfOgkLQnN\r\nT9eIVuwoOPTwX6+9EA2kBBYeaTUVVaYDHjH+FKefqL3b11/TTLcLF7J6N63I\r\nYq8xc9ifZdfsGyCC+jXrF+N3IrdKznkmdcFXGtqG0WcD9UlHUtdFXBSRHl0P\r\n0Ld6fiNcZGQpU/PqU/eprjr0GQ3cknCr6h6aVZAPZjeskZALXoNv/YSLuhBb\r\nDqtwGhPZeZ240irPfiq2l802zC0ENv49c3te8rllLg/bhbG3Fog+wf6GubX0\r\nDSaNFd+dvSi84tz8P2Ocg/D00ISHFDkzUmqZtUqdZI0ATQkAnCEpC5ovztPr\r\nqCcUe2qRp+G35B/axzfIWa78mYHV7wIHMtBi04CYeSGNj2jb1jTqDpo1ZuZY\r\n082mYoz5RGdT7mOjHAUbOvlZtn6UL7JEdkM=\r\n=zKR7\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.2+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.2","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7ab32468c.0","@material/tab":"15.0.0-canary.7ab32468c.0","@material/base":"15.0.0-canary.7ab32468c.0","@material/animation":"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/tab-scroller_15.0.0-canary.7ab32468c.0_1677004579950_0.37919666160712673","host":"s3://npm-registry-packages"}},"15.0.0-canary.fa27ba61d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fa27ba61d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3624df6834e904f0b0b46433e4c4ea1d2740313e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fa27ba61d.0.tgz","fileCount":51,"integrity":"sha512-qN50Zkj+L+cXTPvd6z25HiEV+kJ5e99FFEZquu8SMUiuHfGc3Zx/VPRIWKOE314GeryO5IvCW4IoNhwzybfRiA==","signatures":[{"sig":"MEQCIHEg3JrAJ88S2ycP64KctMyISkHnlEtsBuXtT16Q6UzYAiAuMUP1cdNwp5WX8Fn9atBcVT4jUEpDHUuM/Kdo/CLUvA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/NivACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJkQ/+NdbtzCvjAOh0NPO7BsFadi5eQIPUVcGX9Vidf4c/nU6cqFSC\r\nhAcOEHAO/FgtMgexR+pmP0g8tRgWrzbr7fqwPpQ8ISE0ZjNjqNBuQ+yhdlFH\r\nHn4yISj4yX96PwfQg53GOiyv5XOu5Ik5Oen9KKzXHUMzDmY/EuhzPxVGCCNX\r\nwj7n76vvvZah2uR5WVZcVloOr55xoQf6Y7myi9cvI/GIjeLTGuld3D8ebPbY\r\nX7q0ap2+OlVfUa/nytJkRcQ9gDSmt/FtVomdYao4OSCmDcJ5G3Nd1xmLhlFl\r\nvfwkuaioLVz3YlDx2dVrboR2li133cQvvGioAtpVyhRWF41zMxXUOfNUKxzt\r\nu9Uo6qQTdjwK5LwFMlHK2jMTLC/AFEY1PSb9UMSBSoBOjV02M7m54DsxZqm8\r\nvicFuGTw1YjeiunoSYRQhxffKdiPyOVShxnZejrYWpicIAF9EkEn43fjTaAa\r\nB6Lrjs/JIhOJtPze0aRR7ug88HmSkaKtGo9tS/83TPXxpTDbzB0Hi+xB749N\r\nLjPxLpDLUU/GNsS3WKcCbW00p0LKwiGSNHMGqiEYzVudI5ZAobQjaroQYaFV\r\nsHwRGKHDEtbxB3RG9KCbsVRiTrrQ64ksj5R/6sBeZsC5v5wFRWmOonys4Zao\r\nUx99wyNXvRiZRKe/BPjHlE/vZUbvYDmrpCI=\r\n=sJyx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fa27ba61d.0","@material/tab":"15.0.0-canary.fa27ba61d.0","@material/base":"15.0.0-canary.fa27ba61d.0","@material/animation":"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/tab-scroller_15.0.0-canary.fa27ba61d.0_1677514927300_0.9552422242760241","host":"s3://npm-registry-packages"}},"15.0.0-canary.311ab4d4a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.311ab4d4a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2f1df76f0de34e32cb4d80ebb9a9f6df453c2cfb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.311ab4d4a.0.tgz","fileCount":51,"integrity":"sha512-kaJLx52nwn0E/WvVU44b3yaqra969G2PKgnxlqk23Jgeh9sV13yxP6QkUZlqFCKmX6QA/OnrKT+GfnMiK/kOeA==","signatures":[{"sig":"MEUCIFtMIjlA+EMOaUZ6kFbmTmwC4NmnzjIru1+B3vfGCd5WAiEAwW2WzLgHkjqUySztWAf3V7z7UyBQAjM187b6i3QR/TI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/N22ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoUDw//cegyzcEvwsu9xgJlOwUA8ucROvdpjfW8IQtZfFOAcdR7D+oU\r\nGiZFx7NuNZCiyDQLAFvxmnmRF19FxJZ8OVhVUPKON5Mylog/LQk85R528ASO\r\nS6T5fOBqyQwav2VREPNYf1mPq0MZjkS7QBUq6hBTjbrHNv36Dh//HJFmWf2Y\r\n0cp6m2efUC/KO5HQ7E1ZzeZw7ylf3djvN6dqhgPk0D3wZGFLyMwssV6QDOdK\r\nEeI43LX3tZ0vrE03jQZYmZ7wp80r1gDBDiyZpdVmWye1BBYKJaG0b4nqhPPm\r\nYmQIg8u08cXA0F/xXE3EY39gk5X1tWBK0a+ZRpPFtrR+Ro8CIlbuXo2zYq44\r\nhp2Z1tSoBXALfFNGPjeCGYGeFNTFs4yy5/96BQZI2lF96Vpgw/Kei7yOC8+E\r\nvnVToQBPoVdOK//JJEyu/Xhz0jZoTsZnmUMbWGLKR7ramJQRgp6yE5Lc0CJK\r\nliOIFZr0UPYTplEIuyj2ZnQxrA72wkLbFFCNWVDw86wqR9JVcyOFlWkUVfL2\r\njVj4mNc2t7Rj1gGIJjE81E5BQJqwSjUUWfIRR49w4Xqu126bO0ZfGdE0rGOh\r\nmqh0/NL291GMNxhSxydT7RnpPtOIDisyiRvdBIA+KqQP7KBaeROINCP5sXQp\r\nO53aU5N9K++Sx78vXSBlxyO8c2drXcl4YFE=\r\n=CNQl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311ab4d4a.0","@material/tab":"15.0.0-canary.311ab4d4a.0","@material/base":"15.0.0-canary.311ab4d4a.0","@material/animation":"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/tab-scroller_15.0.0-canary.311ab4d4a.0_1677516214357_0.8116971640643984","host":"s3://npm-registry-packages"}},"15.0.0-canary.5cb8e2174.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5cb8e2174.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"339f432bbcd79b733e7b06ee8ec21d32612c8603","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5cb8e2174.0.tgz","fileCount":51,"integrity":"sha512-58B2qMtseOXDUksdc5ryTsJr0XxujORUzr0X7frnKBbh/1mkfI17cDwc1SEExV7016D/UNkYvW7tlNbunZ2gbA==","signatures":[{"sig":"MEUCIFyF4m8on2aK9Kfi1aYzc+e6QVv1lrxnNAOmLYU1fVh0AiEAqHFF5M+F3lhOOU89/ATA07VVxF7vNfuI7OdzhhyHAcU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJj/39eACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoF5w//R4uvm+kd5lphnBqFjQV/sfWycVaVH/IO7GC4M5p6WLP5S0w5\r\n+KxWxSsJ79b8xUCVj+XK6WqmiW23bqBqcdhDcYXct7MdKDgjrcKd7U9iMNOf\r\niL8fU95TQ48aBSszWYpclwkfc12LA3cHURvmExD1Ezh67s2xiUEx7gto7nn/\r\n5WPTcyepdKXW9BYheDaXojvfWyN0FEGPIEj9TRhkUUbFvCK81if5dsXLPXuJ\r\nQZxQZfmNxkMXJfqBBCM2kevFnW/D8rDV4pREY5JeKk3fhmIOceV8CQIyBmfT\r\n918qkG9axAPbGNGwZSHd4W11NaSnBK+MRzrmSXNA2AFCO0wPczLZVvx/qj68\r\nrW85lIKUqLAVQMu/MRwj3eFEWcaIbpFu/PgZjsAad4/c4wtyOcbB7HeBiDRz\r\nSAuhasZ3+BqiuGfodVrSwJw+4kUE6kwMKtV274if7kYDvgKIbNJM0qQpPiTw\r\niuMeB+c4L2jbchuoyizNNcIj+xLzpGYJiqU/6J+itH9IIbUeV9oMKOtPxacs\r\nkbJINd+yTSzKYByTrPY0Bm+yCq+aEi5NLePlOhnzCH9tp6Zs+t17gEBCzIA8\r\nl4cmEMRkD591vSt9uJ9Z69hfUdeRoR3Lu9dQA9C67+QOilfYJkiAgsxmMbJg\r\nt/DxOrOVG2AHn6jjYk6gtL43arYPgKAQAv0=\r\n=pd4c\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5cb8e2174.0","@material/tab":"15.0.0-canary.5cb8e2174.0","@material/base":"15.0.0-canary.5cb8e2174.0","@material/animation":"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/tab-scroller_15.0.0-canary.5cb8e2174.0_1677688670767_0.9364682323254794","host":"s3://npm-registry-packages"}},"15.0.0-canary.f32339937.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f32339937.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"62e029bef50cd2ee410bdc9bb963ff4286f34e0a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f32339937.0.tgz","fileCount":51,"integrity":"sha512-LHQRZkDDwlpeTi60Rozqb2doDpuru7k9rBquEahyrHvY/K1NNEihvzPJe8vwGsGoNIb0fnWBZtaM5gdjng5nPw==","signatures":[{"sig":"MEQCIBLaWZP1j2l3rCtJc3fQDFSX/FXE8gXP3LD9X2DYLYsGAiBOus7wNzhVtxbJ29aVNdzhRqpA4ozzKxq3AHE8YEAALQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBgQcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmobzg/9GX9xT82eRK9FTBSCyjiorP5q8SbRhqO/o4bpl+iSR6OFQilP\r\n8HY50YU7DDCVTmiMhhNDOldp9+oohD0FF9AN0CQ44meQf2rffdQzt90iH7L3\r\nePm8O7XFhGLTzrdZpnYkOc9D1v4KWdxGL/CXcrCscWXuicfUACvhh+U5rqKW\r\nLJoSZJTJDcUHFcASSqrtcoycNupvyiPASOgeOXguwVsgmlCsM9bmZRWyeuLq\r\nnVjOKCDc73APHtlUpY08r+xBENuhLMvuej3zCAKuQltxbcTN3VK6+89KjQLZ\r\neUHAhSLFLRN/ALe9kGlqN8XYktrn9XAUNb5QYzOGMd+x3epBkPRwtRS45FAJ\r\nHLu+a8CVIQQreyc2kNFsTXU8jJdtZ7y5F4stTVQFTX8nHAbe7z6L0fZz6Lfi\r\nCAf5ofy2JizZoqQIDHnSFv5uPNtEd7FmfH6PX2MkJR9+yH5C3l1Diw4gWUMf\r\nzXQH2XtFVTmlY9Ubc8XW8p3VoPaQwPWiB+xZPi6jWn0vsrAT9KG9x9ohma1H\r\nZi7kQ27jrUk41dab/vXbVCmr8sOxNii75eQraIn8Arsswi90D7i4gRgF1sHe\r\n8l4f9m2yVHEIEEjQ2I/5ELG5VuWNN85lNeMcQRy2e6v4tJ5zCbB/4X4iGSa1\r\nb0Sb8zMKFNuSUxy1TFZKp3+OzzSmZUTy2Qc=\r\n=qihi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f32339937.0","@material/tab":"15.0.0-canary.f32339937.0","@material/base":"15.0.0-canary.f32339937.0","@material/animation":"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/tab-scroller_15.0.0-canary.f32339937.0_1678115867848_0.9508010362480115","host":"s3://npm-registry-packages"}},"15.0.0-canary.7644d63d5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7644d63d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4a4248de937e5ac9c5912ae40cb07c48a553f69d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7644d63d5.0.tgz","fileCount":51,"integrity":"sha512-aCPKaw2rQU4xC/r5dy0Yx/VtZyHM+hj2AuZqsoJV8/j3yUufxlXRB55Yz3Fw4K63Z1FyTEEb+fqCIp0oTtAVjg==","signatures":[{"sig":"MEUCIFRIUqLOJitFfIg9y4uOT2XpKU/qle2wCQ7vD6Eho3tAAiEAy2kA6gqddeqsyKnbUlJiMltttwX9WF87xg1nUTCdUyE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkBmlIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmro5BAAllbzdgVHjTPy2ijCeY0tani5n1EHovhiH406Qjs0+V/91mYY\r\nwSOj5x7O4iS15UwYpbBVZ9vIiyDvvBi35/1q7NwGwg4of6OjXKhjWdEJdhtD\r\nS86slWwlZ4RHV86JEM5ODgxgkAJUIWqY7paAG6JiUb/xtO1DmpY6PphM5rJW\r\n7is057UjX0ZESHu2VB3i7PQL461SDo4wB0ec/gRf/0WpaooU0RfjET06Rsbo\r\nU+LdZP3wujOFEiFPaX0ukXTx8M8CXBXjRvUNyZ+HDiVgVqfhUIHbBy9qIPpw\r\ngDMxNtkwz2eBIuDO/DAaFPb52clVUkqJ+SdaRYmc1u6Y0HkPWZnalxNMrYGJ\r\nz/UYBqCNa9mfUABqJTARFoSX9g/wv13yBa+ysw1ypf0qy2nECsvNt/Pgoqm8\r\nj/bDwHaNAqmga80EaZxznEBit9eehtQmCIMluYNQeQ3vPey1j2h3cOfY66EN\r\nCmqaj+wdsl7oIENbVh6EMNFlfZOl0jj/X9zB5uzoAbM5qJawq/IrkU8tseu2\r\nQp1AuozzcLDD2MbAm0n3lnnuxwGPTa4Xi4hKo3+G3Gq5JYu9IU18DQm2br72\r\nMltOnDAQGZxdJ485Vdka4K4j+1HK2fsA5Tx5wfV0ZV3UUedUuyvQPX/f9AdL\r\n8eS4c4U6+4iOJy7asyYoJvcedPfnSbtTdGI=\r\n=kiaf\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7644d63d5.0","@material/tab":"15.0.0-canary.7644d63d5.0","@material/base":"15.0.0-canary.7644d63d5.0","@material/animation":"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/tab-scroller_15.0.0-canary.7644d63d5.0_1678141768721_0.27711556062989273","host":"s3://npm-registry-packages"}},"15.0.0-canary.d96330c08.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d96330c08.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c78ce18aebc252bedec21ab809f88d84a578068f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d96330c08.0.tgz","fileCount":51,"integrity":"sha512-MjJmol0w+gf14JMp39mU5tG/ilxiMyZy54qvrpVMl3jyb1fzKpmdoYYfA8dDt70AughSNny2MX+T5/fgjeQSLQ==","signatures":[{"sig":"MEYCIQDc8LO4wll8b744CrZN0gCyYp9KInQZqe96Q4ZChVaTEwIhAPvN776K2fIb2c8KYC0N62j79cLeXLqw15akyNr+utyU","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCHT1ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp4WxAAgeQX9g1oo9r9y78vrjPQOwxPAgOWlI15NDzYVRcEdSSKA56o\r\n+oXIGV93ptYwslhASrnYT7rTdNVdKCNJIZVZEIj24ClW6wr1mG0eI084JXJp\r\nnDylDuzZfujaPkeG4lwHHzlkjMLsiiFRq6clsY6Ou/04q7za+W7+Obyje/AP\r\nJxfwHZH3dmS+iSsaSFZ3qPm++HayOouLOiD0EX06FHmpn4UjzvdfeWKYmRmX\r\n1puW2hM7bc6eF0MhXEE5SbVMx+iyo88qdECOSaPa8sjCn9u9nWw13GFDW8k1\r\n5Sf32gF0rSuUC/qsD7lDR+rexUyGPFbiV3TzZH9IscLwVvb4TxG9gk8tHWyl\r\nQ6yuGqMybMxtlKIPGGnXSF7NuRsyRnokMyJzgowt85JjkQPBR+hWhhAWdz9U\r\nCCTi30fy/EaGVlh0qm8u0r6OHOowjNubw2ZKTokKt1z8SAEIxrwUfW0OWUk9\r\ntUbNd+wXU3bwHTtxaoGEFnYSNwbP6imCYlmCfjrH3XyubeejAH3SS7/UY85G\r\nd4fkCFQZnZ4EvcK0Uv0xQHj9K5d9nC1a3vsioSGHVHzrFzX9t8JGL8t5ivLw\r\n00j0zQTo+Hak83iffVPcTkK8OlYSf2ZEIVqrtQSL+HFw5anbDHW6ZOTvDXnQ\r\nLl3+iNs33MQZDVSTMVHmmAZMGxGqSSEusC0=\r\n=QQ82\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d96330c08.0","@material/tab":"15.0.0-canary.d96330c08.0","@material/base":"15.0.0-canary.d96330c08.0","@material/animation":"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/tab-scroller_15.0.0-canary.d96330c08.0_1678275829748_0.9194701702641395","host":"s3://npm-registry-packages"}},"15.0.0-canary.c99cae77c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c99cae77c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cb579c10322390b8a3aaafc7b27d7408b42c39f9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c99cae77c.0.tgz","fileCount":51,"integrity":"sha512-Ye1OLIPVQTGaGBnT5fetofT5iOGayo1OzDa7IAu71fS4tvjdthBWZXUuBdxCLqmQjYrgYr9BKsfG5rWexGjTJg==","signatures":[{"sig":"MEUCIEkZCAMBN1lMgKABaNJmk+6e9rOQFMcZQI6RtRCtZBZkAiEA9IeZtHib5R8h+DPMSRy7Nw2/Lv0aLR9usI4tJ9Meo30=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCR30ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrNCQ/8C9FhZZT2Xmfg2suW7mWhA53UKV3bKa1g4J2nxBowDVAuRkKZ\r\nG6ZNZFKwdkprjVIgF1ga6oCByP21D+hw+DrvCbNcByLwMCZzQ+qScsqS0weU\r\nm4qroKP0IjaDN9lN0FvRcZqF+/eMMPGTqN1cMCz/OVI/7j1c4Jx8ppdpDC+V\r\nzA1px2pIs4jA1TRxlXYBu97BN/x5NrnbBcS8AmLUoM3lev4LSr66fZMcprUh\r\nFHPFjQK78O8QSRpOIzyi/U6eAgo+x2WQvZAKFFIyDZaAJCXAujYUasK0i7Ni\r\nrP5Mr3NzPQzDTnH4gnHwMVP1bEu/r2yhHwcb6Q8RZjU7xid4U1YIFrCDWvz2\r\n7EY2X622JsfMTsHnMd2AkgEVgsGwTjZRrWI9ty3884UNgXSzeJti6X/+FnmQ\r\n9S7xgz3wI7LCmQnq6EiVsMKhRlMYC2N9SaeCHA2iSinY/zkiDownUM978nz8\r\nGoN1dKvpQmJRN4VU+N2C9pPI69oYdbTMQDJKSsza8PsBZiZXBlbyln4qclyv\r\nQjsglrNnbAbQ4WWe5LTuR87nR4MEKFye/p4AmjXN19SCMEiwk8M9cVAMwq/N\r\ntih57PoK/aRYk8m3uocUk6LkGQzOkmB19XNMgEB6zlm732yGfmw/rH1aMeMY\r\nbnsfz9FGBZAvPV28DO13poPKfyz7qeW04cw=\r\n=yCRl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c99cae77c.0","@material/tab":"15.0.0-canary.c99cae77c.0","@material/base":"15.0.0-canary.c99cae77c.0","@material/animation":"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/tab-scroller_15.0.0-canary.c99cae77c.0_1678319091880_0.21634628202337924","host":"s3://npm-registry-packages"}},"15.0.0-canary.6023b1cd3.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6023b1cd3.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"6cb0773141d7306ad4319d0322f29df467b3b221","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6023b1cd3.0.tgz","fileCount":51,"integrity":"sha512-9OfFKhVlH17g39M3ey5hj9LQ6Ib8CzoGP7537tN3/bdOr6xydS/8YqybEJ3wHJIUXmYZCJSxl4sFLV5VI0/cAQ==","signatures":[{"sig":"MEUCIAu26mj1asPvD47QXQou3nlLmXfV3kOZplC8T5bDQf22AiEA72qaxZr/skX/bYh5FmoSS5WmMKyrAxuxHO+IrkqBbE8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCe0CACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr0PQ//Sk6PC0ZOF1Fm25b+39uvdkBCQxw/J24sm3i2bsePleeePY0N\r\n7s1jOJrk2dWwIG0VbAfU9xcp6EZQu04Rmq9Ic4HqdfCloaZtEU+yRXacAD7K\r\ns3xArqmejo13nM6ONF18GvgT3JFWo2/mo48R0gUgOd+JA9AMZAGifjVRWuVJ\r\nqR0sIg1Bg4c2xxJBxbEJirHLkrheqzYaz4jK/Vfd4UBfraVqd1wS/i2hFdj6\r\n296CJhu3EnqJxoT3tEQ6xiWGPgrXS1RFdSNlskrxzpBPWXpOSTWKg85zDfSo\r\npHpzYfz2i6dS8qTlcG9O2LNaWVDNVzeC9jFjAGFPub6VFWjm74t0+JR9kGxL\r\n2KblVB5XgWv/DP43k/AVEVcsgrMFWl0gRfmMlBHxPhfrsEJokfHt1cFvGfDJ\r\nIVexxwVXqZTATJZV8ZT8X7PhfnJuEQ3aa4rkI3WZiHjYszfTaKchcQMlQB1f\r\nx5YR6PW4m+o8X91wByTncPcrbhkoX1kKsNOVUCIckfkPWsNR+MRtAAiFRL5m\r\nEj+FSu2oHqHvk88pSV02/RmmTjT2ZTgIWN5Cp/lBLJogV5DxMvSJI7qRnq6N\r\n3fQ6sBWJVTin4DsvVkOX5uSyZhr4AEVpakNb86CxGHG300tAAXhKryAkEoYP\r\nmIWV+chP80JDq3I/z8zBVr7NopnY/9sK9xc=\r\n=HQiQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6023b1cd3.0","@material/tab":"15.0.0-canary.6023b1cd3.0","@material/base":"15.0.0-canary.6023b1cd3.0","@material/animation":"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/tab-scroller_15.0.0-canary.6023b1cd3.0_1678372098739_0.47502323806728985","host":"s3://npm-registry-packages"}},"15.0.0-canary.274610c77.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.274610c77.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"184a3aa3241d48968cf2066f17e97b107ebc7a24","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.274610c77.0.tgz","fileCount":51,"integrity":"sha512-ftHPafir0q4sd7ovYHCCkTncZINCN+tFCBHeZBrwFj0maOyt9vCfzKlzRxqf3+2vG2D9UVfZB0LqQXLoN3e/Dw==","signatures":[{"sig":"MEQCIAth70I50NgiMm2PsqYyWL1mJV9y1tGTg69MhtuA4hQIAiANvtAVJ95D/2d1mOmobft8caOE0sTfdHjLnkb2gy9LKA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCfSoACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrrBBAAnGyUzeMQkhH6r4vhfj72wdlDNLRYG4WmxMCvX1howdbFFmrW\r\njhZeHoAOd1Suc/DYwHMFHEizQDwCGuivFPq465Za/c1VtTZniyBDQ0T/nlh2\r\nXA7PAqJ3zfmCGfl3/zWPPS72ms3OTS5BZlS/N/w0PZqWqEZCBqemUwS3YU3F\r\n/1rbDedrguJNAQJUMjqajZzdfBPE1u49U0LNgQLavcdRQsNdHYxeEYNPf2ON\r\noKc5T5wmHwumYFuZ3TWtZ7FqlO6k8XB8PmqM6G+MJtLUmxEb2yO8BjfXd316\r\nnGTiH+fyRF7TQOH72nzHrvRQ8A3OUaiIJybfbcfCVY8aJ+iwxhRDzvAWCALA\r\nJvnolM2FDeeWRDMEShLfc7YoA+estH9vRDbZ/5RBnfH7yKLQM2C8lDTrck/F\r\nI0wPWFPrKvMOmVH2fB0eIvc7YJlOtQp3dIkq5ftKMtWmzZZrgyu0DPaUidaQ\r\nGZY1IJF7qagZZjIeQJg22ldVp5A/VBtxXq1bPoalB61QoNAbG0ofEq/f6XBh\r\nCQoJMbusj+FA+GXmZrvFpZ3pmMuvpX4R+Ul4hGlIXZO504DLol9KgeACyGEq\r\n3513RV1t5V6CFj3vG60a0tKc/BmhcUDOxVRPRR21Cre1cczoWH7PRJqGFlW2\r\n1z7XzspZnkiiPmDVvhP/Zmj7P5ZWWTNllBA=\r\n=nMIc\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.274610c77.0","@material/tab":"15.0.0-canary.274610c77.0","@material/base":"15.0.0-canary.274610c77.0","@material/animation":"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/tab-scroller_15.0.0-canary.274610c77.0_1678374056295_0.5160462118297262","host":"s3://npm-registry-packages"}},"15.0.0-canary.a274583b9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a274583b9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fff7d0bc8d09ef8a93d671f31d162f673235c6ff","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a274583b9.0.tgz","fileCount":51,"integrity":"sha512-xGjSSkr+6RCO7/qGDJDlb+fFcdMbLooNeIXAbJRXcrmnLnZOLia2gD2GsKCjgcKI6LmWK0Zf6hOcFSRyU8Hueg==","signatures":[{"sig":"MEUCIQDVvXasjOr8KKu8NGcdc9edj3nEJ1cq4JIoLw1evo/ozQIgS1ELJ5foXeisrSDl5rMBoDDBP8J2gRRX/jgTsYSmgjM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCjmBACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrQGhAAmOlM0OZFVDcegOZKzVeT0T5Xax2okRjS2xQznKk0z35tNl7M\r\n9ltxH5pO4V3t5xVn+fzvVH/TI2h3jOGEjOCsljWNkpwMYbZLq1gf3khFT5ds\r\nRbxm9SBf98PnwMFgFW+SopMwoqH12rKkPOOPEM7DVPJwOJCr0ErPA7MyPj1r\r\ny2EYQT/kskBUU6KJ/fn7hzB8XehQy1QU8N3GsoZRYcosEF+51G3BNKg9OmlW\r\nzCGlPHtKYZYQWlYKa4mv4v78/T8+er7i59DOxv0SvORzdsoTcHQdod77d159\r\nu6li+MoFTCQqSdA4kJp0pgWiDR10oluG+CKfsXzoYWljTGIHKPwm6+sTIOVC\r\neAwZwLtGf5EGWZ6nwLaDVUjliz/Je7M6qni1v3H9CeeXqu9T8lEJKR5s2C4O\r\n7S1blTxHCA2gw4suAHWE+fK7Gu/ZYNo3AzP9BH5YlJsHNiEwr4RqoY4k4Fji\r\n4oTI9GV41+9Y2ZquB9udIz8WgfsdWX7AkJWtEJ6L28Tg1EaCRZmQufyJ4nOh\r\n5XlKmqeCOPA58WDZnoO50EBLzZRdQlbvwE/+rQoJIxfsf7D+xvWvTs8VJbRY\r\nc56LvQrYe7tLzpvlXQyF7MAXVH6o22JSHJ8VIfY4wbCZmZ4gpQjE64d5hYmA\r\nX9cOZuDnHrp3q9gws2r0b/KF9frUSxzVA80=\r\n=F7Xr\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a274583b9.0","@material/tab":"15.0.0-canary.a274583b9.0","@material/base":"15.0.0-canary.a274583b9.0","@material/animation":"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/tab-scroller_15.0.0-canary.a274583b9.0_1678391680901_0.34107933201995766","host":"s3://npm-registry-packages"}},"15.0.0-canary.304a94e8b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.304a94e8b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8e56cefdddd269bf9a08aed0c07cf15ea781c67f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.304a94e8b.0.tgz","fileCount":51,"integrity":"sha512-ifNRAa55tfIrDKLZUPOd1GvWcxyRs/IvIR/0mghWNVvEP5MmT0TyIMtHV4vXdn46UWvlA20WYYaQvfRuPhssJQ==","signatures":[{"sig":"MEYCIQCFxNCIR2sYLBMkAQOck5cq8HDUfCH/PUtHwXrvJqRYqwIhANROMSIutSJt78In2+wC4iPfDWXES7IRumRJtdaX/UnB","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCkXDACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr/XQ//cW0wQbILLwYlxJnXn8qJQEFm8LWmftoK1rWZDLY8mGBhMmlg\r\n3u/CZqwPjfMqdPzEnUwSVbrzEeTP0wAgtN+CtHOnKYmblCcegWM599gXe7Id\r\nXwKUygfL6E8yQ9fs7LmlsTymZmZIkcizUF3iHuV6abYGH8NOhxArEcPDT/uf\r\nMbB5dM2qW0RbW2smqTU0X6HOKCU7PIQU+rnpvUTcLxQGRKnMM8wXKU5Oc5sD\r\nUrSMKuqGdtrIMD84ExR15bwgrnUbGcCGE+B5ktTKk2+FBCyrtYysCNh75S+k\r\nPti7MPJJ2ZBEyDPuutuMH8Is0etvUHKTxtfy5oJm9rAybrlzwVnY9orAu+8m\r\ns7lMt6QDptoQbIbhGqAwXVUu7COQJy2xfVtdvWN6CmpJnweH0UJ608n+br/J\r\nSKdbMmaC72cWkOseUM1R88+7yp591cVBBwuIl8OK9oFrLaDBhXd60MYsgxBP\r\nmv9dLDS5XYrmaQYftLCAIsNEnUqRRpCGcr7HOPA4YRdqAEz/iCosd/ozMkrg\r\n/fWeGSnaTubaEkO5fi6lu46EAypLuRoRZHrTCfVQUoZ1DTC/VjyOpnocQiy8\r\nrODxcICskQf8PeHbGEbnIMCu226qhC/fl7M9/Z+8y5TbFDpwiIwHvmdpglaE\r\nz3sf7l57MR2FeLzWTw7ROz5ArYBtzk2zzFQ=\r\n=iMq/\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.304a94e8b.0","@material/tab":"15.0.0-canary.304a94e8b.0","@material/base":"15.0.0-canary.304a94e8b.0","@material/animation":"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/tab-scroller_15.0.0-canary.304a94e8b.0_1678394819542_0.08945610893712064","host":"s3://npm-registry-packages"}},"15.0.0-canary.6c265915c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6c265915c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"914abe3f40e84d558093d312919e8d4e2422556b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6c265915c.0.tgz","fileCount":51,"integrity":"sha512-nyV/TwCVp5IfPxWUvakvghEYnuMJSDpk9Ho0ttfM+7YRcOiZy3kL3hxAbqser/RHrttH1NHa5330PoWjKbBRBg==","signatures":[{"sig":"MEUCIEUHQjlym6aBMlE5UGAUXu+U7vWij0oXaAvd1xBGAHyMAiEAwe8FPw2kPQ41m5WtbZTuXzx59wfzFk985bufOHIqULA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkClRfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqXXA//a3sCabw00+Oyrc0frxh+ubC0Rh2+I4Fa84mmic98MHSK3siv\r\nzzH1C0wUTqzvlSKjjQXA7EnDtyUEd8TmCEy/ZqDcnW+58KL2wX+9XzxvkSs8\r\nsiBBj9ije+0pCKQ5QUFu8yEp+B3bVn1gK9wEQCCLRGcdzEK+MUaXp4Qn5hSP\r\n7gRvuxuJGrszUC4UNTNsC22sm4QUJRnqlbZb3lK+yH2ySgUogFFo8Kv5M4qs\r\n8Bs7xwx9huV23+1d2+C+jSKuCVOf+jIofHXTHytL8hBGZO+FLEyP2CKQhBs1\r\nJNSdpSbxBFjliXrXvv+ZdEAFRpQXb2ku3JqO8R7WAkWnORKoZtORjtdetgdA\r\noAnEIK0+ITUkTCmHWjtZMgKDWnmUEacg5ADa2FXYe/D/X58j/yTJ5Ak1R6Gr\r\nVY6Or49qAxpKurwKJcCrXbKcIYgM9DPvGjSr2KiwfRZ4gDz7mcS9JCzl1TrK\r\ne2VR56fO0Ntb2nrFZszNuiUhg3TqKNmkOm4Q0lbq/VHr7Ki03g5AcLbdaDk5\r\n4hm4YIRC5M3zQeDlsETwg1/Zr4nABVcXTJtFgJbPBKaHPrTI/KNvdBAZLUpz\r\nAYb/pG35+A1hGEMTGIOxz54QKO7ebz3Rhu+iDr3fVHqusgqQvUJhUsdi9Lt+\r\n5GcBzWH3yI3QI1aA32oadSsg1G42tN0lAek=\r\n=GLev\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6c265915c.0","@material/tab":"15.0.0-canary.6c265915c.0","@material/base":"15.0.0-canary.6c265915c.0","@material/animation":"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/tab-scroller_15.0.0-canary.6c265915c.0_1678398559671_0.4785108157125255","host":"s3://npm-registry-packages"}},"15.0.0-canary.de5224633.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.de5224633.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"121377a64f63b7a4a16fbe0264f2f5cab4fa5948","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.de5224633.0.tgz","fileCount":51,"integrity":"sha512-XVZOVYQHq7MgBfQdNQ753VC0R9EtIu76ZrSy2uDZG7s3wECEP5sYPq1SS8OijwnAUSXZIP9LZCWdC2hpiTbLCQ==","signatures":[{"sig":"MEUCIQDdptItbWEFg6RwYTZTLt3qbkwOp+GjIL22Hm+nttjUtwIgMaBZ2zZVseb7q6J4JBxYE5emoOHeWV+ZQe+gXQvkgNg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCnJ6ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqrgA/9FVvgXTjjs2gZIl9vvB6s1D3T0zyXwpCBfL7lZYtBCg6rm+1D\r\nJljZouP4B5zjvwepH+hY/oMDyGxA6MbL+t7wPgc8UY7O1C0Zi7Is55BNc723\r\nSCh2+NERJ0qz8kIW11iGdz1nkU/PhiOtr1yvdIPWpxWAYECtVdczJnISllPk\r\nj4SHa9mec+BP83Fj6iw8ufiTG6kI/IR2lyHfqjTldei9p6/q5tOZRPLh41ej\r\nadRRJRQ/Sx1crhSFOAJYXkRAiBvjuguZCoLHL3wKpXWbuWHx+P9S/TjqTCdf\r\nFUjvZeNT098um1W5N7lfPNVDXhfsNY/j4gPJTiliHN/ctrVjxFpoS6DDfYNn\r\nfGcYrpGdhxgWWESEF9HhJHFIGY7pag/fkhblNa29EHbrlqb2EPiHLfdPgpx0\r\nPfpGgJI53KnuJNxxYPU2A6Dbj9s1Pb6UHxudkkMXvb904Au3/ZZoLL60c9I7\r\nCoI4LIJXkgw+gjffsz44RrEz57vp/gSw8Cp+vQN6qWN103BL1f79uLjzrHjf\r\nSv3eDjcogNGNQvyAGOrNIlV53QMsI+QWQmpACAqTIRvBIP5472LWUR8ilzNz\r\nxsVDNAYkrRIQpWy7sBXovKIAsncW3b6bxLARlSMu5z++pFS+Ol3rY9UPkobH\r\nJbwqbo3bFBi8gicz76zyYGe+dRCgeTgOXmQ=\r\n=G8yo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.de5224633.0","@material/tab":"15.0.0-canary.de5224633.0","@material/base":"15.0.0-canary.de5224633.0","@material/animation":"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/tab-scroller_15.0.0-canary.de5224633.0_1678406265762_0.3685531752498221","host":"s3://npm-registry-packages"}},"15.0.0-canary.8879557e6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8879557e6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5d240575d2fd937a16447c0886a0be3443b7f350","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8879557e6.0.tgz","fileCount":51,"integrity":"sha512-i5ELDnz/PoYZV4O63IImzkfQu1kgkfB+J8VLzcvdooxrZ+BZzBbGeK5j+YZSVgHu0d/izYTMTCv8npm9SIiY5g==","signatures":[{"sig":"MEUCIQDR2fzPD4nJoVqsoH26qSAP0LdRBeaSpWRbumUI9i2IEgIgDbL2IeUtzXQ+r1IicYIGwFmz182J+IWqOOLRtUPXd5U=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzoxACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpmmBAAinx+sf5DglvbnlqFKq5yso/JKP4/NKbSPWVwl9odOvPX4tXV\r\nVv22DOLCmlk0JNYB1YpLBdRMCFYg419vIBGaAEmCW0gbMANqd9aGmBEMRqOr\r\nUkJ9rKnWRK0hFN/8KvX3uckrUZp1/m6MXbSQU8caCMznE10WB9LR9dpd2JKB\r\nI7+xd0RC7afHntRCwmtuBWtvg0p5MEDMdZl2LHob8ynzP+R09ArPfzgnl7pd\r\nIk4wRBtJ4l963paqaTUqEKGd54B10oS2/1Sa7+fMctx09o9Hpnaz3miQobuL\r\n3FelYdDz/2Yc+SWpdPk7j5urEI8GImwxHyyNap3nUPDkgdsznTLCGi8CU+RR\r\nb22zqAn4tv2loF5jkf2s0INMK6/mddZyU1JWuRkR6XlMZIxW6as7avwMNTjG\r\nVhVI6ZwJ1KrqhYar0cUqMZ5xCprPlitNw/8zcoPiCXCa2yV7uII3ES3Tamm+\r\n/z+Gz9ViIz0BpdRC9ZhILa6nX0q6I7aM08RRf+o0/1xsNJVdMcrGgSg4eun+\r\nnvXek3daWfBEGXJveSCCDyy9P1cOX+hrYMiDsnnuOZC4/gdgHBx3O35DF9i4\r\n1L3mL9u+g1nmKlGohvZGvL9kEdCoaub/Robf/0y3C6DVOwjfZFTi8QLVJ37h\r\nLYSETfIFxLhlGFEGFiSJ+vPEHX0Z5Uy4pTo=\r\n=1b0H\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8879557e6.0","@material/tab":"15.0.0-canary.8879557e6.0","@material/base":"15.0.0-canary.8879557e6.0","@material/animation":"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/tab-scroller_15.0.0-canary.8879557e6.0_1678457393425_0.45993132330500397","host":"s3://npm-registry-packages"}},"15.0.0-canary.23073a303.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.23073a303.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"82b64fb88753bb3addc8ee76885f65f4b03a8808","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.23073a303.0.tgz","fileCount":51,"integrity":"sha512-tQ2kkyP2DPnsBurWENWgEP/tWjXXqApvXHEGwx4QujvKA1mLWqLsEueHmshkmAizb4r5htp+YONnnr0dySGdgw==","signatures":[{"sig":"MEUCIQChaQbkJhJnVaaWIar9BrzrwzWpAPnINs09bQKoFtuvEwIgONZgdmkQRIPPHW+oVMMguca8Gzy3F50bRYVpO9/PNAc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkCzveACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoqoQ/9EG3kHbNCZ/S9pd7zOp9cT5oeIAtGOWFlYiYICsXZobmPjVD3\r\nj7a4BU9I2ZzOKQvcLJXFTujlrSMuFCMuPH+3BDsWMnZF65vXpj140qhuvKWl\r\nEm6TZvhg1f0VHZxg/stL1326FAUkFWqbOzVi+QQWF7PXsFGeDZVClsErDvMn\r\n7EtJLe2BmVK44r7wYokKvu5NykaqqPyKx/ni8xJtbeodmQJ8pNfIzXWeIDaS\r\nnIJtb+NXGi5Al0yPZ0S/bO3ASoRvFlUGpdW4LFXq+3L9hC8unzpETQdraqmt\r\nfRBf2bTV816Xplb0CafLIwZz42nutrpJAuZ7pBIVcmHUmJPKKuiRTiWlYnHD\r\nrzM/u8GRkIAQSJXxNUOhHj3KOa7+fq+DnAm80VjQFGsuuFiYpEJtQs61CYyz\r\n/+KeLaAarM0WBGGLd4KuRtDJTb7qlknmpcdZC1qqKY5abIHwieaexD2b3Czp\r\nNS/lTYSCP7FQS0H7U5Y45Gssp/YdyfEQoM96PWYPtAfQIoffsWXfqOja8UAW\r\nVYeLNmDeikGH2/pI4EJCYPPP+4C7+h4Ki8sUtdESfRxlUcpTLcKCMpvIzd+C\r\nB6yfkWwohrOFqrdHxGpfc9CUrL6kWo80Msqg8j5B1QsllaeiAQWY1CY1iavU\r\nnvnbTxzB52GiYX4fzb1BW4pqD2Tuyi7aSXU=\r\n=kzVZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.23073a303.0","@material/tab":"15.0.0-canary.23073a303.0","@material/base":"15.0.0-canary.23073a303.0","@material/animation":"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/tab-scroller_15.0.0-canary.23073a303.0_1678457821935_0.014023494286501847","host":"s3://npm-registry-packages"}},"15.0.0-canary.51c7d4014.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.51c7d4014.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d5b6df3779c1a8a83459392bb3cd8bd6864eebb8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.51c7d4014.0.tgz","fileCount":51,"integrity":"sha512-p68ZQb00CGTGMaTrl41hdz/ghWzsA8+AP6Nwwp+6nq+iuMdw7at9UA1hX/iMUZwPizBLgUH/dEjit8qoWKhSmg==","signatures":[{"sig":"MEUCIQCPnFIC7zsvtLn12k/o6NZ90ivXSEWl3TSTCAynCJo4kwIgQGn7Z+A5Ms5R5HtKk5GJe1oDPMSiw5DrzG7yKfYXNzw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC1+cACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrxdBAAgYi+DME3vAEZ0auhCkCrZji233LYe/L6wl8Aph57crG6H4Zn\r\na38sCeBNSyg/4WXhyWWArlKKGvvWqvjJSUvNshHz7AX2VsUsepzETfXS9QJa\r\nQV63PJ8UOO8c3HpDBWYoUgaWsFqVdPSA6RtHUG2TuWuyIPJFrB4p4bLEqO6k\r\nGH3yJHGFLQwnKd5yno2HmZGT0NqAZfWSg9SZIW1rNfLV2lEN6OkOh+8btmpA\r\nwVaFEhyRyORQQIWsdyOa7eHZi6VoHSw8INFMc12brWDza9bIKCjD04CruPzl\r\n+Gj94Lgt7HJbwm3CVr6R9NOkFZayV+o9nMdYVd5TbpOjHRJHzqJIugYfoj+P\r\ncCO3T8FMqqdfmAriuMaZqwqwRU5B/BDEFGhDNFJsoB/dYpFmdBdjFhNY0suX\r\n3p7d6LHPJA87BuBMkknmZBfzsO4TrbDaFixFaGVQbhQ8YRN66XN2JWB9GeWr\r\nb8gt4PdNlYxh6QWSz4c/RUNguBKc/d25BqAQBFVVxw3SCGHPltpnNLfe37kg\r\noX6hYzZ9BDdn06tlzbTaXJe00MRagT0tjguzZpqd8OYyaCYxcP/d+R9ryUV1\r\n0VmagsBzOPkVfbPd9g32KKQzNuKfiJkgVcc906bmWQ/gFLRrHFfTTW7VqTm6\r\nbGSEbq5TsK68RsVS/4Y+6OVEJXLk3j4bfrU=\r\n=tH+k\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51c7d4014.0","@material/tab":"15.0.0-canary.51c7d4014.0","@material/base":"15.0.0-canary.51c7d4014.0","@material/animation":"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/tab-scroller_15.0.0-canary.51c7d4014.0_1678466972520_0.4400453020043691","host":"s3://npm-registry-packages"}},"15.0.0-canary.1175a5be0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1175a5be0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5a548dfe6dd2c6c74e32a0f683c0a67edf7b83ab","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1175a5be0.0.tgz","fileCount":51,"integrity":"sha512-XJKdXKmKZR6kv+tyHmtNrXSxvPvqZcj2fWlW0QDZUQ58YLRrXgKM/zvY2muFTc8uvIOBY84Zs8sulDKVFgqNlw==","signatures":[{"sig":"MEUCIAs3tENqy/c0P7bq0HCXPgZIU7iNms+Y4TpP1uEpgg0DAiEAm3ZKYOsYEMlz62QqaqjZhhOh8X5e2/k6x6L1aR3BrjU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC5f4ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpvgg//UPKL6koQetIzGV5KfsmsIpeSqzqRftry0n8s80Vs1R6qIDFb\r\nb2v8EXxkrnVDTGSsmE0qtswpy5GQg8zrSOVAD1YbNTZ80iOwdNY/ofq5cHsB\r\nCh+D2HY/mVXt7sRyKCRxobLNsf6ogc5nhWfaz4oKK1JqHFLQpFCXUScaySSr\r\n1rYPYZVYNtyLv+VVqIRk5/9yeZsFNjzhZ4Xxh7MvufmS46bgADMwHal9Qp0+\r\n/+uXf5j77AsknlOI5trbaRqXOP5dfoXsv0GH/rTpY5sSNMLwKMDopBLISn9n\r\nXN28wf9AVuyRN5uc0GpH/q73UIJ1ltsajn4PU4byjap4bKO8ME+9QUiYcp5w\r\ngo+Iy+wHGlz9cjT8lEHDMi3JImB9zUUbue4UxQriiFr64smEPk272Bywjarh\r\noqCemnJ+nvxFXaksgdAcyZlIrllYwy/YNjoPeaTD5zmOQnii9uYIGOPdn24f\r\njG3xnouFPtb3xHK4e7wpbMr87WrvUk9JAOBJro5j+gFp9OwbOWXjJ85z1MPk\r\ngmw0/wMvqQ4CBxagiLcj3fKtuoKPIgt1HL6IT2a3q9xLGn/1L7yrH9t6dz2b\r\n3HWBZcvnZKZ/4PYOpg//XcjlPfWHnGqu/8h7nnTC0ABraUisVH1RVKJ0+eJi\r\nVJpVE5IObgDkI2rwdIb1uuPBR7qtTGIzviE=\r\n=41/1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1175a5be0.0","@material/tab":"15.0.0-canary.1175a5be0.0","@material/base":"15.0.0-canary.1175a5be0.0","@material/animation":"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/tab-scroller_15.0.0-canary.1175a5be0.0_1678481400651_0.27845040147771893","host":"s3://npm-registry-packages"}},"15.0.0-canary.7adf3af80.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7adf3af80.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9eaabd427e0a857ce2860338a17b5dbb4c6145c3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7adf3af80.0.tgz","fileCount":51,"integrity":"sha512-2Xev+6hL0F6tOFFtNt3JcxFiakeXCNbt4n9Q6FU7tHexkLjl2EL1uDFkSW6sBrA0sQfiBDE4Xr0sbjKvag6i0A==","signatures":[{"sig":"MEUCIH0Re/dBwSBS9Hcq6uHGjZpNvKY6a3xE++ErRqOZF5iIAiEAzH0fGj8yW04sjc5g0Vnh+AuNQdMm7QFWIQ9HUdQTqYI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9jdACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmqfvw//dvF2sSobPd4DBS1CmZrPV+nV3YP9N46LiMgTeh0ZlbBYeolc\r\nDQ79N6A23gh9EyBENLjKlg79srm/URDaONxwjgGLHUwnahTB5ZahFFgGpMSO\r\ncnsH0tNRbIih6vcgV/m9waaWpuPWx9gsu5UIFkEsmZ1a91bCV4DBBvG9lEJZ\r\nyE8u/jx0h66MhZvO1ybz0J+BdCZMP4qnyxaLj2VUVUWeJu+Zovx2fyKaAdqs\r\nPhTulIMzGYXdbM6YOmn6hFjndIca8kBmjIaXxFM0ktyLkM9jZuU0VAaBpTm/\r\npZo+PJ4lbgQTFkmdVW1dlTJUxh7nHjAfAKQdhMZkAe94NZFCqnK4SnhCNo4R\r\nmEUoRZ/oTdwMyOYFZO5qsIILSUON+n/oTwX6/lBGMZDpcoGl6+ii1CMJyKpM\r\ns9XuImjwpxObzzyz3Uz34MQt7Gobh/fn+MSYVwTOm9Y0AXT2qg7chJ5QxKUo\r\nJFzMkVA8S8Z3RmsX9YYnLbT3Hbg4AMJe2k3kjTrxCyOy/4qhaLvNNfWRV7ku\r\nSIis0Mgp2SDKaZC4Xw3ucildMsNv1bTjiiwVAIjyUiFkbgsFeqd8+nXHi3uk\r\nZhmy610GwW3uXXKevOo+NyQ1GLJL/bN2t/lLnGLM9TLo6YAjENKRjREBkMxx\r\nLlnW5tT2sFl7AM207gsMDEk135k1zZ6snhk=\r\n=VFpo\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7adf3af80.0","@material/tab":"15.0.0-canary.7adf3af80.0","@material/base":"15.0.0-canary.7adf3af80.0","@material/animation":"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/tab-scroller_15.0.0-canary.7adf3af80.0_1678498013050_0.25857094311103834","host":"s3://npm-registry-packages"}},"15.0.0-canary.82554d770.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.82554d770.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a4ad4238cbb9dd80586cd9841956a05d8f93e16b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.82554d770.0.tgz","fileCount":51,"integrity":"sha512-io6nHf5CO1Fgnkt6+KuZMsZ7GWDHxpwjjEA/MpwDB1blh+CWhMzRtHx8FFuT4NnMrBMoZri3NfXtUzN+/EtoEA==","signatures":[{"sig":"MEUCIQDidvV2xTmbnv9eItwFNPGXN7El0nMhzcUhzO85I+YyXgIgbBPahxqkeWX4AiA+a2Vzlnitojuoee8SDePByXBDdZk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkC9u9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmr+ThAAhOfp2ADQkDR5TaoIxdAKtuseE9K5M7s1qArj6y6fx0SJpkUT\r\nKwanvZNBj12aj6mqurlQVSh5zYeQj7zBRNhGsUP8regXUFn5DTDkrmQECFct\r\nHF/6UKmgq5VYgnEJiMniFyH+Hto+xLU6VqPdiIba5SksYrkpmxiH69DpUlzF\r\n86J/nOHTnPooCQFpO5XAtdF3Tq6JTROr2MtoEm5Ft1fTdusCmBs7n4ELrTzp\r\nCujD1/nwBg5fFsbf4tvKZb74MeuUubOM5t4oD/FqjKMqQc4+vB4cIdsXTkji\r\nimCkC893BaB2dygezNf7hnTbScWJVU8lO6PYgkM1OuybmdAXnut59v3vLlzC\r\n8Bly/GtEgd/XfN7c4xLd3F83RBhOzjppxT/uc3vSWRTAY4m/iGahDkQFmTn5\r\nxBPwF4V6ujPLPkcHD2vYjrp84jdk0x2V7/Vb2YVjw/2YnOwVmEoQfYqGK9f7\r\nUzILfSZBaRsJok0sClL3QmUrTp4fXqeJY1vMpMbIIByKmMULyThL3KFQrnrW\r\nTpL2nLbZ/4vHxmVdkdGjPbbKV2hCoXBL+E9mwfTUcsSlsBF0CV5y88kHvYvS\r\n1F5G6CtyGZxhmdFVdaG6NWZ/+pR+aXZaEpZ/WGCi3WeGi77uuyBONNv+fFMa\r\nCzPft+takGxKtD9eu34XI8uoG8y3mQM4RUA=\r\n=F1pl\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.82554d770.0","@material/tab":"15.0.0-canary.82554d770.0","@material/base":"15.0.0-canary.82554d770.0","@material/animation":"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/tab-scroller_15.0.0-canary.82554d770.0_1678498749314_0.7554377133229897","host":"s3://npm-registry-packages"}},"15.0.0-canary.93fc524b7.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.93fc524b7.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"68e04a08d749913deef1928ef9e367e0dae2999d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.93fc524b7.0.tgz","fileCount":51,"integrity":"sha512-Px1GOucFYZPwKGDu/RhlQ2XgWDMXX/Tij0Ml9wH6JSYPYgDdiqKVKsgr3Spa6tMwbLHw0nbcFSYP1yjCQ5nBuA==","signatures":[{"sig":"MEUCIF1ktNlV0GTxPSK4OuSE7cZ+pBP7K2EbcExm4t5kv3yaAiEAhYhp8bqoGHXYpbYaYL/K7Ui2OocOD9x15L25CashXz0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkDuGiACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrWBQ//Q6mXYUHqLEhrVKKXb0HKSt2ngVV2Rf9HHDKuT/ydXq15Vbb8\r\nWnONlqqSbzPPT220Uxx53MG0efyUZCg3eGtf/Bp/eVLezme6eVZFvRdvbYwE\r\nAdmvYP3leDvJA5oX3EZ5VwTuL598wu6a0UhusPrM+R1S8Lgd0A/3dOv/miye\r\niDD+URN/E52Tb4kWbSnXBXxKlKgHHyzCO4bbBtohL5zT4lVsGkQzMeQOexDH\r\nhzinVoUl3o6Vs/MpYJeRUhgveuY6wFyxUssATzrVM7Ho00wG2vqNiijjNUcW\r\n1DBAI5DLa+Jby4cAx/AeAjHSGb9CFk7w9Zft9B2PM31jkFBNGJmt7w1zqBaE\r\n6VamR/ZEmd+SzcxAwEStIBqdwuN/L5p69IY/HqAGCq4UIDOr+TQyU9X9YTZQ\r\n2ezjG8PTem+by434HRWtbevLUSXsqHWefTCii5tneeL5tdLug8d2YeBadz/0\r\nzUmAxc+QMT+Zqvm6hBlcpOmA4sjybYJfdvoTYjdMHCNa7l0rgOxcNyoK4Vkw\r\nFqZawtReNn2srdUcbZgYFuHi0NpYrSySyXO6QRnknUASVDKarH/0K9ldfgWH\r\nYJkOpvN0zAQ8Dbu/NVAUsjf7bghILvkwWjp1Cy8gX7KouEhMIejnMtotw+oU\r\nhwQzlZJ1Nna5fu+BoKH37QzzkIaxCQkpPh0=\r\n=/Oem\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.93fc524b7.0","@material/tab":"15.0.0-canary.93fc524b7.0","@material/base":"15.0.0-canary.93fc524b7.0","@material/animation":"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/tab-scroller_15.0.0-canary.93fc524b7.0_1678696866529_0.29622908831559913","host":"s3://npm-registry-packages"}},"15.0.0-canary.50be0fbae.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.50be0fbae.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"43d7f3c441ec0aa5099b16f1b8675491460b69da","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.50be0fbae.0.tgz","fileCount":51,"integrity":"sha512-ApuRm2EsEBeS7vl9cUTmrTIkQIBloYLPPd8k+KPlWqSMHjTrBfChN/t0r3gFFPLVoZYlFfhuSptf4XZ/zLGqSw==","signatures":[{"sig":"MEYCIQC2r2Cdjrtn/i7ZP8TP/A/0JAmlo/V5CDX4RYQQYVDBcQIhAO87Sjerzciq2eW/juL+9SIcikDEGQBZoeISbtslaiK9","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2FjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrRkQ/+Pb7m42xxyWu7M8+H6Bsh7PqsjZ8QXkCERPbaS5jTE61KT8bB\r\nSPZCMhHfWXOONPiVoQEv+wnWY1pQs908O/xr3AXKlrZVvVKELxsqVfZz4d4M\r\n5QCNxac5rGEuPmNr22ZlrfEwIIxTUllMB/hybz6XaaIABwpnYiZ4uOMj1hoM\r\nvF4jjEsmVSGfdvWRBtbihzZ88FksZXKsfJ/XK3UGg607nM0fGa0FNnKNkzyZ\r\n3+mgbv0fUhf3rh8Iu8SZR0p83y4kmScKlu/yW/PRiblX17hk67ZjF1qEmwyC\r\nrT7ma4qzr0uystecmd9ce8ipILFm8nvt0BsITQzy8NxqOfXIISSdCrVLfvBn\r\ntTlclO0VXBRbRVNKUB8g/QZ9aWSuocKbFyW4tii+pa7Vr2b/QC+ppURxOKNB\r\nAWCOJ7g4ko27bWDGJAoCoZagGU3YT5RXNcaJyCqH/P8hQObqUciqoLUwfbzd\r\nAEweDDCtciPnE7cNkYt5xl5PLwKruG4vbtwqx2nKpIk6F07azWAKURDPMJ3c\r\n5PNfV2sJ2w7fO6l4a80v3PPQqnGPqDkfn6e+KjsEBJFtyU49ZbRB6R3wt4bS\r\nTjxqKiHmoDNgcbx+1OG3lOvdaVJdqfe9E6Jnan6kcEGrofWkSEagT7Olin8M\r\nVnWOgruruEQHU7l/BZXDyXGEBDD5QmnLOyc=\r\n=1TcJ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.50be0fbae.0","@material/tab":"15.0.0-canary.50be0fbae.0","@material/base":"15.0.0-canary.50be0fbae.0","@material/animation":"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/tab-scroller_15.0.0-canary.50be0fbae.0_1678729571178_0.745784079928012","host":"s3://npm-registry-packages"}},"15.0.0-canary.6b5ffccd9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6b5ffccd9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"65d723f89b471e59133b9209f2e82467c654d406","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6b5ffccd9.0.tgz","fileCount":51,"integrity":"sha512-EZzC1TH5Lqjxg6brdLrqQc2pUXVKxpIP8v4UQE17uoelyFggH6V474RNhlEDk2i+CelgVHGgoeWEAgF3LUYMfw==","signatures":[{"sig":"MEUCIQCv32SRon46izxIbhJB2Qz/wGPZpuJ1QzfkmZqM3irEJAIgDElainQFF1RrwW9+SSe+fLpI7VzzXs11W/+r/c/I6mQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2IzACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1kg/+KKChTl9EFIRMilD5Vx15rbQGJABJJeVDOW6dW2bKPyfwmsV9\r\nIP7/zOQ4ZzKRtrAPPNLt4HQISBw34EFkh6Use3xdf7kSagCn2ZNcADFrlYwP\r\nPOyp0xw3/Qvq/ulLk8wuUyM58571KWwfv5Lec81JcMSRczTQr5meKMFBE0HY\r\nXEvs4F2iVc2OJxC3YtexoNAeAxEMImxMlC8+lod9rUOlFm9Tg+/UJEYnw6/q\r\n6PT8xU0HoDOFjoN8Cia3JgzMg6vjDg0doQNCgMn4XYJgQMLn/jF/HgyLEEbd\r\ntwB3EYmyiNR4Pnl+d+IlMGmoLbjDz85PPGF7FowXhCw4FILq9WK1kaT1j62Y\r\n2cgLeLjF8VRV7iT4KbVr4xC1lnOvD89bpfy2T1aa6v5YJgGkavmZiVdP6SAj\r\nC6Iz1x9VjrvLCBrScq5mgSp/ZcKVZuwGmwoIxtbwb/h6DM7Mz4XuUEypxeCr\r\n1qRBvY89xhqBPHPGb7tZhCICKGoakdgG9UkPOpYolx1VUfCOUg2qoTNy0prD\r\narZfkNP5qkVZcF1s7XslekVOlH12Q2crZ3N1jv7G4naqnfhnyJl7c7IWxHmq\r\n5hZeZVoGjnUTFEwbqAd5UxuoU7V+FFgaorAVYVDcWuC2ZSPSrmp2HLDu+vUi\r\nhL7oNszZ28go5KGFPBOPY9m6H+6ayWIGmvE=\r\n=V9nE\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6b5ffccd9.0","@material/tab":"15.0.0-canary.6b5ffccd9.0","@material/base":"15.0.0-canary.6b5ffccd9.0","@material/animation":"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/tab-scroller_15.0.0-canary.6b5ffccd9.0_1678729779442_0.443916794216608","host":"s3://npm-registry-packages"}},"15.0.0-canary.1c8013f4e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1c8013f4e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8dbec08ae37e91c2a364413321a5d09bcfaaf371","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1c8013f4e.0.tgz","fileCount":51,"integrity":"sha512-O5lyJ54T8deLcHJQ2TsAxqqwIZ9kRN0cjxw6knuQO9JKkXfFK6NjUoSEKsQYnLHu8Qur1vEgGgMCioP0JwBgWQ==","signatures":[{"sig":"MEQCICYyxwkpEc4y5Z/FvsmG4RTvghmNIUPMTuBiqYsCry88AiA10grxMuqXHeXP1Bm+tIfZPbt/RneqM0pb0KzG8U+MEQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD2XLACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqkmQ/9E+ysZmwhQJ/JYv1063/mgEZiJD2viMX/DtwoLzV3fqsHPdsW\r\nyAX8BtYjAo2ZC5y4FgC2i16XnddVhqiGSJwuqIDVvR+Gh+KQA5vT2ddtxwue\r\n7/OuO/bDGTf/ws+ysPv/hL16j6M4Xuwp+FK8iRq6JpUpPHj+eQsbqLdxnZjB\r\nYzgY0xD+BCj05GmrUs47vMMTktDCF9/XVXz4ST+0ALNhr27et5CRRNXUFC04\r\nLyhZJOTX3z0aaQcRnkChtdtii4+fe3oYN95Xeu6xE8XhFz8DLWT697sdkonO\r\n1GDb8MqxJxPiVGDzjS6weAnNeTeZ5smLnQK/SftTH0Yxw7MR5UTyvaMeEFe0\r\n835myS/RYdtVQ7cUjpf+3kPepyFwjDdffLLAjWsD8lx6JkJMfCEEzhEgVh8f\r\nAHsoSBAT0FlbnmwIhgvtBsYpuwbkF0nxSQ4r5eWYhfW38y1v46lZAliwnfxb\r\nGaDRTfnDp62xlQKK7hyNYL7i7rVGlISerLD9moexMpZkVZT8Wd0F03tW96f8\r\nJNybkCWJ0umyvznxxAqYDXKu+Rc85DrMMU7eziNyWye4UNXzRNNNTBtXq4EJ\r\nvsNGG846Oa5WueW+4AXOiDM8mI0R4DvN95Xe83WcnYajS+5YC3tXuh0Yyruj\r\n1YKlZAbwuFHBuqjVPStOQEk51QVx+xuUK+M=\r\n=jxjR\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1c8013f4e.0","@material/tab":"15.0.0-canary.1c8013f4e.0","@material/base":"15.0.0-canary.1c8013f4e.0","@material/animation":"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/tab-scroller_15.0.0-canary.1c8013f4e.0_1678730699049_0.5270548273190747","host":"s3://npm-registry-packages"}},"15.0.0-canary.112715df5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.112715df5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"efad2eda9ce6aa904be2253e2a11c95cce0747ec","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.112715df5.0.tgz","fileCount":51,"integrity":"sha512-dLjBrmBc/V/y7rDaPAwi1Wf7DZu7Vnz0DjnjFZ1YVkm9XH0E6P+sSwCzCyKd+vHMg8hQQkYWDu6h66exeq+p9g==","signatures":[{"sig":"MEYCIQD67IHi8/qxXxs/YuEpSvPO8cfqPDTQvOVPP3wM0GpxzwIhAJrbh+Wt0ZcmlPvvu3+OZ6XpCh7vU8Lbg4iAoWVQkRdf","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD25QACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmp0dhAAoG9cYGMIVwHmUntF9GK1dXgK+KwD3IIZv22IMBee7538wrMj\r\n7FtgiYIPOuVTsOT1bl36QDYRwfoVQ6Sr7vxPjO5BB8WirJ9A+bG5avzn9D5b\r\nXKmXxifbCzN4RZJMxSxMTWxGuzlA8mzjr+Ta7IsD5MIoLv/7WIn3Qzxsegn9\r\n09uLTmxFCdqL6qsdMWWYMT+IHMZvDF1lZZ2qwYfhkwhvW97ALfsXrpAJOfed\r\neA+jgrVlC4Eyozz9Ec99OQqNeWfVgSYlR+2GkZHqsqpIWofbTyT5QRd+DgWe\r\nlV5Iodill/6q8habG4uAwp37MUQ4OhSClDDQKErREVSDuhq7KT6lyBE+4WIR\r\nFWl6ZOWXY9C4H+VBRj8vJhjyTX8207uHzQxHO1LnSz3tdcd5gBUycrnKTy6L\r\nTWQ7Xjt4bEmHGlLJkguEnnZ3l6hjMBYflP2sxQ1BL3Vpn0nplcjENHorCaH/\r\nD7d6LmZ+2wcOFvew2JxKmDdqTepeIKq+QX1IOl8CqiLyDTjX+72Ceec28n8C\r\nV/tESs8Q59Ydg5HyBjGgPMVcYpMKwpqITbL1FIPCZLxF/0o8h6oIBvNSY/8p\r\n7MgWcs9CgkcAB9ftkVVY4u5bYE3NmmhGcqoLlZhWETYuU5tFDYFV/HnkVYyE\r\nC69Ewgikq2MHXNLnePmg0bDi6rBvOj128Bk=\r\n=33QF\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.112715df5.0","@material/tab":"15.0.0-canary.112715df5.0","@material/base":"15.0.0-canary.112715df5.0","@material/animation":"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/tab-scroller_15.0.0-canary.112715df5.0_1678732880615_0.08942900937066178","host":"s3://npm-registry-packages"}},"15.0.0-canary.d250911f2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d250911f2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"411adf9560b5754ae86d33ecb16c3ce2c81451b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d250911f2.0.tgz","fileCount":51,"integrity":"sha512-dqgAzz/ipldUtJziQJ4INRDjwdEATL7w4aiRs5V3TZYss2qrnwHCUN7Op9oGWWA8ZzCz4bBmdqt4hgiQeMCeKQ==","signatures":[{"sig":"MEQCIFVj+KkbSqZ71IqMBlyfH0rDmhE8ssf8QvnSKhjjpQj5AiAW0kynjrKez76uVuurdVXfrjuvjwqCILxuAEguAXlm4Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3qTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoO4w//aNnxcyR34+m80SJxAR1xusnO4rKnjsrGyUNY9lQ/WBSO3saL\r\nEPM3v/TswEVWuI6EKe9hVH6o50uxBBtBkHRDCYet0Ic1vS3K4vz8eDug6gzO\r\n3hnSVgctE5tw+42PBlLefsXFB6jRp/ywTo+PK6h5cbuIMt+/TnczSvIiHw/P\r\nXJX7YsVbz8X6lQg7WK7pygNvx7W6FRdYmMGUV/c/FO2PROIidpy+htL2MGQP\r\nv1UR6iOurR6LMgN6EuJBEf9R8Ln2U8ghpvE8FhK2XBjIDuQHrbl3LFveoHHy\r\nzp0OQGw2f3z0o6FIM1J+XMqChwjYoUiZJG7FldrVVLynpm/QqnJdH9wpUxUw\r\nuawSV9Q6BXmXuNzMKENQoWWsMA/TaFhDqhKnU/+kRWAO8onYZWwcZdYcNvPi\r\nNJC4n1j0pd1iWE4uXF1RsOdl6/djR+3O5+OQ+5oP44lO03QAxVR/acpDFL6M\r\nEJ4sSNDGwyVl1MwcK9og9vmziz74m4k9jzI1JJKRADjOg/2eEVzGDxrzk5WV\r\ndOzbhtpvMogFEurT1ATeOm62oCvGfkbVbmbrhR8ih6jsELcmCpt75WDP/7sf\r\nj235smTs+3Uar8iOXnFUEvLwsPe/+d8O9o6ePu3rnPrfCV/02IFFmpCPxIgw\r\ngOSuV0FZkAm0uXVM8qKj1pR6wu+CsKevDoM=\r\n=VBzz\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d250911f2.0","@material/tab":"15.0.0-canary.d250911f2.0","@material/base":"15.0.0-canary.d250911f2.0","@material/animation":"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/tab-scroller_15.0.0-canary.d250911f2.0_1678736019553_0.29853347487651893","host":"s3://npm-registry-packages"}},"15.0.0-canary.7cd925c12.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7cd925c12.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9032fbdbae2610dfaf8db64dd9f85cc201610d61","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7cd925c12.0.tgz","fileCount":51,"integrity":"sha512-zvEZQ00+i60ETPHSmLYi7CE075zw05NGm0CS+GDLHR3ZuqY2BNRKLrPnd9Mg3KvclDgRdcT9uvHTlZzkcuoG5A==","signatures":[{"sig":"MEYCIQCSqCT4aim5wVcxnM/SRbU7xS4C6SOykfyhBXcUmFjgBQIhAN2qw8FAuWy7MBcTxk9d14JAZDtUxKesWiHW5ARyHtcS","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3xbACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrAoBAAmHmAeHc9EjLE3sL3RusDSoQ9wOfrvneiQOr6wl9qPIoCZB8m\r\n0SV5S6Zmo9T1Zcs9zyrm+96qRugyEeDfvsUtIVNpUZprjd7v8evw3Jue+jjS\r\nQjKIc8QWlKj1vmuEA7IVtUpcNlEuuwo1cgGXRhAnhFMxhYou+0TH+Rk7kLXm\r\nPgcJqipEyRtnBk5jGPqEhcnVjTcdnlPbkva9v4f3V/NcOz7kg9fMmOPSvKTr\r\nrJ+lotn9f47wkgdP1/C5jZqnsYnt1iT6zGdAA+9doKvGAFiv+2uVeNch2xPL\r\nLQUUrj7j8vU9iJT/375tRothT0s4gyn+bulcSSEnfpaEtlrcBZVuasMEQmsV\r\nDPBnRTPCvQC+DuZSYi1tVD4yfVDAXV/bY+70tTviUxT2E95d/h0lE9i1Tojz\r\nHr5uZHkWeXdMQMGr7M86WaAx6qBtnfpXWECrdHk2IKOdxKzQCkmONL9H2g1t\r\nGQPor9lUQ0j9ZAQy78axyb2Yod0dmXApPPG+f1IOsLikKgDDmaFuN+QzgVWL\r\nXaqk3woMXssvcR/IMY4jGvwehysQpXyeJXRQLdhoFem8pd4YOh4Ps90KEGAM\r\nQ87XD451ubjjaSx2F8fbidVAkFBAELIB6Yed89l9hxDXN5LpoLdbeRmCXH3K\r\n4fCq5gdVa4WCOCqe58M6Jd3mTXQuUFAR8oY=\r\n=UQh1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7cd925c12.0","@material/tab":"15.0.0-canary.7cd925c12.0","@material/base":"15.0.0-canary.7cd925c12.0","@material/animation":"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/tab-scroller_15.0.0-canary.7cd925c12.0_1678736474828_0.26704205027162575","host":"s3://npm-registry-packages"}},"15.0.0-canary.b2ddacf73.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b2ddacf73.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"cbcc62fb7268f9e2a0c6b5959cb326bdf6b34f93","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b2ddacf73.0.tgz","fileCount":51,"integrity":"sha512-dDNX9mTL1iB3nJtHtT+rtz70mAA9AK6FfQfYRJScseaqg8HLRVV8kWkSU7/bnL+A4RZjEayWjIiP0RrQkKPXrw==","signatures":[{"sig":"MEQCIEQR2mBOu3TNif5IhSpDISQL4GoRovalnAWh71X5a3SeAiAAvmzZrwAE3heJjQyrhudrlSIdB+zKpiVEjWDhsXO2sg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD31TACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqqUw//XSjkY0mOujEx1onfXiOTN+kI4BFlHxrXCumPRx0qfFglaA6Z\r\nowHCU4V0c2agAnPfbdH+y99kbWtue1grMieLSgrdd4peZt+yR2qXCIP93Pax\r\nogxeYQgu3mMSwo2obDO5MG7Ek8DYz19PhuWPXJwwIdbK78knKVC70UGeV52z\r\nSSmuc/8dDjQ+HMk94d3/A0JpD0WBzCO5yaGmLsOpbJsBJ3XhBSai6BVKAvas\r\nhzkh9ag2ClPEaGNixmRUVTUAYbAk6BHqRaptExZa0a4mSQvgKve8N1/LsuMO\r\n+4Pf2qeOEooogn9MtYzENUJ41+Vn0FlUwyAAbaAJe6m1kbjy/D8y2eAvtpnz\r\nQrElrU5kqhSuQ53MstC7af7NhWXm2+upW2OaOt480547O063gz6+jWY99KJu\r\n4PQIqzlvlOus/wMDw/JEnGFjmGI0CUu3S0/ECBh9gF5bYVTyhYnBi9AjbSrh\r\nnXfABD/dlp4ayST+wJC171PfTCcBoJ5kuS4orZAwQU+bxwR8HFfEPHanbTuX\r\nlM1MZ7cgllj7IMGw/w80mxf4xbp7QJ+YVhDQ9NRa+K05/CLtvFdT10OaBB3K\r\nQQoxOSa9dQFhlp39NPjvmJFPS+p7vHXJOX5OIxiPj3QvRaSb9kW32xmnYpTp\r\nXra9vBUfQE607qM5sMDEPTn3IETFrOASLug=\r\n=DToQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b2ddacf73.0","@material/tab":"15.0.0-canary.b2ddacf73.0","@material/base":"15.0.0-canary.b2ddacf73.0","@material/animation":"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/tab-scroller_15.0.0-canary.b2ddacf73.0_1678736722816_0.10182582902667492","host":"s3://npm-registry-packages"}},"15.0.0-canary.989ae2ecc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.989ae2ecc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ce22948e40c75cb8fba30c5bb787b80f410f7d9e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.989ae2ecc.0.tgz","fileCount":51,"integrity":"sha512-k83WiSMUL/4Sk6gw0JGcgZP5q1zoOy8pmKCb+m3dWvsf+HA+nIy4HFdbnfaLqD9q/paqfoY+cy2sxHZ+Nou8vg==","signatures":[{"sig":"MEQCID0Hi2Icu5Av9yBTOsffSuX4/BMxUSAR7GuXVT5Iw94MAiBIFGyTSvWFPdh2YRp9WLNcKD4ez8iWGyd3XHtPmL4AUA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD3+NACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoCgQ//QbrZLZ7vVxEjuarncdTZRmSpV4KHc+r1KePirBqlxp1k4LNp\r\nVNwLQEVmopVL/DvRtRM3KUXNmdZE4MmYu8oZc/cz61qv//2Pr25z6jmAzViz\r\nqsDCe/cNGbhdAeYJ6oeizjNgue1zQed3QvOTzp/ImMhhXs2ioLyqtTjCLZ1Z\r\nX0P93+trSoiu7/WmrjAIfkiT1irNzddgeLmVvKkjgJ21SOfX3/GQTTLZqWHN\r\naH5yhWRYIeVnkWpruWl1/pNqBu+XBQUjaNxiivTa/uetuqPA4j1evAX7vlzy\r\n0bdl/2r8idXuisgS1IJl5IUNcWgfu+HmToYlATPtO6HHLs4XdSO+B4q6Mlqc\r\nZoEwZvXn6dAvIxkDXMsis9YJRGCmGr5dUrwbQ/O6VU8ApJ/akthYzS9m18+Y\r\ny4mpwCNSw5KzCKsUNP1/Jz4acsjlUU0/eBaSpULKk8Dwf1EVQt9ZjH9dMzHP\r\n+t+WsUArwxcoi6ocRv/yrtVoaw7JpoVgNsUBgUZC93qCNda2y5z95+8cUiNe\r\nx0eGwcgY8FnfW5KBcWBePQHxznJgrZ3tyiFa7pmke+SAqPohhYshghS2EfIu\r\nAvpKys3KqOmv/k4IZ8qJp/xY7fktMoDqjFlkti5oX7U6AAioIZBvT6q+WzX6\r\nLXaqGDZ+AHvhAMjfNxxVdwIGCdsMS12cXhw=\r\n=IATt\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.989ae2ecc.0","@material/tab":"15.0.0-canary.989ae2ecc.0","@material/base":"15.0.0-canary.989ae2ecc.0","@material/animation":"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/tab-scroller_15.0.0-canary.989ae2ecc.0_1678737293751_0.8939989456316164","host":"s3://npm-registry-packages"}},"15.0.0-canary.89c66483a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.89c66483a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c1499a3178bc67d9038986b9c271c45f3caf8811","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.89c66483a.0.tgz","fileCount":51,"integrity":"sha512-JtpVMNYlnCZbubJm7spiGrNbWBktz1oGC13AjmaH6geWjCO0wkp8GS8V2JjbqQAdqR9eZY2i/ImIohjUVaSDPg==","signatures":[{"sig":"MEYCIQCXD3DRqrxeauuihN0Bn/Ipzeoe3ETLmYe+yGWIxkurJQIhAJ+erkeyRkWYcp0O0T3SsBYRefVWfaPWfVoRyfvN9oiP","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD4UOACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpspQ//RkMWMzicbTP8K5dc6CTN7tiBNUXkXjiVynhYbZLoZWLgZbU2\r\naWHnC6oE3UtPoP2HCFrcJPFDAVDybMvOHPa/HMXwk1e19MOkkUaBXhA6P2UT\r\nMUlkBNVhYhOsXdvd3wGGUJ3UrR9qTHI1L8gfgCuGb7G6sRUwIO5LbKH/LxIx\r\nTbiIQKrrsSuPwqeZblKIlMWwypFnl1jlQkek6/TMFGkppEGvs+VvErrZt8tu\r\nxPwKzD/GFQmFS901Ye1cHib576/3tK2hjVLwsQLLKLOYnlc4nT22dfOoUabv\r\nKovqHxgv7NecEtJGdXS/F/Xq5a06hvQ+CwEiBl0/E5v8NoZxYbD2gRRoxioH\r\nnPcurR5UpY/ev6IVEHEmXe+H6wTNCDvyciQmHSKHK53WqGdJxwinGurE+T/7\r\nljfgJCNTJr4dw/AOZCGerL3ZxZXRsLC2ZNB9IAIvpvAzVN+Ki85/3pI1kJgs\r\nT2qcpzX8ZFaDtj0unNi19zSiUOfW8N/D6sotCtESX4o9YCV/sf0kt4no3LT1\r\naELNmQiX7hNSMGKxWksZ9MeDp4N6og5fPZ+NeMA1LahUqhxy85/+3/1H4eA5\r\nQNVBpPFLRsj3UKIrx65W2n8OBpM+iHg9fAcwD9aUmxfUZaFwGn80Sh2guegK\r\nc4O5fyXUWUSjGuxyvgfQQnZK9bLm/VqaJR0=\r\n=pZMh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89c66483a.0","@material/tab":"15.0.0-canary.89c66483a.0","@material/base":"15.0.0-canary.89c66483a.0","@material/animation":"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/tab-scroller_15.0.0-canary.89c66483a.0_1678738702726_0.8671312913374467","host":"s3://npm-registry-packages"}},"15.0.0-canary.6a85742c2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6a85742c2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b958fc45fbff038a3dbd9785ef4a936f29867df2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6a85742c2.0.tgz","fileCount":51,"integrity":"sha512-RoWMo8REqQa7/kQa/2t8iyYYxFM7qcgVinS8pvLw6hoG8u0vaj4tFN2lfO5ddnVdV35V9VmdBnubGe7ihHQYfA==","signatures":[{"sig":"MEUCIAsK3cFE61SGRRzwpGF70sMvJDR3X+r0juiORzN0rvbSAiEAinFWNm0FIkQvHuuaXguhYmYs+QUHuPMHVkgGlx16ZKg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkD+CvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmq1gA/+NHV4amvHMI6wsEH8byVHv9T9dHxFKf9pLOP7enM6uehaWUHK\r\nI+HjozgiD2jBOGRoXCcQ110FLmJLf4ynOprrhvq0Yhqo6tPja5/Iu9syV7iR\r\nbB0cn1MCkpQ241zJQC3GZ0bV6+NwocjWwdKvwO7YNnLj+lyKiCIfEwxHQnUG\r\nE4fQoewubM0LaVclDc5DkkMaAryIhabnuQqpzgGdcrv+EUackyf5cZpwowKk\r\nbvHUNnz5qEYlbEcSuQKwaR0tdMkqYkpfpHjZ3GDNd5kCrXrX54SS4bu4+jau\r\nhV3m3V15hnYjd0+ox4jrlJ6fqVtj7Jj8MQqKUvLVl4Gc9rslelK2PGrHcTQ4\r\nap9PF6Slcc/iHs9HpCH2CB6xKT1JmDnot03kDPCaXJDN2UzZDIHzDBVFErL+\r\nN836l96odTFexx0sGRVHyhIckuBV25KhTvFohbg+MxmEUtKoOTZZWAlDdtlh\r\nlo0M9HejHdnKRuNLDDP0Muf7rObf02MCc9ALdgz5w7J0MOMaZoH/csUbbf21\r\nwac2RBlYl0O6GelEYBLE5OMA5BsG1mh5VkaDgSr84ZeVgK84y5lQacHW4Fw3\r\n6a66lsmeCzImWOwPPeml73+ASRNzj29/ALM4o2CLLFrA4LhUksAIJfTOWl81\r\nVFs6dgAhLmXezxrM+xYA6CXXssuwIohCQ/k=\r\n=jLxi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6a85742c2.0","@material/tab":"15.0.0-canary.6a85742c2.0","@material/base":"15.0.0-canary.6a85742c2.0","@material/animation":"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/tab-scroller_15.0.0-canary.6a85742c2.0_1678762158967_0.13630068407395912","host":"s3://npm-registry-packages"}},"15.0.0-canary.bb6cd78d5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bb6cd78d5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"92c266fbfce4876d760f2843ace593a03b66a390","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bb6cd78d5.0.tgz","fileCount":51,"integrity":"sha512-H7p6T7hSHsPCfz72qJyUHbh4+XWKdaEQt4G3Mv8N9wKjciETI0Hcio91EY3RWfaOhYla8SaJxjkDEPpkimWSow==","signatures":[{"sig":"MEQCIEetVOsR3bvq8O8Seoyt9TIwBWohEaNEHYHGbAeGe9x4AiAhL+PRbP4t94lU/rLV7QsYVd6sq/Ttk4d9P0rJP9eTZg==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELqPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqxiBAAnBl66vTg4LFgWL7oby6ZHYYWuybrPHEDZJcpLxCCaa03MHH2\r\nX3J5Szq7Ri2SToy+nknkCRK620do5KGTT5WSt9wMEUmfh3Y1i5ZXGcrYs7SG\r\nIs/zcoCud7QQEgU3O4cO5/1sDNB6tPSjbzb9V99NoPTI5sLs7GgIGPiH3uAf\r\n2QAEXca+g3JO1GxwMidH+LtnE1+kxmb0alMhX9YG8OYG87/5rjYtTWKzmApr\r\nTwgHDMV8MNDvmOizBcZqw0m9adXVBCnhUlSQ76n9V1EC2rEke0qxzxP4saaR\r\n26oVyQeieInw7BiQYgz9kjxgS58AERxMrPFhA5KoXcwHinaY4C/SXqPldD2t\r\nnCt5glyLqS1nPzBGnpAwPcUp4B150G5wIRUv9Z/SZd+teuInOKFFjyxx5wxQ\r\nSDpE+uIaNyTUG8SyU8rc9aI9YRfju0UZFHw/lZFPLqcDatYdB9qirmmjEJPa\r\nPHGVVCGayfa4dDL4NlpOjdjVjKJGwZ/zzEDf4tJWEQSBEhHuA2miZZJlNDjo\r\ntZImH9OkunooGNBblreKIB+wVUK62iqUPbnqqmFzJpLMk7SmBkB3onTar83t\r\nArR9beEAl36ykRO+1+5I1l2+ryQVnjeugoX6LJyUCWXyXpJfVqDKJMmOpBZn\r\n0FVI6h4NcQOSzdg/Y7b5QfU8Z0w7LZpMrwc=\r\n=FyU5\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bb6cd78d5.0","@material/tab":"15.0.0-canary.bb6cd78d5.0","@material/base":"15.0.0-canary.bb6cd78d5.0","@material/animation":"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/tab-scroller_15.0.0-canary.bb6cd78d5.0_1678817934830_0.16555052117309899","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f94aa37d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5f94aa37d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9568100167ab5f25906a2ede0f890bb5851cbd42","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5f94aa37d.0.tgz","fileCount":51,"integrity":"sha512-SDl/K+BzriFzuzhnF7JFey7mVM9r0/pJThIlnhAdl+G20Wm8y3k8an2bA92J9LAEE87VK6x4cG+A14imcKBvgw==","signatures":[{"sig":"MEUCIQCP4kuPPwUjF8NZnTtfnMGprZidF1pghIA71hVaviCWiwIgIltCQBOVe0KUbBRh3HoChJLkOteOKsnSJtHIwjuT8uI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELtQACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo7txAAjGK+tPKmDaa67YanEnzRX31OyTzhe8RlcqvQaQKOb29mirDt\r\nHNvEPVgDuVjKK7w4SahsTvRQJw16chiOFvDF0AeJ8iesoWKkCwOOR1tHKFSh\r\nxynwzbFGDA1y2fgj6zVnZJ+5I4LSzlaPLqulAcRt2n50fDd4krU2BFqNCCfX\r\nmxLq6aoFpxpITyqbKq7WdGAuk/0V6al/C8tWZsgD0GDy/DMF5ngdK+WQa3Mr\r\ncSxAxln+EYueQYAH/XkL6JBYbWeXbXUjIt/MUsjJABudJsNkkdH4HpDMxA5H\r\n7wrMjrbfbjRgsnRx40m+TWuGxyili29PVgPaa/FcxgnYaUqmDtQDc92UC32i\r\nDs9Fi1F8CtkIprHlJhFFfMQeFgsS+cBSJJA4XftE05kw98DHPtBw2OFAGF8W\r\nJjkM9B+KL4HOVBaaNKDSZ+fupb8aZXJA4PymkOV13ZDTBu27TAMNSLhJ1dlI\r\n2SL9TYZSQHt/jOgHzm0dxJ9UPokP/pUz2uFLhFZXOJkAx3EV3SOJz9HE58pm\r\nuA392nz3rIJwodX8vRTE5UN1P9fzdgcg+kT6543OuSgcwNfoqxMEYYFev2N2\r\nQz4NrP1RciLhdr5sFIqcc+DClYl9XD+GFqyeGjkdaREd6TiysEHY7NwiKT69\r\nT5gtD6kzopEVqGc6bAuxHGuzhrJorkdQ78A=\r\n=+ZFL\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f94aa37d.0","@material/tab":"15.0.0-canary.5f94aa37d.0","@material/base":"15.0.0-canary.5f94aa37d.0","@material/animation":"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/tab-scroller_15.0.0-canary.5f94aa37d.0_1678818128037_0.31733644874170963","host":"s3://npm-registry-packages"}},"15.0.0-canary.1bd317240.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1bd317240.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"49de9e92d2cd9a1f2bd109ac9b3826aa92a1dc42","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1bd317240.0.tgz","fileCount":51,"integrity":"sha512-d7hnPLq0eO4a/SjZgQJkPUimjCOE8adTL17+9jrCk0PNXurSnufBmwjfy/+NXrFBadWZPANlTaXg3JKeUu3Byw==","signatures":[{"sig":"MEYCIQCGdwwJDcldhSAAaQGZLXDveFsduJQ0jYSb5hziksNGJgIhAMaH8iZz7pR0tup0PhjttSnO/p+HYZAwMXud9hnDIqwH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELw9ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqgCg//f298S7KjDKTOWYq4iLb0Qvmg1GwdjEYQ9gvKK6nQB3Gz5Dmm\r\nMuCW7RimQL+KXVkfmaOcDhuo1qpq0Twdcgw7NGKZV6Z+AECD0ivUhmfupx/D\r\n1GcPnDLUc9aOTqXCz4dEOA9aG2FOavCeuLfN/w5sR3Feeol/Ja+GWja//59U\r\nc+YYDWmA0XoENH6hpwGHW2jN2KcYBX2v/4irTOLyxo9dN9DpWrt3UqXgSPAu\r\n2iALfZ6/mxfzSRjqM6Sn9Edfp9oN3/oKdn80a2PSFDrYsDOsNKW2FK/FOSKl\r\n64k7wDQq8n0cokZk5Z6zy4qZm6Nswp2uzkDZFise2GqB/Xkme1BxSQ/xELM0\r\nvp7G1k/YY5ChWeaKnpKyDtrv3sV+2P863tBZ59tsJnpf0OlCd3X75j8N/VSQ\r\n6Bu79i2S2bPsxm4CaWDsgCNgpgJuHt/9u/namw1S1Yhsaky96kPR91Mm/YnX\r\nXIVLU8ma5lbHBUwcHxVQ9a4CaoIqenUDJ8euHYFZJxMUNEyHTHDnFYmC2lMe\r\nLJHqO+QKnovJiZ2JzDg6mAa9dmxaNnp0TEDFcnymfH38beqEdYbK8lha+bHd\r\nX9eM8RkSaCXLG4mmU+rWL7CECr2bk+bNGZITC15EQm/OU1iaJVh7Ki8JG583\r\n2ehlOvkx4rf/rVT3JAMlQhT1cJnKr/U+pi8=\r\n=udNu\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1bd317240.0","@material/tab":"15.0.0-canary.1bd317240.0","@material/base":"15.0.0-canary.1bd317240.0","@material/animation":"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/tab-scroller_15.0.0-canary.1bd317240.0_1678818365343_0.8920511964122411","host":"s3://npm-registry-packages"}},"15.0.0-canary.d441d2a2a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d441d2a2a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"42757cc6b3b32ada06a91a841b0571c74af137cb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d441d2a2a.0.tgz","fileCount":51,"integrity":"sha512-tGrxCMDPRGVvmRTPpsigTVZCsOZehzKR7U3u0CFq5o5ayard9JKKvynaSEDWBx1hUyguK6mdfCNzD6XRY4fhSg==","signatures":[{"sig":"MEQCIF8eNrXZxRNbekJxAatZ0hdVJnnj4GO3ksaq0VBwxb/WAiBpLn+lSkIdyEBEgpf9z9jSqwKCNPIK1RJd3XQui2WSow==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkELzfACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpdkw/+KR6MHFHF9ocGq5sTYzTchIKOOYqrWMzwUHwQWDvOHV6xaN8o\r\nwMxs584PmoertPW5topF2J5nsEPO7xFCIvmN98NZm8ZsooR3CqNnAX09Pf8p\r\nTdjt/k3G16heyWuMTubAaXTbiqlQeeAmNxxOOfcYxcMkcDAGRVQGlJ+TM3dh\r\n8NzOn4Iml3Jl3uElBjKlWGrpRszXjuIo1YL7+WRAS+XEF17LyS8I54LBcqfO\r\nogJY1/1Rq649wqLKwhQF7e2PLmjjkLJ3et5uKzZFlKpqyfQEdtDNU9KgtgPp\r\noq/FZr50/kmYrjR2Z3+ewlaVYtoLoDVMRptrJiq5489GYJ9t12CRs35N/sdh\r\nXpcX63882eBMWyGLVRRDR+iHK40T3zqsPhts0GnYxQ+QjhkmHUyX5PlKUTVC\r\n+Si5Xe6HZrnWBgx57Lg24V+ml2pggylXH+7zPWuHNGoJa1pKdejompuz3MKM\r\nbM3r0wfVrRxWVuPK9LPlJPzj7FnyADnYDl7V6OMMUU2BVUS3HWwzJa9dqsPB\r\nITlT52Np4YZII6RWpuRaBU1OFScSGRXq2FEul62qHHkCiRFQ36DoLjPrytlc\r\n4Muc99JI0+EXz8tHQfo0Ulg5UT1eVCii69AxV1lPxoFknapIQN5M+tSSXue7\r\n/EGpQl4h9XaaHJsKBWvhdYvf65GDmf+qtVA=\r\n=Sfac\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d441d2a2a.0","@material/tab":"15.0.0-canary.d441d2a2a.0","@material/base":"15.0.0-canary.d441d2a2a.0","@material/animation":"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/tab-scroller_15.0.0-canary.d441d2a2a.0_1678818527632_0.7501890911755027","host":"s3://npm-registry-packages"}},"15.0.0-canary.fff4066c6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.fff4066c6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b6342a262dff0808b55adf177ca2a3cdd05d4374","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.fff4066c6.0.tgz","fileCount":51,"integrity":"sha512-mZBOaYJp1wMo5BhspqZVBjn33Og6O6J0bLJ0va+P2mIb7cGi8JPdZ+9Bgf5kiZKAkDspsVmXFArVlAbqHvhjIQ==","signatures":[{"sig":"MEUCIQCrYh/hOldwygskBGvEBPf+H9zgLhHzDejozLKA2IRrcQIgUGPfzf/jQH2Z6tljKR9oHcdR/hRUuujo40iXcq/TacU=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEL0IACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqQeBAAgilbHOvTpFbqSZIMPpAxLCkwTHYMjCth90NoZTbXB2VjYz7y\r\nXyaf9fbnL4Z6YfJm9TsXHvNfIwh4Kjdqnf5N1PmpRBMmHtcMz3igs8i40TVy\r\nABk9N5Ux6Mt2UHfQwhPpH1j+mYZuEeibzbe8F0h2dkc3KLU935Ty8h81n7fK\r\nIYNhWfhjWr0QcaVaf5CL2fUvMH0Oxx/C1hEAsc6qXs6aEudzZgmgz/c6oDXX\r\ntWyTO0pDIBJ9wZP4NPqzJ1xd2Rlb4dKgnCEp0Xtf8fxXwjA3lVEcE9DYE55P\r\n0r/2xPsl3IFXo/PoH6n9IcTlpKRD3TBBMRwlP29sYpeWe+Yw1Hdadv3LJCdS\r\nz+RCzLvGEBPp7IQIrFeQV/DH8Y/lK4jxgp+bOCrcs/IFLFq0rX35icTxhXeQ\r\nzbUHHlmLfppdzIL9Hnu99UhkeB8yC2xlaWCsXXQzj0p68fFIyFabqjTTUU4U\r\nD3lifUNk/6ZAMsNC4/JxE42JE+c4K/LEiUjnDhOBxKJq3RcFLtUCNjMYWTUX\r\nKSOlFp43oqP7RRv6spqmtxdv549Gk8/zUmeCEnZEycD/HArxAJDvesF13zxT\r\nh8ifk9rQguLBEoJiM2YpI8Ez+X99cJvVpzRzHiS1Kvwxl2MJjibOsFaRZgC9\r\n3PCWnW2MO9jqElB3eOJExN7dXstsAoMLCKM=\r\n=YvoN\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.fff4066c6.0","@material/tab":"15.0.0-canary.fff4066c6.0","@material/base":"15.0.0-canary.fff4066c6.0","@material/animation":"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/tab-scroller_15.0.0-canary.fff4066c6.0_1678818568097_0.025949667808530252","host":"s3://npm-registry-packages"}},"15.0.0-canary.87809c710.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.87809c710.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f68c0d2f450ec7f5cd6a943a47c41d12de9b2029","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.87809c710.0.tgz","fileCount":51,"integrity":"sha512-RLEeUlcBZ53r1xFpv5NQXem7YXcz+dEwi5hZDSdv7wbXotl9SkSN6rZNXDhHfR0X0CXTh7FiqEEhg8bQe0vyYw==","signatures":[{"sig":"MEUCIQC36K3au7uXHybB4VcRjhF882EkxZDn9PvvuLA7DTqgqwIgOZjGLRQyZKxfTv8RIxpE0KSipKMIaGxpoyQE6d/Dnog=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMDEACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmoz2w//VPy2MSU1m/Cc2H9hfIArzZmbgLxXfOCGkGrZSE1jmATQq7WP\r\nY6BqWPD9HMiDKUYPA6xel4NAbZxJnDTPr89ZVqZylk1Mu3OwNrSS7hltcRwp\r\nB2w+N6jRNbrOWIkzyqVzz/CeKSQK8AAGrRpVcwCI/teS0/Pdgb6FlL+KJ3oE\r\nX114iOKSkYi3W0RGhtG3YBjQqYycqSwwtTRwuoaNeod2wnycQxjP4AgpeYto\r\npy1d6F4hrrSwscMvuVVS4bKMQtUfiPWuu0izej/s0ZTtT13dysC5nTvj5Zhh\r\nUNya/dn6189VGqnOpT9AyTZWlXFbWSx6AxTsY/BRPXwVQ4FQIi/IIHp+1G+G\r\nEWWIHhVGIMwV+aqKoiPdy6JWS9E5ciQUJhUUAMw9JCg/7ViE2zr8U0bTH9cU\r\nKNFFvfbg3Q1I9Thash4ntUofrxj6/Igg5mMeumIPOAV9xWFVqizC6/uUYb2h\r\nDRMci+dxw4xoxK0BmLT5LVEomftAAS0dUXF6Ry+AE+rNGDNd+9GT6hVGLonJ\r\n3VznQSm9ZtUXPxxLCosgIhmQ4ZABDE+51qbGgYNbENc90AyaDRnYR9eL1uBV\r\n/ygWYDAiYBs77n1H6xlhtXIl8gGmTOIhrA9Nru1UScid/gM0KqS4ac/H3TYR\r\n2dB79h0/5SLJ1zFjV0I2wA1AS1Yzov4WySw=\r\n=BB5E\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.87809c710.0","@material/tab":"15.0.0-canary.87809c710.0","@material/base":"15.0.0-canary.87809c710.0","@material/animation":"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/tab-scroller_15.0.0-canary.87809c710.0_1678819524586_0.4861639700647331","host":"s3://npm-registry-packages"}},"15.0.0-canary.48d30012d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.48d30012d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a50ff51876b037867198410b9a6a8684df240741","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.48d30012d.0.tgz","fileCount":51,"integrity":"sha512-+nAuZ8j2BeGxj4fVbrHsgYlD785sqgahj2G+i4EbBnes4UqF9lSPVj7eQA0xRE+cjIVTr89qjsA55Wz/KZPjsA==","signatures":[{"sig":"MEUCIBN55Q/ynSdH2vIZSFCbRSPfEvESWz0XlTTIvOBV2VL9AiEAtY/oALwxfXi047cc00y/Y2IebUmv5YG8VrUXX8x1jTk=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMHIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmraKQ/6Aj8ceKbx0rdkMx6EBijNbKSicbFx0yg3ypP+VFRHGejlFfN1\r\n78gcMtmGCfb6/xRbUDuSCkNpKqmSQ5axPB/wQ/zn6+dArGXlLzT729hn924a\r\nsnVKy/z6WCRfREGlDCzAQWG7iEJRf05jLRCkbmFHc5cFWqUpcPeVqzquWoS7\r\nZpU4/YKyS/NxYjXdY99Y9VeCJzOgsfAjX9ZymdLZlGrqB8QcM8wdJPpUoE4F\r\ndSBwlRxOXPKfjKSHi6IRv7gZsOFtDzouvEXpKkme6yT1twi+MS9i5orrQ7+j\r\nh5f/Tjsd/76RFBD3oBu+5SEBNvZpPTLmHhc6gfymi+zAz8M1G0kXwWY+U+L8\r\n/MLQBmEtmUGz5eGiTOI7uVVq1papFG7GJkNDBfvr2Fmkh2KX3KhzgRWhJZCr\r\nAOb95+jlfOnhF4TZaasiPB2ocU+ND48DjJ4PKCy/mc0BA+b6t4abVEbhJOKP\r\n5w8Rw8N+A4rP9mMDGm/q4zNelmaCuF0UCzrvNUFfw/KgE2HNJnb96IpCUwf0\r\nkpbFguu3yCgtnWVnKq95W/e/C6A+kmBh0+Mz0OGiK8JfPEr4Zqdc4tmLWVq2\r\nqu07crqKTKx7QukbMVHFycXnOE8fOVfvxoAWep2Q0b1dHvcYIcUFWpqcfNc1\r\ng+6iByF4HDhsqIP//GTFEebwf870yusyeKE=\r\n=zKcZ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.48d30012d.0","@material/tab":"15.0.0-canary.48d30012d.0","@material/base":"15.0.0-canary.48d30012d.0","@material/animation":"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/tab-scroller_15.0.0-canary.48d30012d.0_1678819783954_0.3538667680989054","host":"s3://npm-registry-packages"}},"15.0.0-canary.419b23cc6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.419b23cc6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"60f3f5c4ee9f79166231e251cc818bac500f1037","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.419b23cc6.0.tgz","fileCount":51,"integrity":"sha512-83diVfB6grXreKt7KlDXJFBA6TquOt/pToxC9psucRmfU1fo+330RMyDVxyW/6PU599TR3g7sISXx/bZmh+leA==","signatures":[{"sig":"MEYCIQCeN5HRRbeN+o8MeLLjUY5NeC3UP5AJhEUlVQFKdO/4JgIhAI1wdCaap3Pb8whhXkL7o4CVbc9EJkbOchk68fh5qQTd","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEMRhACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmodEw//XlJzbtKnGo7yHIO0JvGLqWyT1/hTsWMlo4MPo28stfCefkDP\r\nOYi3QfXTkMRUWnFOQWNqIKRFliTX9vxUgwr7JcInN1diyV9TomWqjNaxlgWv\r\nh2ypPPSxGqMnSbz6lETivvwdiR6TmgRLDNmgH4lVm5chZJpQ/BZV178E8/g9\r\n/Jw2J/Su1pA4iGVRX77moUnT40cPwgpUc6cdrxTIpA3Sv1O1Rr+PY+I8iCc4\r\npTiRexpt+9/UrGpMA7OAnfqtjqhL/LnYe3hRvqQfKTtnsJLJLsl8sLxAq6jV\r\ny0dfG6ahllNQxiGzEIyNT1Rrd29X2lGpafqGBkmrWp6Q2zVsaPBzzp3DrloF\r\nm10Rmv1AI0+X4WS4RwaG6yUfeLjvRVtb5INaLuzL44coldyZH/Wl3JocsjH2\r\nep2Dts02SlRn4kpFMXaLlk6Y9+vVNx4m2tJJXUaC6VIm1UToyRPmJEyDHxRj\r\nJepE5y9NelwQUwxIOxx88szQ3M4WnfyZlnz+eVft2QZsR1nucx6MaJB0aauu\r\nHaKKWeYuZtPEwdFKuYXScZkbxhHD29etdo7DjqihtFYC1S7riV5Ohd1gwa5Y\r\nRGDLJfgqSHz3BWqZEu/1V1+wgFSj5D+TW7nSsJrrsBT4aO062ALRiJJBo78z\r\nZa7lbAKfBzoeczSPKhhNAwBXpWiaOPTUOJE=\r\n=jTAs\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.419b23cc6.0","@material/tab":"15.0.0-canary.419b23cc6.0","@material/base":"15.0.0-canary.419b23cc6.0","@material/animation":"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/tab-scroller_15.0.0-canary.419b23cc6.0_1678820449007_0.7034014568400517","host":"s3://npm-registry-packages"}},"15.0.0-canary.bf86521f4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bf86521f4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e937b9171ac66dfdfad3e0154677aa61cf6070fb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bf86521f4.0.tgz","fileCount":51,"integrity":"sha512-A36uo95ngJ7bbwWgujNcUhGJbrOJ4GgjnK5ykuBqpIB30X7BTHHDdSmRaaPt/xmNcxwilRYF+R0FlqMO69QtDA==","signatures":[{"sig":"MEYCIQDZFJgBHehPSRUbjsFNgYlgwX5+ZHrYd8Dt+ALixLYOwgIhAIxULoaR8d6LmZJRgzk6DU2we1yhpmXt2K483TH6DIij","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQAaACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo0Gg//VSreWw3ae4ycoByQvsr3pMgK/HUU1Caq7dEgs51OZ+t6SbJ/\r\nNs4w1VvUrMx177lJi9JRfwSM1tROtGHy5k/83DVh+XxIouDIkW9SnO5Fp3+3\r\nk1bEL4LQj8HzLD6l9iEhzpri0iN80ntgilQ9UFRSPCKCl6QOv6DPmllh0WHu\r\nOP9TVejoHtaHOV1Td1vMs82pffU57/81lju1LGCdMQp4bm195QiynfIaSN2a\r\nrLlI5ICXhHnTtrI88pT9wWan38BVcSYnGpIJjIRVp6COmWZchX7hjvYg/Hdd\r\nLmP8DqW4bWU0s34hUSIMNxF22/EqsJaOV19DXGKghhB0gN2fkOwrUcKidtCu\r\n+5Z8eMSURzVdPALlxWs+GG5sEoWGntbva0sGU9BQ1CUBWy8WkcGaixe28viX\r\n7M03sum1zc8rNDxOWZOJlrzX52jLGe89df+bICbiEcQqp2GPalOudDurDPaY\r\nsitZg8iYQTeLe8E2ffHcmz8V1F+m+6RcCHHsDTpS1Pwu3v43OzHiuylxIMdd\r\nSAvRN79pBURogShve1EDSobYnN3I531E2nQO588WkH5pq9V4Q1M+CHb16vPK\r\naYxpFU+6lRihPQPS9xSY1Hbr0GJYg5sMBeJ81yXLWjEfq1J2jQ9B7evKRrgV\r\n0+L7Gq5N/O1xN8j/+Wb8fHf1jA8s8t4cui8=\r\n=D+qD\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bf86521f4.0","@material/tab":"15.0.0-canary.bf86521f4.0","@material/base":"15.0.0-canary.bf86521f4.0","@material/animation":"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/tab-scroller_15.0.0-canary.bf86521f4.0_1678835738598_0.3878617977819545","host":"s3://npm-registry-packages"}},"15.0.0-canary.11f3d280e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.11f3d280e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e8b78f0dc4074663768e399ec8fdfe46af202c6b","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.11f3d280e.0.tgz","fileCount":51,"integrity":"sha512-Ld3EZIj4J5xQFLpEl+1sWDZ/b1Dxld+HddEmKOuOTGtidAaixUkUx1dNrcoVEVqcG5MfpJ8Kpb+KjefY+FE5+A==","signatures":[{"sig":"MEUCICxUGT/08PhPTjT3XKDAjZfSKq+/9tOw82q4z4cmkJO4AiEApDlSXu+JoJz/D/CIIBEV1/aqmtgk1owjDi0QXUPgw0g=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkEQ2bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqfyA//RlScXDUj60Gj9QrARYRzUL8g3zvP1i+1JY3AgNv1Ynk3ZHPz\r\nNT/KVVlV/utqLZ5CMBFA2UWtVkpWnMqwsfxAzZQTo21ATs9L461DQvGlRS5s\r\n1SODDGrYbXSNnUBt5gGLICnoPkPorQvAv259EtsIbYwuWcksSf05FXOATF42\r\n1XGvKYvk2VZLL5PoGr8M/L3sQZSlbp45ZqwL8CEoupEFYab/KD1QRWHnXuqA\r\nDtuhUklRQ3ksmp45kKUea7gf8jFqAD26nHB5CLDlyp7IxvLOcKsoiQRFzUXM\r\nL7Mc12Aiol32TTGRG4wiyTb8DwL24jy2jQ3RzzRZOC96AwJVRTAYOLqvk/Rh\r\nIQusUruX7nsf1uppO/Kae3/s34xYUgKB6TjBgKmNLZNUnJnm0Slj8vBXmOOH\r\n3CXnggApkkhrk8cNTWHT14OKDfS+YYrRafDqTu6IH/Da05m/mXNHHLAgtzF9\r\n4KfCOTnPejQC67dY3XiLo7mFW7mVXlNwfa8KFoXZcamTMVSti7SkdhbB65HI\r\nDA21RXXFlRtA8jCbdhXh8xUu6bFYSiIa/Jig1TcnnVwx5Lm4l8eiBVCF3Uaf\r\ncdzUAAdYVN3S/ZPiEwlT+d56cFjp6lgIXOluC8qzuRgLdNSmep2KKK5JWzrD\r\nEalo4YTdqh2hYj7IJOIuGn6jkKByGcw8Vsk=\r\n=oYDi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.11f3d280e.0","@material/tab":"15.0.0-canary.11f3d280e.0","@material/base":"15.0.0-canary.11f3d280e.0","@material/animation":"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/tab-scroller_15.0.0-canary.11f3d280e.0_1678839195324_0.5861306125342995","host":"s3://npm-registry-packages"}},"15.0.0-canary.b281a409a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b281a409a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bf2de7ebc1e0bf53550299a79a00473ff71090b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b281a409a.0.tgz","fileCount":51,"integrity":"sha512-gsl6ecwx1cdenTYLVrL7ZlFqi11RbJqxTqHsfsGK/F9OytwnSETl05rI7yQx+9E5vJ6erXQq8LVkQy7eSk0xrQ==","signatures":[{"sig":"MEYCIQDgBZnkMHHMA17ZYi9hWmtPzRE2Mzs7gBX4kG6hVKqFnQIhAIuv9Gs/EXTXY+McJp/B14FJTQtHjY+nNVyZTc8jqdEz","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGdCuACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoSjA/9HJHhR6twTuX8F9s6M/ImyUc6ilKO3un2vcXkguCv2sOptcIn\r\nJM22u21Ld/046XoXsT2//xbZFcvvPgAcz8JEKPYh/q01g6oDLEU+VeF2PcSU\r\n+O5WTExucW/eo4tqaNr7buTzDxJGb8O5XM/TkrnCc3m8ZYt0sWS95fW2dLp3\r\nsrk8JUXcoXnldtGKHUNA5Y+Ot4k/nC1dQtjee+kNiVM64w83aYtdZrMRnvja\r\nHcDoYxhviVbIkiMzGqquSGG2gbdvbONFcbkBYjQx5e5pNmUzgGfqBKngRA4/\r\nAKXpwsZfhK8d6pud3z80v59G369ws6Kzj3fG7m/OjlExfmnP2eZtG7GgdKpt\r\nnp9yb56wVwlX/yCpFkGE9l/UJ5bqV5jFlgNxPsuw97RkIee2aaRnOTbrFptC\r\nEiQzhE/fEuvibDFg1Ljw9l+u1AqO8sLpvofStBisRMuH0GTtqC+LjNFzxVvu\r\nCgX3D9TeDZEnRlZvQjBsvkrEIXmZA4IljCJnwUwbEsKIQtl616mjH5d3B9c8\r\nLvrzTveCUHcUioJ4hUdbvEr0lbfIuByLA6dzq8bTZYsBGZNklbiYdSoJBoM3\r\n6ALs4HErx6+YkgfI2EojMGDWr8tKt2S6c1AJ8qb4heW8hVYiSTMNLITjIQkj\r\nyo9JoxrSmlnB5f7PPee6yneiRJ8R4NETvBI=\r\n=Jept\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b281a409a.0","@material/tab":"15.0.0-canary.b281a409a.0","@material/base":"15.0.0-canary.b281a409a.0","@material/animation":"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/tab-scroller_15.0.0-canary.b281a409a.0_1679413422149_0.43990073071739966","host":"s3://npm-registry-packages"}},"15.0.0-canary.39e473690.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.39e473690.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e4ed74f31182c0ee94db0bc8f296d6215d20908a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.39e473690.0.tgz","fileCount":51,"integrity":"sha512-BcfxQjY1hnkUF46btsAbWUJEp+Y+gPlYRYjT/rT75GuqWhydTnNP5aWvn9cYj0sr7ObwXF3bzy5NET2EtyaPdg==","signatures":[{"sig":"MEQCIAMMCuzZudt/UQHgTk9VqoMw3Ad7KIfvGk2iJEe3g7AgAiA3iO4nUVUThJ3DfcREs0tC6TwJkFmeSbgkIHnUmVfmqA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGe8bACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDDA//TW+xST6Yw7Z0MR7rWmS0CqhnOg3B5fPikhPnlPfs1ydbaJ09\r\nYsvDXrPRIAU50H2D4aAZEq6TL51xTnI7IIG7GEqRE8uRKioddyqk/fzN91PX\r\ngBBiA2eVskx7vxM0d/OawW6jNwatCLwtzbqBEZmp8aBMP7CRs0tBpQ2bge9C\r\nbJm5uBNBqbwXvwVZLHeHy7Rw1r04RcBU2Qkl+rzZtgwADx0/5I9vYMZ3TZrb\r\nhHSpSCk3a8LKrb51DRPSg3U1elDes1lgXvZsuDBe+dmNqIFnuj99XOZpZ+vO\r\nvUjN2NUTOW3JNmSDXcLvXZDkwetmZqmrl0QwN9A6/k6qmnauhCEa5F4dQykd\r\nUyK9HZLR21wlEL8eGn16aU5ghm3eWa+WVA6xFi3Cj4aXwK/InoV4lbftUqTw\r\nO/vg28e4Qz4U52auo62LHNP+qXO/+tDT3EnVi3cNnSRhpaBCgytE4GnFmWPr\r\nO2GFJDTroSG/PQCHgupnwhYAFfSAKd5gKwqgy6c2SpmS+l/li7wxG/gHzcQx\r\ngQ772VqSc9BJpdQKfNafWKOXYVsG00VAZF3A3r652gw48MXmO622E11ahHiq\r\npGj73ldLtx5sGnWU2IhQxLXd6GDLxAPG577g2llrBWKnqyLKe25jNNYpUN/k\r\nzjF+XWzfNmRS07wD1s5PCjF+6TTBicTtiew=\r\n=LBts\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.39e473690.0","@material/tab":"15.0.0-canary.39e473690.0","@material/base":"15.0.0-canary.39e473690.0","@material/animation":"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/tab-scroller_15.0.0-canary.39e473690.0_1679421211032_0.8289482093503855","host":"s3://npm-registry-packages"}},"15.0.0-canary.cedffb44c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cedffb44c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"16198d238b76141d95ea39946e16e96b3df3d993","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cedffb44c.0.tgz","fileCount":51,"integrity":"sha512-fFmYUrlY7SFj7I60eBi8zMvD/5zKCgS3xoN/LxahRufqNV1VSGJwzPHAljgVrQ+bxJBrJXXvog6j6ZLjf0SDMA==","signatures":[{"sig":"MEQCIEAVG8aDnK33ulnAS9NjMo8jvsHT2WUq6gOl87zge5YuAiA5QE8WlqhVmZUjJQ8QtObYrKEsPkq4DGBYAWfUDuqofw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkGfC7ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrpoQ//c6noLMytANcef6R66YgbL1AmD8brQW/9yWOtPhD5fxeKB760\r\nm0KphaTvGNORQrxwu0qUwhcjfVjFMDdjSzfFOz/aJX0JWKUa9Zg+7CEYn+pO\r\nKyot6qMXNoBno1wZ7tIfzIflG2mzBZJjP2cLdJZP/4xoc9R7Wvlz3o4FRXmN\r\n4ft3Hkb/q99DtKLtrbc5DwKABVF2vpAnecyhR+osGwjUmHwuJ8cUbqP2OhiH\r\nfIqY3LxPXmJPkr+9SXOpkBJRhLBDLj91Uav4Qgwa63CB2+NoErlg50OEak8T\r\npyLSZkZdDwavRCsNfhZduaZQIUrFRVRroO0sb96CTO+CxMNc9hwGVgDuzB8X\r\n7sqcfxNFmgXw++YY48P0mpWlQqjRzItMZPz927D1unS4GjIgkKw7tFJVFKzh\r\nDQ43GRejVDQuZeRevrlXinsvaPNSqqdHkRxvy4ZrwoK1CnE2NthEC65ieNyl\r\nBxyGM3lX7Z75H6K5/UvsUMhq4ADGkLGrj9j7ErJoVMZt/204I7K/xUT0lx5R\r\nrgePxP7wEGaekQzGE83KcZiiJb19e0fK3sfguTAu8IeCSxXXc4a9diz2kalU\r\nAupQix7Lj+CKFCgp8nYxCBV3ZjliWBd4xPtvVBbqhqZqL7RFS8xGFKty71Wi\r\nkezvIBCmZQ9RcynLRxWt+hoFnCFSa52yD6s=\r\n=heEx\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cedffb44c.0","@material/tab":"15.0.0-canary.cedffb44c.0","@material/base":"15.0.0-canary.cedffb44c.0","@material/animation":"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/tab-scroller_15.0.0-canary.cedffb44c.0_1679421627502_0.7138893083074715","host":"s3://npm-registry-packages"}},"15.0.0-canary.36a4cba99.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.36a4cba99.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1a029bfa7d42d48199e182ba4da3cf920d4f5e93","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.36a4cba99.0.tgz","fileCount":51,"integrity":"sha512-0NTNBLKsEe99R4SB32J3Qql5iHqcenQHr2khwb81m3inVecxWu9O6zD6XsatMC1iKjUd0QAqewBErSmRHC8stA==","signatures":[{"sig":"MEQCIHWqCjtlq975oX3ZHHP5AjBoKuHF5mQ5zHn/ft4byLQMAiAsbPEChjz1hx/sD6NDJ0ApHfe/CxUrgNWdwLEUy8KXrw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkIylJACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpVZRAAlEDZR5SjLhWbUNTDOgQFS59IPiUFoTvTWQqhxOxag9rMuj+I\r\nZ9fyP7fmWZ2owiiNWiNqL3sADymVpz+rKbZJTGhPaknoBifF0c8zhLg4qLnE\r\nw0WvRh4IimU48g8vviZ4Qur4BoQjLRefQTz9Pv9P4UHptuFqVwRO0yC0FLni\r\n+1EC9C9HDKjKu8GBKR3s2THsqW55KroUso8CG7fP2AbCS0kB+jIX1N4FmKI5\r\nk4u38XvmAftfmN7dDEnqoMzhjc/hRAz4cNX0jNhtooyCcNuI8fvO9WKun8Fk\r\nljaqjkQN/AZnU3Wp7q5I7lOP6TcXF9RFIKio6piBkNSq8lBkAHR8kfD6ylny\r\nZvKIX2jbxxravSm4tVfbx8GqtGyOmyAu6s5uGGrHtc3zSJLcqT9csNq6/HPC\r\n7Pmu/MF3aKBixAi1f34c9nDzRKJHvN3cD5oBOEWTSiDbHWctXlOIjYSFKebo\r\np4IBj/SU4sO9z027r1yhCZFwVCbsL8hYRD54Z6HjVQ1FvRi1ryJUNTk57VwX\r\ntE+7QyH9++i0jhE9IKVNm15xPp6oqDTr/xlX3BsxXu8SuSMdVnxu/mp0lP/h\r\ncSf6Mxzi7fmfCDY87hbBlCFNT4dIwp54qRKjscEPMlS70PZ77qXTyWvv/j3T\r\njekW4Mw3xkrK0C8hSoN8kAyngjfVw47qT6k=\r\n=aapK\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.36a4cba99.0","@material/tab":"15.0.0-canary.36a4cba99.0","@material/base":"15.0.0-canary.36a4cba99.0","@material/animation":"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/tab-scroller_15.0.0-canary.36a4cba99.0_1680025929704_0.4254988380474669","host":"s3://npm-registry-packages"}},"15.0.0-canary.ed7e82ded.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ed7e82ded.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ba525d620da7f05be697e3fb724c4fc41979004e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ed7e82ded.0.tgz","fileCount":51,"integrity":"sha512-U1Z5m4f/xVsBl6VGVcXj+VI0tcuzIeAHl9uLFlNAq3TNQALWYPxOGYRHVOiLbP6vMH0TDQBm3M8+KrFd/IyOqw==","signatures":[{"sig":"MEUCIQDwTnyzWkMVLzNWfc3mBP6ZS3OnbGSwYmW3rcNQWJ7/twIgN57XmSTDZDA//yy7tFolvbskMQsJ9tpdwJ6jUdAE4K8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkI0/lACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoJ6RAAn94Sh/uYsZXrFIOYZxk6+iNmh5QfXnEyikw/zc/0z6cgOu2O\r\ntjsXnDi77OvjEw0f2Z/vwrPgSdtXIfac+mxmVyHx14h52KaMgNBYmkguNQR2\r\nwrSXG1xvhVB7G2KIbV6HIvCvSUNUlOCpozBaPiEJ3V85Jp2wWRmYjynRTLmu\r\noPonWwMY8IFoh7+Zv42z8dufpV7mdk72KRQ1jPLFoGt4KmclQXVUaVcVjHqg\r\nfjEvlwexkdKIkMObAnvMtzh5X43pY5ZIlEwSUR6io02skrQwGIaGutl4mE9n\r\n4B+W0rTzlB/nCFcVLXfw538Pc6vOG8JspBQYdyJcdkkkPeQppnEVJMelyIzU\r\nCt3MtnZVH9l0XuJ+zbcDhNVlAq58NcJuYPsHPq+ZnRC5F5HcZ6KWBEEqvfci\r\npLoeRoUqQPG8dml7HjJwZBi71DI4+YNzzqwqoFzVVzeiMNw+5n1rqXpxkTbX\r\n2IHFGjOAqb3UqB1e+UhkcbiHSUqPdLqLMeTxBSzvSfofpcjFPDrFipZoFa5H\r\npZYJW3iBG0zOaWJp1EplTW4346M8z6NWrL/QjU15k3xsuSfoXvrO+g0Incgf\r\nGpbpwrWdJxyWRhdsSsJ3UnsyLOQ5fwdLI3elYG3Xgnz9vuEI0keBbtnIj0XX\r\nKXwQJfQEeyC+jZbVSwTOviUkdlr0vPQCLAQ=\r\n=hMTv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ed7e82ded.0","@material/tab":"15.0.0-canary.ed7e82ded.0","@material/base":"15.0.0-canary.ed7e82ded.0","@material/animation":"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/tab-scroller_15.0.0-canary.ed7e82ded.0_1680035813178_0.5998662951515412","host":"s3://npm-registry-packages"}},"15.0.0-canary.55093ee1e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.55093ee1e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"24acf8ecee963de758ec86611db0904b6c44247a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.55093ee1e.0.tgz","fileCount":51,"integrity":"sha512-2BIY9VcXaya3+VBRbXLQLHJ6dIh3KbPjfBBPZ8w2+NVz6LULy5i4+LXfilBgBu8YngB0f3TfyjARih/GHePcmg==","signatures":[{"sig":"MEYCIQCHXCMCr4Twn5EB0EG9k8lx17zP//5XKGG0de9vIwWQOQIhAIfQ6GRYAQWb9w/atfkDrhLzMFO2Wg8nAxowlviPBG2F","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkJIiTACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoeyRAAg3TFCFQ/k5wmQLJMvBoQkrwwPWx7GwkGLlcdL8/rya0MOAXD\r\nbwZMGAahv4uzSioACVDxtpKgwk8AucNF1WLVdaGZIS96dRqifJiyWtOT9nu+\r\nNjSSidYAzs8qRAEOxMHhcw17SqIqu0ZNRh6JzpVjT8pSlYI5po5yciF0DMJm\r\nOKswzfur3j6Sa2ffrxxsG+zjsWxl0LR6w4Vn0JcxcQIVtL/JjqoCwnzPzQjX\r\nhe0TeScfQOsk99hDaj5ykuyh6I9dphyMbeMZ6BHfzxYdVy1bUALxCNYeea0h\r\n2v4b6bWJFSWkxnTfWRG4mTPTxxvg3cPfDL96dOdoI5fWb1rzG1Z+d6zBh6H3\r\nGHqKlfx2flCp3ctxHMdhy27jo+4U9LBionnn/px0nxGSjTnR4+AA4kXv165f\r\nFm8CPpaFEpl/CKaOAvdauaViXJgnxWlUuo3Iq8mOBFlYdX0Q5delSIEaW5nH\r\nebK5QDMwLMG3kpB5EaF+tTb8CnfU94+bu+EBwLkJLZiVlz51WwbgDBsNUw3c\r\nPP7fE8YHu414IrviIKFuNnEHySl7vAM5hrKi1Nya+MZS3mGmiGYqGIGqx3p0\r\nXpVqsASOFp/vlxLPkhlr7witlqy/ZTEbevqcWMbMyjZYSHtyVDeBvB/I0d3s\r\nQJ38t+85CApjFJoQVgXATo1v6+24LcFCP2k=\r\n=OP8i\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.55093ee1e.0","@material/tab":"15.0.0-canary.55093ee1e.0","@material/base":"15.0.0-canary.55093ee1e.0","@material/animation":"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/tab-scroller_15.0.0-canary.55093ee1e.0_1680115858853_0.628211431780707","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c53abc81.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0c53abc81.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8069b10736d676cdd1b7eef25f4e747a6cee96be","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0c53abc81.0.tgz","fileCount":51,"integrity":"sha512-FVUh/U1AEy0J2B/kC+xIMiDDF8FMzVNKcvkSzWiP6L4rowqtjq/IKlV8cVztGMNPbgvZfhgQZizV1W9VwXbvyQ==","signatures":[{"sig":"MEQCIDMbe71idwXi9eeU3EMAbIKtf13C8sPZtCND1FApCW/NAiBZa2dp4CjHHOk93OhB5g9MSmkKpDV2kA5AUgZ4FlHnWQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkL3UjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpqAA/+NL7RNqWlatfPvu5FEHugpUci50EGpiCDErSftuoCffkgNl8J\r\nA24x1ZM8zRu6sQlhYOtBbaRVuizpUHVhqz+yad/hOEq3ztxK12z1Riy7sBY7\r\nblkzohEc/Jfa0dk83s6N2/eDv/bXUTF2lhEpmM+CQPAgiLSQIxWC0YeSGoav\r\n/U1O/MIzdTlXjfT52Ku1Qw0qH5hIZM8dMV6HuNllcntrSpBgdcHxShEtHdvS\r\njXZVU0TKIqqf9MCTP95desCJPcOQBmMGWNGQx5jlG1C0pk1jEbFe5C3UBOBp\r\nzha1qGYIAP0nO4SVoeaSTQZFN9Pr9HPxguDmMiY7h88J3RBr7ho66vCLUfA9\r\nmw33YQ2RUbizPTX0+3DJbiPIYlYsYxKup0JI0GSsYMOwvfmQYBO/4HBcl/XQ\r\nZhGM0l4dN8QPfZsBFuiP2ZFYMXcm2i6QVMnIWQpkxnnSyMT4+iubFM7Vjum7\r\nean8TGJowxwLFqtSM/+qq6whs9Z0hvaadw8cv7dejfqTeYM8iPCT07DrUQ7X\r\n98gNdRIWABYFwmqJ9ST7jtym7eJ0xAlvG97agI15nNN/h0F/tiX9NjmsYIQm\r\nvq87IPutkCEEZAdKnnAcgpZUJ4Nhz6qiXwBX524xVIlJYDD9Fztl4W2kVfqW\r\n+zVi44DCOctKppXuJoHq1j2bQ2mXk865XBI=\r\n=8qD1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c53abc81.0","@material/tab":"15.0.0-canary.0c53abc81.0","@material/base":"15.0.0-canary.0c53abc81.0","@material/animation":"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/tab-scroller_15.0.0-canary.0c53abc81.0_1680831779524_0.6706579588266155","host":"s3://npm-registry-packages"}},"15.0.0-canary.51311e69e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.51311e69e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d38fff4fcc710c3399d1c9d79b268e7899326d59","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.51311e69e.0.tgz","fileCount":51,"integrity":"sha512-v2BaEXrG1aaHcy9tnHRXM/Wb1udW1rrySp8PsJ1HrzKr+dbMNUto0qYSsIKg5DIPFhPug3TyvFcoVbEAISRkSA==","signatures":[{"sig":"MEQCIAPt+OxSR/XP5/lk3dBfirx8fWepNhpKM6LJHPrC2C5tAiBXOE9jfWR5v+k04Mrsj5OJ0vwF6miu6sLga10qQAlaBw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkMFxqACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmqJLA//cu4eHuaxtLhEo1Cev7RFqIuWE6asBhZA6jYaozsO5cE4hN7E\r\nV9eAIZ4jVqxGLF0I7az4rPtFIUyQ6cRQRZQ3nSvnUoA0+G+xyx2pGCq1HV20\r\nHzb/DBe35dV+75qWUbiYh0gwVZFF8pG5AjIgTiEmxYiwhEGX4GkS+IX9IRcW\r\nAceEU8pkrm/ocjsfXRXHEKStjbSew+eAkG8nQguhsc15NEeidSnUDiyxameR\r\nK/s0VDdxqrPmXmvgHKlNGrjLW4ASGxVypEfkVGHaAFCcZJYreMBQYmnt0Mcd\r\nwUjm79LA7WOgPM8LZx6LPxafknRZVQQlb4LvTD9YG0EBOBvSsgZ4AGBFSzoU\r\nAUQ+3KFnybUKoygHZyjm4Fr59blRrQR66XsQgMtoD5sPrwhDYz5I2eFfxAMO\r\nQ0DarVWFPiLJvwXkGBeCzC9ZQJkdkaaAPiU6hvHRRy8+b5zIQQokmcb59+Pf\r\nYFtSbQahKx5TGJcDCQvHgD/0IwnlKGOlHjtH3q/j1HCaBnL0ZSKCNGy6LxtC\r\n8aDCsS0gCxmbkivPeONvbNRVQ+WfSo9vAmq1Y0xeiJs4Vyu4qYzLO5Hd9Etn\r\nsYXbWmwsCzCsXZRTtAJCUQV8BmxoRcHiDgM9CXAdBAAeaaUG4R6LHj7uj+Tg\r\nFvmwzrn9ucw7pDCpyMpUzqnyEHqO7JB4VvQ=\r\n=GYq1\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51311e69e.0","@material/tab":"15.0.0-canary.51311e69e.0","@material/base":"15.0.0-canary.51311e69e.0","@material/animation":"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/tab-scroller_15.0.0-canary.51311e69e.0_1680890986231_0.3742837412702762","host":"s3://npm-registry-packages"}},"15.0.0-canary.113b1a38e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.113b1a38e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a13841fe2085fdbf3ec2f8fd5682ad38ca126379","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.113b1a38e.0.tgz","fileCount":51,"integrity":"sha512-+u86CPAYFCtXysGY2r7p2OiHI2YKE446d6izM+3j4l4aoFxBNeWrKZ1h1sMt3U7fSd/xs8XgfJa5APYEaPOm4Q==","signatures":[{"sig":"MEUCIQCWBfiradkIMVgunmtvmo56+aB/lJ+n5J4gf5IpNoI0jAIgVfNS99CCEbPl68BMIF33lUOtYq3C49FsyJE+cBld4bg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNIXcACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmo3sA/9GWxapf5YBjmilU8yQaYo14GYDlAZQ+UdBUMIP3X5rhiIK77g\r\nuhfoGFQRf97daoJ7fHzIjG3ZlQLL5EqL9DBUbJxJJs5EdRZrOWLWTMxZ7XXX\r\na168wQA5qymvgkBQlL0Etk9zEKPLjtqFnPPrVUQmIdiDh4u23Q8Q7iieLux7\r\n8lYCxB1bQpEWbhr6YbfPs5n8fwwp5eJ3dRYkd8k4riqXRfmOuUTb9x8AgEbj\r\nz0pKzTKjUxJOA71u6AohZSL/b4Mdgf+ezje+pb07rSUtO+eQkOtv6zmPdzqv\r\noUz4fQjvh7oFiuxNeAS31OaJeI0fXKfUBc6AS6318SfYJjWBF+/WcmXrTsvo\r\niwj/geRefEtYKR+cMwr1mK/vbrgAjdfmsD7Em2hajxcPLOGRHay27O3iKol4\r\nmxfmyyoDpGc5k11dFM/FH50a4kJtnHDGtUBhW/M5TBUyY3B9e71ptR2BLgeV\r\n35vF8Z6bpyn6L0jfIwVCoG9NVAxje7ZPkUUjqMpmNJ2/0+YPtQmQJ1vwGSPj\r\n1s9E/tqwOuQJC82b43U12a5R2oei1sjbiuPC8MyiC3Ug25ANJ9+h7CNiPmdJ\r\nBRWeQxs2/Bq9b4PZ2bx0GpVrN1KHpPOzlQ7JPQ7BFPfALKmTYvnrriS6sPLh\r\nGxw34DHzI/4mIHjPrMD9NNTzMb86oAcUAz4=\r\n=15+y\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.113b1a38e.0","@material/tab":"15.0.0-canary.113b1a38e.0","@material/base":"15.0.0-canary.113b1a38e.0","@material/animation":"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/tab-scroller_15.0.0-canary.113b1a38e.0_1681163740495_0.42179167729404354","host":"s3://npm-registry-packages"}},"15.0.0-canary.ea2191426.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ea2191426.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"bdc2bea665a4ff3a5a96ffd5d17140cab63f2fca","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ea2191426.0.tgz","fileCount":51,"integrity":"sha512-zT+To1jVwa+UhXGOjkA+HHJ53FmlUs8l6fvvJUip6XYMN+8ZcjKrEKU+rOFC536ScZ0UOBuhd5kQ3zHiYPxrJQ==","signatures":[{"sig":"MEYCIQDw0lsEur64xMMKc3P5m0go6ZG/PYkdqIsTWbsL1dvyxQIhANU31l0/Vcuu/ZK6dJgRFu3KdaFwrn4PWwOudxNvWlpG","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNdfSACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoIHBAAoxeYYI3ZbviFrCuytWqH5gKMUzYDSyvsABwuwW6yYAtEh9BH\r\nMhTyfi0IkACLcZz7/TXMZNtAQIMOQSUW9Q6OmKvmDobSfOvTgzCoQxCQIRMq\r\nevb4t9OWxIZLQyaPES9XCoxhMMwtTPxya/+RJZy+m8/yZpCOe7wIsSdG7cgv\r\nVX4HuD7Atm3nzrp8QBvVHeTCXKulCQMcfTiEB89Fyv0bik4OkiRompC5Xn25\r\nF55SF4caYdt7g8V6jWqEa65oXqu0ZWEnH838TIIaVMtbTrLp0UMtYon0w6Bm\r\nGhty5jZOzPi41pbD/dGiP6rjuekpl1VsjxLuN4n0DHfLyqPYVFkGcPAONNf9\r\nptpVWFwi1TMAbEteI22sXs1V5ccoNN1Fsqy/R3UZeexpfA7DJSwmedVFSqdg\r\n6LxT0Rn5YKdE9ZCsgKHoD7EIo7dQWIRnQw/7jOeVw6NnoHH/RDIe8k0My3mZ\r\nnOVH6t6hbetnDKILhxlacNup1+a1bI13ntstlxtIbN1ud/pugEyWwSL36eks\r\nfGUc8wKWEZetN0nTlX8nHhuWlti56gs3W8FT1hgcduG0OMCOOFNipbHWVcwH\r\ngxbfpbOwgvQZIrPd/iwe4vhjhyaprmiEPATJ1vnHZzywjv39P6EWyPAfMiJF\r\n2zcfCPBI9MlC891Zxe4jesFIeDauvQ6v/aA=\r\n=45j6\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ea2191426.0","@material/tab":"15.0.0-canary.ea2191426.0","@material/base":"15.0.0-canary.ea2191426.0","@material/animation":"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/tab-scroller_15.0.0-canary.ea2191426.0_1681250257917_0.906747668689313","host":"s3://npm-registry-packages"}},"15.0.0-canary.5a5c38538.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5a5c38538.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"80f3b8180aede4e01a274ddd8f3cd41dbf09a977","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5a5c38538.0.tgz","fileCount":51,"integrity":"sha512-LrWF3R3UNOQ6r5DHPzxxJz7IOTHzcE8ZfBA9iDszPCvC2BvkbfcpMvgkutB232UUX9IbjetLE23eRkI4OA/jkQ==","signatures":[{"sig":"MEYCIQCLb78OaOtv2EB325awSwnYe5mMWVsdpI0TEv0usFKUrwIhAKG16iXrZC4/4afJmlwCL63xCYVT2eaFt/T3VpZAYOtn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNd/sACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrwlA/+NnnCjCAc8X3m4qb+nUMvVJA/JiJFx1InnbUP0mTlbLmEm1YL\r\nVpTS74XLjuC6M8BTU4FQ+eKYw/qBAAZ6ok4uYaP3PSc2sOQgRmwkx3jYNJMl\r\nDKKJtJ+da6juhkeK24BDlX+bU29ox0LWHLYqF13QJxk/LgpyT6GXJteKIMv8\r\nltsZZWw7nykEgnJAfVoirZZ2DHWFeNxxdK8mgBtG190Iy9F9d+7G46nBa2Ra\r\nGrdJW3JFDJSkMbngXr44etlQUb+enRERv92F/fRkLMqqKL8qHcPY228RueBl\r\n7WPmqUJ8y3LI/RZdlVbR6cBKgdttFKaoSAZpxsYwPJU88rhCZJ9fE+pikG+q\r\n2qcu6//SrlezI2GEETAV82tQaCkYt77b0HIcogaTS1aR1g4bg2fn+6vpzeYw\r\njiCwDyxKm6nQknob3gOMvV35/PLNzmJQW/t1aSG0ekX/ktyIeKE4vj2um4ig\r\nzAC0qvRVos1/OrwU5RCglWL1CqiagqEp72E7Z6DTpMuS75rXQKGymZ8PDhx8\r\nDxBLqaYAtQebUk6V7hR5F62LpS2C27HpG1iyXUXW33qT0mtL5B68C3DkASNT\r\njp8ybGyprpyPscXEthT6wSGx75T64op+J4CdRWe5uqaSTzEPFIQgUWOOv0RO\r\nD01ldjiox9cj1yeILi67orrMWaoYXpv16Wo=\r\n=W6KQ\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5a5c38538.0","@material/tab":"15.0.0-canary.5a5c38538.0","@material/base":"15.0.0-canary.5a5c38538.0","@material/animation":"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/tab-scroller_15.0.0-canary.5a5c38538.0_1681252332590_0.6834113601474123","host":"s3://npm-registry-packages"}},"15.0.0-canary.e4b5ea7eb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e4b5ea7eb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9f840f7a54056ce8903e20b986dff0a0473dc1a8","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e4b5ea7eb.0.tgz","fileCount":51,"integrity":"sha512-tw0tR8E1zj24yrF4l98gHn9+46nIt2vi7omhHHidySN8mPD7cNtvVY6KBsnQS+/hX101CP4T2mzMAx4zWZqVcQ==","signatures":[{"sig":"MEYCIQDnEQQPParYk6unSTTCAbHp7L/5iD/6nWsb28znVjgZmwIhAKLhGPRe8/WLVJ2JBeCKAoVHWnfbMosYHPKlZ+9bXYC8","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkNegIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpZ+w//enzCdUC4V3gq6zS98erHd2Pze3i2vcbtv7Z5MFQYSc23tgQz\r\nfNEn6g5ppd/8VGKutsgpQ/+03C1JbqKq2s7evnlVnkrWvMui+cDIml/ZgYa/\r\nbkeuZCM5GFuh5FmG84jE9nABdMEKuNbTO/KDCbmDGY40FOxr6aiZ5bYWrC/+\r\nMF3HUKaeAEhkh/5ku6N6clIL83Dp0ATlmrmpcpMMK/6P4xpK7JegYCmusH5P\r\nmVlLdrn5fiQYvTCkdtqMlWKnm1I0UYD7lSNToPoXYs70NPRuEVEyhVA7bc60\r\n4p28kW+kbiW9bp4mW6Zo+Pjs3D1xeH10oztX0t54aPWB7afv5MeepdzSPLe6\r\ngjf0wFEVU77VJFN7BoFWda+qccBC/OMyQnzZv6olACPlrjpGnItyWFWWqXAD\r\nlJAkZJ3vAHF7pHZ0DUrI77bWI+UiIzZJ/4mZgUxgvM8pnYgFFMZB+8McswJW\r\nyLxzSgrWJ+pSk+hJQR/OXLlI0HKxNdvG3DqtuVEOj7p0Wh9C4BRIqCSvwdPI\r\niC0XVFpdqaL/ot/ISTerKj9C9LjyYwQfq2mFvUBIAGkx8XvzcMtGeRmUfXS1\r\nmgip3odbGGa6wJGXOc2h9w3G5qyrSNbmyf7PhPKuvGAuM/PrKbJny95FgiNk\r\noQGPA3fSj0fG1x3DZW5yHBBucpgvrVCI594=\r\n=Tj1C\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e4b5ea7eb.0","@material/tab":"15.0.0-canary.e4b5ea7eb.0","@material/base":"15.0.0-canary.e4b5ea7eb.0","@material/animation":"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/tab-scroller_15.0.0-canary.e4b5ea7eb.0_1681254407985_0.5694123815608096","host":"s3://npm-registry-packages"}},"15.0.0-canary.a094dd9c1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a094dd9c1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fd440b9005e6d5d0f858647c55efdc0215d5fd31","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a094dd9c1.0.tgz","fileCount":51,"integrity":"sha512-mb0xNE2vNsgs1zTT1FeBdyc5CbSomWhpXtkz7Nx+BdyMYY9iDr7nxHI/Gsoqxt0t7KwW5Qe+kLmWznC2etdpCQ==","signatures":[{"sig":"MEQCIGohrd4J62iscHmM1za2mAZ3et29mQKLNu2Hpl3qNwyeAiA2T7tKELTGL3R6qPgEcf71032XR4aWQ2DPaQ0bv/1LxQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkOddIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrDyA/6AwQZnVJwyTHyiQjFFMLNB2tY5sd7fkzhzeP9jGi9BQZ0AdbD\r\nQsdSqTgtYFj5hS5UFhNE1boU0/WkauJ9pyXwL4HAV5sSwSYCakQIkCLMme4M\r\nSheTtXsK0+x53iZvTW/xGzd1d7N9BwSgt9bGPf5DvF9udh1sZZNlqwrMdUpK\r\nfWJXVJ0m8yjTGtmMi+o2HKnoeh6j34yjTTN9vB9IE7Mhnqx6xvx1o3LCeaiu\r\nUCgGNifqPlzFZuOfxlayV8p6MUOJPfXTdRA/YpUEZVJijdu9LFNEdfIUFfYR\r\nX3iPPpUUdy1vO7Bg8KVlkD7yVDKmdlILuRSrOpK7OvmbrKVSvHYzt85UYTYs\r\n6k3buQHNsQPgObpYuM3Yi2oef6Ecg7cIgUVUxoElZvFQ1DuAOon1VKp5Qqtp\r\nZzE+ujOAuhLyHQQ7SDHo5YThLupcwf6WNOXlKTLF22bIKcHvzY7szq6IwM1J\r\nVqNlwvm5T2xSFDuqvX4D6+vYY+neig5mZ7LOukxOfaG9cgbniXuL/x+nkGeD\r\nyXxA7d0d6z3/D13NHFqtc/UUfKoNbRE/uk8NbOd5W3fbG9fPrbnNtcf/sg+4\r\nHh3I6vZ6r88fNs55DuRTSjEBgpoGLzXqlYgdIuIIBBIiFjVXm3OifU+NGHum\r\nEwTonDgRWMycHKogPM1fNMT9XLAjj0a7mN0=\r\n=Ln+r\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a094dd9c1.0","@material/tab":"15.0.0-canary.a094dd9c1.0","@material/base":"15.0.0-canary.a094dd9c1.0","@material/animation":"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/tab-scroller_15.0.0-canary.a094dd9c1.0_1681512264239_0.6971714200646335","host":"s3://npm-registry-packages"}},"15.0.0-canary.f771b091c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f771b091c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2d8ce63f0f3853dfd9d8623943fcae329ce8d120","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f771b091c.0.tgz","fileCount":51,"integrity":"sha512-GEGVgKVeCvnSvT3K+pnW1YlSqE6RoKytPV37YWASk8LyWgheSy2tPxfaQcW2Q55JApYXX9yCvbizL4xZh4EMcw==","signatures":[{"sig":"MEQCIClO0udclS+UAYG9UXaCDCACKQIOPFvngMBdBUYdjAhYAiBncwR4Al/EF6+zrutbl21YHPFYz8Xh2rThGlXgXR9b3Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkPWh3ACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpYERAAnlbnxizvsfXNvjrj5f6YXOYm52w0sbJkmPCie6yn3iFID3Zu\r\nl2BZLnoYZ5XiY0Wl7SxnxMlx+kE84U3nQoWUQSnAzNlmbjSii3NW09IWjWfI\r\nYH+0rlD8apLB5Q1LnDAnaAZggYCFGsTQC6UsHjFjfN7IPhd1UbYxvNPhk9OV\r\nvCgJX8oe00eUdeCvfi4fABx43m3ioev1oghWgYBRf4L2btHxyxG/jgqhi0xy\r\nuasB7haz7DXsFWtSwEoOfXUv3VkD2rHRC93uMB2NMAgtWKLaf73SmVJoB6RD\r\nt+wD5m52OMAY5qTxLX02dleooK1wEaeExHKsv5lRDUq37U0f2Livoq3gzas2\r\nad0vKaWa2uXWTIrcWGMyRd/XjqEccQFSOJAJe4pg+5vHPLqPVQ6HOsspEmiJ\r\nlkmxoTOeL2jKAOuHgEWGZAi0VzZxBG5fnRYSzalXthf+bW5wTdYAs7mprJhv\r\nKFqeREy2vD+3diQ6+aa21l34SfB3F0ZEgx9rsdxWJAUQlNuDyqQ+OEEAR1eP\r\n514T1Iull9FlKDO0KOQpIchGsdbSCjDgNvrVX76W6dqJowk/2z4ym43i1jEo\r\nACI2or0o37IBLD+m1RA+g0T4iiB3be9k+fx3hQv4mopHAEIEgEUBUIR8uw8P\r\ngP1dGJbuZ6yCwm2p05p1fxxZBsjsMOjC75k=\r\n=VNRv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f771b091c.0","@material/tab":"15.0.0-canary.f771b091c.0","@material/base":"15.0.0-canary.f771b091c.0","@material/animation":"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/tab-scroller_15.0.0-canary.f771b091c.0_1681746038917_0.051541657889603965","host":"s3://npm-registry-packages"}},"15.0.0-canary.79b1b612b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.79b1b612b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7d44437486290651e5f76cb76695863a371d3ed3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.79b1b612b.0.tgz","fileCount":51,"integrity":"sha512-XUKcE6uIxNqwSzDd44ZLchBNoOP4j9u41zmJgD8aIyzlurFumhEUsDRET6iP6cZkBdhoTxeS53WJYoihZBgehg==","signatures":[{"sig":"MEUCIE3rUtAMAZiO1czKWLYs4rlbyWvFu6YJlp6ihdC6x50vAiEA6mxpiXSRSyNJ1oJhLWMgokDTwzyjlywY1fHqEa5GLV8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQHxMACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoZYg/+KFYTp5rPv6TuiMnMVHuqFuodvbNVag4yRz+5Gp19BsWCd119\r\naytiW9Cbj/6DeYEG2/4i/ueyQwa1+vSodfkEVm/xHEWQyDd0MubGI3c5ZsQo\r\n74jT1WjD2YHs21PQR4QGg6l8oP0s3PczQCNtlMF1K2PWZWtyAaELud1w8h9T\r\nUPf3a7LbtT2fmWahyXRZSKRQ0Onl/k+LV/SayXAuFBG5Lj/VnNcdEWiMbYre\r\nE6fGPg01i8WgAVBlKZFdT9KKQluD0qVrgq4wAJURrgkdvG8UP+nEim8f25qc\r\n7CaUFwwF+8Cu3INIIJAlJC8wlHh5DXdsKdLOzT1LsqTJwhsH7YgiAk6enao2\r\nvRU89qWdrvlKZVMx5uyHIcFiptnyRzhjgGB8cIrd+aym93vxLkBhwJjdCThi\r\nkYnt6LFirZATTAJMdQONfNfLrmDuhkpwF7okbd50UKzM3M9/CiwnKeNm8AUJ\r\n2Zw3wrGysY0L5WyuxUcCbEipeSXY3Xq03KesO2yRwKiHjxl8D3pyw5xK4aFO\r\nwyNEjTVCBgh4mZfLaYPCUA+zIabo7T8JNhqGZIlpgdQoPtbwnyjNllYZxfhP\r\nRK6r+QeFcAH7PjnzFNjJABR7j5HqOV9YRfwYFVc0EYPZlqYThQHmsW+sLBV1\r\noEUbSS5EkYXD1nlB1Qey7JDgEkfOv1jOxfM=\r\n=HThh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.79b1b612b.0","@material/tab":"15.0.0-canary.79b1b612b.0","@material/base":"15.0.0-canary.79b1b612b.0","@material/animation":"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/tab-scroller_15.0.0-canary.79b1b612b.0_1681947724522_0.3371693322229887","host":"s3://npm-registry-packages"}},"15.0.0-canary.6f50071e5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6f50071e5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"08ed11e418affc5a81038f407ccb8f080c4ef0c5","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6f50071e5.0.tgz","fileCount":51,"integrity":"sha512-iCIwRB+/eSCItUzpPt1eOnxsXCJCcWOwCd0Q014ZHzlznLIM/vGsIHEkw3MlATwuOp37x9yyu79xYW8QOuAc+g==","signatures":[{"sig":"MEYCIQC+Od231g15tCqvdaXAugyfs+6qcWhTmjwhEgXxguWQ6gIhANiEhngFC7OXfvxsVXE8/m4+3JjJ2DEyI79MY+32tV1w","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkQX5XACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2Vmpa7xAAiKnbjW1GChLgn4yv9veMnhnz3aRbded/cMRt4cLyRIhMyCxf\r\n06taYuMbHs+gRLkI4/1Pni3ymmK46jy2DaCu9vjsa5Lhz2SRO6cPxH9+6HAT\r\nP62Fvhg6XrelVSNLPWLkE6v4puv6u64twCXjmGFFBqYv1l+67VByIqD6eemk\r\nMoBsJIipCj2bg4x0xWbtRQxkBO6abdWRzBleT5RN79jf1BQy3T13/HpFVduZ\r\nRUOGOpmtKs/DdEGXRV6Zy9sVxtomJpBCbtr1vXNRqzwm5nQQ6y0aUVDldXZl\r\nDABSjr+EfQTHRMdvBtMEnDN+RT2IFa6QvgnvUlfUz4D7sJkql83kG4I3isZG\r\nxjLwSY97f4tYsPgNWl1qT8MnW073+NEfrQnm8QAqJnnOSqLJQgUYBuCtANds\r\ntLuqQZFuJCWdEZ//y2G93ae3fa3HKS7OcwmuukUKkeI3RksdYgfBJvpiDEqD\r\nhKqaWeojjRRiM3dFGLYoFF+PfKD9zoshsNOVpohsGCn+YbiOaiR8vvWp0Itm\r\nrEGcL+FedM8JeErT9lbDM/pP+ofwHJmCaQ9LtdAm2LmnXDKoIV3BWUfdFwam\r\nNuQIN3VgUyDotb65QyL7cKJjJO752WXWZVeEJmFuzDcVjkMNVzPEp1Zh8DrD\r\nIS963Uophd3+c4tx7UX/1vaWiDMkoMud5WI=\r\n=jndi\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6f50071e5.0","@material/tab":"15.0.0-canary.6f50071e5.0","@material/base":"15.0.0-canary.6f50071e5.0","@material/animation":"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/tab-scroller_15.0.0-canary.6f50071e5.0_1682013782858_0.04171699954155472","host":"s3://npm-registry-packages"}},"15.0.0-canary.ef754381c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ef754381c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ce32d143f0e00934107f63fb2abc24fec1134198","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ef754381c.0.tgz","fileCount":51,"integrity":"sha512-ZIEFS+JDZGOx4COXNyO6qh1lGL4/q6t3+39R1da6fhtHz4I0Zrlc5rc3jlrDsVO98UxlGacF0CPk/P+vXYJN/A==","signatures":[{"sig":"MEUCIHJgd+bJ4lUMQwJq/5QIUfJ6YnYoS8vdZRDDl7y/6W2hAiEAxTxqCKn35S+IVoC0eL11s3UO1cCcV0yZx/LhrIFvbac=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkRuwjACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmpxEw/+MJRWgzJSg9UlDBYB8He8HbdI91pWw5CS5fg3Lyxs/SiD0c6K\r\nGDGeVx6nND/Wehd5SQZK1dabvr0Cf7JRZ3qjTzbwmsncGY3NL1hor2MJqgxI\r\nxy7UcpXrOZvQIYCXNdEoEd5uZ7vljT/b2XA+o+bRbbUF09/4fYmWdT/VdQvN\r\nYOkDZFdFNzeYfk460DF3nV3OoXPDR3agCyW5JF3AQW7Hx652XAuDcVKHhoDk\r\nQd+MV0nnXEx3TaWu9AzS4PZvSFxdf1NscYoBhpwdSMYv6HjPFr4EI3HsbGxx\r\nAYZcfZJAul9ENrD4BZI9ZoXt6+wppgX+gt6hQ7svBtc05PZIl5JOjSTWuFjv\r\nTLngFrL2w0c4UeG0g9aDQLE+8OKIIf+VSp+WDfMTSR9/6L7Kjl4fku1R+X5G\r\nqHezXKTeLtccccwW13Ap01sYJqCQyXZowD51sIDbRRaO0AG0+xKYxXjMApNb\r\njGrv2a6U6fb2yxzIsB46aScUnRGdeUiXiu0qv+WjH1b9BIH0VvtLehftdM/D\r\naVYpWszNPvU4Jl6triozrM3+4pbNGYcp3B4F4mlNqmm/hFICDOuLDeFqehl4\r\n6jxVT0C3Z3Oe9JsaGof5dk+Ga4LyDZ4LhHMLxBIQ5LdY7HS4qj5mbpLNJOoK\r\nHe59BTL9XBk9qgEzSU6xd7J05lLpH/afYdI=\r\n=8pAv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ef754381c.0","@material/tab":"15.0.0-canary.ef754381c.0","@material/base":"15.0.0-canary.ef754381c.0","@material/animation":"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/tab-scroller_15.0.0-canary.ef754381c.0_1682369571739_0.6400526092711136","host":"s3://npm-registry-packages"}},"15.0.0-canary.69ebf61ea.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.69ebf61ea.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5d06474b9a6219d938cea2d82795a49be437f071","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.69ebf61ea.0.tgz","fileCount":51,"integrity":"sha512-KhAgK/SRwFJmFSn44Bl1AGKSPdX8HeVEuttZ5fHywmXnykmCs0Y+JEvn2Qr40SdEdg49nxdyaYclY108pZQadA==","signatures":[{"sig":"MEUCIDICVhDV9Z2KQydwvPRgNpjcP3Zya1Yp+wDgb46329WbAiEAjVUwq9GSpvI+f+APElOuT6VcCNGC348qwliT3XX3JkA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkSq+WACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrkLA/9E/YQdHegZmQdLOgfu/CXog2GpLU+v0Cpt0NM3HNKA3yH6Y1q\r\nG75UgqQ2WYA5jLf7adEhlo+lITMYqju+0ijBb5F/FQEYJx2Yi5LBimICrn0K\r\neRuZu7qYf9YCDJWVPp4xkHYxIR54LtFvz6GsIal6OIsCYlGI1sdZlV/ti2wW\r\nywH0SUJZ/KY7VSXvCvX+WKhtxnbgTzhBWFdcFDKRyyDV5OFzai382eCSCbPN\r\nDV7dmwRhNm/taJAjDlyRvIyFn2Fx6o6cgNYSbCYKtnghvPNJJi+Y6q3vENHI\r\nyUtDkhxIC/UArLpdGfTI1yk1IsSU2BjeWjLXxjrZ5Ntth3I05qSVSl/V+Hs5\r\nZriNYR3i0q5rPmbo+1vspS5OKdJk20xpkeZngInUBKmq7/S+mmVOgu7YdbNu\r\nw6TSsIOQ7AVMA7I+f+ucN1O9RcTksuZrMxw7PI7MPBdzVVdP4VSDVwGaG5Rz\r\nUNg9HszUEscKCpCxa1iwBBsPn0pqS+qzcmj6GE/gVeqswXNXjvKCNvikOCh0\r\nL1RYquPfc7OTOSfYHLkHjLeT8ppLUUuY857en4orbey4TJAPgHAOclGc8g5c\r\ngLtHz74nRdliZ9x9FPVYCqxuUR0Cgm8mUx9izBhNlL/g6jQIbAcRJkz//03Y\r\naX6jZ0vjP5pba0lWJKI/3UDEAGOwaaJO0n8=\r\n=Hg97\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.69ebf61ea.0","@material/tab":"15.0.0-canary.69ebf61ea.0","@material/base":"15.0.0-canary.69ebf61ea.0","@material/animation":"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/tab-scroller_15.0.0-canary.69ebf61ea.0_1682616214257_0.4669214790227587","host":"s3://npm-registry-packages"}},"15.0.0-canary.b90be86de.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b90be86de.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"027dcb8ed485461c1c4640be3de118240840b7b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b90be86de.0.tgz","fileCount":51,"integrity":"sha512-2sl5EBhN0nYahiV3kKFzdLMJsHVjmPRgpssEiynSVs6PF2m7nPrLzjbLpGf6X0za/AGa67PwrD08K8+SpJ7v3w==","signatures":[{"sig":"MEUCIQDmRCcfGC9xsedTDiMkwnvYmTkj1DwMu9rbKvdXDs1SPAIgC5dkjm9Mh0LbXdyNofFwIEARTxg316x2sPK3ADEpLVE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGOIACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoGOhAAmOyW2QgI5KKRowhpAcAsLzlCxNNxXAffDOzUuF77yDKfS4rK\r\nOWnIcqIOB0we3ktNAwZQkG9hSd1tbpC+cTqPj675WquH1zTuIoj/kMTZglAC\r\nROIIyT9DVpIzZLjJJult1Vaiz7pDhtHVw1HIWHAdTFvmzWn2l816itcm8vV9\r\nnGeGlGT2JAuPCBDHENCBhFgkDGO+Gm2CoNUpOP06t9nYu9IcVHHNEJTZ0+JH\r\nErrEyIGmdv8Vxv6NRO8fbg7jT+lPkUagayZPUM40rBA4aiWKdpWTwptLO/lH\r\n0rkTibHF+8UvQ0UfIGp28xqaddVgDWfQ1MhNqK5QyFZrJ/obV5PBrP2yQ6x4\r\nzaHFqnfhqiut9/yNVYVe3aSG+au/2Nl8MWpRLbwodCkriRjHIJDPMXzqfns+\r\nxoaGXqk+Vks3kCEOsq5SNCCTmnqFKPwAImAQaQQovYkQGLh3pGE3+uXNFsVM\r\nilYK4q2MwP6pO1ffTGFRZizaOLSS9/LyAlSeMWwewe9+AEd5qCGAOztfiBA4\r\nYtWoEeEkbk2W0NYSuMJyvdeU/SS86i8I8/r8ZoOViJ9OdNhv/7kTHJmNM9vJ\r\nohEsnkJhW1IBad5Er656baOMuUThgcXVv3HDvYa8IYiqjBp7tJse9f+ADxSZ\r\nmMcOiwrUijUQE4VoMVm1Bkxy5P3BfIUsrw4=\r\n=0rRh\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b90be86de.0","@material/tab":"15.0.0-canary.b90be86de.0","@material/base":"15.0.0-canary.b90be86de.0","@material/animation":"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/tab-scroller_15.0.0-canary.b90be86de.0_1682727815834_0.888582047521774","host":"s3://npm-registry-packages"}},"15.0.0-canary.51f9c0c28.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.51f9c0c28.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c07dc381be1e39daa0d9fc739f74b718d60c8567","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.51f9c0c28.0.tgz","fileCount":51,"integrity":"sha512-00JZXIbnVvrRPoY6N4MNlS/L2sHZOCj8tzCLEszJZCg722onlN8YDyCh51t0mdcfzw5N1ULvGnsa5BpeWeW3vw==","signatures":[{"sig":"MEUCICTkmjQc8dTFT/wV4LOHxfD5eczWO1FTheVqeYfsimDgAiEA5QASXEMnV8P9yhu6IkIEU1wF3z070oiN6kXeZrDj3gs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkTGXPACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrUDQ/+IFN2agrWpW40xzLFrTrtzkAStNw5pOY2KZxgS+i5k0eCuOKP\r\nc8PSfhyUOK63l4rzd8i9lXi8OL7OrZ+CNlLhgFomCX2orsMqYvqb9kKYSrOl\r\nqAR9BiktcsvqOnumNRQ3PbgY4YpIkyJr4qBfMivw0X5nBxg/GZsqltEcyeKW\r\n5Lku1sCkGY+3yoW9j8GplDZ1MwGYXCFtrFC9AZIjeAn1xQoWy78Q/OoIf4cV\r\nnGeKFnpI3MUESTGATC47iyQpOZx8oIntVy8sdxdfzVtVAjOE1fhl0nhLEQrC\r\nBnnAKQ3/SGFZqtbbFNoY8XeEG9BXobciHAWMI23Leep/o/uuZlkUOcTvsJbO\r\nk9BomB+m4QIU/XPl/numePvkY2M/v7IwvbRiy7UTcYm8nS3oCB2I/yLDGFnQ\r\ndCF0F1h+AR5sEbOddiunCAWYx/o3hV+M+Pc+TEHzZod0qPbq8bw9FDmqn7KU\r\nKy3Cvg1Yu9Toz4Pb8d0pcjKyYSSFUQPhmAWuqZlDirk7RM/6URoimvz11b55\r\nwj2tOj/6XNNQug2aXiOcYGIT7BU4viop1IeJVcWt5g1K8M9W9THLzpg2dxHB\r\n1/W0nN7NSs7dQbP34cHFPLFo+NJA/M9i9lsyP5ZY5vnyXsbmH5U4BpevvrSS\r\n6jN24dtsehZULUfmtEi0nfjPWnb9wJAgsA4=\r\n=Py7A\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.51f9c0c28.0","@material/tab":"15.0.0-canary.51f9c0c28.0","@material/base":"15.0.0-canary.51f9c0c28.0","@material/animation":"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/tab-scroller_15.0.0-canary.51f9c0c28.0_1682728399153_0.37879998801761783","host":"s3://npm-registry-packages"}},"15.0.0-canary.4e840d685.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4e840d685.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a36812ff23238290e537201dc08bdc643fe85d2a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4e840d685.0.tgz","fileCount":51,"integrity":"sha512-uWFZwR6ApB5IH0IeKbOYeGP8/pw9HEHvzcv9NERr3xTZKXINLl3HTxbc0nfetvUE2u9y6VGrljS1Cf7QOR+1rQ==","signatures":[{"sig":"MEQCIAbrTlhpAXZXPsPP2L3cwYXQT7GMl9lMS2VsXEsB0tDuAiBpNqpmzHqo8wB56V1AkfEnjpMqyIoxv/jUiRNDGMKy5w==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4e840d685.0","@material/tab":"15.0.0-canary.4e840d685.0","@material/base":"15.0.0-canary.4e840d685.0","@material/animation":"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/tab-scroller_15.0.0-canary.4e840d685.0_1683041748361_0.7033087729665315","host":"s3://npm-registry-packages"}},"15.0.0-canary.10b8563e4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.10b8563e4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a5b95efeade69ff00f97846f3710c2aa06f2b24a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.10b8563e4.0.tgz","fileCount":51,"integrity":"sha512-iEQdiLVYydNmKga/rQ/3yxEFxeQR+ktPwRjEMNg/K34msHxG8tD7wBruoD6TrJW2gXPj1OvlM8AvbR5XImw5Nw==","signatures":[{"sig":"MEQCIBGLnuIW9XuiFnAyhXmICVc2usb9sXqpOzkjtTBeRL8FAiAwJsDp/Z0n0HLEgwQPf92AzqkJDp7qMDrZ082eKlQzaA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUaAvACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmoT2xAAhA/CAHjcMq4tO/ovAudH3KEf7vFls7rvgs3n/qlIku9UZ7XV\r\n5mVYBKuqGVAnHB7F/x3oXfSiFffe3r4l5BEDWn0GQujS6WR2ixpw0yrLU7Ym\r\nJ8c/cka5ingOpPTmkUmmcL6elwNGL4+kYhf0mfn/UjC3Sm4/sF738UHt9+GP\r\nQ2oRE/IEQV2G6i2XknnIvFYu5kfirk0+Na7Mp0fuhdpsNJlskh6f7NNDpNfA\r\nXkgRg7VDpt7qNt7opelnYTfhDZ7ZOeEmVYGAgezNej8Qd7siTkCvoIqqrzJi\r\nXu4DcDOW+ddRcTVTIiL+09ahokD8xN3YKJVrg7ZFQL2nDwoiFP2/RReOSAB4\r\nPe6AkKdrK7MaXISPckyDZLlnz/dumC0hEyJRuePbPOI6EkgOwgjlKxllW7+Z\r\nJUt2gXz8lYvO9GHlMqr8ag1AyjTCjxiiSqijRiuGPrqA83p3dnJy5LyHSBRE\r\nEqtVIb9cUy4uBh8by2pnk9wKvQNL92cJWWQ0HsjsR9A5sGO9L98k9sJ4i6HI\r\noS33qMGXdHYJbvPFZjknkLIsMsqL411booWUOFBHrceDR0g87hOXKPjg0oyF\r\nbJ3Qh8UA91lukP+65Ymg8tP5rjPUqzozNzqG14x4n/o34w22yaMC/usXHSaw\r\n3tvkzki63m+DNMGPCEY7Frp1ofLS0zuxilc=\r\n=Yfnj\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.10b8563e4.0","@material/tab":"15.0.0-canary.10b8563e4.0","@material/base":"15.0.0-canary.10b8563e4.0","@material/animation":"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/tab-scroller_15.0.0-canary.10b8563e4.0_1683071023462_0.7280636211189611","host":"s3://npm-registry-packages"}},"15.0.0-canary.736b7fda4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.736b7fda4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"8eed7d99eb42520cb13aca5e88cd13daa53037ac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.736b7fda4.0.tgz","fileCount":51,"integrity":"sha512-tHXgUlbPDTONLXOKu+/8lhMBneh+LcTq2gIReu79t3MkB/6tAHufPyzRiUDZbBOzt5Azos8XMJJyvKyYF9JuMQ==","signatures":[{"sig":"MEYCIQCdQVOCBoQrBdpyFTPoVS06Y/EKPt0L96SuvfAYxF4YwgIhAP7YXMS4oesHmtpG/YNqmTgHRppylkCvW/yZUEV+PviH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v4.10.10\r\nComment: https://openpgpjs.org\r\n\r\nwsFzBAEBCAAGBQJkUnmlACEJED1NWxICdlZqFiEECWMYAoorWMhJKdjhPU1b\r\nEgJ2VmrXVA//crT0te31ianmkT2YU8SMITiJBCE7XlrIchYy/M4R6XG+wb43\r\nLsB65YZZ3iJrt2HLh4Cp6RrHEeG5cE43S67nBbiNEB7TFDTTI1/X4VpK1s4X\r\nmp7uFTgClqzBh40pDigMPVMSzYGK8Wcf6HxN/2lUKyXSS5TJzGivDNA1Nh0/\r\nuEJfxGvnHXBMHnWR/Cl+Td2nV3t8CpKZ+hwb2sVi8NTu5x6eYs2S73PcZDPk\r\nCWF4r04z/OVtJcJCAbV6SHjcguKRp9jhukPEFFffFjUI+HPWj0as5x9RN8+I\r\n8TIG4z7Y5YVnoFpmo+ch77qAyS1VwatfqIYyCu6bjPxTk0Ibs8KOs8eb85cv\r\nGcb3U1WUENnZvDm7Am7K4PaP877G8/YCrMJ7sXNb3334Ygyy99pWJ5Ob7/Nv\r\nrEA5HwyJeeOm7bleM/6N69F0MO+HuW5OTDFTu5BZM4Ul2L9NRav8kPBubULN\r\nI+s2X9bRBvBS9TSZgu9NfOkArdvV6BiO0XTowjmSitV5vC7N6SJZ0AE0e55B\r\nJL7DEV6BO0Sx8zDo4EbOi3ZrvpHREl23Mtp8xm3m5zmWh7VabMxCiFKnFOr7\r\ngLsLiTekvHwEJqesisVJoartj2un0X3Er/qRSWDG4NDWx7KvUoWogyQHQr5c\r\nrzhVrfsx6Wra6cH7FL2rRxZERXsNon5bZQw=\r\n=zlOv\r\n-----END PGP SIGNATURE-----\r\n"},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.736b7fda4.0","@material/tab":"15.0.0-canary.736b7fda4.0","@material/base":"15.0.0-canary.736b7fda4.0","@material/animation":"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/tab-scroller_15.0.0-canary.736b7fda4.0_1683126693587_0.43922983796480386","host":"s3://npm-registry-packages"}},"15.0.0-canary.0e533c5a1.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0e533c5a1.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fbe3f590f61f269dc534b7a34ecbfbcf56a03844","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0e533c5a1.0.tgz","fileCount":51,"integrity":"sha512-23mGkfalU13Gnmu3B2LzJGofl4K8nqpglYSz6DhZoX7dbw6nm9w+pruuXq8IiMnBzSvwvha6WTxeS20XD3lsmA==","signatures":[{"sig":"MEQCIAJXIwgxojoenNlqYAqnHrfym/nZzeTn/mlFySVucPbQAiALF2Rw8GO3ctCt5wePlFhqtJvn3pFjBmb9YiN8KLU6Ng==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0e533c5a1.0","@material/tab":"15.0.0-canary.0e533c5a1.0","@material/base":"15.0.0-canary.0e533c5a1.0","@material/animation":"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/tab-scroller_15.0.0-canary.0e533c5a1.0_1683305924373_0.43273411798864503","host":"s3://npm-registry-packages"}},"15.0.0-canary.5f01c15a2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5f01c15a2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"27d338c3285adcc79cbc12339fa1b1df0c5154b9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5f01c15a2.0.tgz","fileCount":51,"integrity":"sha512-qWXMKugjieVyZtfjgeK1kydUVhbIGCDcH7cJfm2mZhuXFoNDqWu7qL4pphkfreYKTTytwqCPepKiX+li+3i0ZA==","signatures":[{"sig":"MEUCIQCEqOk9BlvNxbCSzaHjXuzo8bqIwliY4OVLRigVveBPVQIgIku1shrnRGA/uzHy784Khb/pA4YA/Loxi7Jth/hlBKI=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5f01c15a2.0","@material/tab":"15.0.0-canary.5f01c15a2.0","@material/base":"15.0.0-canary.5f01c15a2.0","@material/animation":"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/tab-scroller_15.0.0-canary.5f01c15a2.0_1683307698279_0.24485043560930975","host":"s3://npm-registry-packages"}},"15.0.0-canary.3b5b55e31.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3b5b55e31.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b9d99d50b6606faba8004e259c0e3d1b6b103420","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3b5b55e31.0.tgz","fileCount":51,"integrity":"sha512-5F56pIMk43c2kjcvuP3Qs98SORH+Na/q7zr/XM1rip8y/46d1231elqj4uem6TiYD5l89qjbyD+Zq6y+i2KI5g==","signatures":[{"sig":"MEUCICeOD31wX+pf0Kwv9lr8VMxikzR96CdhDwOscGCabNBVAiEAjsCNehFOIRezbYEbjGDfmtaLAvU0GROiS1f5EhnwDDw=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3b5b55e31.0","@material/tab":"15.0.0-canary.3b5b55e31.0","@material/base":"15.0.0-canary.3b5b55e31.0","@material/animation":"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/tab-scroller_15.0.0-canary.3b5b55e31.0_1683312076649_0.18932879113815715","host":"s3://npm-registry-packages"}},"15.0.0-canary.d0788120f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d0788120f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fde436b9626631f269c8b8eb7abcc8252bfd7d24","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d0788120f.0.tgz","fileCount":51,"integrity":"sha512-o8PJEfWYJrmRIl1PXwtflkccAEFCRN185ZwRlIQ67QryknRxbo41CLtqrBUwndu4TEgZWLk2IRXAr+tK5gHfeQ==","signatures":[{"sig":"MEYCIQDY5CW2ypDW2zctJFckPdVEEkgaNOKEeOm9dkfSrJOVYAIhALhtA0j4tPMHzfppJAHD+cUJ9SGnDs/M5ynwWXM9Njtr","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d0788120f.0","@material/tab":"15.0.0-canary.d0788120f.0","@material/base":"15.0.0-canary.d0788120f.0","@material/animation":"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/tab-scroller_15.0.0-canary.d0788120f.0_1683620716689_0.23685781091147673","host":"s3://npm-registry-packages"}},"15.0.0-canary.f52358dd0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f52358dd0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"4d1a9c47e873f1921725056e5eed58d87ef7d350","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f52358dd0.0.tgz","fileCount":51,"integrity":"sha512-cfBp0dbkaFc1OQrVoyQcqrnNrPaOB7YVpvmTAtGTJ+gHoGO04oNToPdFs2Tg3XDCoP7mkeDDIxFKju/gw5NZMQ==","signatures":[{"sig":"MEUCIQDcFi4FcSQtQ9rK8az7jn/clR0zlAffUc3rTrv9dy+/zAIgAmFvSbAxaD+qz/6KDd0AbtG5ID/eB3LvgDqu7jp8Moo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f52358dd0.0","@material/tab":"15.0.0-canary.f52358dd0.0","@material/base":"15.0.0-canary.f52358dd0.0","@material/animation":"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/tab-scroller_15.0.0-canary.f52358dd0.0_1683901946671_0.8047714066760328","host":"s3://npm-registry-packages"}},"15.0.0-canary.576d3d2c8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.576d3d2c8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0c2282099bd4d0c3e73e5ab874f795fb136dfd08","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.576d3d2c8.0.tgz","fileCount":51,"integrity":"sha512-8ambIVmtdrKgSirGxVYJEDaXOQE81m3lJrPp8hBjuQeo8m6+769mb1cXf7uvUazsuHTQPl7BAxrd+BF5b+v32w==","signatures":[{"sig":"MEYCIQDWeQND5pqeDhGD0hCdmnu4gES/9sMMUY0PmCXpYWt3YQIhAONtu6mqst7R5180K3B3/tOMTpfckJKPvcN3MMM51Opa","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.576d3d2c8.0","@material/tab":"15.0.0-canary.576d3d2c8.0","@material/base":"15.0.0-canary.576d3d2c8.0","@material/animation":"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/tab-scroller_15.0.0-canary.576d3d2c8.0_1684202516574_0.870317243885717","host":"s3://npm-registry-packages"}},"15.0.0-canary.19bb36a46.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.19bb36a46.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f416a5ca0a9cea8193cd3cd80a219d251f299f3a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.19bb36a46.0.tgz","fileCount":51,"integrity":"sha512-OAs4SnGVrfqzYo+y1DwgsebbpmI87HFvOHntJPGzz9B7TNxM2uu3VX7UrNojSpF7MH4s2rCqJrPPxvhmQ/q73w==","signatures":[{"sig":"MEQCIGLZT7L6bWgjiPgSH0jJDW+IEZ9Xqt3S/HUKjSK4pVhOAiBlKTdW0BEPqGLoipcWZodUYP6k5ZojF23UYjipdCzaeA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19bb36a46.0","@material/tab":"15.0.0-canary.19bb36a46.0","@material/base":"15.0.0-canary.19bb36a46.0","@material/animation":"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/tab-scroller_15.0.0-canary.19bb36a46.0_1684266969245_0.5496948624506786","host":"s3://npm-registry-packages"}},"15.0.0-canary.aa5ac7fe5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.aa5ac7fe5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3baa5a610a58c49c792288ce11b73b4b125ab8b2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.aa5ac7fe5.0.tgz","fileCount":51,"integrity":"sha512-RqMekFBLZ9nJnvHojYOPyYk0NFDutXHNyLp3VWN9ppvL7wPij4t/CcgdWClFUOtE3GmshqH0iK6imvEBqdDkyg==","signatures":[{"sig":"MEUCIAxhhiZ58jU4wa/D4G4S2zovKpKYnG5tu5gPBxqIcyIjAiEAqs2F4h+OEyhYiySYiasMQQOrHNTENd8cHp6yydGBCSA=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.aa5ac7fe5.0","@material/tab":"15.0.0-canary.aa5ac7fe5.0","@material/base":"15.0.0-canary.aa5ac7fe5.0","@material/animation":"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/tab-scroller_15.0.0-canary.aa5ac7fe5.0_1684776474855_0.051685294718036845","host":"s3://npm-registry-packages"}},"15.0.0-canary.90291f2e2.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.90291f2e2.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"a88297306fd3d11d9aa970a076c9b980da5ed446","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.90291f2e2.0.tgz","fileCount":51,"integrity":"sha512-R6trOZpkfk54VV0w0NjMMDcZPQgbnARxCoHLrWeSzv5KOMoiDyWji7FFpLc4fynX/F2lNg8xHpEolpugNRW/1g==","signatures":[{"sig":"MEYCIQDXbpKxtTHY11JdEv6ae2eBZe5EC4t8syLopM+6CeO82QIhALZ386c2P60d6JSUNSxkMQMpWGo3XhDCJjU39urHQfRX","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.90291f2e2.0","@material/tab":"15.0.0-canary.90291f2e2.0","@material/base":"15.0.0-canary.90291f2e2.0","@material/animation":"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/tab-scroller_15.0.0-canary.90291f2e2.0_1684863902469_0.39880186542543816","host":"s3://npm-registry-packages"}},"15.0.0-canary.446734f27.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.446734f27.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"7fb0f2d9d791d5d8198ce81440f846b973439eb4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.446734f27.0.tgz","fileCount":51,"integrity":"sha512-iROUS0NknqHDRjYfrc0pKFwKx8lsWtqVC587VzsNx5+tdxeNKJD41Wpfofmma9CC5/dP6oXkfoieVCj3nkt9Dw==","signatures":[{"sig":"MEYCIQCEHFegJXisc1lKo/n4csmN9xuo+SNEz3LLAWznX2Om2gIhAOIqAyes0M6CenqTb/2MPRRObYXdAa6qW7b/MtAKUBNy","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.446734f27.0","@material/tab":"15.0.0-canary.446734f27.0","@material/base":"15.0.0-canary.446734f27.0","@material/animation":"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/tab-scroller_15.0.0-canary.446734f27.0_1685483407401_0.27796231025280127","host":"s3://npm-registry-packages"}},"15.0.0-canary.19de312d8.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.19de312d8.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b8515da1c52d3497e09b56a2742d6849f09373a9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.19de312d8.0.tgz","fileCount":51,"integrity":"sha512-+J8F55EVuZrco3tSFt2+r026JNFqOHfzBnBsCnAXQhDEryqfJ3hxXU980s8NTLjkVhJOQ425eHSmYwgV3WJDyQ==","signatures":[{"sig":"MEUCIEcFWYFlwHIiNatcAutrNAeRIo44XCzrqCSoaEPqg/31AiEAt0yweuBFDsqIBuvELQfR8jOl3gY2+I6B1cSiBx3Utpo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.19de312d8.0","@material/tab":"15.0.0-canary.19de312d8.0","@material/base":"15.0.0-canary.19de312d8.0","@material/animation":"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/tab-scroller_15.0.0-canary.19de312d8.0_1686072029368_0.3572510493713461","host":"s3://npm-registry-packages"}},"15.0.0-canary.6081d829b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6081d829b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"205a4807e0aff8baf794d63bbd4f29452dc4b3f1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6081d829b.0.tgz","fileCount":51,"integrity":"sha512-vtUHGT/vtQXNUED1EBrGp06zmf8xaJnrhthtO42n3EychxJe3Hxaamy3WLXEVrosSLLFWB8NI08OdEcvQVpZYw==","signatures":[{"sig":"MEYCIQCQOv+oVK2wxHuT5B7fKFQPVEv/qkfNA3gIBWOfFa+AtAIhAOLvF8e9uZS/PEnHvknHYVbGYQolLKcP2P/rzTsK0uvi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6081d829b.0","@material/tab":"15.0.0-canary.6081d829b.0","@material/base":"15.0.0-canary.6081d829b.0","@material/animation":"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/tab-scroller_15.0.0-canary.6081d829b.0_1686100560269_0.6955235395646442","host":"s3://npm-registry-packages"}},"15.0.0-canary.b26c34a68.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b26c34a68.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5190ac4faed660f0bd02e54bf65a50ef5c0161a2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b26c34a68.0.tgz","fileCount":51,"integrity":"sha512-uxu5Onfih18QNYVwf2Tq48yoiqRfEcwYF5kAPKALv8E2brvpg/UbCQiBlYFRVyMHgiOAluzcYGxlovrrmtJ1Aw==","signatures":[{"sig":"MEUCIQDN7WaxjHqEM6LP2szJm6aMWAyNwdpIT5mwWpjOX0svlAIgWvtyyEuoA543AZNx7WJ7U5YCLZl2S4nYF5r2ctvTsU4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b26c34a68.0","@material/tab":"15.0.0-canary.b26c34a68.0","@material/base":"15.0.0-canary.b26c34a68.0","@material/animation":"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/tab-scroller_15.0.0-canary.b26c34a68.0_1686169232349_0.6525905996581007","host":"s3://npm-registry-packages"}},"15.0.0-canary.4fe911371.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4fe911371.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f9fe3873bdcddea71246cfb385139a64db54b3b3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4fe911371.0.tgz","fileCount":51,"integrity":"sha512-mPQRARem03jp6XGdlOYW+uLldtxehhP1qXHIvZph8fam0+Am2wI8Wq6u1hDo/kWe/Tm4jy0Cevbhimxg6yuQyw==","signatures":[{"sig":"MEUCIQCz2dKNBjrjmXfFnVrVgSukeS4wrpFJBpuX6P5J4sALlAIgVKNq2SIZsO1qoeUBPbN9b3pMpz3XUnJH8o6M/AXIh+0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4fe911371.0","@material/tab":"15.0.0-canary.4fe911371.0","@material/base":"15.0.0-canary.4fe911371.0","@material/animation":"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/tab-scroller_15.0.0-canary.4fe911371.0_1686179283897_0.8836461975890906","host":"s3://npm-registry-packages"}},"15.0.0-canary.a9ff9866f.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a9ff9866f.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5a61e6b5a2c3324a8b366b110269034d3eb0650a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a9ff9866f.0.tgz","fileCount":51,"integrity":"sha512-PTJKiP8Sd0cFch95QYxKnKUAUPLus5A6T+KEN7p3YYWks7FWoudaMUUX1nRJ5fJBFFdFufc9AgWTIVk97U6ZsQ==","signatures":[{"sig":"MEUCIGNL/Va1U8xcQzYFyjeJ7CKh/D3bnKABZHYqUdbSs8VlAiEA4G+mQPSw50rrmj+lmm3bveUKqoG/za99a2W+buiK1lg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a9ff9866f.0","@material/tab":"15.0.0-canary.a9ff9866f.0","@material/base":"15.0.0-canary.a9ff9866f.0","@material/animation":"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/tab-scroller_15.0.0-canary.a9ff9866f.0_1686656412525_0.9594507766305347","host":"s3://npm-registry-packages"}},"15.0.0-canary.b994146f6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b994146f6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"979e31b602b062c0995bd888aef8dfcb239f6c5e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b994146f6.0.tgz","fileCount":51,"integrity":"sha512-1MeWkr62OICfTv8oqhIZe6jFo0dKeMlUfB+/WcgnpoeMBszCOSlx5tQ4pedxUkuR3I+Z7rsTfSN0LavgF8bATA==","signatures":[{"sig":"MEUCIQC+H2ifxx1DiOqbdpFy6UjMjC8oWdt5UUguxQ2uguPRBgIgU4oym1hjvqyMwjBJA6XwZDzki/8XY8j6E5kd+eDNKIc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b994146f6.0","@material/tab":"15.0.0-canary.b994146f6.0","@material/base":"15.0.0-canary.b994146f6.0","@material/animation":"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/tab-scroller_15.0.0-canary.b994146f6.0_1686776748434_0.5351247697008605","host":"s3://npm-registry-packages"}},"15.0.0-canary.1fb4b1a06.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1fb4b1a06.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"eacd94f1a869390b68be760c8c30f9678b74c137","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1fb4b1a06.0.tgz","fileCount":51,"integrity":"sha512-1ZejKBqSBnNgijEBtv+cuTN7LSxrbciZixVigIokCNm1eXrRaiUn4SfKOqVGWIjfFxqDDR5XK5N9C62usP3kog==","signatures":[{"sig":"MEQCIDhRXRwBoebPRXCQf7OmfemqSJpC7o6ELOvZnxn2qFrnAiBasgAN95cKFQ6oh3Ld+/zJxDTgV1FVS/dLEQNTn8jTSw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1fb4b1a06.0","@material/tab":"15.0.0-canary.1fb4b1a06.0","@material/base":"15.0.0-canary.1fb4b1a06.0","@material/animation":"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/tab-scroller_15.0.0-canary.1fb4b1a06.0_1687892360198_0.8943579415217264","host":"s3://npm-registry-packages"}},"15.0.0-canary.c64a2776e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c64a2776e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"870b126a7d2dfa58c8eefadf84230a1d1bbd70ac","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c64a2776e.0.tgz","fileCount":51,"integrity":"sha512-6CgSsaBdxjXQwnOfimnztDSsC4YOLJQwvydlwlDSDky14KAybr/fslrVVnkFM3AcQFlgMIoLCgeM8K8SEW2Z4g==","signatures":[{"sig":"MEQCIEEipUGn+HD33/zE2f4Rj46Qgk6vU3lzHqM5+Uma5u79AiBaHxr7nKuZfLdFSlBg134MWv3d2KczrordaIzRfD9mPA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c64a2776e.0","@material/tab":"15.0.0-canary.c64a2776e.0","@material/base":"15.0.0-canary.c64a2776e.0","@material/animation":"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/tab-scroller_15.0.0-canary.c64a2776e.0_1687897122320_0.6295944769462354","host":"s3://npm-registry-packages"}},"15.0.0-canary.b05d9eb7c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.b05d9eb7c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"69a79bb3940f7188eac79eeb71e6ed6d75246a37","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.b05d9eb7c.0.tgz","fileCount":51,"integrity":"sha512-CBqLx+IXlG5cqsX99WtdshnNdxX8oJmj9anlOM37ovwyBHAWV2JQFOlb6ryZF00t9IBlYPUtfb9nYVrQa8oR9g==","signatures":[{"sig":"MEUCIQC/1rqSjy4Q4cBoTy7/o12eWAKMLOSzbGWbNjeyt5IbqwIgOCcjJ8WtWrKzJY0tzvJTkUr+FIwSbq6JAdEZaRAAJuQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.b05d9eb7c.0","@material/tab":"15.0.0-canary.b05d9eb7c.0","@material/base":"15.0.0-canary.b05d9eb7c.0","@material/animation":"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/tab-scroller_15.0.0-canary.b05d9eb7c.0_1688055949922_0.013844568154441905","host":"s3://npm-registry-packages"}},"15.0.0-canary.2a9697dc5.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2a9697dc5.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"338a82f7c2ca6f57177a1aeb8b963646b899d2e6","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2a9697dc5.0.tgz","fileCount":51,"integrity":"sha512-jvbD1kl1B/5nU3aNMvfusn5v1VwcCMO/yzqCoTjHgGfa20isv9jGXGmf5mHLJxHbGqkCx59f7TkowG1eMPvfMg==","signatures":[{"sig":"MEQCIAzjNc1HHp7WJ8ExOHTnHmA2mJ3u19cEA6nHHK7bP+bJAiArZYfwRrqutBClC4bMmCTS0m3PM5m2ZhrVZHgLSmHbQQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2a9697dc5.0","@material/tab":"15.0.0-canary.2a9697dc5.0","@material/base":"15.0.0-canary.2a9697dc5.0","@material/animation":"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/tab-scroller_15.0.0-canary.2a9697dc5.0_1688163349694_0.7030438234041767","host":"s3://npm-registry-packages"}},"15.0.0-canary.0c52adeab.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0c52adeab.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"56e5e292b3eff0ed2e37d6cedffbaf4c78da9e8d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0c52adeab.0.tgz","fileCount":51,"integrity":"sha512-PvS8d67sMAgbhsW2rYDRxM4TiA1c+pyfPyd4r/Il03Jry9887AFFAtuWMCXV2xJftqBYB4xvlRqFuFr9/a3Lew==","signatures":[{"sig":"MEQCIB1XEo13YCJhxRTyyZx+ENbNQucrkZaEnQc3MGxcbHoOAiBtmQ31Qan2Qw8u6knhMmG2LT3v/19dVnar/gTRAsx6ig==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0c52adeab.0","@material/tab":"15.0.0-canary.0c52adeab.0","@material/base":"15.0.0-canary.0c52adeab.0","@material/animation":"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/tab-scroller_15.0.0-canary.0c52adeab.0_1688574477821_0.07240088480661622","host":"s3://npm-registry-packages"}},"15.0.0-canary.83355c322.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.83355c322.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"c1ad768e8a40e52cbce186494ec4be1b6e9a9823","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.83355c322.0.tgz","fileCount":51,"integrity":"sha512-76CUIIQmVqYsZ5fNY6zi+L1GtUxqMIAN8MYOb1m5Y9SxTR/BCpxXcY2OpNjXOCa88JWR3X82aj+xHK6lqutroA==","signatures":[{"sig":"MEQCIDaZDUjw89xMe4IyvRyijadM92f+haKVLsKNKV3JHvh/AiBNGQDEE9MwkKPVZni+NOj7tzk1vx20KPUoevKohUBVMw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.83355c322.0","@material/tab":"15.0.0-canary.83355c322.0","@material/base":"15.0.0-canary.83355c322.0","@material/animation":"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/tab-scroller_15.0.0-canary.83355c322.0_1689001673729_0.27731129121805576","host":"s3://npm-registry-packages"}},"15.0.0-canary.bc9ae6c9c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.bc9ae6c9c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"fb7f85a6d89cc3ec60c398cf637d201262b9c749","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.bc9ae6c9c.0.tgz","fileCount":51,"integrity":"sha512-QWHG/EWxirj4V9u2IHz+OSY9XCWrnNrPnNgEufxAJVUKV/A8ma1DYeFSQqxhX709R8wKGdycJksg0Flkl7Gq7w==","signatures":[{"sig":"MEUCIDYaSqJE9C9MpXE6Rb2FPrhlCyMkTPXNTnNcnU/vJE+1AiEAiQEDsfhYqYnOPgkYwYWu1DbMg/LAuSWgmDKxe+VOtcE=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.bc9ae6c9c.0","@material/tab":"15.0.0-canary.bc9ae6c9c.0","@material/base":"15.0.0-canary.bc9ae6c9c.0","@material/animation":"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/tab-scroller_15.0.0-canary.bc9ae6c9c.0_1691097813903_0.9437723892650765","host":"s3://npm-registry-packages"}},"15.0.0-canary.3c44cd956.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.3c44cd956.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"97515a5dfc3ac885da475b3857f6ba79de4636f3","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.3c44cd956.0.tgz","fileCount":51,"integrity":"sha512-dZoOP6CksCrvG62H/DNuQwbpYV+q28sHzvtNC/GDIqbc1kMCL6FhQkBNQH/w/AG0FKz+ayLzBJtpVymY6CtHWw==","signatures":[{"sig":"MEUCIFgWwmnm/5udsUX/DNUr+8Vx9lDI5hTJzKRzptNUicJcAiEA3owAfCePOCfhmIFvsKzeaUWYV/yBgBACVp4hOXutxYg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.3c44cd956.0","@material/tab":"15.0.0-canary.3c44cd956.0","@material/base":"15.0.0-canary.3c44cd956.0","@material/animation":"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/tab-scroller_15.0.0-canary.3c44cd956.0_1691430630402_0.029635618153577514","host":"s3://npm-registry-packages"}},"15.0.0-canary.02702296e.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.02702296e.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3863033aa55014dc4611fcdc83a6aed6f704c8df","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.02702296e.0.tgz","fileCount":51,"integrity":"sha512-OSlK4fw7Z6K7ZqTk1khOmiqk3cmb7LdkR9oz1lyCSySbPjOIQ3hpaN26q5scrhhrHKcFgAy7+X24qa+opUhZHw==","signatures":[{"sig":"MEUCIQC6GSu6mDaDZhi43r1GV7+l74a3qfc7r4C8yArNi+gARAIgau//i8dXNgesnUIVx4YFPUL9Sw5lY5nGNbwvh5VDElQ=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.02702296e.0","@material/tab":"15.0.0-canary.02702296e.0","@material/base":"15.0.0-canary.02702296e.0","@material/animation":"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/tab-scroller_15.0.0-canary.02702296e.0_1692965243288_0.9101531624324866","host":"s3://npm-registry-packages"}},"15.0.0-canary.872b65832.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.872b65832.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d392963e705fa3b6363f035b413984b5ac2aea6d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.872b65832.0.tgz","fileCount":51,"integrity":"sha512-iWdgbFaxJy6UT8KQIyqoZRZHt62ocvld97sfSmJE6t/rUSGfZYkZWy3a8k4LDqlUgAlrwR2rSMU99uO3dEF2kA==","signatures":[{"sig":"MEYCIQDPrZ52veKvrIUNVyJ6VSwJ6EBSZyQQmC1LUnh+Y7fS/QIhAP5f3Lez7LPF5CC7ULd2G4C1iFIwu8Xrx4T8HCn3Q18f","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.872b65832.0","@material/tab":"15.0.0-canary.872b65832.0","@material/base":"15.0.0-canary.872b65832.0","@material/animation":"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/tab-scroller_15.0.0-canary.872b65832.0_1693397740472_0.9008676885693867","host":"s3://npm-registry-packages"}},"15.0.0-canary.89b2e4122.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.89b2e4122.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"66fc1b313b371820388ad28ee7a44fa7fb81d9eb","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.89b2e4122.0.tgz","fileCount":51,"integrity":"sha512-xtJ96KYDarc2SMi3xkG28zWcg8FFS1VEjm51xG7g5YhIw7O+LVpGunQsEHmCw7p23x9RxzA9KqfvMRnaBBgKwg==","signatures":[{"sig":"MEYCIQDycTPn6XgtccciLxFi+PazU2y3N5ZTxM0oLmFklDC6rAIhALgXyB8bhM+ZtZFj028AuyHw1CkSsybnmPw5OtiaZXYk","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.89b2e4122.0","@material/tab":"15.0.0-canary.89b2e4122.0","@material/base":"15.0.0-canary.89b2e4122.0","@material/animation":"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/tab-scroller_15.0.0-canary.89b2e4122.0_1693498138287_0.4590432382509573","host":"s3://npm-registry-packages"}},"15.0.0-canary.7a3942e7a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7a3942e7a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f22d526e82f32b5d9d698694e38181846434ebdf","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7a3942e7a.0.tgz","fileCount":51,"integrity":"sha512-4St3BZF7ktlZrMeYgq6DaZ2rX03s8S6bRtZ5TNe10bc2ny8nwwKlZLMT6kH6+EBWjO82+gg8vBCAPeUHqVEEmg==","signatures":[{"sig":"MEUCIG3rXbQjmfMjlvPYZG4URUbQmtDLVkJnks0Rm0oQjB8lAiEApVg+9qoxVi1ae5p5z5OmA+JcpruBGu2hOXqwZ0RUv7Y=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7a3942e7a.0","@material/tab":"15.0.0-canary.7a3942e7a.0","@material/base":"15.0.0-canary.7a3942e7a.0","@material/animation":"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/tab-scroller_15.0.0-canary.7a3942e7a.0_1693507307203_0.1516958927053509","host":"s3://npm-registry-packages"}},"15.0.0-canary.54feb3020.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.54feb3020.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0c15b31c63edec2c0b7c4fc523260b060b0af12f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.54feb3020.0.tgz","fileCount":51,"integrity":"sha512-X7Ennx+3Jc1d0xXSy/IWTHk8Lef7NXAZn9+k8QsRbCm9Dvui76tSM7anExj32yuiqbgX94HtOrXpgcCWrpJ1qw==","signatures":[{"sig":"MEUCIDsXcc4kkzteu2qRbHXARh4gy/B7KsFx5RQyyVYhdHrRAiEAr/NP4Z98hwesZW/e1xhY9LqEZPuSC5wETfNNhVffnX0=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.54feb3020.0","@material/tab":"15.0.0-canary.54feb3020.0","@material/base":"15.0.0-canary.54feb3020.0","@material/animation":"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/tab-scroller_15.0.0-canary.54feb3020.0_1694466448277_0.8966708737085507","host":"s3://npm-registry-packages"}},"15.0.0-canary.6cda3ce8d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.6cda3ce8d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0e86c74177d6eeaf6c2924b9128e5838af99d154","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.6cda3ce8d.0.tgz","fileCount":51,"integrity":"sha512-JkwHyB9tbAvuso9PYJGtoDSmUlmcxby6I9oV805+B1q3LHzDnLyKkRRRadsx7fvYM1yMmDOLFxUdChYDpb0AOw==","signatures":[{"sig":"MEQCIH+22Npl9/7PzQYVGmOpVszLimec5GeFnAsndf3QaeJZAiB+yvlWrnU90KwPCYxS5vGH0mzzHQ0dhfwsW/Pmoh/jKw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.6cda3ce8d.0","@material/tab":"15.0.0-canary.6cda3ce8d.0","@material/base":"15.0.0-canary.6cda3ce8d.0","@material/animation":"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/tab-scroller_15.0.0-canary.6cda3ce8d.0_1694483244736_0.7506073542467919","host":"s3://npm-registry-packages"}},"15.0.0-canary.205b20b36.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.205b20b36.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"2f80485452ad1b213287c2899bf328b6b1a47c99","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.205b20b36.0.tgz","fileCount":51,"integrity":"sha512-JVCfFya0uAJKV6316WZvBKbK04CJj2n4ItVoG6h5lKmtYWBiiKDxRFOU8rHY6DwnzN2jGLsXs9dc5g/ueqDf1g==","signatures":[{"sig":"MEUCIE1K7iyxiPKItqAP0joWrdMaRKJleSyTvsaOSXgfw6nGAiEA11l1y5GUVutwKXC86xKbjKJB9NF4TmsYUtWDRDF5FXg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.205b20b36.0","@material/tab":"15.0.0-canary.205b20b36.0","@material/base":"15.0.0-canary.205b20b36.0","@material/animation":"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/tab-scroller_15.0.0-canary.205b20b36.0_1694625670869_0.1334257046435099","host":"s3://npm-registry-packages"}},"15.0.0-canary.22bf82024.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.22bf82024.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"9d7d6a97336aae39b6234c940810c26dec386f55","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.22bf82024.0.tgz","fileCount":51,"integrity":"sha512-9g4Cn1/d4cHzbfvA4CkU5bsiD1ryaFjjGxkaBreU/TR3UR2qMNJyL1OGHTx8dGAoiR2Dzh4w3Ksz7HAgodCiVQ==","signatures":[{"sig":"MEUCIQCeKTXwAMIv3xVoIbNhFu9rFF3zz8zFfRdB2se6M0/3BQIgU32G/ptJdcY7S8DLq33RfqX27L/rUjxEtcBZ8BouXoc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668121},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(evt: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.22bf82024.0","@material/tab":"15.0.0-canary.22bf82024.0","@material/base":"15.0.0-canary.22bf82024.0","@material/animation":"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/tab-scroller_15.0.0-canary.22bf82024.0_1695028438035_0.950454173628791","host":"s3://npm-registry-packages"}},"15.0.0-canary.a246a4439.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a246a4439.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"353927782e309ee1d3b18871b6665a6bca0970d9","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a246a4439.0.tgz","fileCount":51,"integrity":"sha512-6KvBpalc4SwLbHFm0rnuIE64VffUj7AKhnPc+mqM6VmxOvDzQ/ZSYga0rWlUfM4mCDFX3ZkSxim+iNzVF+Ejaw==","signatures":[{"sig":"MEQCIClY3U3maBadYq+oE8qdaydTWjIKCOmcZgNKLjuE7cnPAiBh3zMZFMWh8ar3BA5/SBOLRvGAzEHnm/DQEAzfsuXoQA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a246a4439.0","@material/tab":"15.0.0-canary.a246a4439.0","@material/base":"15.0.0-canary.a246a4439.0","@material/animation":"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/tab-scroller_15.0.0-canary.a246a4439.0_1695059302518_0.2075577108010569","host":"s3://npm-registry-packages"}},"15.0.0-canary.d153db62b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d153db62b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d7f880ec9f00905f9985d535f0de1b5c69b42541","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d153db62b.0.tgz","fileCount":51,"integrity":"sha512-Hyma4S16dhAB35CKfv7eybOLQkF4BOuVIyap45HjRlvyNZCZ67beTzHznGzRl4DhwkSv/LB3Oa1rmoPqVXm2TA==","signatures":[{"sig":"MEUCIHaqtoRHv1eQo3SC2Hns1tz+22w3NIYysY6Nxr9xbgqSAiEA1TP7Sg2XKd++GGB7ZCc8Y2J1INgFArrZs3EsjAT5zAs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d153db62b.0","@material/tab":"15.0.0-canary.d153db62b.0","@material/base":"15.0.0-canary.d153db62b.0","@material/animation":"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/tab-scroller_15.0.0-canary.d153db62b.0_1695151050685_0.5487662427336641","host":"s3://npm-registry-packages"}},"15.0.0-canary.2528c1c3b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2528c1c3b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1069c8cfb575aff37fcb22d51b5d441a011d8d6f","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2528c1c3b.0.tgz","fileCount":51,"integrity":"sha512-3NIxLhuDzhxByBUnlhExgtMBuEugYCFjrE+r3Im8ijorp0Y/JHVF5NBfMmE6FxFudglZ3tSzREZgCaePJG3E9w==","signatures":[{"sig":"MEUCIQDmjjDhnx4V3RUKcpD+aS+aAckWaYHcHcQl1qJ+VPkcWgIgAVoaPSaf5G7/E6WLAb4DnceWuh1l6kCVcGPm9mwK4Xo=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2528c1c3b.0","@material/tab":"15.0.0-canary.2528c1c3b.0","@material/base":"15.0.0-canary.2528c1c3b.0","@material/animation":"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/tab-scroller_15.0.0-canary.2528c1c3b.0_1695233340157_0.8209645015438569","host":"s3://npm-registry-packages"}},"15.0.0-canary.1728a6dcf.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.1728a6dcf.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"409e384acfee01c176d327c9ca7cafac96e5770c","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.1728a6dcf.0.tgz","fileCount":51,"integrity":"sha512-lzjJXpRom5rmqbiggYA9VIgrrnW/Jvge51ur2u9gq7NiE/egKpcsYNIpOhU8/JhyVscxCN45QaVycFX2og6KMw==","signatures":[{"sig":"MEQCIEObi2O1lpoL5ufWSmLvds3T5kXG+K+bK5SRwY12oV+LAiBiVgTx6XTInEPPSnTICUML+vx9Xwwyi/ZpgslpWzeHuA==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.1728a6dcf.0","@material/tab":"15.0.0-canary.1728a6dcf.0","@material/base":"15.0.0-canary.1728a6dcf.0","@material/animation":"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/tab-scroller_15.0.0-canary.1728a6dcf.0_1695691514789_0.2543438036355088","host":"s3://npm-registry-packages"}},"15.0.0-canary.ebb636f3d.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.ebb636f3d.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"763b6ea7a526f5b954d83aceaaa4fd748d711aa4","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.ebb636f3d.0.tgz","fileCount":51,"integrity":"sha512-MSKuzDsf3x6rft7ANN978bK214dYV2qg9rVt8sJjg580XvJRIxc298llSGq2n2eTsuV6G4c73fLpRRhmD+cckg==","signatures":[{"sig":"MEQCIFxdriZDy4PIrsLX62tDS1dE5ciMICkCU1XBHpo9dHd3AiBRcmtZMeen2wGOlaAy3usM05sMMM+H7YCyfzvNCVMHsw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.ebb636f3d.0","@material/tab":"15.0.0-canary.ebb636f3d.0","@material/base":"15.0.0-canary.ebb636f3d.0","@material/animation":"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/tab-scroller_15.0.0-canary.ebb636f3d.0_1696016776848_0.21538430495010163","host":"s3://npm-registry-packages"}},"15.0.0-canary.c0d21ecc9.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c0d21ecc9.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"d098e10e9e6fea11b4b7eb3f5539d68a05f91362","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c0d21ecc9.0.tgz","fileCount":51,"integrity":"sha512-Q4A2Dg4mfgnuE7limq+nnOZmY4ihP7d0YWkvJccjdJ/KdR1ygtmcm/jLjwyJ3oDc478L7jUW7t2fK8TutZJqDw==","signatures":[{"sig":"MEQCICbVCHa0Xgx80/0uNzjYZCwZO35GhrXE7qbjPwPc21dUAiALizGJ6PfPxWphzXNgBKD6+8uXQEIXYDEYv4E3ktJujw==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c0d21ecc9.0","@material/tab":"15.0.0-canary.c0d21ecc9.0","@material/base":"15.0.0-canary.c0d21ecc9.0","@material/animation":"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/tab-scroller_15.0.0-canary.c0d21ecc9.0_1696880322546_0.8187635720288611","host":"s3://npm-registry-packages"}},"15.0.0-canary.127a44b28.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.127a44b28.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3518506cfb10e12ac1fe96a09384926dd08dac13","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.127a44b28.0.tgz","fileCount":51,"integrity":"sha512-EHYu3AlsYMjivDb2+Nev8JYjIlKu40JVrAnfafoDQqgpKDFv/QfyGmO0hUyNr/jrlCYGgmZPIlti+9QijnrqdQ==","signatures":[{"sig":"MEYCIQCpPPWkVVu24tJ319rpc8KFy3xKBTAlS4MyCfq4HmS8ZwIhAMnfTjMwTg4MrKe9+aEwPb+Q3Sz2n/av9TOvour+Q4lH","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.127a44b28.0","@material/tab":"15.0.0-canary.127a44b28.0","@material/base":"15.0.0-canary.127a44b28.0","@material/animation":"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/tab-scroller_15.0.0-canary.127a44b28.0_1697140957556_0.01882825987818748","host":"s3://npm-registry-packages"}},"15.0.0-canary.0ad128337.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.0ad128337.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"79714554a06656def8729368d9cd1c45f33b0594","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.0ad128337.0.tgz","fileCount":51,"integrity":"sha512-hbbB0Ln93lFvCxVCt2u9pq1kPWbNOt1OTC+Cavth67uu1BQ63nY9/Re6GXkjrGq3C5rHlvuIQNjjC6bkhHQoVA==","signatures":[{"sig":"MEUCICvOiwBcMZyoAnLbgm5C/GqIJkEiJPSxALGtc/gTWXrOAiEAkn5kQxppKCv/Z0tDKpdS3guKG+T/0DbmVVgoCMU2yWc=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.0ad128337.0","@material/tab":"15.0.0-canary.0ad128337.0","@material/base":"15.0.0-canary.0ad128337.0","@material/animation":"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/tab-scroller_15.0.0-canary.0ad128337.0_1697741655652_0.7690797527403188","host":"s3://npm-registry-packages"}},"15.0.0-canary.9cec94097.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.9cec94097.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b846f989846e34bc14bac33bfbea8078c87a6196","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.9cec94097.0.tgz","fileCount":51,"integrity":"sha512-DrGfTkoxnm7uEMYgK1dnhQhRYL9nrbGKdMdH9EYcaBfm/95Rh+OEQoBzH44Ja2gBHQRx6LKEHANZrVlD+k7V5Q==","signatures":[{"sig":"MEUCIQDbZb3y0uQdVjTTCmKq173BtuLLZsomNBVGp8mzpzFupQIgC+PcP02wZb4tHN/3rgvkBKjXkhpum8XJmxuNzvfjqLM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.9cec94097.0","@material/tab":"15.0.0-canary.9cec94097.0","@material/base":"15.0.0-canary.9cec94097.0","@material/animation":"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/tab-scroller_15.0.0-canary.9cec94097.0_1697757091722_0.8372434480951407","host":"s3://npm-registry-packages"}},"15.0.0-canary.c51a0bbcc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c51a0bbcc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"1fabe0fc968ec8039fd7d54b67c050e06800a6b7","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c51a0bbcc.0.tgz","fileCount":51,"integrity":"sha512-4mMWQJeyYQlJbCA8hexzvnQIRJLKt+2s+97LlexQ/pOyOWZYPwtxqHbWygWFk3uP57k/ggCDjXuCfxGLodU/bg==","signatures":[{"sig":"MEYCIQCAq3C3MZNdHt41cnNyh+tA0RUupI00xeO2zQojcK6/1wIhAOJYY7WTZNx3Jo64Ol/jE7JDUnpK+neFiGi9monBGizi","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c51a0bbcc.0","@material/tab":"15.0.0-canary.c51a0bbcc.0","@material/base":"15.0.0-canary.c51a0bbcc.0","@material/animation":"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/tab-scroller_15.0.0-canary.c51a0bbcc.0_1700081971287_0.27725445612322286","host":"s3://npm-registry-packages"}},"15.0.0-canary.d76666ad4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.d76666ad4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"5e20b2eeb411b3bd5ccf4a6766848ac9b7f26d98","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.d76666ad4.0.tgz","fileCount":51,"integrity":"sha512-ZWa/W1PUY6i/wXE5MhlMuv8oJoLgA9fMdrIP3x/lPp0DIQ2u8hy5x7lIwuU/yzqcCiFNaTjgYjYzWDhTqQwooA==","signatures":[{"sig":"MEQCIFTKO94vuTKhtejt0uDxCTciG3yXZGq7OL3uDanrsXBtAiAL/fFkagQ83wN4I/uwwYg72S4qM2efYQa8O9TwEns+1g==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.d76666ad4.0","@material/tab":"15.0.0-canary.d76666ad4.0","@material/base":"15.0.0-canary.d76666ad4.0","@material/animation":"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/tab-scroller_15.0.0-canary.d76666ad4.0_1701123236164_0.4176403765303185","host":"s3://npm-registry-packages"}},"15.0.0-canary.8656bf0e0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.8656bf0e0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3094a18e8ffc3dd1caa7fe77816c4dc3343863ba","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.8656bf0e0.0.tgz","fileCount":51,"integrity":"sha512-68EL10OKiCO3qVBGEie/P75JdmCoLKBntop9D/E5z24a57wRCNVrCWQMKJUD6OSBWyB1ydSXVyVqHWAhk2dsbQ==","signatures":[{"sig":"MEUCIQD4KqP1khPnVdfXcQONAWKCYBMDMYgUrsIGpmhEHMrBewIgOTR/P2C9ukoeGSTK4tHy5aM2GL+bpZH8Fdm16lXTT9Q=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.8656bf0e0.0","@material/tab":"15.0.0-canary.8656bf0e0.0","@material/base":"15.0.0-canary.8656bf0e0.0","@material/animation":"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/tab-scroller_15.0.0-canary.8656bf0e0.0_1702415975514_0.17097375761765643","host":"s3://npm-registry-packages"}},"15.0.0-canary.7f224ddd4.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.7f224ddd4.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f0fc898fc8f3ca293676d04179ed2b1d03cb38a1","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.7f224ddd4.0.tgz","fileCount":51,"integrity":"sha512-LFeYNjQpdXecwECd8UaqHYbhscDCwhGln5Yh+3ctvcEgvmDPNjhKn/DL3sWprWvG8NAhP6sHMrsGhQFVdCWtTg==","signatures":[{"sig":"MEUCIAZ3QfKjgkZtjjn62rbzV19WXfRhp2RQ5L1JqF+IJemEAiEAw/aRibHxefYD6yQBpE3SrxjXqNc75SqkGcx139EEpD4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.7f224ddd4.0","@material/tab":"15.0.0-canary.7f224ddd4.0","@material/base":"15.0.0-canary.7f224ddd4.0","@material/animation":"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/tab-scroller_15.0.0-canary.7f224ddd4.0_1703743795310_0.2890070150633457","host":"s3://npm-registry-packages"}},"15.0.0-canary.a0b8a90c0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.a0b8a90c0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e4a1e72afd1bed28c76e0ab4db57b9dce34c44f2","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.a0b8a90c0.0.tgz","fileCount":51,"integrity":"sha512-k+0uD+1kZP+iBZ9ZfqEdVzzu4Sa+H/1MRXWp0Vd1ObepK1iM7vxYdYFLBXbjaasGGZGuaGHrQg6MwLbALuPLgA==","signatures":[{"sig":"MEUCIQDHxLDmjwdrZI0CMZGnILIzxaC8Xc0wc7OmKN503vUzzwIgB9aGsV8iMddWxvdHxsVV80VJDv/COpywLiqEoh9NL4M=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.a0b8a90c0.0","@material/tab":"15.0.0-canary.a0b8a90c0.0","@material/base":"15.0.0-canary.a0b8a90c0.0","@material/animation":"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/tab-scroller_15.0.0-canary.a0b8a90c0.0_1707333621664_0.881041665416723","host":"s3://npm-registry-packages"}},"15.0.0-canary.e50b478eb.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.e50b478eb.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"0985d91783276f46e02b52053f62d9636c93ee3a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.e50b478eb.0.tgz","fileCount":51,"integrity":"sha512-vUjjXHsGfL2uTL58+KJKSLEcauM1HkwPfsCbDP09PjfTdUXngBUeWFlMCw2u3Sb7Tmdk1ncQSvKL2CrBbq06Ag==","signatures":[{"sig":"MEUCIQCEhArnFN5Skaun2R9h8OiRBmarn8MT7zU7PQxBvrhjJwIgOio/KZupcKwhMxQwA1dBWqKhjcI7EnDOi6bb52fz6nM=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.e50b478eb.0","@material/tab":"15.0.0-canary.e50b478eb.0","@material/base":"15.0.0-canary.e50b478eb.0","@material/animation":"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/tab-scroller_15.0.0-canary.e50b478eb.0_1707415743862_0.49881621063384274","host":"s3://npm-registry-packages"}},"15.0.0-canary.c43b3438b.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.c43b3438b.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"96b372dc1cec94ff7342add3ccb7edf07c801ced","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.c43b3438b.0.tgz","fileCount":51,"integrity":"sha512-Kw4SyH0pqFMOEA+Z9CXj/9QHTASZyhT7J2fcjlapqmviTrz5VwKBUfjhvbH+GbNiAyURZksB0NMHxnEt6uTl2w==","signatures":[{"sig":"MEUCIQCBvpJYySA4OLrBcpDSoIWRUNjcpE52hQ47zxGVvgRbigIgMAy/87Q2HqIElT8FpqAYkwgSWyf6jEx9C1Of2UYbY5I=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.c43b3438b.0","@material/tab":"15.0.0-canary.c43b3438b.0","@material/base":"15.0.0-canary.c43b3438b.0","@material/animation":"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/tab-scroller_15.0.0-canary.c43b3438b.0_1708719508609_0.04000706266152809","host":"s3://npm-registry-packages"}},"15.0.0-canary.819498d8c.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.819498d8c.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3b2af2e4384b40475591e09c617022a4ac668633","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.819498d8c.0.tgz","fileCount":51,"integrity":"sha512-xituawS2endh1zx7S49s0dNqdEs7e3XWCF59zOfiP+VwS7Mg5tQFExLVK/1bmRbMrU2UUSB/hLSRed+o+WqSHQ==","signatures":[{"sig":"MEQCIFNDFvoIpJ9AqBwwnTVrx1L2lHrTsJMU00Sq7HTpI9VfAiB9TmpSZ5psOHFXjqbacXpn0S9hunXOtyVF4T4/aQ5h7Q==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.819498d8c.0","@material/tab":"15.0.0-canary.819498d8c.0","@material/base":"15.0.0-canary.819498d8c.0","@material/animation":"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/tab-scroller_15.0.0-canary.819498d8c.0_1710515759951_0.715841304452316","host":"s3://npm-registry-packages"}},"15.0.0-canary.453a6248a.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.453a6248a.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"f45d5fccf0423fea05bdf144b57e8587f7f61406","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.453a6248a.0.tgz","fileCount":51,"integrity":"sha512-9F7vVGHmv5oMsf6Pn/MuIjSTwQBpm37GGm6tlwRPP29aSjWUflw4nHL2lrVPeTZM3X0zxc5yALIiKsH8IOzM/w==","signatures":[{"sig":"MEYCIQDO85HWE+N1LOMEEh2bxIqXDztH+THyAV8Nh0ODfr02wgIhAJn2hURYpwkN/dk6az5SgbhvOubt79q0aCNhFbS+ZfIh","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.453a6248a.0","@material/tab":"15.0.0-canary.453a6248a.0","@material/base":"15.0.0-canary.453a6248a.0","@material/animation":"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/tab-scroller_15.0.0-canary.453a6248a.0_1711386866918_0.05429018824893328","host":"s3://npm-registry-packages"}},"15.0.0-canary.68edc03c6.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.68edc03c6.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b6a21bb76e2ad97bfd8ce0d008c2249eecf9559d","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.68edc03c6.0.tgz","fileCount":51,"integrity":"sha512-GSiRrPGjKOW1Uh9lGiFhR+unwrHpTEkzVKHp6MdpGPFFjgVERpY1Of9H+bsQcTmXFTeuiA09beJ6ShZGOmZBAA==","signatures":[{"sig":"MEQCIFj6RHtopyT5A8EBrMWL8P6BuVJgfYiiDvXJK26iVVNFAiAzv2khVaipbQuRkRwpoc2hEesqKf8E870hBNSj8XqdDQ==","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.68edc03c6.0","@material/tab":"15.0.0-canary.68edc03c6.0","@material/base":"15.0.0-canary.68edc03c6.0","@material/animation":"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/tab-scroller_15.0.0-canary.68edc03c6.0_1712603251801_0.8236355575723486","host":"s3://npm-registry-packages"}},"15.0.0-canary.5bebc0064.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.5bebc0064.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"e6de1193117125e4e08576d4b59ec59002a4d543","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.5bebc0064.0.tgz","fileCount":51,"integrity":"sha512-/WBvoA2E2vuGte7sCINzas9ie4ajLDebRixIBLkECMYotuKdhDDyFho6QE/JAVoWq5TSB96K4tJBBz18cf0s7A==","signatures":[{"sig":"MEYCIQCrj5DLg80p4P9fQ5J+v5pHWdTq+G0mbWEn4vOrfaE/BwIhAMUXju0BceUJsSwcMKHu2KddseJLHd0DFpM6sVBAsITn","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.5bebc0064.0","@material/tab":"15.0.0-canary.5bebc0064.0","@material/base":"15.0.0-canary.5bebc0064.0","@material/animation":"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/tab-scroller_15.0.0-canary.5bebc0064.0_1712871746691_0.2104983893919148","host":"s3://npm-registry-packages"}},"15.0.0-canary.311f29a60.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.311f29a60.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"ea4ec943b75b6f7ee044ed773f4875ed07aeb985","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.311f29a60.0.tgz","fileCount":51,"integrity":"sha512-3DfK7+SWsgi7g1kgQqOc9LnDNe6tGuDX0qfqpLwkfjmiFbtchh3Q6JpwScNJhEKXHxfhUmxJQwXpmKXHRTKKVQ==","signatures":[{"sig":"MEUCIEXBqiZNKtDIret3tTcLvZJ0tpD4aNDeAKBeWMC1zr6gAiEAkFfgSiSihwh5G8CYWeqd1SINO9cPe4cHnzKJ/lDmRYs=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.311f29a60.0","@material/tab":"15.0.0-canary.311f29a60.0","@material/base":"15.0.0-canary.311f29a60.0","@material/animation":"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/tab-scroller_15.0.0-canary.311f29a60.0_1713895285890_0.33688788012827287","host":"s3://npm-registry-packages"}},"15.0.0-canary.65c10a622.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.65c10a622.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"118232331d56a1e3db4e27d71ad9f7ea61f01aef","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.65c10a622.0.tgz","fileCount":51,"integrity":"sha512-8ZMvEv4H+eh+DDDeZ6SAA31Xu0qb6q4fzy6wq2emwuwlwZt7tc+AkyCHTyyYaLSP4nHyAkOOP4962EM2Hbp1PQ==","signatures":[{"sig":"MEYCIQDrtTr+z6O9alM5xAeKIQkchltzvN3/8InQ/GE7yINwgAIhAOEOfm1ymyshswvHMMKkkL+zSdHNTpqNTA2TW5C8XGMY","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.65c10a622.0","@material/tab":"15.0.0-canary.65c10a622.0","@material/base":"15.0.0-canary.65c10a622.0","@material/animation":"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/tab-scroller_15.0.0-canary.65c10a622.0_1714070992974_0.6377584253923323","host":"s3://npm-registry-packages"}},"15.0.0-canary.4b35cb7d0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.4b35cb7d0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"b5464d741bab134a51c6b1ce5047733f762da624","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.4b35cb7d0.0.tgz","fileCount":51,"integrity":"sha512-BaLo2p3IM72RY46nuuIGrPoSHMd0jYz15ElyiTM/Ln+a0HIesX0o7I/Jw4BJziWNbk8D4FFUHhz/iq3OB5f87Q==","signatures":[{"sig":"MEUCIC39GPGzvbDl8cAVxq3hc4DoKj+QWYl0uKJfbeMIu2lpAiEArk4dpKhXYKzwNTjeWa69+HsnuOjc0Hk/hSb8ABQV5j4=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.4b35cb7d0.0","@material/tab":"15.0.0-canary.4b35cb7d0.0","@material/base":"15.0.0-canary.4b35cb7d0.0","@material/animation":"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/tab-scroller_15.0.0-canary.4b35cb7d0.0_1714651438365_0.004084206732872353","host":"s3://npm-registry-packages"}},"15.0.0-canary.f80ac92b0.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.f80ac92b0.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"825479e37bbdadce2b675f0f5eb607cdbaf3f147","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.f80ac92b0.0.tgz","fileCount":51,"integrity":"sha512-BmQs7QgPxQkprQdiROUaFzCh7PwOAO4Wl26GtXx4dIE1RXFQiTAMqp1BdtnIf3NZzr0WV6MdtWa7YmeEOqObNA==","signatures":[{"sig":"MEUCICaKiW9jEgBd0HHMWjLvfIbfy+MLhtFeiYF5XS32cjGVAiEA6l5ASK/FcN1MwdBPXtZvuBCpDl6p9QcEEviahwMLqk8=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.f80ac92b0.0","@material/tab":"15.0.0-canary.f80ac92b0.0","@material/base":"15.0.0-canary.f80ac92b0.0","@material/animation":"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/tab-scroller_15.0.0-canary.f80ac92b0.0_1714652045049_0.5875793032778851","host":"s3://npm-registry-packages"}},"15.0.0-canary.2f5b899bc.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.2f5b899bc.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"aa2ee9871b71e18966ad444a41b0d3a01a63b68e","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.2f5b899bc.0.tgz","fileCount":51,"integrity":"sha512-wuWkYdxXwLZKoeWXAxXvXjtBNYCssWp/CARaojI8xZIL2k4wD4UqEGlnrnibUcOgBxKU3MH3iIvvTopcYF4hMw==","signatures":[{"sig":"MEYCIQDTZyqA2Tcmh+PkW0orkmZzgHk3EvbA24fGJR2BKjBSAAIhALTmWZk5aDJA7GwcCiVwswxa4CVtpA2cllQWCTarP3cW","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.2f5b899bc.0","@material/tab":"15.0.0-canary.2f5b899bc.0","@material/base":"15.0.0-canary.2f5b899bc.0","@material/animation":"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/tab-scroller_15.0.0-canary.2f5b899bc.0_1716213464255_0.6581600446170657","host":"s3://npm-registry-packages"}},"15.0.0-canary.cfec83c74.0":{"name":"@material/tab-scroller","version":"15.0.0-canary.cfec83c74.0","keywords":["material components","material design","tab","scroller"],"license":"MIT","_id":"@material/tab-scroller@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":"3cdcbf9746b5451a63bd658c20fc794a3bda5182","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.cfec83c74.0.tgz","fileCount":51,"integrity":"sha512-+PcAAO2E8nowJsyc30Sacg0OHbODJ5FRuSxjgh4ea8GSC6kc7VwZkw0WJcH4p8Nk1sBVw4IWo/MEZFZ5puTrMQ==","signatures":[{"sig":"MEUCIQCs8JM4qLeupwdyM77e1j7zuKOq5kdwCzsj8UNKqoCSZAIgROW3VM4ts/K/Hp7N183qCNSFVL3ETY1+GJyP0z4pPcg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":668250},"main":"dist/mdc.tabScroller.js","module":"index.js","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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-tab-scroller"},"_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","description":"The Material Components for the web tab scroller component","directories":{},"sideEffects":false,"_nodeVersion":"14.21.3","dependencies":{"tslib":"^2.1.0","@material/dom":"15.0.0-canary.cfec83c74.0","@material/tab":"15.0.0-canary.cfec83c74.0","@material/base":"15.0.0-canary.cfec83c74.0","@material/animation":"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/tab-scroller_15.0.0-canary.cfec83c74.0_1716231469537_0.5811412957093178","host":"s3://npm-registry-packages"}},"15.0.0-canary.423edc3dc.0":{"name":"@material/tab-scroller","description":"The Material Components for the web tab scroller component","version":"15.0.0-canary.423edc3dc.0","license":"MIT","keywords":["material components","material design","tab","scroller"],"main":"dist/mdc.tabScroller.js","module":"index.js","sideEffects":false,"repository":{"type":"git","url":"git+https://github.com/material-components/material-components-web.git","directory":"packages/mdc-tab-scroller"},"dependencies":{"@material/animation":"15.0.0-canary.423edc3dc.0","@material/base":"15.0.0-canary.423edc3dc.0","@material/dom":"15.0.0-canary.423edc3dc.0","@material/feature-targeting":"15.0.0-canary.423edc3dc.0","@material/tab":"15.0.0-canary.423edc3dc.0","tslib":"^2.1.0"},"publishConfig":{"access":"public"},"gitHead":"19b2c5a95782b4928b3aecb29a1075c42aee53e5","readme":"\n\n# Tab Scroller\n\nA Tab Scroller allows for smooth native and animated scrolling of tabs.\n\n## Design & API Documentation\n\n\n\n## Installation\n\n```\nnpm install @material/tab-scroller\n```\n\n## Basic Usage\n\n### HTML Structure\n\n```html\n
\n
\n
\n
\n
\n```\n\n### Styles\n\n```scss\n@use \"@material/tab-scroller/mdc-tab-scroller\";\n```\n\n### JavaScript Instantiation\n\n```js\nimport {MDCTabScroller} from '@material/tab-scroller';\n\nconst tabScroller = new MDCTabScroller(document.querySelector('.mdc-tab-scroller'));\n```\n\n> See [Importing the JS component](../../docs/importing-js.md) for more information on how to import JavaScript.\n\n## Style Customization\n\n### CSS Classes\n\nCSS Class | Description\n--- | ---\n`mdc-tab-scroller` | Mandatory. Contains the tab scroller content.\n`mdc-tab-scroller__scroll-area` | Mandatory. Denotes the scrolling area.\n`mdc-tab-scroller__scroll-content` | Mandatory. Denotes the scrolling content.\n`mdc-tab-scroller--align-start` | Optional. Sets the elements inside the scroll content element to be aligned to the start of the scroll content element.\n`mdc-tab-scroller--align-end` | Optional. Sets the elements inside the scroll content element to be aligned to the end of the scroll content element.\n`mdc-tab-scroller--align-center` | Optional. Sets the elements inside the scroll content element to be aligned to the center of the scroll content element.\n\n> _NOTE_: The `align` modifier classes are only applicable when the contents do not meet or exceed the width of the Tab Scroller and Tab Bar (i.e., most commonly, when `mdc-tab--min-width` is used on each tab).\n\n### Sass Mixins\n\nMixin | Description\n--- | ---\n`transition($duration-ms, $timing-function)` | Sets the scroll animation duration and, optionally, the timing function.\n\n## `MDCTabScroller` Methods\n\nMethod Signature | Description\n--- | ---\n`scrollTo(scrollX: number) => void` | Scrolls to the scrollX value.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the scrollX value using animation.\n`incrementScrollImmediate(scrollX: number) => void` | Increments the current scroll value by the scrollX value without animation.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`getScrollContentWidth() => number` | Returns the width of the scroll content element.\n\n## Usage within Web Frameworks\n\nIf you are using a JavaScript framework, such as React or Angular, you can create a Tab Scroller for your framework. Depending on your needs, you can use the _Simple Approach: Wrapping MDC Web Vanilla Components_, or the _Advanced Approach: Using Foundations and Adapters_. Please follow the instructions [here](../../docs/integrating-into-frameworks.md).\n\n### `MDCTabScrollerAdapter`\n\nMethod Signature | Description\n--- | ---\n`eventTargetMatchesSelector(eventTarget: EventTarget, selector: string) => boolean` | Returns `true` if the given event target satisfies the given CSS selector.\n`addClass(className: string) => void` | Adds a class to the root element.\n`addScrollAreaClass(className: string) => void` | Adds a class to the scroll area element.\n`removeClass(className: string) => void` | Removes a class from the root element.\n`setScrollAreaStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll area element.\n`setScrollContentStyleProperty(property: string, value: string) => void` | Sets the given style property on the scroll content element.\n`getScrollContentStyleValue(property: string) => string` | Returns the given style property value on the scroll content element.\n`setScrollAreaScrollLeft(scrollLeft: number) => void` | Sets the scroll area element's `scrollLeft`.\n`getScrollAreaScrollLeft() => number` | Returns the scroll area element's `scrollLeft`.\n`getScrollContentOffsetWidth() => number` | Returns the scroll content element's `offsetWidth`.\n`getScrollAreaOffsetWidth() => number` | Returns the scroll area element's `offsetWidth`.\n`computeScrollAreaClientRect() => ClientRect` | Returns the bounding client rect of the scroll area element.\n`computeScrollContentClientRect() => ClientRect` | Returns the bounding client rect of the scroll content element.\n`computeHorizontalScrollbarHeight() => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n#### `util` Functions\n\nMDC Tab Scroller provides a `util` module with functions to help implement adapter methods.\n\nFunction Signature | Description\n--- | ---\n`computeHorizontalScrollbarHeight(document: Document) => number` | Returns the height of the browser's horizontal scrollbars (in px).\n\n### `MDCTabScrollerFoundation`\n\nMethod Signature | Description\n--- | ---\n`getRTLScroller() => MDCTabScrollerRTL` | Creates an RTL Scroller instance for the current browser.\n`getScrollPosition() => number` | Returns the current visual scroll position.\n`handleInteraction() => void` | Responds to mouse, pointer, touch, and keyboard events.\n`handleTransitionEnd(event: Event) => void` | Responds to a `transitionend` event on the `mdc-tab-scroller__scroll-content` element.\n`incrementScroll(scrollX: number) => void` | Increments the current scroll value by the `scrollX` value.\n`scrollTo(scrollX: number) => void` | Scrolls to the `scrollX` value.\n\n### `MDCTabScrollerRTL`\n\nAbstract class with three concrete implementations depending on the browser:\n\n* `MDCTabScrollerRTLDefault`\n* `MDCTabScrollerRTLNegative`\n* `MDCTabScrollerRTLReverse`\n\nMethod Signature | Description\n--- | ---\n`getAnimatingScrollPosition(scrollX: number, translateX: number) => number` | Returns the current scroll position during animation.\n`getScrollPositionRTL(translateX: number) => number` | Returns the number of px the user has scrolled horizontally, relative to the leading edge.\n`incrementScrollRTL(scrollX: number) => MDCTabScrollerAnimation` | Returns an object containing the values required to animate from the current scroll position to a new scroll position.\n`scrollToRTL(scrollX: number) => MDCTabScrollerAnimation` | Scrolls content horizontally to the given position in an RTL-friendly way.\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/tab-scroller@15.0.0-canary.423edc3dc.0","_nodeVersion":"14.21.3","_npmVersion":"lerna/3.20.2/node@v14.21.3+x64 (linux)","dist":{"integrity":"sha512-LZl8av5kFqQMmA7LkcAqt1efmqtfLM1NtOqMvA6VZInCgi+zadvKFMXbtYR3i4H80h9rd7DFbOCk7SaCELXmnA==","shasum":"6b2c5434e96d70e640859e592211f74c1c441e2a","tarball":"https://registry.npmjs.org/@material/tab-scroller/-/tab-scroller-15.0.0-canary.423edc3dc.0.tgz","fileCount":51,"unpackedSize":668250,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQDvoQKxlczUoqkqXOO23Vg6l+qmtobJsFDq2/oYK5pC2wIhANXywNUBWzOJFikc74dFTqmk9S4AtH2n1aE3/jeYnTgI"}]},"_npmUser":{"name":"abhiomkar","email":"abhiomkar@gmail.com"},"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/tab-scroller_15.0.0-canary.423edc3dc.0_1719425546773_0.8112799951137664"},"_hasShrinkwrap":false}},"time":{"created":"2018-07-30T17:07:53.400Z","modified":"2024-06-26T18:12:27.367Z","0.38.0":"2018-07-30T17:07:53.679Z","0.38.1":"2018-08-13T20:39:35.739Z","0.39.0-0":"2018-08-16T15:16:45.000Z","0.39.0":"2018-08-27T17:41:13.423Z","0.39.1":"2018-08-31T21:37:03.662Z","0.39.2":"2018-09-11T16:55:38.367Z","0.39.3":"2018-09-11T17:19:34.022Z","0.40.0":"2018-09-24T20:02:26.603Z","0.40.1":"2018-10-08T21:15:43.396Z","0.41.0":"2018-10-29T20:22:35.206Z","0.42.0":"2018-12-04T22:55:16.597Z","0.43.0":"2019-01-07T19:49:40.859Z","0.43.1":"2019-01-22T22:43:07.715Z","0.44.0":"2019-02-04T18:24:41.357Z","0.44.1":"2019-02-19T23:03:22.175Z","1.0.0-0":"2019-02-28T00:00:12.631Z","1.0.0-1":"2019-03-04T23:33:58.272Z","1.0.0":"2019-03-06T21:08:47.586Z","1.0.1":"2019-03-11T22:08:03.559Z","1.1.0":"2019-03-26T19:26:29.644Z","1.1.1":"2019-04-08T20:14:08.039Z","2.0.0":"2019-04-29T17:40:31.280Z","2.1.0":"2019-05-06T15:33:56.297Z","2.1.1":"2019-05-10T17:25:44.355Z","2.2.0":"2019-05-13T22:17:19.806Z","2.3.0":"2019-05-28T21:24:19.161Z","3.0.0-alpha.0":"2019-06-12T04:07:17.789Z","3.0.0-alpha.1":"2019-06-12T19:02:39.129Z","3.0.0":"2019-06-25T22:28:08.290Z","3.1.0-alpha.0":"2019-07-16T13:29:35.147Z","3.1.0":"2019-07-22T22:03:01.162Z","4.0.0-alpha.0":"2019-08-07T21:10:01.535Z","4.0.0-canary.0":"2019-09-05T04:38:16.137Z","4.0.0-canary.1":"2019-09-09T20:21:11.024Z","3.2.0":"2019-09-12T21:54:00.031Z","4.0.0-canary.79d881baf.0":"2019-09-13T02:21:58.515Z","4.0.0-canary.e851d4f40.0":"2019-09-13T04:07:47.437Z","4.0.0-canary.905884690.0":"2019-09-16T23:48:35.494Z","4.0.0-canary.199534d61.0":"2019-09-27T18:58:21.821Z","4.0.0-canary.22d7ad2fb.0":"2019-10-15T18:57:39.676Z","4.0.0-canary.735147131.0":"2019-10-16T01:24:03.991Z","4.0.0-canary.062ade5c0.0":"2019-10-17T01:02:00.464Z","4.0.0-canary.774ad4f8.0":"2019-10-17T04:05:20.292Z","4.0.0-canary.5916d18c.0":"2019-10-18T20:09:24.112Z","4.0.0-canary.d4141c95.0":"2019-10-24T01:39:02.859Z","4.0.0-canary.2b878b3e.0":"2019-10-25T02:11:36.282Z","4.0.0-canary.b06c0efe.0":"2019-10-26T01:35:49.812Z","4.0.0-canary.01628efa.0":"2019-10-29T00:03:49.040Z","4.0.0-canary.b5c6d66b.0":"2019-10-29T17:57:40.170Z","4.0.0-canary.cdf858ea.0":"2019-11-01T17:59:37.387Z","4.0.0-canary.719b57e1.0":"2019-11-01T20:02:22.112Z","4.0.0-canary.97cbbdc2.0":"2019-11-01T20:29:59.315Z","4.0.0-canary.8e36b3b7.0":"2019-11-01T21:02:19.416Z","4.0.0-canary.62d3a09b.0":"2019-11-01T21:11:39.237Z","4.0.0":"2019-11-02T18:12:11.526Z","5.0.0-canary.b5eb51e94.0":"2019-11-07T18:34:30.058Z","5.0.0-canary.58500806e.0":"2019-11-08T15:36:30.336Z","5.0.0-canary.66299b646.0":"2019-11-08T20:34:26.976Z","5.0.0-canary.821871e04.0":"2019-11-08T21:28:57.568Z","5.0.0-canary.491fddc31.0":"2019-11-08T22:08:01.004Z","5.0.0-canary.b0cecf145.0":"2019-11-09T18:43:06.952Z","5.0.0-canary.afe0dd1bc.0":"2019-11-11T15:38:29.740Z","5.0.0-canary.b4cfdc40b.0":"2019-11-14T15:59:37.278Z","5.0.0-canary.525989b5d.0":"2019-11-14T23:31:36.272Z","5.0.0-canary.7084b403a.0":"2019-11-15T01:06:57.980Z","5.0.0-canary.3cbee6dac.0":"2019-11-15T22:33:39.996Z","5.0.0-canary.591a6ad44.0":"2019-11-18T23:49:18.789Z","5.0.0-canary.5729943ba.0":"2019-11-20T05:20:09.712Z","5.0.0-canary.e89750dc7.0":"2019-11-27T02:10:42.522Z","5.0.0-canary.3e560b33a.0":"2019-11-27T02:11:25.431Z","5.0.0-canary.7fd17ce5e.0":"2019-11-27T02:11:47.793Z","5.0.0-canary.ec729683b.0":"2019-11-27T15:56:04.335Z","5.0.0-canary.b8bc4a26e.0":"2019-11-27T19:17:32.733Z","5.0.0-canary.f978109c3.0":"2019-12-02T17:08:17.863Z","5.0.0-canary.ad9dfe706.0":"2019-12-03T23:18:58.424Z","5.0.0-canary.5e45d77f3.0":"2019-12-03T23:20:56.347Z","5.0.0-canary.d10e8cdf3.0":"2019-12-03T23:21:16.036Z","5.0.0-canary.a5dbd8a2a.0":"2019-12-03T23:55:49.629Z","5.0.0-canary.ba879b68b.0":"2019-12-04T20:23:35.667Z","5.0.0-canary.aa0eba489.0":"2019-12-06T01:59:54.813Z","5.0.0-canary.cb7b71a86.0":"2019-12-06T23:56:42.849Z","5.0.0-canary.50f110a6c.0":"2019-12-10T17:00:37.283Z","5.0.0-canary.878a08b7c.0":"2019-12-11T20:17:14.460Z","5.0.0-canary.397905b4e.0":"2019-12-12T02:48:09.453Z","5.0.0-canary.1fbf5bd1d.0":"2019-12-12T19:00:10.890Z","5.0.0-canary.b723dfa78.0":"2019-12-12T20:11:00.306Z","5.0.0-canary.1c494e567.0":"2019-12-12T23:38:00.623Z","5.0.0-canary.c9e98a125.0":"2019-12-17T18:11:18.730Z","5.0.0-canary.5ffe8f7e3.0":"2019-12-17T22:34:21.627Z","5.0.0-canary.47949b08e.0":"2019-12-18T17:41:24.666Z","5.0.0-canary.b240bcc1b.0":"2019-12-18T19:17:51.052Z","5.0.0-canary.391674a26.0":"2019-12-18T19:18:14.290Z","5.0.0-canary.c4837746c.0":"2019-12-18T19:35:57.851Z","5.0.0-canary.e41a70425.0":"2019-12-18T23:21:18.989Z","5.0.0-canary.bac43eb43.0":"2019-12-18T23:25:06.437Z","5.0.0-canary.2e491de55.0":"2019-12-19T10:51:05.554Z","5.0.0-canary.ae101c144.0":"2019-12-19T16:26:01.406Z","5.0.0-canary.a51c31f26.0":"2019-12-19T17:15:42.045Z","5.0.0-canary.21fc4e13b.0":"2019-12-19T21:28:00.529Z","5.0.0-canary.d2ae6e17d.0":"2019-12-19T22:25:01.541Z","5.0.0-canary.ba30399ad.0":"2019-12-20T01:10:47.297Z","5.0.0-canary.a08ccec35.0":"2019-12-20T23:27:56.684Z","5.0.0-canary.a2f75105e.0":"2019-12-23T19:48:45.205Z","5.0.0-canary.c054a24c7.0":"2019-12-23T21:51:03.045Z","5.0.0-canary.c6808c51c.0":"2019-12-23T21:55:28.665Z","5.0.0-canary.7bce9cf77.0":"2019-12-26T18:46:28.005Z","5.0.0-canary.c92f038c3.0":"2019-12-30T22:04:04.966Z","5.0.0-canary.1f1ac7558.0":"2020-01-02T20:54:55.372Z","5.0.0-canary.ec26e799c.0":"2020-01-02T21:43:06.204Z","5.0.0-canary.0a40ced40.0":"2020-01-03T17:11:12.725Z","5.0.0-canary.3adf84899.0":"2020-01-03T18:23:22.294Z","5.0.0-canary.0d42ee650.0":"2020-01-03T21:37:55.046Z","5.0.0-canary.847dd1ada.0":"2020-01-06T19:27:16.906Z","5.0.0-canary.39df7e5df.0":"2020-01-07T00:56:21.651Z","5.0.0-canary.f1a2581ab.0":"2020-01-07T15:00:50.835Z","5.0.0-canary.7c7ddf347.0":"2020-01-07T15:17:43.223Z","5.0.0-canary.a1c84d4b5.0":"2020-01-07T18:11:21.161Z","5.0.0-canary.ec9f16578.0":"2020-01-07T19:40:24.618Z","5.0.0-canary.b602226ce.0":"2020-01-07T20:16:05.201Z","5.0.0-canary.b2d2dc08c.0":"2020-01-07T21:26:57.727Z","5.0.0-canary.61f2d7580.0":"2020-01-07T21:40:38.874Z","5.0.0-canary.d1be53a2e.0":"2020-01-07T22:18:07.823Z","5.0.0-canary.9b0d06e32.0":"2020-01-07T22:20:09.479Z","5.0.0-canary.730c807a0.0":"2020-01-07T22:21:41.183Z","5.0.0-canary.2213152cd.0":"2020-01-08T17:23:03.786Z","5.0.0-canary.5750f7169.0":"2020-01-08T17:57:55.556Z","5.0.0-canary.f7abc7a43.0":"2020-01-08T18:28:55.282Z","5.0.0-canary.bf7b4a061.0":"2020-01-08T18:42:27.538Z","5.0.0-canary.784fa7903.0":"2020-01-08T19:11:23.119Z","5.0.0-canary.823c050ba.0":"2020-01-08T20:11:44.251Z","5.0.0-canary.70c708dee.0":"2020-01-08T20:23:11.393Z","5.0.0-canary.5ed9d13d0.0":"2020-01-08T21:43:26.476Z","5.0.0-canary.4819cc7e5.0":"2020-01-08T21:59:11.341Z","5.0.0-canary.fe3ffd2c3.0":"2020-01-08T22:17:19.731Z","5.0.0-canary.c0e850090.0":"2020-01-08T22:23:55.059Z","5.0.0-canary.615f86f38.0":"2020-01-08T22:41:10.125Z","5.0.0-canary.1eb032637.0":"2020-01-08T23:00:59.755Z","5.0.0-canary.5bc5ebfea.0":"2020-01-08T23:01:44.592Z","5.0.0-canary.1112b8def.0":"2020-01-09T22:11:08.193Z","5.0.0-canary.aab102017.0":"2020-01-10T00:13:08.714Z","5.0.0-canary.426913342.0":"2020-01-10T01:45:07.782Z","5.0.0-canary.d4ea9a706.0":"2020-01-10T17:26:13.900Z","5.0.0-canary.7d4ee2996.0":"2020-01-10T17:57:42.791Z","5.0.0-canary.981ec9b6f.0":"2020-01-10T19:28:10.962Z","5.0.0-canary.737da83fc.0":"2020-01-10T21:19:40.378Z","5.0.0-canary.aca8e6c18.0":"2020-01-13T19:33:27.074Z","5.0.0-canary.c38d84e21.0":"2020-01-13T22:14:36.328Z","5.0.0-canary.a4db5fbad.0":"2020-01-14T02:16:09.157Z","5.0.0-canary.faa9af310.0":"2020-01-14T16:54:16.380Z","5.0.0-canary.60354c577.0":"2020-01-14T22:47:07.308Z","5.0.0-canary.d07c78daa.0":"2020-01-14T23:39:48.202Z","5.0.0-canary.8ddd5c6dc.0":"2020-01-15T01:43:56.510Z","5.0.0-canary.a9511d870.0":"2020-01-15T19:11:13.347Z","5.0.0-canary.7c8583c4c.0":"2020-01-15T22:48:59.702Z","5.0.0-canary.5d4b82bac.0":"2020-01-15T22:49:16.677Z","5.0.0-canary.57d0186e4.0":"2020-01-16T18:18:21.090Z","5.0.0-canary.071a6ab70.0":"2020-01-16T18:24:55.394Z","5.0.0-canary.22e0cb618.0":"2020-01-16T18:47:51.859Z","5.0.0-canary.f16f15b8f.0":"2020-01-17T00:08:09.054Z","5.0.0-canary.aa8e43e9a.0":"2020-01-17T00:37:41.895Z","5.0.0-canary.fe1f3ca07.0":"2020-01-17T01:01:13.080Z","5.0.0-canary.d405af26b.0":"2020-01-17T18:18:15.707Z","5.0.0-canary.6e857aae2.0":"2020-01-17T18:21:43.130Z","5.0.0-canary.e2e764f7c.0":"2020-01-17T18:36:58.797Z","5.0.0-canary.7ef986a87.0":"2020-01-17T19:31:45.749Z","5.0.0-canary.29402e2d4.0":"2020-01-17T20:41:07.609Z","5.0.0-canary.2b3ec563c.0":"2020-01-17T23:12:34.254Z","5.0.0-canary.e8a993677.0":"2020-01-21T16:50:52.406Z","5.0.0-canary.cd4903304.0":"2020-01-21T21:38:11.711Z","5.0.0-canary.7e4b04b25.0":"2020-01-21T22:47:17.068Z","5.0.0-canary.ebc296937.0":"2020-01-21T23:45:53.666Z","5.0.0-canary.cf33f113d.0":"2020-01-22T01:23:34.195Z","5.0.0-canary.e1d5f1be5.0":"2020-01-22T16:56:36.350Z","5.0.0-canary.6b6a4ff92.0":"2020-01-22T17:58:46.009Z","5.0.0-canary.6092f71ee.0":"2020-01-22T21:18:01.135Z","5.0.0-canary.d8d95020f.0":"2020-01-22T23:10:21.334Z","5.0.0-canary.b7facc628.0":"2020-01-23T18:13:33.699Z","5.0.0-canary.63f357dbf.0":"2020-01-23T21:56:11.928Z","5.0.0-canary.f2426d26e.0":"2020-01-23T23:56:01.043Z","5.0.0-canary.7f5e0c23f.0":"2020-01-24T16:48:30.521Z","5.0.0-canary.3fc3ab520.0":"2020-01-24T17:22:22.450Z","5.0.0-canary.80a4d326f.0":"2020-01-24T20:46:51.140Z","5.0.0-canary.ef7de4def.0":"2020-01-24T21:33:23.447Z","5.0.0-canary.93e2288b6.0":"2020-01-28T16:56:59.567Z","5.0.0-canary.34ef15f67.0":"2020-01-28T17:25:07.123Z","5.0.0-canary.d3d176ba5.0":"2020-01-28T17:30:17.499Z","5.0.0-canary.32c1df133.0":"2020-01-28T19:44:13.013Z","5.0.0-canary.f3adce86f.0":"2020-01-28T21:49:48.462Z","5.0.0-canary.a4423f890.0":"2020-01-29T21:10:44.932Z","5.0.0-canary.9351f167d.0":"2020-01-29T21:56:44.386Z","5.0.0-canary.29b89dbc1.0":"2020-01-29T22:17:46.151Z","5.0.0-canary.45985457b.0":"2020-01-29T23:34:11.689Z","5.0.0-canary.a1a0deb3e.0":"2020-01-30T17:38:15.029Z","5.0.0-canary.181486643.0":"2020-01-30T20:57:05.779Z","5.0.0-canary.3a85313ac.0":"2020-01-31T16:24:05.144Z","5.0.0-canary.b6c7f624b.0":"2020-01-31T17:03:52.654Z","5.0.0-canary.b3f70ebde.0":"2020-01-31T20:11:18.279Z","5.0.0-canary.3e782d8f8.0":"2020-02-02T01:13:32.183Z","5.0.0-canary.535398572.0":"2020-02-03T18:13:11.183Z","5.0.0-canary.5ff33802c.0":"2020-02-04T18:04:44.272Z","5.0.0-canary.1eb29491c.0":"2020-02-04T21:01:49.358Z","5.0.0-canary.4c7154b26.0":"2020-02-05T16:05:18.128Z","5.0.0-canary.ab5f49a2c.0":"2020-02-05T23:34:15.822Z","5.0.0-canary.c541ebe15.0":"2020-02-06T22:30:48.145Z","5.0.0-canary.98f7faa05.0":"2020-02-07T19:22:04.703Z","5.0.0-canary.b4727e43a.0":"2020-02-07T19:56:22.244Z","5.0.0-canary.91d9d5a65.0":"2020-02-07T23:00:23.382Z","5.0.0-canary.d5c006ed1.0":"2020-02-10T16:49:43.585Z","5.0.0-canary.559f1a570.0":"2020-02-10T17:26:11.289Z","5.0.0-canary.ad3bbf782.0":"2020-02-10T19:12:39.834Z","5.0.0-canary.570d8e49c.0":"2020-02-10T20:44:15.673Z","5.0.0-canary.48b06b89a.0":"2020-02-11T18:44:04.187Z","5.0.0-canary.8c11ea2a3.0":"2020-02-12T08:52:25.502Z","5.0.0-canary.b2f3d311e.0":"2020-02-13T21:45:02.921Z","5.0.0-canary.4f488d0ee.0":"2020-02-13T23:07:08.923Z","6.0.0-canary.fe79de07d.0":"2020-02-13T23:24:35.005Z","5.0.0":"2020-02-14T00:09:44.081Z","6.0.0-canary.5e313b1f2.0":"2020-02-14T23:49:05.684Z","6.0.0-canary.6a56f387c.0":"2020-02-18T19:44:42.709Z","6.0.0-canary.bdfd52632.0":"2020-02-19T20:23:31.830Z","6.0.0-canary.ad2e4376a.0":"2020-02-20T23:16:58.862Z","6.0.0-canary.765caef18.0":"2020-02-21T17:33:49.665Z","6.0.0-canary.949562303.0":"2020-02-21T20:38:40.693Z","6.0.0-canary.7ec96974e.0":"2020-02-24T18:58:54.144Z","6.0.0-canary.265ecbad5.0":"2020-02-25T21:01:41.112Z","5.1.0":"2020-02-25T21:39:02.037Z","6.0.0-canary.2cf87456f.0":"2020-02-25T21:41:00.096Z","6.0.0-canary.781434a92.0":"2020-02-25T23:28:51.587Z","6.0.0-canary.d6f60c98b.0":"2020-02-28T22:04:59.183Z","6.0.0-canary.69edc6e28.0":"2020-02-28T22:13:02.027Z","6.0.0-canary.9372e4939.0":"2020-03-03T19:11:30.570Z","6.0.0-canary.9cf5e9842.0":"2020-03-03T23:27:12.178Z","6.0.0-canary.3657f8863.0":"2020-03-04T17:44:59.725Z","6.0.0-canary.98b843417.0":"2020-03-05T18:31:51.775Z","6.0.0-canary.17b9699c4.0":"2020-03-05T19:23:18.004Z","6.0.0-canary.6ee035572.0":"2020-03-09T16:48:11.226Z","6.0.0-canary.bd33cb56b.0":"2020-03-09T17:23:20.313Z","6.0.0-canary.26c049afa.0":"2020-03-10T17:03:35.652Z","6.0.0-canary.1db5c9fc8.0":"2020-03-10T20:38:05.588Z","6.0.0-canary.4971637f4.0":"2020-03-10T22:59:29.194Z","6.0.0-canary.1ae8130ce.0":"2020-03-10T23:06:16.648Z","6.0.0-canary.8639c2690.0":"2020-03-11T06:34:11.332Z","6.0.0-canary.d5808057f.0":"2020-03-11T16:26:33.105Z","6.0.0-canary.b3f58203d.0":"2020-03-11T19:38:59.931Z","6.0.0-canary.bec065920.0":"2020-03-12T20:21:09.567Z","6.0.0-canary.776291ef0.0":"2020-03-17T19:21:49.216Z","6.0.0-canary.ece19f3dd.0":"2020-03-17T22:02:01.806Z","6.0.0-canary.4dc45af6c.0":"2020-03-18T01:48:49.282Z","6.0.0-canary.6b48781bf.0":"2020-03-18T15:35:51.161Z","6.0.0-canary.a88c8e4dc.0":"2020-03-19T17:36:42.465Z","6.0.0-canary.cafe18860.0":"2020-03-20T14:54:33.783Z","6.0.0-canary.35a32aaea.0":"2020-03-20T20:00:05.024Z","6.0.0-canary.e75deb854.0":"2020-03-20T22:16:05.709Z","6.0.0-canary.2cc6966f6.0":"2020-03-24T18:44:35.905Z","6.0.0-canary.8707953b6.0":"2020-03-24T18:48:08.806Z","6.0.0-canary.10af6cf39.0":"2020-03-25T18:19:15.517Z","6.0.0-canary.7d8f9c8d7.0":"2020-03-27T18:05:53.957Z","6.0.0-canary.d6315efe2.0":"2020-03-27T19:57:18.471Z","6.0.0-canary.a3016368d.0":"2020-03-27T21:20:23.889Z","6.0.0-canary.4b45b6620.0":"2020-03-31T15:57:12.353Z","6.0.0-canary.e84b9c8.0":"2020-04-01T16:56:56.352Z","6.0.0-canary.e33c49e.0":"2020-04-02T00:10:26.946Z","6.0.0-canary.f1f8e60.0":"2020-04-02T19:15:01.324Z","6.0.0-canary.1e17c49b3.0":"2020-04-03T18:05:00.423Z","6.0.0-canary.6a40ef217.0":"2020-04-03T19:25:41.610Z","6.0.0-canary.5f24faacb.0":"2020-04-08T15:37:47.726Z","6.0.0-canary.82fa986b9.0":"2020-04-08T15:42:46.683Z","6.0.0-canary.9930d9cc5.0":"2020-04-08T19:33:24.441Z","6.0.0-canary.6601d24af.0":"2020-04-09T00:30:50.717Z","6.0.0-canary.05f5e1583.0":"2020-04-09T00:48:13.760Z","6.0.0-canary.bce00e186.0":"2020-04-09T15:24:10.811Z","6.0.0-canary.927fa902c.0":"2020-04-09T18:47:30.361Z","6.0.0-canary.eb28b6ecc.0":"2020-04-10T19:32:10.606Z","6.0.0-canary.816a43b42.0":"2020-04-10T20:53:41.045Z","6.0.0-canary.008c4d319.0":"2020-04-13T16:35:07.918Z","6.0.0-canary.cbb3f28ca.0":"2020-04-14T05:06:59.587Z","6.0.0-canary.f172b0f90.0":"2020-04-14T23:11:17.364Z","6.0.0-canary.c02642273.0":"2020-04-15T16:18:31.688Z","6.0.0-canary.8a299b568.0":"2020-04-15T22:44:15.169Z","6.0.0-canary.490fbdc09.0":"2020-04-16T06:00:39.960Z","6.0.0-canary.f838c6e55.0":"2020-04-16T14:27:52.463Z","6.0.0-canary.ce6cb7024.0":"2020-04-16T17:20:11.655Z","6.0.0-canary.0ab62a65b.0":"2020-04-16T18:55:26.737Z","6.0.0-canary.ca61b656f.0":"2020-04-16T20:01:09.843Z","6.0.0-canary.45a6615e3.0":"2020-04-16T20:33:52.627Z","6.0.0-canary.4b04cdb0f.0":"2020-04-17T17:42:19.842Z","6.0.0-canary.b273afa93.0":"2020-04-17T23:03:54.483Z","6.0.0-canary.b70bc601e.0":"2020-04-17T23:22:32.721Z","6.0.0-canary.c4b4bba96.0":"2020-04-18T00:18:56.087Z","6.0.0-canary.6c1ebc721.0":"2020-04-20T19:59:25.273Z","6.0.0-canary.9cff4318f.0":"2020-04-20T20:57:02.956Z","6.0.0-canary.7b4482402.0":"2020-04-20T22:21:19.669Z","6.0.0-canary.deda86d8c.0":"2020-04-21T01:15:58.883Z","6.0.0-canary.d10412cb2.0":"2020-04-21T18:19:37.579Z","6.0.0-canary.c141801d5.0":"2020-04-21T19:43:18.045Z","6.0.0-canary.28d10a96e.0":"2020-04-22T22:08:23.123Z","7.0.0-canary.8540808be.0":"2020-04-23T17:27:14.676Z","6.0.0":"2020-04-23T17:27:50.352Z","7.0.0-canary.2673adb74.0":"2020-04-23T22:46:43.553Z","7.0.0-canary.b10d0d7f1.0":"2020-04-24T00:22:13.452Z","7.0.0-canary.3bd8c1bac.0":"2020-04-24T21:07:04.029Z","7.0.0-canary.b83c8dc22.0":"2020-04-24T21:19:47.798Z","7.0.0-canary.1b3dd846d.0":"2020-04-25T00:44:51.466Z","7.0.0-canary.29debfea7.0":"2020-04-27T12:33:22.140Z","7.0.0-canary.28d32f8e0.0":"2020-04-27T14:08:22.465Z","7.0.0-canary.af71cfdd6.0":"2020-04-28T23:18:24.163Z","7.0.0-canary.99d2fc961.0":"2020-04-29T10:45:05.823Z","7.0.0-canary.0e052b24f.0":"2020-04-30T01:30:43.437Z","7.0.0-canary.ff4bc632a.0":"2020-04-30T08:28:55.674Z","7.0.0-canary.b0f83d2fd.0":"2020-04-30T14:34:05.569Z","7.0.0-canary.e59906a57.0":"2020-05-01T15:43:37.735Z","7.0.0-canary.c02712b59.0":"2020-05-01T18:26:55.000Z","7.0.0-canary.15d65448e.0":"2020-05-01T19:23:45.201Z","7.0.0-canary.142b1549e.0":"2020-05-01T22:36:49.389Z","7.0.0-canary.524b7b812.0":"2020-05-03T20:48:31.860Z","7.0.0-canary.bd8ca9678.0":"2020-05-04T17:20:07.377Z","7.0.0-canary.2553e86fe.0":"2020-05-04T17:32:18.329Z","7.0.0-canary.03dec929e.0":"2020-05-04T23:35:09.765Z","7.0.0-canary.d92d8c93e.0":"2020-05-05T17:00:20.798Z","7.0.0-canary.09f591967.0":"2020-05-05T21:05:35.346Z","7.0.0-canary.3846ce311.0":"2020-05-06T14:10:36.404Z","7.0.0-canary.ed7f32463.0":"2020-05-06T16:08:57.396Z","7.0.0-canary.8135cc085.0":"2020-05-06T19:56:09.306Z","7.0.0-canary.deb212de4.0":"2020-05-06T22:19:43.815Z","7.0.0-canary.f83e00898.0":"2020-05-07T16:50:28.871Z","7.0.0-canary.047e6b337.0":"2020-05-08T18:39:25.235Z","7.0.0-canary.119e21426.0":"2020-05-08T20:23:33.725Z","7.0.0-canary.2f052d824.0":"2020-05-08T21:08:32.715Z","7.0.0-canary.e84444387.0":"2020-05-08T21:32:36.847Z","7.0.0-canary.893eb1876.0":"2020-05-11T14:14:21.235Z","7.0.0-canary.a5aeb3001.0":"2020-05-11T14:30:29.928Z","7.0.0-canary.610c68d97.0":"2020-05-11T19:33:49.434Z","7.0.0-canary.ed52af767.0":"2020-05-11T20:28:18.339Z","7.0.0-canary.058cfd23c.0":"2020-05-11T21:26:07.320Z","7.0.0-canary.0a371b4fe.0":"2020-05-12T23:19:26.077Z","7.0.0-canary.2139200b3.0":"2020-05-13T14:48:28.350Z","7.0.0-canary.744d751a0.0":"2020-05-14T04:43:50.508Z","7.0.0-canary.ad0c0c103.0":"2020-05-14T14:52:48.965Z","7.0.0-canary.fd8f8f2b7.0":"2020-05-18T17:54:41.848Z","7.0.0-canary.730920fbb.0":"2020-05-18T19:45:30.375Z","7.0.0-canary.bcdad99bb.0":"2020-05-19T03:19:09.365Z","7.0.0-canary.4497b86ed.0":"2020-05-19T03:51:47.794Z","7.0.0-canary.2e60575da.0":"2020-05-19T16:10:28.008Z","7.0.0-canary.e3eacefcc.0":"2020-05-19T17:39:22.222Z","7.0.0-canary.b065a4d2b.0":"2020-05-20T14:38:22.888Z","7.0.0-canary.4ebce8d78.0":"2020-05-20T20:51:38.203Z","7.0.0-canary.b0fdca492.0":"2020-05-20T23:03:45.339Z","7.0.0-canary.c67667e8e.0":"2020-05-21T14:13:48.913Z","7.0.0-canary.62b5f37db.0":"2020-05-21T16:42:19.778Z","7.0.0-canary.2e218dbf8.0":"2020-05-21T17:03:07.088Z","7.0.0-canary.7fd792bb9.0":"2020-05-21T17:15:55.928Z","7.0.0-canary.a66493cd8.0":"2020-05-21T17:19:19.420Z","7.0.0-canary.da05f66e1.0":"2020-05-21T17:21:05.116Z","7.0.0-canary.740860e78.0":"2020-05-21T17:27:43.069Z","7.0.0-canary.5cea2610f.0":"2020-05-21T17:29:52.265Z","7.0.0-canary.cf7747ef7.0":"2020-05-21T17:30:15.688Z","7.0.0-canary.862d0d7bc.0":"2020-05-21T17:32:50.144Z","7.0.0-canary.0008c8a91.0":"2020-05-21T19:34:06.070Z","7.0.0-canary.541638fa2.0":"2020-05-21T19:49:07.959Z","7.0.0-canary.6167cd075.0":"2020-05-21T20:22:14.331Z","7.0.0-canary.863ac1b0f.0":"2020-05-21T21:01:05.247Z","7.0.0-canary.d30a214ac.0":"2020-05-21T21:05:02.558Z","7.0.0-canary.62abbc8d7.0":"2020-05-21T21:29:41.968Z","7.0.0-canary.49bf31d5c.0":"2020-05-21T21:33:11.751Z","7.0.0-canary.8e17857d0.0":"2020-05-21T21:33:58.637Z","7.0.0-canary.c113fc942.0":"2020-05-21T22:47:36.339Z","7.0.0-canary.912d9021d.0":"2020-05-26T18:46:31.615Z","7.0.0-canary.68a2af131.0":"2020-05-26T19:08:37.837Z","7.0.0-canary.01de07011.0":"2020-05-26T19:53:39.415Z","7.0.0-canary.51d4535fe.0":"2020-05-26T21:36:35.843Z","7.0.0-canary.b86d826b7.0":"2020-05-26T22:14:43.554Z","7.0.0-canary.d91794c7e.0":"2020-05-26T23:55:50.304Z","7.0.0-canary.8c6d7e076.0":"2020-05-27T19:00:55.183Z","7.0.0-canary.5b5f62f93.0":"2020-05-27T19:17:37.730Z","7.0.0-canary.d9972abb1.0":"2020-05-27T20:21:50.959Z","7.0.0-canary.6556eda2b.0":"2020-05-27T20:31:07.907Z","7.0.0-canary.32aa23641.0":"2020-05-27T21:39:29.185Z","7.0.0-canary.654934dfa.0":"2020-05-28T00:38:08.896Z","7.0.0-canary.41910b8b8.0":"2020-05-28T00:52:13.224Z","7.0.0-canary.d66d22bf9.0":"2020-05-28T19:56:24.402Z","7.0.0-canary.8904f3cbe.0":"2020-05-29T16:51:23.001Z","7.0.0-canary.51512a4ac.0":"2020-05-29T19:16:18.116Z","7.0.0-canary.0743288fb.0":"2020-05-29T20:06:06.954Z","7.0.0-canary.06ef147b5.0":"2020-05-29T20:41:42.773Z","7.0.0-canary.8073a20a9.0":"2020-05-29T23:26:40.482Z","7.0.0-canary.72ff42330.0":"2020-06-01T16:45:26.485Z","7.0.0-canary.9ea52070f.0":"2020-06-01T16:50:09.017Z","7.0.0-canary.d86ad3b60.0":"2020-06-01T17:49:49.723Z","7.0.0-canary.b9776b1d0.0":"2020-06-01T18:27:09.639Z","7.0.0-canary.ba6f7c294.0":"2020-06-02T17:03:49.051Z","7.0.0-canary.cf3b664ab.0":"2020-06-02T18:24:34.580Z","7.0.0-canary.4ba3c9a31.0":"2020-06-02T23:53:31.166Z","7.0.0-canary.388b042c7.0":"2020-06-03T13:47:55.639Z","7.0.0-canary.cca1ca84d.0":"2020-06-03T16:04:07.224Z","7.0.0-canary.9b0b5f2e0.0":"2020-06-03T18:59:06.740Z","7.0.0-canary.0a7895f4d.0":"2020-06-03T21:10:11.514Z","7.0.0-canary.7461aad68.0":"2020-06-03T22:13:50.913Z","7.0.0-canary.a0dc2b5c4.0":"2020-06-04T21:15:37.402Z","7.0.0-canary.2b420c5b3.0":"2020-06-08T16:15:39.007Z","7.0.0-canary.8fa22aacc.0":"2020-06-08T18:05:43.169Z","7.0.0-canary.21c4e4ed8.0":"2020-06-08T18:45:26.414Z","7.0.0-canary.dfde46516.0":"2020-06-08T19:43:10.541Z","7.0.0-canary.05cc5c206.0":"2020-06-08T20:58:40.676Z","7.0.0-canary.3ee488f1c.0":"2020-06-09T14:55:11.635Z","7.0.0-canary.b83d720ee.0":"2020-06-09T17:27:21.109Z","7.0.0-canary.afb1c11a9.0":"2020-06-09T20:17:19.968Z","7.0.0-canary.39e6f71e2.0":"2020-06-09T23:40:28.519Z","7.0.0-canary.d4c66dc7d.0":"2020-06-11T17:47:28.569Z","7.0.0-canary.be4a19f9f.0":"2020-06-12T06:09:15.480Z","7.0.0-canary.a6ac8f629.0":"2020-06-15T21:31:33.367Z","7.0.0-canary.9833dc287.0":"2020-06-16T19:50:08.990Z","7.0.0-canary.3aa33998e.0":"2020-06-16T20:22:13.469Z","7.0.0-canary.d2b54d183.0":"2020-06-18T01:16:30.060Z","7.0.0-canary.f2a488e95.0":"2020-06-18T15:05:10.051Z","7.0.0-canary.bd8d1aafa.0":"2020-06-18T15:17:14.395Z","7.0.0-canary.1321eb968.0":"2020-06-19T19:22:12.047Z","7.0.0-canary.db5cc0382.0":"2020-06-19T19:28:51.446Z","7.0.0-canary.6ac9bf031.0":"2020-06-19T19:49:07.589Z","7.0.0-canary.c21b5c367.0":"2020-06-19T20:11:46.101Z","7.0.0-canary.bfdd7fd39.0":"2020-06-19T20:20:47.190Z","7.0.0-canary.10b505785.0":"2020-06-19T20:22:13.835Z","7.0.0-canary.6483d3f44.0":"2020-06-19T20:38:28.007Z","7.0.0-canary.30a74e921.0":"2020-06-19T20:40:40.789Z","7.0.0-canary.c20727498.0":"2020-06-19T20:43:34.711Z","7.0.0-canary.4e360ae94.0":"2020-06-19T21:00:14.836Z","7.0.0-canary.8550fa53b.0":"2020-06-19T21:02:42.755Z","7.0.0-canary.93ade142e.0":"2020-06-19T21:03:52.443Z","7.0.0-canary.a0032f5bb.0":"2020-06-19T21:29:03.248Z","7.0.0-canary.3f342e721.0":"2020-06-19T21:31:12.366Z","7.0.0-canary.ff89457cc.0":"2020-06-19T21:32:11.327Z","7.0.0-canary.4a1855cf8.0":"2020-06-19T21:34:54.716Z","7.0.0-canary.8602f1b4d.0":"2020-06-22T17:24:34.422Z","7.0.0-canary.69f9f0982.0":"2020-06-22T21:15:29.265Z","7.0.0-canary.369a293f0.0":"2020-06-22T21:18:10.789Z","7.0.0-canary.f1432b5c6.0":"2020-06-22T21:26:05.429Z","7.0.0-canary.4757a16b4.0":"2020-06-22T21:54:18.794Z","7.0.0-canary.f8f472762.0":"2020-06-22T21:58:18.925Z","7.0.0-canary.7e4d55c34.0":"2020-06-22T22:30:19.155Z","7.0.0-canary.bd1dbc91f.0":"2020-06-23T14:29:07.566Z","7.0.0-canary.31523bc62.0":"2020-06-23T14:35:08.937Z","7.0.0-canary.a96b6d4d6.0":"2020-06-23T14:43:01.135Z","7.0.0-canary.ef3a09533.0":"2020-06-23T14:49:06.116Z","7.0.0-canary.080965f39.0":"2020-06-23T15:18:24.618Z","7.0.0-canary.1bd67b65d.0":"2020-06-23T16:00:53.871Z","7.0.0-canary.18ca31248.0":"2020-06-23T18:25:53.602Z","7.0.0-canary.39cf00836.0":"2020-06-23T18:48:47.754Z","7.0.0-canary.1bfda9e05.0":"2020-06-23T19:01:19.614Z","7.0.0-canary.08731bd95.0":"2020-06-23T19:03:48.504Z","7.0.0":"2020-06-23T19:11:45.712Z","8.0.0-canary.a3212b209.0":"2020-06-23T19:12:43.171Z","8.0.0-canary.15e81fe98.0":"2020-06-23T19:42:05.850Z","8.0.0-canary.004c9d392.0":"2020-06-23T22:56:43.778Z","8.0.0-canary.03bde00f5.0":"2020-06-24T00:32:30.097Z","8.0.0-canary.599b8c319.0":"2020-06-24T14:57:44.835Z","8.0.0-canary.87e3be418.0":"2020-06-24T17:54:09.968Z","8.0.0-canary.035cf2a6f.0":"2020-06-24T18:39:27.451Z","8.0.0-canary.2fed2c12f.0":"2020-06-25T20:02:36.169Z","8.0.0-canary.38197b443.0":"2020-06-25T21:23:24.752Z","8.0.0-canary.69a35e80c.0":"2020-06-26T17:39:34.522Z","8.0.0-canary.df7154fb3.0":"2020-06-26T18:17:45.194Z","8.0.0-canary.d5618602a.0":"2020-06-26T21:49:02.965Z","8.0.0-canary.e590b376b.0":"2020-06-26T23:24:28.720Z","8.0.0-canary.0c9d6bd2d.0":"2020-06-29T17:16:10.380Z","8.0.0-canary.c1fec4246.0":"2020-06-29T17:31:35.213Z","8.0.0-canary.c678a9d34.0":"2020-06-29T17:53:05.895Z","8.0.0-canary.521afaf6e.0":"2020-06-30T15:06:33.004Z","8.0.0-canary.a2ad48839.0":"2020-06-30T19:15:24.266Z","8.0.0-canary.ec2385881.0":"2020-06-30T21:48:03.312Z","8.0.0-canary.610c26c4a.0":"2020-07-01T14:57:10.313Z","8.0.0-canary.e2ea4a99e.0":"2020-07-01T19:28:02.947Z","8.0.0-canary.a78ceb112.0":"2020-07-01T19:39:48.324Z","8.0.0-canary.b0c456d33.0":"2020-07-06T22:42:22.051Z","8.0.0-canary.2e5711e04.0":"2020-07-08T16:49:13.179Z","8.0.0-canary.811fc5d24.0":"2020-07-08T17:17:05.739Z","8.0.0-canary.6ed717ddd.0":"2020-07-08T19:45:03.742Z","8.0.0-canary.d850de590.0":"2020-07-09T18:06:23.175Z","8.0.0-canary.e07a70841.0":"2020-07-09T18:36:07.869Z","8.0.0-canary.37947ed6c.0":"2020-07-09T20:37:26.974Z","8.0.0-canary.5d443afec.0":"2020-07-09T20:52:37.508Z","8.0.0-canary.9ac1ed914.0":"2020-07-09T21:21:28.744Z","8.0.0-canary.1e7cb6198.0":"2020-07-09T22:13:23.439Z","8.0.0-canary.843f636c0.0":"2020-07-10T17:43:41.630Z","8.0.0-canary.b2edaeead.0":"2020-07-10T18:08:10.042Z","8.0.0-canary.5dac1f624.0":"2020-07-13T16:35:12.975Z","8.0.0-canary.4497acef8.0":"2020-07-14T14:21:05.874Z","8.0.0-canary.e6e23019d.0":"2020-07-14T20:11:32.690Z","8.0.0-canary.d548d7a92.0":"2020-07-14T21:13:56.343Z","8.0.0-canary.58ce529cc.0":"2020-07-14T21:15:58.089Z","8.0.0-canary.a0f1202dc.0":"2020-07-14T21:35:28.970Z","8.0.0-canary.ad4df58c1.0":"2020-07-15T00:10:16.903Z","8.0.0-canary.01db89053.0":"2020-07-16T16:40:35.139Z","8.0.0-canary.fb5a4cdeb.0":"2020-07-20T19:20:56.724Z","8.0.0-canary.8df0f517c.0":"2020-07-20T23:56:36.217Z","8.0.0-canary.abcdbcfeb.0":"2020-07-21T00:51:07.029Z","8.0.0-canary.7bd5075de.0":"2020-07-21T18:48:08.966Z","8.0.0-canary.405a29a20.0":"2020-07-22T22:24:17.504Z","8.0.0-canary.f3693ac4c.0":"2020-07-22T22:34:40.661Z","8.0.0-canary.12a109680.0":"2020-07-22T23:04:27.340Z","8.0.0-canary.bbd06696e.0":"2020-07-22T23:53:55.361Z","8.0.0-canary.4951e7651.0":"2020-07-23T01:50:42.102Z","8.0.0-canary.75deebbef.0":"2020-07-23T17:48:10.344Z","8.0.0-canary.95aff33ee.0":"2020-07-23T18:48:23.876Z","8.0.0-canary.9d9f47473.0":"2020-07-23T19:59:44.051Z","8.0.0-canary.00dfbf6be.0":"2020-07-23T21:00:45.410Z","8.0.0-canary.b87e522d2.0":"2020-07-23T21:24:38.348Z","8.0.0-canary.5b3e150e5.0":"2020-07-24T01:24:56.247Z","8.0.0-canary.f0ae11786.0":"2020-07-24T01:44:43.659Z","8.0.0-canary.fb4ee66c0.0":"2020-07-24T02:11:40.672Z","8.0.0-canary.5511e0aeb.0":"2020-07-24T16:57:48.445Z","8.0.0-canary.8388a9bf6.0":"2020-07-24T20:14:20.863Z","8.0.0-canary.ac405eae1.0":"2020-07-27T15:07:39.974Z","8.0.0-canary.75553837c.0":"2020-07-27T15:13:29.954Z","8.0.0-canary.b96fbfc7a.0":"2020-07-27T15:39:04.950Z","8.0.0-canary.61f1a8d85.0":"2020-07-27T15:48:08.293Z","8.0.0-canary.81dc33377.0":"2020-07-27T16:00:16.122Z","8.0.0-canary.ffd9ede58.0":"2020-07-27T16:33:35.917Z","8.0.0-canary.52dc55acf.0":"2020-07-27T17:09:30.835Z","8.0.0-canary.d4274ff05.0":"2020-07-27T19:52:29.410Z","8.0.0-canary.b82d0696d.0":"2020-07-27T19:59:10.234Z","8.0.0-canary.c2852000d.0":"2020-07-27T20:59:32.004Z","8.0.0-canary.f86f83f54.0":"2020-07-27T21:55:05.540Z","8.0.0-canary.41eb1684c.0":"2020-07-28T17:51:28.630Z","8.0.0-canary.9e2f6c450.0":"2020-07-28T22:40:19.657Z","8.0.0-canary.e6950b55a.0":"2020-07-28T22:53:47.854Z","8.0.0-canary.5e51ee38e.0":"2020-07-28T23:17:01.160Z","8.0.0-canary.a3898ffcf.0":"2020-07-29T00:37:25.640Z","8.0.0-canary.bc5cc6c96.0":"2020-07-29T00:50:17.074Z","8.0.0-canary.9bdeaf928.0":"2020-07-29T01:21:50.220Z","8.0.0-canary.fde2c1f9d.0":"2020-07-29T01:36:04.144Z","8.0.0-canary.6b3876d5d.0":"2020-07-29T01:39:53.170Z","8.0.0-canary.30ce17873.0":"2020-07-29T17:16:06.221Z","8.0.0-canary.f6bb43bf0.0":"2020-07-29T18:26:29.734Z","8.0.0-canary.6af75f6ab.0":"2020-07-30T00:02:29.529Z","8.0.0-canary.42d7a65aa.0":"2020-07-30T00:11:37.761Z","8.0.0-canary.85abdabb7.0":"2020-07-30T00:16:19.525Z","8.0.0-canary.49fb20ca3.0":"2020-07-30T01:28:39.566Z","8.0.0-canary.962d4abbb.0":"2020-07-30T16:11:15.879Z","8.0.0-canary.2fcee40cb.0":"2020-07-30T17:22:27.893Z","8.0.0-canary.bd5987f5a.0":"2020-07-30T17:47:15.429Z","8.0.0-canary.005e86a9b.0":"2020-07-30T18:01:09.155Z","8.0.0-canary.e309c7c68.0":"2020-07-30T18:10:03.391Z","8.0.0-canary.935a51cc0.0":"2020-07-30T18:21:25.985Z","8.0.0-canary.74839da7b.0":"2020-07-30T18:32:32.706Z","8.0.0-canary.f041a48c9.0":"2020-07-30T23:00:50.344Z","8.0.0-canary.fbb1381e1.0":"2020-07-31T15:51:26.008Z","8.0.0-canary.7f61d5785.0":"2020-07-31T17:24:00.094Z","8.0.0-canary.e1bc84d10.0":"2020-08-03T17:52:15.982Z","8.0.0-canary.096a7a066.0":"2020-08-03T17:55:16.817Z","8.0.0-canary.aa3a3e5a4.0":"2020-08-03T17:55:36.397Z","8.0.0-canary.5903d39af.0":"2020-08-03T17:55:56.654Z","8.0.0-canary.72258f898.0":"2020-08-04T01:18:26.792Z","8.0.0-canary.1b44b43c8.0":"2020-08-04T16:49:35.516Z","8.0.0-canary.e9d2e2f96.0":"2020-08-04T20:25:16.403Z","8.0.0-canary.b9dff0a19.0":"2020-08-05T03:49:59.376Z","8.0.0-canary.2bd09a706.0":"2020-08-05T03:55:11.693Z","8.0.0-canary.e0560522f.0":"2020-08-05T17:21:07.644Z","8.0.0-canary.08ca4d0ec.0":"2020-08-05T17:40:23.647Z","8.0.0-canary.08090126b.0":"2020-08-06T19:33:38.887Z","8.0.0-canary.e8bf5b2ac.0":"2020-08-06T21:51:05.043Z","8.0.0-canary.e3b746208.0":"2020-08-06T22:27:48.784Z","8.0.0-canary.96a640534.0":"2020-08-06T22:42:32.288Z","8.0.0-canary.9f9aac825.0":"2020-08-07T20:52:24.020Z","8.0.0-canary.fc65fd00b.0":"2020-08-10T15:22:03.315Z","8.0.0-canary.02e372c5f.0":"2020-08-10T15:49:44.961Z","8.0.0-canary.66669e3b6.0":"2020-08-10T15:53:42.999Z","8.0.0-canary.6d1ea9761.0":"2020-08-11T14:31:52.492Z","8.0.0-canary.79414bf9f.0":"2020-08-11T19:03:02.735Z","8.0.0-canary.85a5272df.0":"2020-08-11T20:09:15.203Z","8.0.0-canary.fda053eb8.0":"2020-08-12T20:05:15.224Z","8.0.0-canary.760873445.0":"2020-08-12T21:44:15.587Z","8.0.0-canary.2f4711a30.0":"2020-08-12T21:54:18.165Z","8.0.0-canary.2d72f3659.0":"2020-08-12T22:01:48.724Z","8.0.0-canary.1fee70a5e.0":"2020-08-12T23:29:44.433Z","8.0.0-canary.023f3fa34.0":"2020-08-13T01:13:26.219Z","8.0.0-canary.80f3a9e5d.0":"2020-08-13T01:30:07.052Z","8.0.0-canary.a1dcfe97c.0":"2020-08-13T08:51:31.459Z","8.0.0-canary.af332d5be.0":"2020-08-13T21:18:47.047Z","8.0.0-canary.7dd4567c4.0":"2020-08-14T00:52:08.800Z","8.0.0-canary.ff870005a.0":"2020-08-14T01:17:13.156Z","8.0.0-canary.150f427a0.0":"2020-08-14T13:31:02.522Z","8.0.0-canary.bcc58290a.0":"2020-08-14T23:23:30.898Z","8.0.0-canary.4f55400bb.0":"2020-08-17T16:39:33.230Z","8.0.0-canary.000d64815.0":"2020-08-17T17:05:22.559Z","8.0.0-canary.defa599a8.0":"2020-08-17T20:32:59.996Z","8.0.0-canary.66b8ed7e6.0":"2020-08-18T18:37:53.545Z","8.0.0-canary.e2b1033df.0":"2020-08-19T18:43:08.932Z","8.0.0-canary.2e8c3dd2e.0":"2020-08-19T19:24:58.982Z","8.0.0-canary.b2e80a5d9.0":"2020-08-19T22:22:04.812Z","8.0.0-canary.ff88df637.0":"2020-08-19T22:34:07.541Z","8.0.0-canary.32fb314cd.0":"2020-08-20T10:38:47.128Z","8.0.0-canary.546277d32.0":"2020-08-20T16:45:04.032Z","8.0.0-canary.da72839f4.0":"2020-08-20T18:01:11.124Z","8.0.0-canary.346069ccb.0":"2020-08-20T18:19:35.821Z","8.0.0-canary.e27c5802f.0":"2020-08-20T19:16:16.138Z","8.0.0-canary.f4532b9c8.0":"2020-08-20T19:58:43.840Z","8.0.0-canary.fbf73c2a6.0":"2020-08-20T21:07:31.827Z","8.0.0-canary.cf800124f.0":"2020-08-20T21:53:47.268Z","8.0.0-canary.95e4eeea7.0":"2020-08-20T23:29:52.505Z","8.0.0-canary.91ab1c62a.0":"2020-08-21T15:12:48.410Z","8.0.0-canary.58eaa9f02.0":"2020-08-21T20:01:26.272Z","8.0.0-canary.238216fc4.0":"2020-08-24T15:41:53.611Z","8.0.0-canary.a1c65593d.0":"2020-08-25T03:04:50.772Z","8.0.0-canary.708cc09c4.0":"2020-08-25T15:57:28.392Z","8.0.0-canary.19bea2ad3.0":"2020-08-26T18:50:26.730Z","8.0.0-canary.911014711.0":"2020-08-27T16:09:14.859Z","8.0.0-canary.d3387f54c.0":"2020-09-03T20:56:58.277Z","8.0.0-canary.2ccf996cc.0":"2020-09-03T20:57:31.126Z","8.0.0-canary.744bfe5d8.0":"2020-09-03T20:58:39.107Z","8.0.0-canary.78da96eaf.0":"2020-09-08T19:13:55.511Z","8.0.0-canary.b0ed593cc.0":"2020-09-09T06:17:06.303Z","8.0.0-canary.85a1fa9ea.0":"2020-09-10T21:11:39.555Z","8.0.0-canary.0bc41a9c7.0":"2020-09-11T17:51:10.066Z","8.0.0-canary.fc0eb5013.0":"2020-09-11T19:56:42.255Z","8.0.0-canary.319bf66de.0":"2020-09-11T23:11:27.696Z","8.0.0-canary.5bfc305ec.0":"2020-09-13T23:01:18.165Z","8.0.0-canary.83d83f131.0":"2020-09-14T00:33:49.980Z","8.0.0-canary.d52b165b5.0":"2020-09-15T14:55:32.855Z","8.0.0-canary.a831d4799.0":"2020-09-15T17:53:00.105Z","8.0.0-canary.a306aa488.0":"2020-09-17T00:59:56.978Z","8.0.0-canary.fd608ff66.0":"2020-09-17T14:27:00.184Z","8.0.0-canary.3e435ba57.0":"2020-09-17T14:44:22.138Z","8.0.0-canary.c250ec52a.0":"2020-09-17T20:11:38.149Z","8.0.0-canary.e34e411b1.0":"2020-09-17T20:18:58.332Z","8.0.0-canary.4e9343929.0":"2020-09-17T20:44:14.072Z","8.0.0-canary.4e5c350c2.0":"2020-09-21T21:15:22.388Z","8.0.0-canary.16c563ef7.0":"2020-09-22T19:47:27.297Z","8.0.0-canary.fd8af3d43.0":"2020-09-23T19:33:32.082Z","8.0.0-canary.d4cd83a85.0":"2020-09-25T00:37:11.218Z","8.0.0-canary.199aecdfb.0":"2020-09-25T15:52:34.431Z","8.0.0-canary.38ef4501f.0":"2020-09-30T18:25:51.438Z","8.0.0-canary.774dcfc8e.0":"2020-10-01T09:55:28.921Z","8.0.0-canary.0f60323a8.0":"2020-10-08T21:11:20.093Z","8.0.0-canary.d71622574.0":"2020-10-09T16:33:01.142Z","8.0.0-canary.7a9afaf4b.0":"2020-10-09T22:55:12.051Z","8.0.0-canary.8a39352c8.0":"2020-10-12T17:47:45.405Z","8.0.0-canary.790ca85fd.0":"2020-10-12T21:57:56.686Z","8.0.0-canary.174c0becf.0":"2020-10-14T02:16:56.367Z","8.0.0-canary.c71ebfa02.0":"2020-10-14T04:18:51.985Z","8.0.0-canary.2ab716cbd.0":"2020-10-16T00:05:33.122Z","8.0.0-canary.43c1c5e2f.0":"2020-10-19T14:09:33.107Z","8.0.0-canary.ccc64eea3.0":"2020-10-26T22:52:50.124Z","8.0.0-canary.a79cdd019.0":"2020-10-27T16:33:02.354Z","8.0.0-canary.596e98424.0":"2020-10-28T16:05:00.570Z","8.0.0-canary.05d5facc2.0":"2020-10-28T16:13:36.255Z","8.0.0-canary.291b3553d.0":"2020-10-28T17:46:24.993Z","8.0.0-canary.dbc449b09.0":"2020-10-28T18:14:07.012Z","8.0.0-canary.4794b25da.0":"2020-10-28T18:42:28.967Z","8.0.0-canary.c61db90a5.0":"2020-10-28T19:01:22.410Z","8.0.0-canary.6d9648ab2.0":"2020-10-29T20:33:58.269Z","8.0.0-canary.5511c5254.0":"2020-10-30T18:01:30.163Z","8.0.0-canary.bd6e302a4.0":"2020-11-02T17:06:13.575Z","9.0.0-canary.d6b5cd418.0":"2020-11-02T23:00:42.956Z","8.0.0":"2020-11-02T23:00:50.877Z","9.0.0-canary.fdf9a2634.0":"2020-11-03T23:22:40.519Z","9.0.0-canary.4a86f30a0.0":"2020-11-03T23:29:26.865Z","9.0.0-canary.fc8b045f1.0":"2020-11-03T23:38:26.496Z","9.0.0-canary.a0b2db26b.0":"2020-11-04T00:10:34.502Z","9.0.0-canary.419e03572.0":"2020-11-04T01:34:21.689Z","9.0.0-canary.a432ad542.0":"2020-11-06T01:47:05.855Z","9.0.0-canary.e2e8aef1e.0":"2020-11-06T02:06:32.923Z","9.0.0-canary.ec6b68b34.0":"2020-11-06T18:57:48.085Z","9.0.0-canary.b39094d14.0":"2020-11-06T21:17:13.798Z","9.0.0-canary.8648b8258.0":"2020-11-12T10:45:57.365Z","9.0.0-canary.240c5f74f.0":"2020-11-12T20:22:03.528Z","9.0.0-canary.6cf6ba4f4.0":"2020-11-16T18:51:42.109Z","9.0.0-canary.07f3e01b7.0":"2020-11-16T21:47:02.765Z","9.0.0-canary.23491cf85.0":"2020-11-17T00:18:30.057Z","9.0.0-canary.b659d4fc3.0":"2020-11-17T00:26:18.755Z","9.0.0-canary.d8a3aed67.0":"2020-11-17T15:29:15.572Z","9.0.0-canary.482ff9091.0":"2020-11-17T17:59:24.712Z","9.0.0-canary.99cfb6bd5.0":"2020-11-18T18:45:14.172Z","9.0.0-canary.b98d15d90.0":"2020-11-18T22:36:04.668Z","9.0.0-canary.30c11bfc2.0":"2020-11-19T01:27:23.483Z","9.0.0-canary.1b731d51b.0":"2020-11-19T18:53:38.438Z","9.0.0-canary.4ae94ff78.0":"2020-11-19T18:56:31.278Z","9.0.0-canary.7ad038e1d.0":"2020-11-19T19:19:37.836Z","9.0.0-canary.a41527604.0":"2020-11-19T20:02:11.653Z","9.0.0-canary.7b0e2b377.0":"2020-11-20T22:57:12.895Z","9.0.0-canary.c927a5d05.0":"2020-11-23T19:48:53.182Z","9.0.0-canary.b349b5185.0":"2020-11-24T17:10:11.809Z","9.0.0-canary.9083b7d61.0":"2020-11-24T21:17:14.602Z","9.0.0-canary.eff7b46ac.0":"2020-11-24T23:32:16.700Z","9.0.0-canary.ae27b44b0.0":"2020-11-25T15:35:50.277Z","9.0.0-canary.2fbba2554.0":"2020-11-30T17:41:36.981Z","9.0.0-canary.6d8574fe1.0":"2020-11-30T17:52:32.681Z","9.0.0-canary.fd22355f7.0":"2020-11-30T23:00:52.329Z","9.0.0-canary.c4ab98722.0":"2020-12-02T00:58:12.521Z","9.0.0-canary.977585650.0":"2020-12-02T14:43:37.178Z","9.0.0-canary.c7edfc7b6.0":"2020-12-02T14:50:49.909Z","9.0.0-canary.4f3347306.0":"2020-12-02T15:08:47.886Z","9.0.0-canary.37fbae10d.0":"2020-12-02T18:17:43.451Z","9.0.0-canary.11da3c0db.0":"2020-12-02T20:23:45.926Z","9.0.0-canary.489d4c219.0":"2020-12-03T15:31:02.307Z","9.0.0-canary.6557a69d9.0":"2020-12-03T15:42:55.603Z","9.0.0-canary.4ea1b7c69.0":"2020-12-03T16:00:01.066Z","9.0.0-canary.eaeb78ce3.0":"2020-12-03T17:03:06.459Z","9.0.0-canary.1c156d69d.0":"2020-12-03T20:46:31.823Z","9.0.0-canary.832668d33.0":"2020-12-04T18:07:12.727Z","9.0.0-canary.4321323e4.0":"2020-12-07T11:30:10.441Z","9.0.0-canary.2d5f32d41.0":"2020-12-07T16:43:48.938Z","9.0.0-canary.8239afc64.0":"2020-12-07T19:50:45.410Z","9.0.0-canary.6871336f1.0":"2020-12-08T16:02:51.769Z","9.0.0-canary.9f718da94.0":"2020-12-08T16:14:37.508Z","9.0.0-canary.1fccb1418.0":"2020-12-08T16:29:34.059Z","9.0.0-canary.afb68894e.0":"2020-12-08T16:33:37.060Z","9.0.0-canary.fd88d40c2.0":"2020-12-08T16:47:13.908Z","9.0.0-canary.ba9e3109c.0":"2020-12-08T19:06:41.963Z","9.0.0-canary.1085c3b2d.0":"2020-12-09T19:12:17.065Z","9.0.0-canary.c5dda809d.0":"2020-12-09T20:51:23.212Z","9.0.0-canary.f5f1bd86a.0":"2020-12-09T21:09:25.011Z","9.0.0-canary.00f38200f.0":"2020-12-11T15:47:26.803Z","9.0.0-canary.ac41a5729.0":"2020-12-11T16:29:40.895Z","9.0.0-canary.7fe0e4f05.0":"2020-12-11T17:06:48.237Z","9.0.0-canary.9244508bd.0":"2020-12-11T19:08:34.212Z","9.0.0-canary.384a8eeb1.0":"2020-12-16T17:03:02.877Z","9.0.0-canary.eabf9d5c2.0":"2020-12-16T18:28:50.503Z","9.0.0-canary.30fdfd06e.0":"2020-12-16T19:08:42.673Z","9.0.0-canary.9590a8f90.0":"2020-12-22T17:43:15.072Z","9.0.0-canary.f89d8b8f2.0":"2020-12-22T23:06:26.826Z","9.0.0-canary.fb194dd35.0":"2020-12-28T20:46:46.597Z","9.0.0-canary.64f36e287.0":"2020-12-28T21:09:41.837Z","9.0.0-canary.b7bbe7022.0":"2020-12-29T18:49:08.073Z","9.0.0":"2020-12-29T19:47:14.718Z","10.0.0-canary.776c18681.0":"2020-12-30T00:41:20.434Z","10.0.0-canary.671d72d95.0":"2020-12-30T20:13:06.153Z","10.0.0-canary.b4f5a1c9e.0":"2020-12-30T21:47:36.540Z","10.0.0-canary.a94bd8deb.0":"2020-12-30T22:05:31.895Z","10.0.0-canary.5d128511b.0":"2020-12-30T22:10:51.264Z","10.0.0-canary.365c69360.0":"2021-01-05T17:49:33.284Z","10.0.0-canary.700a8261a.0":"2021-01-05T21:01:56.645Z","10.0.0-canary.766981c15.0":"2021-01-05T22:41:34.612Z","10.0.0-canary.b28c576d9.0":"2021-01-05T22:51:12.957Z","10.0.0-canary.968735356.0":"2021-01-06T15:52:12.933Z","10.0.0-canary.c5e18b020.0":"2021-01-06T19:45:26.766Z","10.0.0-canary.bcff8a66a.0":"2021-01-06T20:27:42.867Z","10.0.0-canary.79328c9ff.0":"2021-01-07T02:35:27.632Z","10.0.0-canary.121e1f303.0":"2021-01-07T23:21:04.224Z","10.0.0-canary.abdd10065.0":"2021-01-08T17:52:51.934Z","10.0.0-canary.089de519c.0":"2021-01-08T22:21:53.384Z","10.0.0-canary.163119837.0":"2021-01-08T23:46:29.237Z","10.0.0-canary.b8a1a58e4.0":"2021-01-11T16:26:07.982Z","10.0.0-canary.7584267ff.0":"2021-01-12T01:13:39.322Z","10.0.0-canary.251ac04c0.0":"2021-01-12T19:56:34.279Z","10.0.0-canary.772cc1068.0":"2021-01-14T00:08:25.911Z","10.0.0-canary.fe13dd130.0":"2021-01-14T01:11:28.468Z","10.0.0-canary.c7c5da28f.0":"2021-01-14T01:35:20.354Z","10.0.0-canary.b2faa116a.0":"2021-01-19T19:27:47.781Z","10.0.0-canary.0c95c9f7b.0":"2021-01-19T22:55:06.568Z","10.0.0-canary.5268222c4.0":"2021-01-20T19:20:43.859Z","10.0.0-canary.2ed2d829b.0":"2021-01-20T23:09:25.656Z","10.0.0-canary.df00c2b30.0":"2021-01-21T19:56:16.562Z","10.0.0-canary.fd61b0476.0":"2021-01-21T20:10:54.474Z","10.0.0-canary.3fb3a0265.0":"2021-01-22T00:06:06.637Z","10.0.0-canary.07deaec27.0":"2021-01-22T16:57:40.036Z","10.0.0-canary.d2959b16c.0":"2021-01-22T18:53:21.571Z","10.0.0-canary.75f3bfe7c.0":"2021-01-22T22:52:47.439Z","10.0.0-canary.b9adb7a0f.0":"2021-01-22T23:37:11.327Z","10.0.0-canary.d29ec2862.0":"2021-01-25T16:25:24.794Z","10.0.0-canary.96be07c68.0":"2021-01-26T00:11:32.511Z","10.0.0-canary.e383944e9.0":"2021-01-26T01:46:12.607Z","10.0.0-canary.623af861e.0":"2021-01-26T03:46:25.759Z","10.0.0-canary.6863fd43a.0":"2021-01-26T21:34:46.716Z","10.0.0-canary.ea55b87ca.0":"2021-01-26T23:47:24.061Z","10.0.0-canary.e902ff05f.0":"2021-01-27T00:05:32.349Z","10.0.0-canary.2c9fc538a.0":"2021-01-27T00:28:36.789Z","10.0.0-canary.6bf56aaa4.0":"2021-01-27T01:21:35.268Z","10.0.0-canary.994873795.0":"2021-01-27T14:52:28.148Z","10.0.0-canary.96878e1d0.0":"2021-01-27T18:03:40.946Z","10.0.0-canary.3c117cdcc.0":"2021-01-27T18:33:54.769Z","10.0.0-canary.b411e7033.0":"2021-01-27T22:05:10.520Z","10.0.0-canary.a9ac16b4a.0":"2021-01-27T23:04:58.139Z","10.0.0-canary.fec7b42ca.0":"2021-01-28T19:16:01.989Z","10.0.0-canary.8e66dbfee.0":"2021-02-01T23:21:47.057Z","10.0.0-canary.637d15da6.0":"2021-02-02T18:50:39.397Z","10.0.0-canary.fb793939e.0":"2021-02-02T23:44:29.559Z","10.0.0-canary.15a4d40dd.0":"2021-02-03T02:19:46.329Z","10.0.0-canary.7a003acf0.0":"2021-02-04T02:35:22.436Z","10.0.0-canary.05f249666.0":"2021-02-04T17:51:36.482Z","10.0.0-canary.1a3a39629.0":"2021-02-04T18:44:38.269Z","10.0.0-canary.8b1cdb1be.0":"2021-02-04T22:36:12.968Z","10.0.0-canary.8271f00f7.0":"2021-02-04T23:01:52.541Z","10.0.0-canary.533092a90.0":"2021-02-05T03:47:59.169Z","11.0.0-canary.633a9fc7a.0":"2021-02-05T16:19:00.075Z","10.0.0":"2021-02-05T16:20:16.983Z","11.0.0-canary.b5227247d.0":"2021-02-05T17:43:28.585Z","11.0.0-canary.95322b11e.0":"2021-02-05T23:32:57.852Z","11.0.0-canary.1f318ff0f.0":"2021-02-06T00:06:19.523Z","11.0.0-canary.ab12cf7a3.0":"2021-02-08T15:05:06.090Z","11.0.0-canary.98db2c5ec.0":"2021-02-08T15:36:06.213Z","11.0.0-canary.1f86b9f6d.0":"2021-02-08T17:18:49.291Z","11.0.0-canary.aac8f5d9a.0":"2021-02-08T18:01:53.785Z","11.0.0-canary.750e18fc7.0":"2021-02-08T21:42:38.409Z","11.0.0-canary.b62b1266d.0":"2021-02-09T21:54:02.313Z","11.0.0-canary.a6b3101fb.0":"2021-02-11T23:18:19.156Z","11.0.0-canary.ed88df700.0":"2021-02-12T00:08:13.983Z","11.0.0-canary.d30efe6b4.0":"2021-02-12T02:43:10.748Z","11.0.0-canary.0393bdc4b.0":"2021-02-12T04:32:14.023Z","11.0.0-canary.7cd26af4d.0":"2021-02-12T16:00:45.259Z","11.0.0-canary.71fe9a067.0":"2021-02-12T16:32:16.196Z","11.0.0-canary.0fd56a86b.0":"2021-02-13T00:13:07.988Z","11.0.0-canary.f19bbc4af.0":"2021-02-16T22:17:32.757Z","11.0.0-canary.f9cac96cc.0":"2021-02-17T16:11:21.055Z","11.0.0-canary.79ce0878b.0":"2021-02-17T19:26:21.475Z","11.0.0-canary.d6e507b5b.0":"2021-02-17T19:59:25.967Z","11.0.0-canary.f2658381b.0":"2021-02-17T22:46:06.093Z","11.0.0-canary.97c4d4035.0":"2021-02-18T02:36:21.559Z","11.0.0-canary.f5bb4648c.0":"2021-02-18T16:06:56.025Z","11.0.0-canary.302c7a960.0":"2021-02-18T18:39:33.192Z","11.0.0-canary.aa0aaf026.0":"2021-02-18T19:24:47.155Z","11.0.0-canary.07ff0c452.0":"2021-02-18T19:44:00.382Z","11.0.0-canary.bed7ecd3e.0":"2021-02-18T23:28:50.599Z","11.0.0-canary.06dead2d6.0":"2021-02-19T00:38:16.415Z","11.0.0-canary.cddb03553.0":"2021-02-19T03:14:22.143Z","11.0.0-canary.d6d8d0476.0":"2021-02-19T05:37:56.105Z","11.0.0-canary.0b4a4b2eb.0":"2021-02-19T15:47:09.820Z","11.0.0-canary.3201cae47.0":"2021-02-19T23:01:58.702Z","11.0.0-canary.f1b1fd5d3.0":"2021-02-22T19:50:48.942Z","11.0.0-canary.7899e0fe0.0":"2021-02-22T22:47:05.112Z","11.0.0-canary.f19c86d13.0":"2021-02-22T23:31:54.116Z","11.0.0-canary.60e892d79.0":"2021-02-23T01:15:30.122Z","11.0.0-canary.c96bfa495.0":"2021-02-23T19:34:28.532Z","11.0.0-canary.fa9b59f67.0":"2021-02-23T19:35:48.916Z","11.0.0-canary.869e3497c.0":"2021-02-23T19:36:17.545Z","11.0.0-canary.8ecd7c9a9.0":"2021-02-23T19:51:55.332Z","11.0.0-canary.9c85d505b.0":"2021-02-23T22:16:56.941Z","11.0.0-canary.9f2e85fb8.0":"2021-02-24T01:49:34.405Z","11.0.0-canary.19c4f29ef.0":"2021-02-25T19:23:51.993Z","11.0.0-canary.63df6e9bf.0":"2021-02-25T19:38:22.154Z","11.0.0-canary.981ad970a.0":"2021-02-26T00:09:22.895Z","11.0.0-canary.f9c9e39d6.0":"2021-02-26T18:40:17.053Z","11.0.0-canary.c97d7d881.0":"2021-03-01T20:54:26.847Z","11.0.0-canary.bf670dad7.0":"2021-03-03T00:22:22.314Z","11.0.0-canary.c7d98fcde.0":"2021-03-03T20:33:24.997Z","11.0.0-canary.4fef8bc1e.0":"2021-03-03T23:25:23.270Z","11.0.0-canary.afae3a3ec.0":"2021-03-03T23:43:20.516Z","11.0.0-canary.0a0b10f22.0":"2021-03-04T00:02:20.607Z","11.0.0-canary.6f678a91a.0":"2021-03-04T18:41:17.767Z","11.0.0-canary.f5f1b613c.0":"2021-03-04T20:50:47.727Z","11.0.0-canary.606e767ef.0":"2021-03-04T21:46:54.914Z","11.0.0-canary.f77a4dd1a.0":"2021-03-06T04:41:09.250Z","11.0.0-canary.2d6ba2c23.0":"2021-03-08T22:45:22.485Z","11.0.0-canary.7522dcaca.0":"2021-03-09T00:28:43.235Z","11.0.0-canary.5c0ab7401.0":"2021-03-09T22:53:37.740Z","11.0.0-canary.59010b6dc.0":"2021-03-10T16:58:39.771Z","11.0.0-canary.9e52f5544.0":"2021-03-10T23:26:18.363Z","11.0.0-canary.a678806f5.0":"2021-03-11T01:51:05.499Z","11.0.0-canary.b2d22df5b.0":"2021-03-11T17:04:15.178Z","11.0.0-canary.81911b707.0":"2021-03-11T18:24:31.738Z","11.0.0-canary.9eeb35c38.0":"2021-03-11T19:38:03.557Z","11.0.0-canary.12be3e95a.0":"2021-03-11T20:02:40.832Z","11.0.0-canary.e683bdf4a.0":"2021-03-11T20:10:14.953Z","11.0.0-canary.a07b6d486.0":"2021-03-11T20:34:34.555Z","11.0.0-canary.1e0653477.0":"2021-03-11T20:41:44.344Z","11.0.0-canary.148e8cfcc.0":"2021-03-11T22:45:30.955Z","11.0.0-canary.73a227194.0":"2021-03-12T00:25:19.834Z","11.0.0-canary.f8579b7ea.0":"2021-03-13T02:04:20.260Z","11.0.0-canary.d2a39d300.0":"2021-03-16T00:36:15.585Z","11.0.0-canary.7cf67823e.0":"2021-03-16T18:21:21.604Z","11.0.0-canary.67d780c79.0":"2021-03-16T19:49:06.235Z","11.0.0-canary.0f358ddae.0":"2021-03-16T22:13:38.839Z","11.0.0-canary.67eb0df80.0":"2021-03-16T22:40:51.191Z","11.0.0-canary.941ca3b3c.0":"2021-03-16T22:42:33.719Z","11.0.0-canary.3344d12ad.0":"2021-03-17T10:02:55.847Z","11.0.0-canary.6072ed604.0":"2021-03-17T23:00:37.442Z","11.0.0-canary.d3a6862af.0":"2021-03-18T16:21:17.768Z","11.0.0-canary.40dd242d5.0":"2021-03-18T21:18:29.404Z","11.0.0-canary.ec8f8465f.0":"2021-03-18T21:45:20.822Z","11.0.0-canary.da38969ec.0":"2021-03-18T22:19:02.304Z","11.0.0-canary.f5246264d.0":"2021-03-19T00:39:46.890Z","11.0.0-canary.03d34bbad.0":"2021-03-19T00:52:34.491Z","11.0.0-canary.cbc57c600.0":"2021-03-19T01:00:51.113Z","11.0.0-canary.d6c5bcf37.0":"2021-03-19T01:13:52.775Z","11.0.0-canary.fefc668d7.0":"2021-03-19T01:35:08.195Z","11.0.0-canary.faa7d3226.0":"2021-03-19T17:45:23.700Z","11.0.0-canary.c60449bc8.0":"2021-03-19T18:06:18.470Z","11.0.0-canary.5f0fc444a.0":"2021-03-19T18:38:49.120Z","11.0.0-canary.4567a750d.0":"2021-03-20T02:09:04.951Z","11.0.0-canary.0cde52f5a.0":"2021-03-23T00:04:03.420Z","11.0.0-canary.48f4b67fb.0":"2021-03-23T19:55:35.064Z","11.0.0-canary.0b8cff734.0":"2021-03-23T20:05:48.501Z","11.0.0-canary.8943b991f.0":"2021-03-23T20:30:47.995Z","11.0.0-canary.3955d8d3d.0":"2021-03-24T19:17:48.043Z","11.0.0-canary.23ea2d85e.0":"2021-03-25T17:34:01.412Z","11.0.0-canary.4ceb42220.0":"2021-03-26T07:58:41.011Z","11.0.0-canary.dc9c84023.0":"2021-03-30T17:49:38.568Z","11.0.0-canary.56fc26962.0":"2021-03-31T00:21:48.932Z","11.0.0-canary.bc318250e.0":"2021-03-31T01:34:48.243Z","11.0.0-canary.edaee19aa.0":"2021-03-31T02:12:45.822Z","11.0.0-canary.24609b822.0":"2021-03-31T20:58:06.568Z","11.0.0-canary.b6cddc2b7.0":"2021-04-01T15:06:28.431Z","11.0.0-canary.94937c78c.0":"2021-04-01T21:01:58.702Z","11.0.0-canary.e7202cb57.0":"2021-04-01T22:48:19.009Z","11.0.0-canary.1f636b205.0":"2021-04-02T22:25:13.461Z","11.0.0-canary.94f50b260.0":"2021-04-05T15:06:17.456Z","11.0.0-canary.a4009b80a.0":"2021-04-05T22:01:38.083Z","11.0.0-canary.15604bd0d.0":"2021-04-05T22:43:16.690Z","11.0.0-canary.76da7876c.0":"2021-04-07T01:45:55.146Z","11.0.0-canary.6bcb6cbd2.0":"2021-04-07T18:54:55.416Z","11.0.0-canary.c91e8d141.0":"2021-04-07T18:58:54.884Z","11.0.0-canary.f77c50860.0":"2021-04-08T15:36:53.103Z","11.0.0-canary.367d88bdb.0":"2021-04-08T16:39:42.833Z","11.0.0-canary.0ec437d3b.0":"2021-04-08T19:36:27.490Z","11.0.0-canary.b2fa996a1.0":"2021-04-09T15:12:13.691Z","11.0.0-canary.24255c408.0":"2021-04-09T20:13:34.853Z","11.0.0-canary.7d6a4bb72.0":"2021-04-09T22:54:37.165Z","11.0.0-canary.352b295c1.0":"2021-04-12T18:16:41.009Z","11.0.0-canary.ab99b8064.0":"2021-04-13T14:44:30.916Z","11.0.0-canary.8f0a11e32.0":"2021-04-14T20:04:02.778Z","11.0.0-canary.f5c6db8fc.0":"2021-04-15T18:05:10.750Z","11.0.0-canary.3793a3143.0":"2021-04-15T18:32:31.337Z","11.0.0-canary.bc104bae7.0":"2021-04-15T19:47:32.203Z","12.0.0-canary.3f342c3f4.0":"2021-04-15T22:55:21.550Z","11.0.0":"2021-04-15T22:59:24.497Z","12.0.0-canary.2ebfc5374.0":"2021-04-16T20:46:09.267Z","12.0.0-canary.5631828e1.0":"2021-04-17T07:47:59.090Z","12.0.0-canary.bd685395b.0":"2021-04-19T18:42:19.318Z","12.0.0-canary.b52196498.0":"2021-04-19T19:58:51.548Z","12.0.0-canary.8ba3e298c.0":"2021-04-21T14:09:43.017Z","12.0.0-canary.c629eab71.0":"2021-04-21T19:58:18.671Z","12.0.0-canary.8ace3b810.0":"2021-04-21T20:38:57.047Z","12.0.0-canary.70beaf42d.0":"2021-04-21T20:50:27.656Z","12.0.0-canary.cad489689.0":"2021-04-22T16:50:43.873Z","12.0.0-canary.d928692b5.0":"2021-04-23T17:35:37.313Z","12.0.0-canary.8f68de8f3.0":"2021-04-23T18:14:19.545Z","12.0.0-canary.05753cf77.0":"2021-04-23T23:44:13.910Z","12.0.0-canary.ef43e6d96.0":"2021-04-23T23:50:37.010Z","12.0.0-canary.197f64fa2.0":"2021-04-26T17:10:58.950Z","12.0.0-canary.55ad2d7d8.0":"2021-04-27T01:20:59.746Z","12.0.0-canary.ec4ac5234.0":"2021-04-27T07:59:42.298Z","12.0.0-canary.b0579acdb.0":"2021-04-27T08:37:36.717Z","12.0.0-canary.81e2d4ff3.0":"2021-04-27T20:58:59.550Z","12.0.0-canary.c8edee52c.0":"2021-04-27T21:47:16.040Z","12.0.0-canary.f5b6110d6.0":"2021-04-27T22:08:35.521Z","12.0.0-canary.cee9b9e22.0":"2021-04-28T00:14:06.956Z","12.0.0-canary.96e83fca7.0":"2021-04-28T02:49:01.047Z","12.0.0-canary.4c497bd19.0":"2021-04-28T17:54:46.557Z","12.0.0-canary.105b15b96.0":"2021-04-28T21:45:58.171Z","12.0.0-canary.6e20259e3.0":"2021-04-28T21:50:23.194Z","12.0.0-canary.0f79a5d74.0":"2021-04-28T22:44:13.641Z","12.0.0-canary.84f3db9ed.0":"2021-04-29T14:19:12.570Z","12.0.0-canary.8fc29273c.0":"2021-04-29T21:24:56.827Z","12.0.0-canary.c50d20bab.0":"2021-04-29T23:03:13.449Z","12.0.0-canary.474836ad0.0":"2021-05-01T03:38:50.582Z","12.0.0-canary.f5ad92287.0":"2021-05-03T18:23:26.658Z","12.0.0-canary.af453daf8.0":"2021-05-03T18:54:42.923Z","12.0.0-canary.1f1918c24.0":"2021-05-03T19:23:53.520Z","12.0.0-canary.33148231f.0":"2021-05-03T19:39:55.898Z","12.0.0-canary.06b76fa74.0":"2021-05-03T19:46:58.411Z","12.0.0-canary.7c5000473.0":"2021-05-03T22:42:54.632Z","12.0.0-canary.de997644b.0":"2021-05-04T17:29:25.410Z","12.0.0-canary.d4d7f1cc2.0":"2021-05-04T17:56:22.239Z","12.0.0-canary.be999eb08.0":"2021-05-04T18:01:30.644Z","12.0.0-canary.eda1705fc.0":"2021-05-04T19:11:37.200Z","12.0.0-canary.718c90178.0":"2021-05-04T19:28:56.493Z","12.0.0-canary.0e3917299.0":"2021-05-04T19:31:43.528Z","12.0.0-canary.836b3c7db.0":"2021-05-04T20:35:06.352Z","12.0.0-canary.53d4e6d59.0":"2021-05-04T20:50:45.070Z","12.0.0-canary.18d147e27.0":"2021-05-04T20:59:15.152Z","12.0.0-canary.b9984794e.0":"2021-05-04T23:04:19.849Z","12.0.0-canary.b76f5fc9d.0":"2021-05-04T23:07:48.562Z","12.0.0-canary.055d4f10a.0":"2021-05-04T23:23:18.314Z","12.0.0-canary.5b6a46016.0":"2021-05-05T16:17:32.034Z","12.0.0-canary.33c9a737a.0":"2021-05-05T17:28:30.168Z","12.0.0-canary.9bc0effaf.0":"2021-05-05T21:01:20.684Z","12.0.0-canary.a1e0f2af5.0":"2021-05-05T21:42:15.169Z","12.0.0-canary.06930c96b.0":"2021-05-05T23:40:26.759Z","12.0.0-canary.03f525f9f.0":"2021-05-06T00:31:21.958Z","12.0.0-canary.e82ba2a26.0":"2021-05-06T15:57:52.531Z","12.0.0-canary.fc7c4e5ce.0":"2021-05-06T17:30:40.259Z","12.0.0-canary.65c04514d.0":"2021-05-06T18:45:09.027Z","12.0.0-canary.c97779ca6.0":"2021-05-06T21:44:31.153Z","12.0.0-canary.869d890d4.0":"2021-05-07T15:20:05.271Z","12.0.0-canary.ec22e1da9.0":"2021-05-10T18:24:43.985Z","12.0.0-nightly.7427449f0.0":"2021-05-10T18:45:17.550Z","12.0.0-canary.957cc3bf5.0":"2021-05-10T21:58:01.805Z","12.0.0-canary.88a33cd70.0":"2021-05-11T00:10:05.988Z","12.0.0-canary.d20dc6dba.0":"2021-05-11T00:26:04.514Z","12.0.0-canary.0ce2fdb02.0":"2021-05-11T00:59:53.681Z","12.0.0-canary.cb162da37.0":"2021-05-11T01:59:47.412Z","12.0.0-canary.573dc7ffd.0":"2021-05-11T02:18:41.565Z","12.0.0-canary.d5f6ad3fe.0":"2021-05-11T23:23:44.664Z","12.0.0-canary.25751d2ed.0":"2021-05-12T16:21:10.858Z","12.0.0-canary.a23ecb682.0":"2021-05-12T18:24:32.511Z","12.0.0-canary.33a954852.0":"2021-05-13T15:09:03.186Z","12.0.0-canary.a4484849b.0":"2021-05-13T15:32:18.410Z","12.0.0-canary.b4c3f513e.0":"2021-05-13T16:09:18.632Z","12.0.0-canary.1a8d06483.0":"2021-05-13T16:14:59.377Z","12.0.0-canary.8e6081836.0":"2021-05-14T21:41:51.834Z","12.0.0-canary.a2b0f4cee.0":"2021-05-14T21:55:06.276Z","12.0.0-canary.e8e39ad19.0":"2021-05-18T20:14:21.934Z","12.0.0-canary.4bb5eea2b.0":"2021-05-19T15:29:34.882Z","12.0.0-canary.ccce99cd6.0":"2021-05-20T00:58:01.074Z","12.0.0-canary.14767a8db.0":"2021-05-20T20:52:18.990Z","12.0.0-canary.22c6dcff9.0":"2021-05-24T15:19:54.538Z","12.0.0-canary.fadab3372.0":"2021-05-24T16:07:06.092Z","12.0.0-canary.caa73aeee.0":"2021-05-25T14:15:39.470Z","12.0.0-canary.ec31ae1ed.0":"2021-05-25T20:36:41.974Z","12.0.0-canary.8530d3514.0":"2021-05-27T16:06:05.898Z","12.0.0-canary.00b5899dc.0":"2021-06-01T22:46:49.997Z","12.0.0-canary.f1525ea3e.0":"2021-06-03T13:55:39.025Z","12.0.0-canary.464a00286.0":"2021-06-03T14:47:31.815Z","12.0.0-canary.474de7878.0":"2021-06-03T15:15:25.695Z","12.0.0-canary.b87ebf74d.0":"2021-06-03T17:47:30.635Z","12.0.0-canary.2daa49b35.0":"2021-06-04T16:15:23.474Z","12.0.0-canary.08db3d737.0":"2021-06-04T19:42:51.397Z","12.0.0-canary.5823407a7.0":"2021-06-08T00:49:39.078Z","12.0.0-canary.23b0c5e22.0":"2021-06-08T16:23:27.538Z","12.0.0-canary.2952c6a76.0":"2021-06-08T17:42:03.747Z","12.0.0-canary.f12425f88.0":"2021-06-10T01:07:36.763Z","12.0.0-canary.e543628c3.0":"2021-06-10T01:08:35.784Z","12.0.0-canary.e0c346286.0":"2021-06-10T16:37:02.886Z","12.0.0-canary.f43af5633.0":"2021-06-10T20:36:56.330Z","12.0.0-canary.8415ae585.0":"2021-06-11T16:07:02.752Z","12.0.0-canary.598fcccc8.0":"2021-06-11T21:47:33.069Z","12.0.0-canary.5d0605188.0":"2021-06-14T17:40:28.856Z","12.0.0-canary.f147a2271.0":"2021-06-14T19:19:20.428Z","12.0.0-canary.33579e00b.0":"2021-06-15T00:23:15.522Z","12.0.0-canary.a6909c0e6.0":"2021-06-15T18:31:22.495Z","12.0.0-canary.c18b5925b.0":"2021-06-15T21:04:49.486Z","12.0.0-canary.271fff902.0":"2021-06-15T22:52:15.653Z","12.0.0-canary.7ea2e830d.0":"2021-06-15T22:53:40.736Z","12.0.0-canary.d96f0a1e0.0":"2021-06-16T21:07:36.221Z","12.0.0-canary.a6183801a.0":"2021-06-16T22:06:40.718Z","12.0.0-canary.940550232.0":"2021-06-17T19:41:27.832Z","12.0.0-canary.f705e8048.0":"2021-06-18T15:25:44.094Z","12.0.0-canary.08d791f37.0":"2021-06-18T21:12:55.096Z","12.0.0-canary.e38d7440f.0":"2021-06-21T17:41:46.846Z","12.0.0-canary.75900a5a9.0":"2021-06-21T18:38:18.365Z","12.0.0-canary.33e6f50e9.0":"2021-06-23T00:13:15.804Z","12.0.0-canary.8c685301d.0":"2021-06-23T18:25:49.458Z","12.0.0-canary.8c7d994ae.0":"2021-06-23T19:28:38.595Z","12.0.0-canary.4ccd39bdd.0":"2021-06-24T16:16:08.836Z","12.0.0-canary.17553e9f8.0":"2021-06-28T22:53:46.870Z","12.0.0-canary.4c80072fd.0":"2021-06-29T18:42:03.451Z","12.0.0-canary.796811db7.0":"2021-07-01T00:04:38.722Z","12.0.0-canary.70e1efdca.0":"2021-07-01T17:07:50.455Z","12.0.0-canary.435866d32.0":"2021-07-02T18:22:23.764Z","12.0.0-canary.d0f9f3f2e.0":"2021-07-03T00:01:16.649Z","12.0.0-canary.adeac0549.0":"2021-07-08T15:10:52.090Z","12.0.0-canary.068fd5028.0":"2021-07-08T19:04:55.863Z","12.0.0-canary.5dfec7a14.0":"2021-07-12T20:05:25.103Z","12.0.0-canary.07a73750c.0":"2021-07-12T20:26:42.496Z","12.0.0-canary.3e4c6dca1.0":"2021-07-13T01:52:33.783Z","12.0.0-canary.ea77795b1.0":"2021-07-13T15:50:35.688Z","12.0.0-canary.15a179fad.0":"2021-07-13T18:10:45.562Z","12.0.0-canary.c73142a1b.0":"2021-07-13T18:45:28.021Z","12.0.0-canary.d923db73a.0":"2021-07-13T20:55:10.829Z","12.0.0-canary.22d29cbb4.0":"2021-07-13T22:51:59.491Z","12.0.0-canary.2749604bc.0":"2021-07-14T16:23:45.885Z","12.0.0-canary.e1703bed9.0":"2021-07-14T21:49:24.822Z","12.0.0-canary.de48eff0d.0":"2021-07-15T17:09:27.205Z","12.0.0-canary.4f060adc5.0":"2021-07-15T19:23:11.022Z","12.0.0-canary.bd25779b2.0":"2021-07-15T20:43:33.265Z","12.0.0-canary.9f68a932e.0":"2021-07-15T22:08:24.137Z","12.0.0-canary.4eecdeaf0.0":"2021-07-16T14:59:10.187Z","12.0.0-canary.7239684d4.0":"2021-07-16T16:00:20.284Z","12.0.0-canary.d5f1f7c72.0":"2021-07-16T16:15:13.464Z","12.0.0-canary.4d95812f9.0":"2021-07-16T19:44:25.522Z","12.0.0-canary.38d1846cc.0":"2021-07-19T18:43:16.282Z","12.0.0-canary.3f691eccf.0":"2021-07-20T16:10:21.799Z","12.0.0-canary.ebb5c73bb.0":"2021-07-20T16:58:00.905Z","12.0.0-nightly.778a0e8a.0":"2021-07-20T21:06:45.515Z","12.0.0-canary.791311bba.0":"2021-07-20T22:08:48.418Z","12.0.0-canary.85e9a6ac3.0":"2021-07-21T15:37:12.879Z","12.0.0-canary.6b0442278.0":"2021-07-21T18:51:09.259Z","12.0.0-canary.5f00e454a.0":"2021-07-22T17:07:38.385Z","12.0.0-canary.90e08fc6b.0":"2021-07-22T23:39:33.403Z","12.0.0-canary.cf5b9eb86.0":"2021-07-23T18:13:29.948Z","12.0.0-canary.3f36ac75c.0":"2021-07-23T18:33:24.660Z","12.0.0-canary.ea1e1b850.0":"2021-07-24T20:57:00.818Z","12.0.0-canary.22f390c43.0":"2021-07-27T19:01:08.331Z","12.0.0":"2021-07-27T19:51:10.590Z","13.0.0-canary.ae85f7eba.0":"2021-07-27T19:52:48.431Z","13.0.0-canary.5981207f7.0":"2021-07-27T23:19:29.134Z","13.0.0-canary.83bdd0222.0":"2021-07-28T17:27:15.179Z","13.0.0-canary.28656298a.0":"2021-07-29T18:14:20.159Z","13.0.0-canary.9e797daaf.0":"2021-07-29T18:36:35.861Z","13.0.0-canary.adb9f1ad8.0":"2021-07-30T19:06:23.858Z","13.0.0-canary.cc5377458.0":"2021-07-30T21:34:37.402Z","13.0.0-canary.a395972cf.0":"2021-08-03T21:24:37.221Z","13.0.0-canary.7c96e6b98.0":"2021-08-03T22:15:11.269Z","13.0.0-canary.a80c8b2c2.0":"2021-08-05T00:01:03.184Z","13.0.0-canary.3dd611091.0":"2021-08-05T03:57:47.658Z","13.0.0-canary.5dee37ff6.0":"2021-08-05T17:43:36.749Z","13.0.0-canary.bf405d22a.0":"2021-08-05T20:19:22.767Z","13.0.0-canary.b47dd37a6.0":"2021-08-05T20:51:13.015Z","13.0.0-canary.6c82b965b.0":"2021-08-06T16:16:07.033Z","13.0.0-canary.4ca11fe76.0":"2021-08-06T17:08:49.206Z","13.0.0-canary.510cf90f2.0":"2021-08-09T17:18:37.432Z","13.0.0-canary.17580ebf7.0":"2021-08-09T18:18:51.205Z","13.0.0-canary.7249a3060.0":"2021-08-09T18:22:53.329Z","13.0.0-canary.4c405863b.0":"2021-08-10T17:42:08.988Z","13.0.0-canary.f4241a42a.0":"2021-08-11T17:00:55.920Z","13.0.0-canary.0ad12ed3c.0":"2021-08-11T21:30:03.073Z","13.0.0-canary.077dcfcfe.0":"2021-08-12T17:56:38.775Z","13.0.0-canary.e3346766f.0":"2021-08-13T19:46:39.477Z","13.0.0-canary.2fb068fb0.0":"2021-08-13T19:49:49.057Z","13.0.0-canary.fb76c5069.0":"2021-08-16T20:09:24.485Z","13.0.0-canary.457d89aad.0":"2021-08-17T15:23:09.670Z","13.0.0-canary.0de2f2edc.0":"2021-08-17T20:55:32.305Z","13.0.0-canary.1f9259b9d.0":"2021-08-17T22:15:33.830Z","13.0.0-canary.3b9290351.0":"2021-08-18T05:25:20.147Z","13.0.0-canary.43d2eed2a.0":"2021-08-18T16:03:30.978Z","13.0.0-canary.0a9069300.0":"2021-08-19T16:18:56.061Z","13.0.0-canary.7da413ed8.0":"2021-08-20T15:50:09.612Z","13.0.0-canary.e1e69fd8e.0":"2021-08-20T19:33:31.691Z","13.0.0-canary.f5afc16df.0":"2021-08-20T20:27:58.677Z","13.0.0-canary.28d0d75bb.0":"2021-08-20T22:21:38.225Z","13.0.0-canary.21ece5360.0":"2021-08-20T23:45:32.929Z","13.0.0-canary.8de07c02a.0":"2021-08-23T15:28:00.136Z","13.0.0-canary.65aa63b0c.0":"2021-08-24T15:30:02.877Z","13.0.0-canary.15981e9d9.0":"2021-08-24T16:18:28.422Z","13.0.0-canary.fa7520f62.0":"2021-08-24T22:29:09.361Z","13.0.0-canary.ce25bc3ec.0":"2021-08-24T22:49:49.180Z","13.0.0-canary.12f5622e1.0":"2021-08-24T23:19:28.529Z","13.0.0-canary.d97f8f133.0":"2021-08-25T18:34:32.278Z","13.0.0-canary.d86fb6fac.0":"2021-08-25T18:55:03.146Z","13.0.0-canary.e8554dbbf.0":"2021-08-25T22:00:44.816Z","13.0.0-canary.877e3fb0d.0":"2021-08-26T15:39:35.354Z","13.0.0-canary.6236f3576.0":"2021-08-26T16:07:20.228Z","13.0.0-canary.1d19158a1.0":"2021-08-26T17:10:33.390Z","13.0.0-canary.6adc9e83f.0":"2021-08-30T22:45:37.368Z","13.0.0-canary.d082790f0.0":"2021-09-01T21:55:39.567Z","13.0.0-canary.e2c4f0196.0":"2021-09-02T02:12:48.017Z","13.0.0-canary.611db508e.0":"2021-09-02T03:16:35.076Z","13.0.0-canary.d4706933f.0":"2021-09-02T15:39:07.959Z","13.0.0-canary.c16fe03ce.0":"2021-09-02T17:46:10.112Z","13.0.0-canary.9203a958a.0":"2021-09-02T23:47:38.232Z","13.0.0-canary.fddd5ae93.0":"2021-09-03T07:31:25.535Z","13.0.0-canary.117599a8b.0":"2021-09-03T07:32:56.101Z","13.0.0-canary.e4180d07b.0":"2021-09-03T07:33:23.038Z","13.0.0-canary.42d175efc.0":"2021-09-03T15:44:12.355Z","13.0.0-canary.72464476c.0":"2021-09-07T15:35:28.693Z","13.0.0-canary.37d4db866.0":"2021-09-09T14:34:46.482Z","13.0.0-canary.6df682e74.0":"2021-09-09T15:44:29.982Z","13.0.0-canary.b49359c35.0":"2021-09-09T17:36:50.733Z","13.0.0-canary.470bd34e8.0":"2021-09-09T18:02:43.534Z","13.0.0-canary.d48a01771.0":"2021-09-09T18:11:38.557Z","13.0.0-canary.13db34b34.0":"2021-09-09T18:26:40.526Z","13.0.0-canary.864798678.0":"2021-09-09T18:38:05.926Z","13.0.0-canary.d04bda3fb.0":"2021-09-10T15:23:05.676Z","13.0.0-canary.5533f73d3.0":"2021-09-13T23:04:52.673Z","13.0.0-canary.08398f880.0":"2021-09-13T23:35:33.619Z","13.0.0-canary.818f4ee93.0":"2021-09-15T17:51:35.411Z","13.0.0-canary.8355e14dc.0":"2021-09-15T19:13:33.837Z","13.0.0-canary.d4e16a6c4.0":"2021-09-15T22:00:20.091Z","13.0.0-canary.65125b3a6.0":"2021-09-16T21:18:33.614Z","13.0.0-canary.80a583365.0":"2021-09-17T20:36:40.352Z","13.0.0-canary.83900936a.0":"2021-09-17T23:25:08.171Z","13.0.0-canary.860ad06a1.0":"2021-09-17T23:36:54.257Z","13.0.0-canary.3b8d4429e.0":"2021-09-20T17:48:22.876Z","13.0.0-canary.2da3606b9.0":"2021-09-20T19:38:29.528Z","13.0.0-canary.e8c598d1e.0":"2021-09-20T21:12:46.883Z","13.0.0-canary.1340ee9f7.0":"2021-09-22T17:58:50.743Z","13.0.0-canary.65084baff.0":"2021-09-23T21:26:26.207Z","13.0.0-canary.c79aa0cdd.0":"2021-09-24T13:42:55.839Z","13.0.0":"2021-09-24T19:46:41.149Z","14.0.0-canary.198431fcd.0":"2021-09-24T19:47:25.707Z","14.0.0-canary.9a02b6ef8.0":"2021-09-25T13:11:58.400Z","14.0.0-canary.758ce31d9.0":"2021-09-27T17:30:17.700Z","14.0.0-canary.86b50ef74.0":"2021-09-28T17:44:01.510Z","14.0.0-canary.b2fe3528b.0":"2021-09-29T22:57:43.486Z","14.0.0-canary.586e740dd.0":"2021-09-30T16:32:07.599Z","14.0.0-canary.2ac92d766.0":"2021-10-05T19:29:28.988Z","14.0.0-canary.353ca7e9f.0":"2021-10-08T18:47:45.755Z","14.0.0-canary.c78ff0429.0":"2021-10-11T17:23:08.883Z","14.0.0-canary.261f2db59.0":"2021-10-20T17:00:36.550Z","14.0.0-canary.9803d2dc1.0":"2021-10-20T19:22:37.217Z","14.0.0-canary.348665978.0":"2021-10-21T14:51:33.208Z","14.0.0-canary.b2b979a8a.0":"2021-10-28T15:13:11.737Z","14.0.0-canary.1af7c1c4a.0":"2021-10-28T17:53:48.515Z","14.0.0-canary.4afd353cd.0":"2021-10-29T15:02:31.368Z","14.0.0-canary.a986df922.0":"2021-10-29T21:35:57.735Z","14.0.0-canary.c3cdff07b.0":"2021-11-09T19:06:53.255Z","14.0.0-canary.468392606.0":"2021-11-11T19:40:55.024Z","14.0.0-canary.828f9803b.0":"2021-11-11T19:51:38.089Z","14.0.0-canary.8795cba87.0":"2021-11-11T19:57:34.884Z","14.0.0-canary.cd7f8cace.0":"2021-11-11T19:59:20.171Z","14.0.0-canary.207230eb8.0":"2021-11-11T22:25:31.708Z","14.0.0-canary.991fb99f7.0":"2021-11-11T22:37:15.974Z","14.0.0-canary.15db4f164.0":"2021-11-12T17:30:33.621Z","14.0.0-canary.8fcad5a3c.0":"2021-11-12T19:14:46.896Z","14.0.0-canary.f81fb1d23.0":"2021-11-12T22:41:09.286Z","14.0.0-canary.783f6fd5a.0":"2021-11-16T05:51:06.794Z","14.0.0-canary.d57ec74c7.0":"2021-11-16T16:17:55.242Z","14.0.0-canary.554c71829.0":"2021-11-16T16:20:32.187Z","14.0.0-canary.3ef470efe.0":"2021-11-16T16:25:21.499Z","14.0.0-canary.61a28b2b5.0":"2021-11-17T19:00:28.974Z","14.0.0-canary.fae6c652d.0":"2021-11-18T16:26:07.044Z","14.0.0-canary.978a3b5bb.0":"2021-11-19T19:40:29.212Z","14.0.0-canary.e6f43cf44.0":"2021-11-22T17:36:18.073Z","14.0.0-canary.39cf14bc3.0":"2021-11-22T23:05:43.501Z","14.0.0-canary.93134d453.0":"2021-11-23T15:40:33.808Z","14.0.0-canary.bbd11268f.0":"2021-11-23T22:33:29.098Z","14.0.0-canary.3db9c4d3d.0":"2021-11-24T15:38:34.333Z","14.0.0-canary.78305b6d5.0":"2021-11-24T19:51:51.792Z","14.0.0-canary.43d08ba77.0":"2021-11-30T22:57:16.438Z","14.0.0-canary.17a072535.0":"2021-12-02T18:06:27.661Z","14.0.0-canary.5d809696c.0":"2021-12-08T17:45:36.440Z","14.0.0-canary.b6510c8c1.0":"2021-12-08T18:07:48.196Z","14.0.0-canary.f460e23da.0":"2021-12-10T15:26:38.575Z","14.0.0-canary.7d8ea4624.0":"2021-12-10T19:30:36.334Z","14.0.0-canary.8fffcb5dd.0":"2021-12-14T08:56:22.906Z","14.0.0-canary.21e1cb9be.0":"2021-12-14T19:41:00.505Z","14.0.0-canary.ba78e8724.0":"2021-12-15T22:14:12.411Z","14.0.0-canary.e3e073c00.0":"2021-12-20T21:10:53.004Z","14.0.0-canary.3366a71d7.0":"2021-12-22T12:33:48.068Z","14.0.0-canary.c047f7c19.0":"2022-01-05T16:47:09.580Z","14.0.0-canary.05db65ec0.0":"2022-01-06T17:15:26.126Z","14.0.0-canary.6ca8b8f85.0":"2022-01-07T16:02:46.146Z","14.0.0-canary.173ee7a7a.0":"2022-01-10T16:55:31.576Z","14.0.0-canary.b704e4dfc.0":"2022-01-10T18:34:13.538Z","14.0.0-canary.c14e977ee.0":"2022-01-11T15:50:50.766Z","14.0.0-canary.b094eaa4e.0":"2022-01-14T18:43:36.598Z","14.0.0-canary.390220e42.0":"2022-01-17T16:47:22.660Z","14.0.0-canary.4b5391f8b.0":"2022-01-19T23:53:57.880Z","14.0.0-canary.cef6bc623.0":"2022-01-20T00:18:47.715Z","14.0.0-canary.0379179c4.0":"2022-01-20T18:55:35.661Z","14.0.0-canary.e62f3dabf.0":"2022-01-21T23:04:38.463Z","14.0.0-canary.3e20c1de8.0":"2022-01-25T15:33:10.561Z","14.0.0-canary.9f9d928b2.0":"2022-01-27T18:14:24.582Z","14.0.0-canary.a2bcb065c.0":"2022-01-28T19:38:20.495Z","14.0.0-canary.4e66fb2e1.0":"2022-01-28T19:42:40.365Z","14.0.0-canary.9736ddce9.0":"2022-01-29T09:51:01.057Z","14.0.0-canary.cc4ed13cc.0":"2022-02-04T18:24:03.505Z","14.0.0-canary.dcba26fe1.0":"2022-02-04T21:58:24.858Z","14.0.0-canary.ec54d9046.0":"2022-02-07T15:47:56.184Z","14.0.0-canary.ea9b5b463.0":"2022-02-09T17:54:53.804Z","14.0.0-canary.96ea061c1.0":"2022-02-09T19:00:44.882Z","14.0.0-canary.e00181e59.0":"2022-02-10T20:07:45.418Z","14.0.0-canary.037285f9b.0":"2022-02-11T18:30:44.477Z","14.0.0-canary.1aaa68dda.0":"2022-02-16T19:50:13.565Z","14.0.0-canary.ab4aba1af.0":"2022-02-17T18:17:20.181Z","14.0.0-canary.e58552c6e.0":"2022-02-18T18:05:06.555Z","14.0.0-canary.868793776.0":"2022-02-22T19:36:58.742Z","14.0.0-canary.fdc37a445.0":"2022-02-28T18:47:06.099Z","14.0.0-canary.43c7d87dc.0":"2022-03-01T15:34:08.717Z","14.0.0-canary.23043acd0.0":"2022-03-02T20:28:20.790Z","14.0.0-canary.6505e61c5.0":"2022-03-03T20:01:42.862Z","14.0.0-canary.16c166154.0":"2022-03-08T23:23:17.189Z","14.0.0-canary.bdf1d3771.0":"2022-03-14T14:29:32.051Z","14.0.0-canary.cf4292778.0":"2022-03-15T00:30:33.209Z","14.0.0-canary.bbd43e0e0.0":"2022-03-16T20:50:59.064Z","14.0.0-canary.1b6afad86.0":"2022-03-16T21:04:31.423Z","14.0.0-canary.bdf9d4af9.0":"2022-03-16T21:18:47.700Z","14.0.0-canary.32b391398.0":"2022-03-17T18:00:10.736Z","14.0.0-canary.ae8a6a3a3.0":"2022-03-18T16:40:11.201Z","14.0.0-canary.cbd9358a6.0":"2022-03-18T22:53:01.965Z","14.0.0-canary.dcfe49c98.0":"2022-03-21T18:45:02.285Z","14.0.0-canary.f31a833fa.0":"2022-03-23T00:51:42.253Z","14.0.0-canary.4b92e210a.0":"2022-03-24T20:19:28.854Z","14.0.0-canary.a657abb61.0":"2022-03-24T20:40:54.104Z","14.0.0-canary.443f63f50.0":"2022-03-25T23:05:31.161Z","14.0.0-canary.eb382f318.0":"2022-03-29T17:35:53.956Z","14.0.0-canary.344d52823.0":"2022-03-29T18:44:14.476Z","14.0.0-canary.4e372fb49.0":"2022-04-07T20:33:54.188Z","14.0.0-canary.3e30054fb.0":"2022-04-13T22:15:12.739Z","14.0.0-canary.8c4da223a.0":"2022-04-19T15:25:10.182Z","14.0.0-canary.7de8965cc.0":"2022-04-19T20:24:18.115Z","14.0.0-canary.641ed0851.0":"2022-04-20T16:06:41.864Z","14.0.0-canary.e88f83024.0":"2022-04-20T17:48:42.812Z","14.0.0-canary.7321d6254.0":"2022-04-20T20:12:17.190Z","14.0.0-canary.3ab956515.0":"2022-04-25T15:02:52.364Z","14.0.0-canary.53b3cad2f.0":"2022-04-27T12:46:17.944Z","14.0.0":"2022-04-28T16:56:57.545Z","15.0.0-canary.432c815e5.0":"2022-04-28T16:58:01.139Z","15.0.0-canary.a0f01f669.0":"2022-05-06T20:15:39.543Z","15.0.0-canary.276cb39a4.0":"2022-05-06T21:32:29.844Z","15.0.0-canary.4fe98ed70.0":"2022-05-06T21:57:00.328Z","15.0.0-canary.58b130a3d.0":"2022-05-06T21:59:19.181Z","15.0.0-canary.ae278a2fe.0":"2022-05-09T15:26:10.110Z","15.0.0-canary.bebf5bfdf.0":"2022-05-11T02:41:20.586Z","15.0.0-canary.e6072cd6a.0":"2022-05-11T20:19:26.260Z","15.0.0-canary.5b40eb988.0":"2022-05-12T02:45:15.449Z","15.0.0-canary.6a61d62f6.0":"2022-05-12T20:27:54.344Z","15.0.0-canary.05930a453.0":"2022-05-13T18:48:28.575Z","15.0.0-canary.c0a11ef0d.0":"2022-05-18T22:01:59.532Z","15.0.0-canary.2f9b268c0.0":"2022-05-20T19:33:40.942Z","15.0.0-canary.7741345b8.0":"2022-05-20T20:03:44.916Z","15.0.0-canary.f807e793f.0":"2022-05-20T22:22:57.499Z","15.0.0-canary.9f53d4a8a.0":"2022-05-23T14:58:49.485Z","15.0.0-canary.77cf00e37.0":"2022-05-31T17:41:10.290Z","15.0.0-canary.3c7b844c2.0":"2022-06-07T22:22:17.647Z","15.0.0-canary.df47894db.0":"2022-06-13T17:09:41.506Z","15.0.0-canary.b18a873dc.0":"2022-06-14T06:30:56.043Z","15.0.0-canary.ba9c29637.0":"2022-06-14T18:58:28.610Z","15.0.0-canary.9bfd12f01.0":"2022-06-22T19:23:38.442Z","15.0.0-canary.764de225d.0":"2022-06-29T16:28:08.875Z","15.0.0-canary.31e517cea.0":"2022-07-01T18:29:28.837Z","15.0.0-canary.9ea4e8e9c.0":"2022-07-01T22:55:59.678Z","15.0.0-canary.cd5bafabb.0":"2022-07-06T17:55:32.349Z","15.0.0-canary.a02fe49d3.0":"2022-07-06T18:52:11.610Z","15.0.0-canary.826a3d8be.0":"2022-07-06T19:32:07.032Z","15.0.0-canary.ef276aa93.0":"2022-07-07T17:03:50.417Z","15.0.0-canary.59cf61d6b.0":"2022-07-07T17:32:33.439Z","15.0.0-canary.8647092f7.0":"2022-07-07T20:39:45.083Z","15.0.0-canary.02ecd4d85.0":"2022-07-11T16:40:23.116Z","15.0.0-canary.63d3a146e.0":"2022-07-12T11:38:07.781Z","15.0.0-canary.88db01990.0":"2022-07-12T11:41:10.744Z","15.0.0-canary.6432d8fd7.0":"2022-07-14T07:30:02.988Z","15.0.0-canary.085f9b25c.0":"2022-07-14T16:36:04.129Z","15.0.0-canary.39f9424b3.0":"2022-07-14T17:06:26.317Z","15.0.0-canary.ae9fce587.0":"2022-07-14T18:09:17.388Z","15.0.0-canary.1ebddc343.0":"2022-07-15T08:50:30.573Z","15.0.0-canary.c5018840c.0":"2022-07-18T09:44:20.536Z","15.0.0-canary.551b40d18.0":"2022-07-18T10:02:21.129Z","15.0.0-canary.cf9f12371.0":"2022-07-18T10:06:18.188Z","15.0.0-canary.2797ff8b6.0":"2022-07-19T00:25:23.025Z","15.0.0-canary.110fafa17.0":"2022-07-20T07:47:51.025Z","15.0.0-canary.386ef1d2f.0":"2022-07-20T18:21:13.816Z","15.0.0-canary.c3924efef.0":"2022-07-20T18:30:53.480Z","15.0.0-canary.cf5c5907c.0":"2022-07-20T21:22:58.494Z","15.0.0-canary.0617e2319.0":"2022-07-20T21:41:19.229Z","15.0.0-canary.a743b7967.0":"2022-07-20T21:58:15.188Z","15.0.0-canary.69fd619d0.0":"2022-07-20T22:10:24.599Z","15.0.0-canary.2a6ddc1cf.0":"2022-07-29T16:05:51.310Z","15.0.0-canary.86efd56f6.0":"2022-08-02T14:46:54.468Z","15.0.0-canary.ccfc24d19.0":"2022-08-03T18:14:42.498Z","15.0.0-canary.e4570146f.0":"2022-08-03T18:41:52.897Z","15.0.0-canary.6683a36cb.0":"2022-08-03T19:22:02.603Z","15.0.0-canary.10196647d.0":"2022-08-03T21:54:49.489Z","15.0.0-canary.b20d3d73c.0":"2022-08-04T22:44:03.818Z","15.0.0-canary.47c0c6b1e.0":"2022-08-09T15:21:50.458Z","15.0.0-canary.0e3dc8e38.0":"2022-08-11T18:47:03.415Z","15.0.0-canary.d5a11f1c8.0":"2022-08-30T23:02:26.336Z","15.0.0-canary.bac992a95.0":"2022-09-01T07:06:55.392Z","15.0.0-canary.d25f3404c.0":"2022-09-01T09:46:21.891Z","15.0.0-canary.920d8a79e.0":"2022-09-01T20:22:08.853Z","15.0.0-canary.c363f267b.0":"2022-09-01T21:19:25.654Z","15.0.0-canary.a4eb4937a.0":"2022-09-06T18:20:53.553Z","15.0.0-canary.4299717da.0":"2022-09-07T16:16:48.884Z","15.0.0-canary.fa7d8d44b.0":"2022-09-07T19:20:06.469Z","15.0.0-canary.a40e3c768.0":"2022-09-09T20:05:03.361Z","15.0.0-canary.18cdc9a00.0":"2022-09-12T21:04:08.087Z","15.0.0-canary.7ab3cd3c8.0":"2022-09-13T22:40:19.833Z","15.0.0-canary.2860d244d.0":"2022-09-16T22:55:58.258Z","15.0.0-canary.e8726533c.0":"2022-09-20T20:18:47.974Z","15.0.0-canary.00d8de0aa.0":"2022-09-21T15:21:38.203Z","15.0.0-canary.271aedc30.0":"2022-09-21T15:37:10.977Z","15.0.0-canary.d3344c16f.0":"2022-09-22T09:25:32.080Z","15.0.0-canary.94f20ccb8.0":"2022-09-22T20:48:52.333Z","15.0.0-canary.81e4cb7b2.0":"2022-09-23T15:09:14.892Z","15.0.0-canary.aa85f9413.0":"2022-09-26T17:57:28.117Z","15.0.0-canary.7134a7752.0":"2022-09-26T21:58:45.547Z","15.0.0-canary.70b8ac16e.0":"2022-09-27T22:45:58.280Z","15.0.0-canary.c20d74405.0":"2022-09-27T23:32:18.919Z","15.0.0-canary.f033fc8d1.0":"2022-09-27T23:58:22.515Z","15.0.0-canary.8d7ae912a.0":"2022-09-28T07:57:10.545Z","15.0.0-canary.db414b864.0":"2022-09-28T14:53:50.305Z","15.0.0-canary.28cc6791f.0":"2022-09-28T18:08:09.192Z","15.0.0-canary.a515a2d18.0":"2022-09-28T18:56:54.893Z","15.0.0-canary.ce9523167.0":"2022-09-29T20:32:16.300Z","15.0.0-canary.b2310f7dc.0":"2022-09-30T00:14:53.556Z","15.0.0-canary.a44241e54.0":"2022-09-30T08:22:10.109Z","15.0.0-canary.0ce81e115.0":"2022-09-30T18:19:16.136Z","15.0.0-canary.3cc30f6ad.0":"2022-10-04T17:20:32.134Z","15.0.0-canary.d9cf98e60.0":"2022-10-04T19:04:50.811Z","15.0.0-canary.d71935c8b.0":"2022-10-06T08:15:58.336Z","15.0.0-canary.49c56a25d.0":"2022-10-06T18:51:58.923Z","15.0.0-canary.07acddef3.0":"2022-10-07T21:39:24.764Z","15.0.0-canary.1c74eb2c0.0":"2022-10-07T21:56:27.051Z","15.0.0-canary.dadfb713e.0":"2022-10-08T05:07:33.799Z","15.0.0-canary.395f1ce61.0":"2022-10-08T05:09:28.508Z","15.0.0-canary.e741b5c82.0":"2022-10-10T17:40:06.568Z","15.0.0-canary.582f3cc1c.0":"2022-10-11T04:50:53.515Z","15.0.0-canary.b1a6e3e88.0":"2022-10-12T12:04:09.895Z","15.0.0-canary.c9b1a31e4.0":"2022-10-12T17:00:19.972Z","15.0.0-canary.13e9b0d1f.0":"2022-10-12T19:23:01.098Z","15.0.0-canary.1dc797e7f.0":"2022-10-14T09:43:38.382Z","15.0.0-canary.ed4009397.0":"2022-10-14T16:52:59.753Z","15.0.0-canary.95ef196bc.0":"2022-10-14T23:15:39.920Z","15.0.0-canary.13eea1b2d.0":"2022-10-17T03:53:18.390Z","15.0.0-canary.ef9b2babb.0":"2022-10-17T09:19:53.418Z","15.0.0-canary.cec7fb987.0":"2022-10-17T10:58:02.189Z","15.0.0-canary.4fff58b08.0":"2022-10-17T15:24:28.356Z","15.0.0-canary.587d8f871.0":"2022-10-17T15:58:45.605Z","15.0.0-canary.edf4b98d0.0":"2022-10-17T16:42:13.670Z","15.0.0-canary.024ac5f16.0":"2022-10-17T22:44:04.829Z","15.0.0-canary.c8bdf6144.0":"2022-10-18T18:25:08.078Z","15.0.0-canary.bacda4885.0":"2022-10-18T18:44:30.257Z","15.0.0-canary.92b2556cf.0":"2022-10-19T01:15:05.599Z","15.0.0-canary.cc804509a.0":"2022-10-19T01:18:50.939Z","15.0.0-canary.982bedae9.0":"2022-10-19T01:38:55.817Z","15.0.0-canary.ee40081f4.0":"2022-10-19T20:13:36.640Z","15.0.0-canary.98f1b54e2.0":"2022-10-20T22:58:26.018Z","15.0.0-canary.e74b7ba7e.0":"2022-10-21T17:07:29.926Z","15.0.0-canary.ab55c07d2.0":"2022-10-22T18:20:49.746Z","15.0.0-canary.fc539db34.0":"2022-10-24T19:00:54.878Z","15.0.0-canary.e340b04c5.0":"2022-10-25T23:46:45.636Z","15.0.0-canary.2c1a8f8fd.0":"2022-10-26T17:32:24.154Z","15.0.0-canary.ecfee946f.0":"2022-10-26T20:17:06.883Z","15.0.0-canary.73ca9dbb0.0":"2022-10-31T17:34:11.989Z","15.0.0-canary.357f2e5f1.0":"2022-10-31T18:51:24.191Z","15.0.0-canary.eb103d4b5.0":"2022-10-31T19:58:18.512Z","15.0.0-canary.af5f01223.0":"2022-11-01T18:38:35.398Z","15.0.0-canary.58733ef41.0":"2022-11-02T18:12:29.376Z","15.0.0-canary.909b48215.0":"2022-11-03T04:09:43.227Z","15.0.0-canary.7f17127d5.0":"2022-11-03T18:20:57.952Z","15.0.0-canary.da95e2a05.0":"2022-11-04T17:00:49.139Z","15.0.0-canary.4832e2750.0":"2022-11-04T20:58:49.373Z","15.0.0-canary.215506426.0":"2022-11-05T01:07:46.764Z","15.0.0-canary.4cf917476.0":"2022-11-05T18:05:54.830Z","15.0.0-canary.eef14bd32.0":"2022-11-06T17:26:16.475Z","15.0.0-canary.6faa29fe9.0":"2022-11-07T03:15:06.591Z","15.0.0-canary.9af09b967.0":"2022-11-07T18:29:38.746Z","15.0.0-canary.0f54fbb93.0":"2022-11-08T21:58:16.621Z","15.0.0-canary.a8d47f9fe.0":"2022-11-09T04:19:57.164Z","15.0.0-canary.66a1e75e6.0":"2022-11-09T09:37:17.105Z","15.0.0-canary.5e5c2afc0.0":"2022-11-09T11:55:00.060Z","15.0.0-canary.3e3f43359.0":"2022-11-09T20:04:37.121Z","15.0.0-canary.3f667fac6.0":"2022-11-09T22:08:06.334Z","15.0.0-canary.faa28c1c5.0":"2022-11-11T16:37:41.761Z","15.0.0-canary.a868c7866.0":"2022-11-11T16:38:23.377Z","15.0.0-canary.602fe8efa.0":"2022-11-11T17:13:38.475Z","15.0.0-canary.558c2be62.0":"2022-11-11T22:46:59.080Z","15.0.0-canary.b5c13a7a8.0":"2022-11-14T16:00:24.270Z","15.0.0-canary.a6e1c0702.0":"2022-11-14T17:28:50.347Z","15.0.0-canary.b6f8a06de.0":"2022-11-15T09:30:13.479Z","15.0.0-canary.0163f3ba5.0":"2022-11-15T18:03:59.824Z","15.0.0-canary.66c5cbb94.0":"2022-11-15T19:31:59.170Z","15.0.0-canary.b01136063.0":"2022-11-16T00:17:47.211Z","15.0.0-canary.01da0cabb.0":"2022-11-16T09:15:09.388Z","15.0.0-canary.4ac393164.0":"2022-11-16T16:17:32.651Z","15.0.0-canary.6048fb563.0":"2022-11-16T16:19:44.737Z","15.0.0-canary.f7f56fff7.0":"2022-11-16T19:57:52.117Z","15.0.0-canary.7c73f6134.0":"2022-11-16T20:01:31.206Z","15.0.0-canary.f1e037150.0":"2022-11-16T20:07:19.722Z","15.0.0-canary.40b18d043.0":"2022-11-16T23:00:38.770Z","15.0.0-canary.86bde5c06.0":"2022-11-16T23:10:44.458Z","15.0.0-canary.bb7751002.0":"2022-11-17T00:01:58.977Z","15.0.0-canary.63aca9af6.0":"2022-11-17T19:02:46.349Z","15.0.0-canary.56482dc2e.0":"2022-11-17T21:56:29.731Z","15.0.0-canary.953e689f3.0":"2022-11-17T22:06:34.604Z","15.0.0-canary.b5606a793.0":"2022-11-18T10:22:57.111Z","15.0.0-canary.8c5675942.0":"2022-11-18T15:18:14.770Z","15.0.0-canary.697fbdebd.0":"2022-11-18T17:02:57.851Z","15.0.0-canary.d58410453.0":"2022-11-18T19:26:59.845Z","15.0.0-canary.7971d6ad5.0":"2022-11-19T08:46:58.968Z","15.0.0-canary.a0ae73b0e.0":"2022-11-21T10:55:53.501Z","15.0.0-canary.96f472604.0":"2022-11-21T12:54:43.711Z","15.0.0-canary.912f33ce4.0":"2022-11-21T17:55:57.535Z","15.0.0-canary.1e1b1c369.0":"2022-11-23T19:02:42.836Z","15.0.0-canary.a2ec49244.0":"2022-11-23T19:32:48.492Z","15.0.0-canary.a7458ba0b.0":"2022-11-23T20:18:34.241Z","15.0.0-canary.7c35e5036.0":"2022-11-24T08:41:24.254Z","15.0.0-canary.4356e05c5.0":"2022-11-24T09:58:42.723Z","15.0.0-canary.cb605f8af.0":"2022-11-24T10:18:04.102Z","15.0.0-canary.05fb07f9f.0":"2022-11-24T17:15:39.628Z","15.0.0-canary.a911b386b.0":"2022-11-28T16:49:17.852Z","15.0.0-canary.2aa8050b4.0":"2022-11-28T19:13:39.416Z","15.0.0-canary.323904a9f.0":"2022-11-29T15:35:19.444Z","15.0.0-canary.168a629a4.0":"2022-11-29T16:50:27.490Z","15.0.0-canary.65c411674.0":"2022-11-29T17:40:43.441Z","15.0.0-canary.a86d36fd2.0":"2022-11-30T02:16:10.087Z","15.0.0-canary.3a1f46c66.0":"2022-11-30T12:09:48.031Z","15.0.0-canary.32d8a9648.0":"2022-12-01T17:31:16.005Z","15.0.0-canary.03618ab70.0":"2022-12-01T20:56:23.421Z","15.0.0-canary.68aaed940.0":"2022-12-01T21:26:11.040Z","15.0.0-canary.f0a0bbc75.0":"2022-12-02T09:03:11.978Z","15.0.0-canary.dd99c8764.0":"2022-12-02T14:02:57.263Z","15.0.0-canary.fabdcca3a.0":"2022-12-02T15:08:53.718Z","15.0.0-canary.2d26722d2.0":"2022-12-02T16:28:37.016Z","15.0.0-canary.eaa0c3a86.0":"2022-12-02T17:44:48.125Z","15.0.0-canary.79a613bbd.0":"2022-12-06T14:27:10.895Z","15.0.0-canary.c871fe61e.0":"2022-12-07T07:53:48.696Z","15.0.0-canary.9eaee7936.0":"2022-12-07T20:05:30.763Z","15.0.0-canary.1d37bf601.0":"2022-12-07T20:43:17.929Z","15.0.0-canary.a5fe069d5.0":"2022-12-09T18:46:28.105Z","15.0.0-canary.ce8b5326f.0":"2022-12-09T23:32:45.359Z","15.0.0-canary.43f5323bc.0":"2022-12-12T16:47:46.469Z","15.0.0-canary.5490e32e7.0":"2022-12-12T17:04:17.614Z","15.0.0-canary.817002c29.0":"2022-12-13T21:56:11.123Z","15.0.0-canary.313a1326a.0":"2022-12-14T10:30:58.706Z","15.0.0-canary.a69c14e10.0":"2022-12-14T11:20:34.395Z","15.0.0-canary.f43e0ceb5.0":"2022-12-14T16:46:54.580Z","15.0.0-canary.34767110.0":"2022-12-14T17:22:32.113Z","15.0.0-canary.1f99f3c50.0":"2022-12-15T14:27:37.562Z","15.0.0-canary.cfd69490f.0":"2022-12-16T20:10:37.427Z","15.0.0-canary.94ad8d986.0":"2022-12-19T19:29:15.154Z","15.0.0-canary.604264203.0":"2022-12-21T21:42:44.799Z","15.0.0-canary.85bcff6af.0":"2022-12-22T10:27:24.496Z","15.0.0-canary.ece3e8d21.0":"2022-12-22T17:14:14.259Z","15.0.0-canary.278ad53d1.0":"2022-12-27T17:07:16.882Z","15.0.0-canary.a7d8389e1.0":"2022-12-27T19:06:03.595Z","15.0.0-canary.8175d5eff.0":"2022-12-28T01:53:38.349Z","15.0.0-canary.e21dcb86d.0":"2022-12-29T14:04:19.918Z","15.0.0-canary.20ab6f5a8.0":"2022-12-29T19:42:58.399Z","15.0.0-canary.b9806f623.0":"2022-12-29T23:07:56.116Z","15.0.0-canary.50c9f550e.0":"2023-01-03T15:49:43.557Z","15.0.0-canary.af490a848.0":"2023-01-03T16:00:08.520Z","15.0.0-canary.7cf487c98.0":"2023-01-03T17:40:57.218Z","15.0.0-canary.a52be2d5e.0":"2023-01-03T19:15:13.445Z","15.0.0-canary.e38ba17c5.0":"2023-01-03T22:34:31.406Z","15.0.0-canary.49041a6c3.0":"2023-01-04T15:19:50.802Z","15.0.0-canary.d7a2277de.0":"2023-01-04T21:37:49.674Z","15.0.0-canary.fd95ca7ef.0":"2023-01-05T01:04:49.245Z","15.0.0-canary.1eb44faf9.0":"2023-01-05T09:11:27.007Z","15.0.0-canary.adcdb7db9.0":"2023-01-05T16:24:01.781Z","15.0.0-canary.067af7eff.0":"2023-01-06T23:18:00.494Z","15.0.0-canary.21d1196a7.0":"2023-01-09T10:45:20.867Z","15.0.0-canary.8d2d8d3c4.0":"2023-01-09T22:26:05.956Z","15.0.0-canary.fc6ee6c32.0":"2023-01-10T16:30:20.610Z","15.0.0-canary.73537ab0f.0":"2023-01-10T18:13:40.890Z","15.0.0-canary.684e33d25.0":"2023-01-10T19:20:37.453Z","15.0.0-canary.0e89aab6b.0":"2023-01-11T16:20:14.909Z","15.0.0-canary.b0103d10a.0":"2023-01-11T19:14:52.553Z","15.0.0-canary.50e7a5312.0":"2023-01-11T20:56:15.062Z","15.0.0-canary.202823f54.0":"2023-01-11T21:37:48.992Z","15.0.0-canary.199fe2a2a.0":"2023-01-11T21:57:57.573Z","15.0.0-canary.8c0786d6f.0":"2023-01-12T14:38:36.408Z","15.0.0-canary.8a74f7c6d.0":"2023-01-17T19:26:55.288Z","15.0.0-canary.b4687fdc1.0":"2023-01-19T19:51:45.163Z","15.0.0-canary.b836b9892.0":"2023-01-24T22:41:11.511Z","15.0.0-canary.e8912fd37.0":"2023-01-26T18:31:51.548Z","15.0.0-canary.16fbd30ff.0":"2023-01-26T18:36:58.246Z","15.0.0-canary.033ae083a.0":"2023-01-26T19:29:02.304Z","15.0.0-canary.3a705fa1d.0":"2023-01-27T22:45:28.811Z","15.0.0-canary.d6bea2ff2.0":"2023-01-31T15:32:10.941Z","15.0.0-canary.0c94182c8.0":"2023-02-01T17:46:24.036Z","15.0.0-canary.15b221540.0":"2023-02-01T17:54:46.170Z","15.0.0-canary.6a4b3f834.0":"2023-02-01T19:00:37.018Z","15.0.0-canary.b177b40e2.0":"2023-02-02T03:36:24.868Z","15.0.0-canary.d9f821042.0":"2023-02-02T17:40:27.630Z","15.0.0-canary.47c7deb19.0":"2023-02-03T09:11:02.385Z","15.0.0-canary.a16dbd1a6.0":"2023-02-04T06:16:33.266Z","15.0.0-canary.93416f87a.0":"2023-02-07T13:26:17.353Z","15.0.0-canary.49b8e7442.0":"2023-02-07T23:11:34.939Z","15.0.0-canary.de38de758.0":"2023-02-09T15:44:29.196Z","15.0.0-canary.4d62de70c.0":"2023-02-09T22:05:22.401Z","15.0.0-canary.6fcd8d418.0":"2023-02-13T11:51:51.715Z","15.0.0-canary.066d9439b.0":"2023-02-15T20:00:18.754Z","15.0.0-canary.7ab32468c.0":"2023-02-21T18:36:20.177Z","15.0.0-canary.fa27ba61d.0":"2023-02-27T16:22:07.461Z","15.0.0-canary.311ab4d4a.0":"2023-02-27T16:43:34.528Z","15.0.0-canary.5cb8e2174.0":"2023-03-01T16:37:50.927Z","15.0.0-canary.f32339937.0":"2023-03-06T15:17:48.048Z","15.0.0-canary.7644d63d5.0":"2023-03-06T22:29:28.884Z","15.0.0-canary.d96330c08.0":"2023-03-08T11:43:49.937Z","15.0.0-canary.c99cae77c.0":"2023-03-08T23:44:52.091Z","15.0.0-canary.6023b1cd3.0":"2023-03-09T14:28:18.949Z","15.0.0-canary.274610c77.0":"2023-03-09T15:00:56.425Z","15.0.0-canary.a274583b9.0":"2023-03-09T19:54:41.133Z","15.0.0-canary.304a94e8b.0":"2023-03-09T20:46:59.707Z","15.0.0-canary.6c265915c.0":"2023-03-09T21:49:19.864Z","15.0.0-canary.de5224633.0":"2023-03-09T23:57:45.971Z","15.0.0-canary.8879557e6.0":"2023-03-10T14:09:53.607Z","15.0.0-canary.23073a303.0":"2023-03-10T14:17:02.180Z","15.0.0-canary.51c7d4014.0":"2023-03-10T16:49:32.772Z","15.0.0-canary.1175a5be0.0":"2023-03-10T20:50:00.908Z","15.0.0-canary.7adf3af80.0":"2023-03-11T01:26:53.275Z","15.0.0-canary.82554d770.0":"2023-03-11T01:39:09.486Z","15.0.0-canary.93fc524b7.0":"2023-03-13T08:41:06.713Z","15.0.0-canary.50be0fbae.0":"2023-03-13T17:46:11.375Z","15.0.0-canary.6b5ffccd9.0":"2023-03-13T17:49:39.622Z","15.0.0-canary.1c8013f4e.0":"2023-03-13T18:04:59.215Z","15.0.0-canary.112715df5.0":"2023-03-13T18:41:20.788Z","15.0.0-canary.d250911f2.0":"2023-03-13T19:33:39.739Z","15.0.0-canary.7cd925c12.0":"2023-03-13T19:41:15.021Z","15.0.0-canary.b2ddacf73.0":"2023-03-13T19:45:23.069Z","15.0.0-canary.989ae2ecc.0":"2023-03-13T19:54:53.951Z","15.0.0-canary.89c66483a.0":"2023-03-13T20:18:22.926Z","15.0.0-canary.6a85742c2.0":"2023-03-14T02:49:19.251Z","15.0.0-canary.bb6cd78d5.0":"2023-03-14T18:18:54.996Z","15.0.0-canary.5f94aa37d.0":"2023-03-14T18:22:08.223Z","15.0.0-canary.1bd317240.0":"2023-03-14T18:26:05.530Z","15.0.0-canary.d441d2a2a.0":"2023-03-14T18:28:47.832Z","15.0.0-canary.fff4066c6.0":"2023-03-14T18:29:28.430Z","15.0.0-canary.87809c710.0":"2023-03-14T18:45:24.759Z","15.0.0-canary.48d30012d.0":"2023-03-14T18:49:44.202Z","15.0.0-canary.419b23cc6.0":"2023-03-14T19:00:49.175Z","15.0.0-canary.bf86521f4.0":"2023-03-14T23:15:38.832Z","15.0.0-canary.11f3d280e.0":"2023-03-15T00:13:15.487Z","15.0.0-canary.b281a409a.0":"2023-03-21T15:43:42.378Z","15.0.0-canary.39e473690.0":"2023-03-21T17:53:31.231Z","15.0.0-canary.cedffb44c.0":"2023-03-21T18:00:27.669Z","15.0.0-canary.36a4cba99.0":"2023-03-28T17:52:09.907Z","15.0.0-canary.ed7e82ded.0":"2023-03-28T20:36:53.370Z","15.0.0-canary.55093ee1e.0":"2023-03-29T18:50:59.091Z","15.0.0-canary.0c53abc81.0":"2023-04-07T01:42:59.756Z","15.0.0-canary.51311e69e.0":"2023-04-07T18:09:46.502Z","15.0.0-canary.113b1a38e.0":"2023-04-10T21:55:40.682Z","15.0.0-canary.ea2191426.0":"2023-04-11T21:57:38.189Z","15.0.0-canary.5a5c38538.0":"2023-04-11T22:32:12.837Z","15.0.0-canary.e4b5ea7eb.0":"2023-04-11T23:06:48.201Z","15.0.0-canary.a094dd9c1.0":"2023-04-14T22:44:24.453Z","15.0.0-canary.f771b091c.0":"2023-04-17T15:40:39.178Z","15.0.0-canary.79b1b612b.0":"2023-04-19T23:42:04.671Z","15.0.0-canary.6f50071e5.0":"2023-04-20T18:03:03.033Z","15.0.0-canary.ef754381c.0":"2023-04-24T20:52:51.925Z","15.0.0-canary.69ebf61ea.0":"2023-04-27T17:23:34.429Z","15.0.0-canary.b90be86de.0":"2023-04-29T00:23:36.151Z","15.0.0-canary.51f9c0c28.0":"2023-04-29T00:33:19.356Z","15.0.0-canary.4e840d685.0":"2023-05-02T15:35:48.570Z","15.0.0-canary.10b8563e4.0":"2023-05-02T23:43:43.648Z","15.0.0-canary.736b7fda4.0":"2023-05-03T15:11:33.807Z","15.0.0-canary.0e533c5a1.0":"2023-05-05T16:58:44.596Z","15.0.0-canary.5f01c15a2.0":"2023-05-05T17:28:18.464Z","15.0.0-canary.3b5b55e31.0":"2023-05-05T18:41:16.867Z","15.0.0-canary.d0788120f.0":"2023-05-09T08:25:16.882Z","15.0.0-canary.f52358dd0.0":"2023-05-12T14:32:26.835Z","15.0.0-canary.576d3d2c8.0":"2023-05-16T02:01:56.745Z","15.0.0-canary.19bb36a46.0":"2023-05-16T19:56:09.410Z","15.0.0-canary.aa5ac7fe5.0":"2023-05-22T17:27:55.128Z","15.0.0-canary.90291f2e2.0":"2023-05-23T17:45:02.990Z","15.0.0-canary.446734f27.0":"2023-05-30T21:50:07.724Z","15.0.0-canary.19de312d8.0":"2023-06-06T17:20:29.611Z","15.0.0-canary.6081d829b.0":"2023-06-07T01:16:00.504Z","15.0.0-canary.b26c34a68.0":"2023-06-07T20:20:32.541Z","15.0.0-canary.4fe911371.0":"2023-06-07T23:08:04.509Z","15.0.0-canary.a9ff9866f.0":"2023-06-13T11:40:12.679Z","15.0.0-canary.b994146f6.0":"2023-06-14T21:05:48.614Z","15.0.0-canary.1fb4b1a06.0":"2023-06-27T18:59:20.386Z","15.0.0-canary.c64a2776e.0":"2023-06-27T20:18:42.647Z","15.0.0-canary.b05d9eb7c.0":"2023-06-29T16:25:50.090Z","15.0.0-canary.2a9697dc5.0":"2023-06-30T22:15:49.946Z","15.0.0-canary.0c52adeab.0":"2023-07-05T16:27:57.992Z","15.0.0-canary.83355c322.0":"2023-07-10T15:07:53.892Z","15.0.0-canary.bc9ae6c9c.0":"2023-08-03T21:23:34.121Z","15.0.0-canary.3c44cd956.0":"2023-08-07T17:50:30.552Z","15.0.0-canary.02702296e.0":"2023-08-25T12:07:23.559Z","15.0.0-canary.872b65832.0":"2023-08-30T12:15:40.620Z","15.0.0-canary.89b2e4122.0":"2023-08-31T16:08:58.492Z","15.0.0-canary.7a3942e7a.0":"2023-08-31T18:41:47.477Z","15.0.0-canary.54feb3020.0":"2023-09-11T21:07:28.439Z","15.0.0-canary.6cda3ce8d.0":"2023-09-12T01:47:25.027Z","15.0.0-canary.205b20b36.0":"2023-09-13T17:21:11.060Z","15.0.0-canary.22bf82024.0":"2023-09-18T09:13:58.227Z","15.0.0-canary.a246a4439.0":"2023-09-18T17:48:22.713Z","15.0.0-canary.d153db62b.0":"2023-09-19T19:17:31.354Z","15.0.0-canary.2528c1c3b.0":"2023-09-20T18:09:00.385Z","15.0.0-canary.1728a6dcf.0":"2023-09-26T01:25:15.005Z","15.0.0-canary.ebb636f3d.0":"2023-09-29T19:46:17.184Z","15.0.0-canary.c0d21ecc9.0":"2023-10-09T19:38:42.767Z","15.0.0-canary.127a44b28.0":"2023-10-12T20:02:37.760Z","15.0.0-canary.0ad128337.0":"2023-10-19T18:54:15.855Z","15.0.0-canary.9cec94097.0":"2023-10-19T23:11:31.948Z","15.0.0-canary.c51a0bbcc.0":"2023-11-15T20:59:31.440Z","15.0.0-canary.d76666ad4.0":"2023-11-27T22:13:56.383Z","15.0.0-canary.8656bf0e0.0":"2023-12-12T21:19:35.735Z","15.0.0-canary.7f224ddd4.0":"2023-12-28T06:09:55.599Z","15.0.0-canary.a0b8a90c0.0":"2024-02-07T19:20:21.963Z","15.0.0-canary.e50b478eb.0":"2024-02-08T18:09:04.073Z","15.0.0-canary.c43b3438b.0":"2024-02-23T20:18:28.816Z","15.0.0-canary.819498d8c.0":"2024-03-15T15:16:00.111Z","15.0.0-canary.453a6248a.0":"2024-03-25T17:14:27.125Z","15.0.0-canary.68edc03c6.0":"2024-04-08T19:07:31.938Z","15.0.0-canary.5bebc0064.0":"2024-04-11T21:42:27.129Z","15.0.0-canary.311f29a60.0":"2024-04-23T18:01:26.173Z","15.0.0-canary.65c10a622.0":"2024-04-25T18:49:53.157Z","15.0.0-canary.4b35cb7d0.0":"2024-05-02T12:03:58.504Z","15.0.0-canary.f80ac92b0.0":"2024-05-02T12:14:05.245Z","15.0.0-canary.2f5b899bc.0":"2024-05-20T13:57:44.411Z","15.0.0-canary.cfec83c74.0":"2024-05-20T18:57:49.687Z","15.0.0-canary.423edc3dc.0":"2024-06-26T18:12:26.949Z"},"maintainers":[{"name":"yefim","email":"hi@yef.im"},{"name":"abhiomkar","email":"abhiomkar@gmail.com"},{"name":"azakus","email":"dfreedm2@gmail.com"},{"name":"bicknellr","email":"bicknellr@gmail.com"},{"name":"material-admin","email":"aprigogin+npm@google.com"},{"name":"aprigogin","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-tab-scroller"},"keywords":["material components","material design","tab","scroller"],"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":""}